テーマカスタマイザーでサイト名とサイト説明文の色を変えてみたいと思います。
TwentyElevenのソースを参照して実装してみました。
※【WordPress3.4の新機能】テーマカスタマイザーでサイト名とサイト説明文を変更する方法をまず実装してからカスタマイズしてください。
実際に自分のテーマでも動くように、
必要な部分をチョイスして記述しています。
そのため、若干ソースに手を入れています。
※と言っても、関数名とか変える最小限のみの修正です。
header.phpを編集
header.php内のサイト名とサイト説明文にidを付与します。
テーマカスタマイザーで指定したカラーがhead内にCSSソースとして吐き出されるため、
id名を間違えたり、記載しなかったりすると動作しません。
[/php]
function.phpを編集
function.phpに下記のソースを挿入します。
[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;
// これに成功したら、カスタムスタイルがあります。実行しましょう。
?>
ヘッダー の管理画面で表示されるヘッダー画像のスタイル
*
* twentyeleven_setup() の add_custom_image_header() から参照されます。
*
* @since Twenty Eleven 1.0
*/
function lovelog28_admin_header_style() {
?>
lovelog28_header_style()はhead内に挿入するためのCSSを記載しています。
lovelog28_admin_header_style()は、管理画面の外観 > ヘッダーのページで表示するためのCSSを記載しています。
テーマ内にjsファイルを作成する。
下記のソースをtheme-customizer.jsというファイル名で保存して、themename/js/theme-customizer.jsで保存します。
[php]( 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 );[/php]
すると、function.phpに記載したlovelog28_customize_preview_js()で呼び出されるという仕組みです。
このJavascriptはテーマカスタマイザー時のiframe内に呼び出されます。
id名を変更したい場合は、ソースを全てチェックして変更する必要があります。
if ( $text_color == HEADER_TEXTCOLOR )
return;
?>
*
* twentyeleven_setup() の add_custom_image_header() から参照されます。
*
* @since Twenty Eleven 1.0
*/
function lovelog28_admin_header_style() {
?>
lovelog28_admin_header_style()は、管理画面の外観 > ヘッダーのページで表示するためのCSSを記載しています。
このJavascriptはテーマカスタマイザー時のiframe内に呼び出されます。
コメント