テーマカスタマイザーでサイト名とサイト説明文の色を変えてみよう!

テーマカスタマイザーでサイト名とサイト説明文の色を変えてみたいと思います。
TwentyElevenのソースを参照して実装してみました。

Sponsored Link

【WordPress3.4の新機能】テーマカスタマイザーでサイト名とサイト説明文を変更する方法をまず実装してからカスタマイズしてください。

テーマカスタマイザーでサイト名とサイト説明文を変更する

実際に自分のテーマでも動くように、
必要な部分をチョイスして記述しています。
そのため、若干ソースに手を入れています。
※と言っても、関数名とか変える最小限のみの修正です。

header.phpを編集

header.php内のサイト名とサイト説明文にidを付与します。
テーマカスタマイザーで指定したカラーがhead内にCSSソースとして吐き出されるため、
id名を間違えたり、記載しなかったりすると動作しません。

<h1 id="site-title"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="site-description"><?php bloginfo('description'); ?></p>

function.phpを編集

function.phpに下記のソースを挿入します。

if ( ! function_exists( 'lovelog28_header_style' ) ) :
/**
 * ブログに表示されるヘッダー画像とテキストのスタイル
 *
 * @since Twenty Eleven 1.0
 */
function lovelog28_header_style() {
	$text_color = get_header_textcolor();

	// テキストのカスタムオプションが設定されていない場合、解放します。
	if ( $text_color == HEADER_TEXTCOLOR )
		return;
		
	// これに成功したら、カスタムスタイルがあります。実行しましょう。
	?>
	<style type="text/css">
	<?php
		// テキストを隠しますか?
		if ( 'blank' == $text_color ) :
	?>
		#site-title,
		#site-description {
			position: absolute !important;
			clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
			clip: rect(1px, 1px, 1px, 1px);
		}
	<?php
		// ユーザーがテキストにカスタムカラーを設定している場合、それを使用します。
		else :
	?>
		#site-title a,
		#site-description {
			color: #<?php echo $text_color; ?> !important;
		}
	<?php endif; ?>
	</style>
	<?php
}
endif; // lovelog28_header_style

if ( ! function_exists( 'lovelog28_admin_header_style' ) ) :


/**
 * 外観 > ヘッダー の管理画面で表示されるヘッダー画像のスタイル
 *
 * twentyeleven_setup() の add_custom_image_header() から参照されます。
 *
 * @since Twenty Eleven 1.0
 */
function lovelog28_admin_header_style() {
?>
	<style type="text/css">
	<?php
		// ユーザーがテキストにカスタムカラーを設定している場合、それを使用します。
		if ( get_header_textcolor() != HEADER_TEXTCOLOR ) :
	?>
		#site-title a,
		#site-description {
			color: #<?php echo get_header_textcolor(); ?>;
		}
	<?php endif; ?>
	</style>
<?php
}
endif; // lovelog28_admin_header_style


/**
 * Bind JSハンドラーは、非同期的にテーマカスタマイザープレビューをリロード変更をします。
 * ブログ名とブログ説明文で使用されます。
 *
 * @since Twenty Eleven 1.3
 */
function lovelog28_customize_preview_js() {
	wp_enqueue_script( 'lovelog28-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120523', true );
}
add_action( 'customize_preview_init', 'lovelog28_customize_preview_js' );
&#91;/php&#93;

<p>lovelog28_header_style()はhead内に挿入するためのCSSを記載しています。
lovelog28_admin_header_style()は、管理画面の外観 > ヘッダーのページで表示するためのCSSを記載しています。</p>

<h3>テーマ内にjsファイルを作成する。</h3>
<p>下記のソースをtheme-customizer.jsというファイル名で保存して、themename/js/theme-customizer.jsで保存します。</p>
( function( $ ){
	wp.customize( 'blogname', function( value ) {
		value.bind( function( to ) {
			$( '#site-title a' ).html( to );
		} );
	} );
	wp.customize( 'blogdescription', function( value ) {
		value.bind( function( to ) {
			$( '#site-description' ).html( to );
		} );
	} );
} )( jQuery );

すると、function.phpに記載したlovelog28_customize_preview_js()で呼び出されるという仕組みです。
このJavascriptはテーマカスタマイザー時のiframe内に呼び出されます。

id名を変更したい場合は、ソースを全てチェックして変更する必要があります。

Sponsored Link