Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

ホームページ制作に役立つ情報を東京・池袋のWebクリエイターが配信!
  1. ホーム > 
  2. WordPress > 
  3. 【コピペで使えるWordPress!】カラーピッカーでタグの文字色と背景色を選択できるようにする
wplogo

【コピペで使えるWordPress!】カラーピッカーでタグの文字色と背景色を選択できるようにする

  • 2014.06.16(Mon)
  • WordPress
  • ,
WordPressで、タグの背景と文字色をそれぞれ全部違う色にしたいという要望があって、しかもユーザーそれを選択したいということで作ったものを、忘れないうちにまとめておきます。
試行錯誤しながらなので、ソースがあんまり綺麗じゃないのはご愛嬌で;
これを追加すると、「投稿>タグ」のタグ登録画面で、下のイメージみたいに、カラーピッカーがでてきて、色を選択できるようになりますよ!

tagcolor

functions.php

まずはfunctions.phpに以下のものをコピペしてください。

<?php
/* list-detail tag custom */
function gs_add_extra_fields_for_edit_tag_form_fields( $term ) {
	$term_id   = $term->term_id;
	$term_name = ( !empty( $term->name ) ) ? $term->name : __("Name");
	$term_meta = get_option( "term_$term_id" );
	$term_meta['textcolor'] = ( !empty( $term_meta['textcolor'] ) ) ? $term_meta['textcolor'] : "#FFF";
	$term_meta['bgcolor']   = ( !empty( $term_meta['bgcolor'] ) ) ? $term_meta['bgcolor'] : "#666";
?>
<tr>
	<th><label for="textcolor"><?php _e( "Text Color" ); ?></label></th>
	<td><input type="text" name="term_meta[textcolor]" id="textcolor" class="regular-text colordata" value="<?php echo esc_attr( $term_meta['textcolor'] ); ?>" /></td>
</tr>
<tr>
	<th><label for="bgcolor"><?php _e( "Background Color" ); ?></label></th>
	<td><input type="text" name="term_meta[bgcolor]" id="bgcolor" class="regular-text colordata" value="<?php echo esc_attr( $term_meta['bgcolor'] ); ?>" /><br>
	<div id="picker" style="float :left;"></div>
	<div id="color-sample-bgcolor" style="float: left; margin-left: 20px; margin-top: 10px; padding: 10px; background-color: <?php echo esc_attr( $term_meta['bgcolor'] ); ?>; color: <?php echo esc_attr( $term_meta['textcolor'] ); ?>"><?php echo esc_html($term_name); ?></div></td>
</tr>
<?php
	// nonce
	echo '<input type="hidden" name="gs_add_extra_fields_for_tag" id="gs_add_extra_fields_for_tag" value="' . wp_create_nonce( plugin_basename(__FILE__) ) . '" />';
}

add_action( 'edit_tag_form_fields', 'gs_add_extra_fields_for_edit_tag_form_fields' );

/* list tag custom */
function gs_add_extra_fields_for_tag_add_form_fields( $term ) {
	$term_id   = $term->term_id;
	$term_name = ( !empty( $term->name ) ) ? $term->name : __("Name");
	$term_meta = get_option( "term_$term_id" );
	$term_meta['textcolor'] = ( !empty( $term_meta['textcolor'] ) ) ? $term_meta['textcolor'] : "#FFF";
	$term_meta['bgcolor']   = ( !empty( $term_meta['bgcolor'] ) ) ? $term_meta['bgcolor'] : "#666";
?>
<div class="form-field">
	<label for="textcolor"><?php _e( "Text Color" ); ?></label>
	<input type="text" name="term_meta[textcolor]" id="textcolor" class="regular-text colordata" value="<?php echo esc_attr( $term_meta['textcolor'] ); ?>" /><br>
	<label for="bgcolor"><?php _e( "Background Color" ); ?></label>
	<input type="text" name="term_meta[bgcolor]" id="bgcolor" class="regular-text colordata" value="<?php echo esc_attr( $term_meta['bgcolor'] ); ?>" /><br>
	<div id="picker" style="float :left;"></div>
	<div id="color-sample-bgcolor" style="float: left; margin-left: 20px; margin-top: 10px; padding: 10px; background-color: <?php echo esc_attr( $term_meta['bgcolor'] ); ?>; color: <?php echo esc_attr( $term_meta['textcolor'] ); ?>"><?php _e("Name"); ?></div>
</div>
<br style="clear: both;">
<?php
	// nonce
	echo '<input type="hidden" name="gs_add_extra_fields_for_tag" id="gs_add_extra_fields_for_tag" value="' . wp_create_nonce( plugin_basename(__FILE__) ) . '" />';
}
add_action( 'add_tag_form_fields', 'gs_add_extra_fields_for_tag_add_form_fields' );

/* color picker css */
function sample_load_color_picker_style() {
	wp_enqueue_style( 'farbtastic' );
}
add_action('admin_print_styles-edit-tags.php', 'sample_load_color_picker_style');

/* color picker script */
function my_admin_print_scripts() {
	wp_enqueue_script( 'farbtastic' );
}
add_action('admin_print_scripts-edit-tags.php', 'my_admin_print_scripts');

function my_admin_print_scriptshoge() {
?>
<script type="text/javascript">
/* <![CDATA[ */
(function($){

	function fntextcolor(color) {
		$('#textcolor').val(color);
		$('#color-sample-bgcolor').css({color: color});
	}
	function fnbgcolor(color) {
		$('#bgcolor').val(color);
		$('#color-sample-bgcolor').css({backgroundColor: color});
	}

	$(document).ready(function() {

		var f = $.farbtastic('#picker');

		$('#textcolor')
			.each( function () {
				f.linkTo( function(color){
					fntextcolor(color);
				});
			})
			.focus( function () {
				f.linkTo( function(color){
					fntextcolor(color);
				});
			});
		$('#bgcolor')
			.each( function () {
				f.linkTo( function(color){
					fnbgcolor(color);
				});
			})
			.focus( function () {
				f.linkTo( function(color){
					fnbgcolor(color);
				});
			});


		$('.colordata').keyup(function() {
			var _hex = $(this).val();
			var hex = _hex;
			if ( hex[0] != '#' )
				hex = '#' + hex;
			hex = hex.replace(/[^#a-fA-F0-9]+/, '');
			if ( hex != _hex )
				$(this).val(hex);
			if ( hex.length == 4 || hex.length == 7 )
				pickColor( hex );
		});
	});
})(jQuery);
/* ]]> */
</script>
<?php
}
add_action("admin_head-edit-tags.php", 'my_admin_print_scriptshoge');

/* save custom fields data */
function save_extra_tag_fileds( $term_id ) {
	// wp_verify_nonce
	if ( !wp_verify_nonce( $_POST['gs_add_extra_fields_for_tag'], plugin_basename(__FILE__) ))
		return $term_id;

	// Check capabilities
	if ( !current_user_can( 'manage_categories', $term_id ) )
		return $term_id;

	// Save data
	if ( isset( $_POST['term_meta'] ) ) {
		$term_meta = get_option( "tax_$term_id" );
		$term_keys = array_keys( $_POST['term_meta'] );
			foreach ( $term_keys as $key ) {
				if ( isset( $_POST['term_meta'][$key] ) ) {
					$term_meta[$key] = $_POST['term_meta'][$key];
				}
			}
		update_option( "term_$term_id", $term_meta );
	}
}
add_action ( 'created_term', 'save_extra_tag_fileds');
add_action ( 'edited_term', 'save_extra_tag_fileds');

?>

HTML側(index.phpやsingle.php)

function.phpで管理画面へカラーピッカーが使えるようになっているので、それを出力します。index.phpなりsingle.phpなど、出力したいところへ以下のコードを記述。

<?php
$cats = get_the_tags();
if ( $cats && ! is_wp_error( $cats ) ) : 
	foreach ( $cats as $cat ) { 
		$term_data = get_option('term_'.intval($cat->term_id));
		$term_bgcolor = ( empty( $term_data['bgcolor'] ) ) ? '#666' : $term_data['bgcolor'];
		$term_txcolor = ( empty( $term_data['textcolor'] ) ) ? '#fff' : $term_data['textcolor'];
		echo '<span href="'.get_term_link( $cat ).'" style="background-color: '.esc_attr($term_bgcolor).'; color: '.esc_attr($term_txcolor).';">'.$cat->name."</span> ";
	}
endif;
?>

完成すると、こんな感じになります。

tagcolor2

あとはご自由にCSS等で見た目を整えてくださいね。
マニアックな機能ですが、よかったら~


ページの先頭へ