皆さんこんにちは
wordpressのカスタマイズをしていて「全然wordpressの強みを活かせていない」
と感じたことはありませんか？
そもそもWordpressの強みはサイトの運営者が誰であろうが簡単にサイトを構築できるという点だと思います。
wordpressを学び自作テーマを作る際に自分好みのテーマを作ることはできますが、「柔軟性」を持たせてテーマを作ることは結構難易度が高くなります。
今日はwordpressの「カスタマイザー」に項目を追加して柔軟な機能を追加したいと思います。
ちなみにカスタマイザーとは以下のことです。
でははじめて行きます。
完成図
画面左のカスタマイズ項目がテーマカスタマイザーです。
右にトップページが映し出され左側のカスタマイザーに画像を設定することで右側に反映されます。
今回はスライダー３枚分のと画像中央にある文字列をカスタマイザーに追加したいと思います。
手順
- functions.phpにコードを記述
- functions.phpに画像のURLを出力する関数を作成
- カスタマイザーと関連付ける場所で関数を呼び出す
- 動作確認
ととても簡単に実装できる。
では順を追って説明していきます
functions.phpにコードを記述
まずはfunctions.phpに以下のコードを記述する。
今回は画像が３枚、テキストが３箇所ありますので長々としたコードとなっていますが、１枚目２枚目３枚目共に同じコードの繰り返しですので実装する際は好みの枚数に合わせてください。
/* テーマカスタマイザーを追加する
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );
function theme_customize($wp_customize){
//スライダーというセクションの追加
$wp_customize->add_section( 'slider-img', array(
'title' => 'スライダー', //セクションのタイトル
'priority' => 60, //セクションの位置
'description' => '画像をアップロードしてください。', //セクションの説明
));
//１枚目の画像追加
$wp_customize->add_setting( 'slider_image1'); //設定項目を追加
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'slider_image1', array(
'label' => 'スライダー画像', //設定項目のタイトル
'section' => 'slider-img', //セクションのID
'settings' => 'slider_image1', //設定項目のID
'description' => 'スライダー画像を設定してください。', //設定項目の説明
)));
//１枚目の画像のテキストを追加
$wp_customize->add_setting('slider_text1',[
'default' => 'Enjoy Rich'
]);
$wp_customize->add_control('slider_text1', [
'label' => 'スライダーの文字列',
'section' => 'slider-img'
]);
//２枚目の画像追加
$wp_customize->add_setting( 'slider_image2' ); //設定項目を追加
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'slider_image2', array(
'label' => 'スライダー画像',
'section' => 'slider-img',
'settings' => 'slider_image2',
'description' => 'スライダー画像を設定してください。',
)));
//２枚目の画像のテキストを追加
$wp_customize->add_setting('slider_text2',[
'default' => 'Enjoy Rich'
]);
$wp_customize->add_control('slider_text2', [
'label' => 'スライダーの文字列',
'section' => 'slider-img'
]);
//３枚目の画像追加
$wp_customize->add_setting( 'slider_image3' ); //設定項目を追加
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'slider_image3', array(
'label' => 'スライダー画像',
'section' => 'slider-img',
'settings' => 'slider_image3',
'description' => 'スライダー画像を設定してください。',
)));
//３枚目の画像のテキストを追加
$wp_customize->add_setting('slider_text3',[
'default' => 'Enjoy Rich'
]);
$wp_customize->add_control('slider_text3', [
'label' => 'スライダーの文字列',
'section' => 'slider-img'
]);
}}コードをfunctions.phpに追記したらサイトを確認をしてみましょう。
管理画面→カスタマイズで確認ができます。
すると、以下のように「スライダー」のカスタマイズ項目が増えているかと思います。
上の画像のようになればOKです。
画像のURLを出力する関数を作成
では次に画像のURLを出力する関数を作って行きます。
カスタマイズ項目を追加できましたが、まだ画像の変更が反映されません。
それは、スライダー内で設定した画像のURLが右画面に写っているページの画像リンクに反映されていないからです。
画像のURLを出力するは以下の通りです。
/* テーマカスタマイザーで設定された画像のURLを取得する関数
// ---------------------------------------------------------- */
function get_the_logo_img_url(){
return esc_url( get_theme_mod( 'slider_image1' ) );
}
function get_the_logo_img_url_1(){
return esc_url( get_theme_mod( 'slider_image2' ) );
}
function get_the_logo_img_url_2(){
return esc_url( get_theme_mod( 'slider_image3' ) );
}上記の関数を表示ページの画像リンクに貼ることによって画像のURLを出力する事ができます。
関数を表示ページの画像リンクで呼び出す
カスタマイザーで設定した画像のURLを取得する関数を作成できましたので、次は表示画像のリンクで関数を呼び出します。
今回の私のTopページはfront-page.phpに記述しておりますのでそちらに記述します。
また、今回画像のタイトルも一緒に紐付けを行います。
<div class="swiper-slide">
//変数を作り変更された際の画像テキスト情報とデフォルトのテキスト情報を書き込みます。
<?php $slider_text1 = get_theme_mod('slider_text1', 'Enjoy Rich');?>
//反映させたいスライダーテキストのソースを書いている場所で変数を出力します。
<div class="hero__title"><?php echo $slider_text1;?></div>
//imgタグのsrc内で画像URLの関数を発動させます。
<img src="<?php echo get_the_logo_img_url(); ?>" alt="" />
</div>
<div class="swiper-slide">
//変数を作り変更された際の画像テキスト情報とデフォルトのテキスト情報を書き込みます。
<?php $slider_text2 = get_theme_mod('slider_text2', 'Fantastic');?>
//反映させたいスライダーテキストのソースを書いている場所で変数を出力します。
<div class="hero__title"><?php echo $slider_text2;?></div>
//imgタグのsrc内で画像URLの関数を発動させます。
<img src="<?php echo get_the_logo_img_url_1(); ?>" alt="" />
</div>
<div class="swiper-slide">
//変数を作り変更された際の画像テキスト情報とデフォルトのテキスト情報を書き込みます。
<?php $slider_text3 = get_theme_mod('slider_text3', 'Experience');?>
//反映させたいスライダーテキストのソースを書いている場所で変数を出力します。
<div class="hero__title"><?php echo $slider_text3;?></div>
//imgタグのsrc内で画像URLの関数を発動させます。
<img src="<?php echo get_the_logo_img_url_2(); ?>" alt="" />
</div>
</div>見辛くなってしまいましたが、やっていることはとてもシンプルで繰り返しです。
以上でコードの記述が終了しました。
カスタマイザーで確認してみましょう。
カスタマイザーが右側の画像やテキストに紐付いていることでしょう。
最後に
自分個人専用のテーマを作る際にはこの機能はなくても問題ありませんが、
誰かの依頼や、仕事となった際にヘッダーの画像変更などを直接ベタ書きとなると初心者の方にはハードルが高いです。
wordpressは誰でも簡単に操作ができるという強みがありますのでそこを活かす為にもこのカスタマイザーでの機能追加を覚えておくと便利でしょう。
