トップへ戻る
BLOGS

WordPress 自作カスタマイザーの登録($wp_cutomize)と表示方法

WordPress 自作カスタマイザーの登録($wp_cutomize)と表示方法

こんにちは

今回はWordPressといえばというぐらいCMSらしい機能、
カスタマイザーの項目を追加&HTMLに表示するところまでの説明をしてみます

WordPressにはカスタマイザーという機能があり、
管理画面からは「外観」→「カスタマイズ」という項目を追っていくと現在のテーマをカスタマイズする画面になります

ここでは設定できる項目を書いたり、チェックするだけで簡単にサイトの中身を変更、カスタムすることが用意になります

まず、functions.phpにカスタマイザーを登録する部分です

完成形のコード

完成形のコードはこちら

長々と書いてきましたが、

ここから説明に入ります
まず概要としてアクションフック登録するわけですが

add_action("customize_register","my_customizer");

このmy_customizerの関数をこれから定義していくことになります

内容としては

カスタマイザーに登録する3つの関数

  • section(カスタマイザーの項目)
  • setting (カスタムする箇所の定義)
  • control (変更を加える内容)

これら3つは必ずセットじゃないとうまく動作しないようなので必ず3つセットで登録するようにします
しかし一つのセクション(項目)の中に複数のセッティングとコントロールを設けることは問題ありません

そしてセッティングとコントロールをは2つセットで登録するようにします

登録する方法はグローバル変数の$wp_customizeのなかの上記3つの値をセットしてあげます

一つづつ見ていきましょう

カスタマイザーにセクションを追加する

$wp_customize->add_section("oja_home_section", array (
      "title"           =>  "TOPページカスタムジャコ",
      'description'     => 'ホームコンテンツの内容をカスタマイズ',
      "priority"        =>  1,
      'active_callback' => function () {
        return is_home('');
      }
    )
  );

それぞれパラメータがあってややこしいですが、
大事なポイントはadd_sectionの第一引数です

oja_home_sectionの部分ですね
ここがセクションIDになります

セクションIDはこれから他の項目を定義する際の指針になります

“priority”は表示される箇所を指定する数値です
低いほうが上に表示されるようになるためお好みでどうぞ

‘active_callbackはそのパネルが呼び出される際のコールバック関数を指定しておきます
この場合はホーム画面のカスタム専用なので条件分岐のis_home(”);を指定していますが、空でも問題ありません

次はセッティングを書いていきます

カスタマイザーにセッティングを追加

// 最初の挨拶分
  $wp_customize->add_setting ("greeting_text",array (
      "default"   =>  '本サイトを閲覧いただきありがとうございます。',
      'type'      =>  'theme_mod',
      "priority"  =>  1
    )
  );

さてここでは「カスタムする箇所の内容を入れる」項目を追っていきます

そしてここでも第一引数でセッティングIDを設定します
このセッティングIDも先に設定していたセクションID同様重要になります

defaultパラメータは初期設定として最初から入っている内容(勝手には表示されない)を
入れるパラメータです

typeはWordPressに値を保存しておく形式で theme_modはテーマごと親要素を引き継ぐ設定値でoption に設定するとテーマよりもっと広くデータベースにて保存されるようで
私が調べた感じtheme_modのほうが読み込みスピードが早いとかなんとか、、、
お好みで問題なさそうです

最後にコントロールを追加して全てを紐付け作業です

カスタマイザーにコントロールを追加する

$wp_customize->add_control (
    new WP_Customize_Control(
      $wp_customize,'my_control',array (
        "section"   =>  "oja_home_section",
        "settings"  =>  "greeting_text",
        "label"     =>  "挨拶文のテキスト",
        "type"      =>  "text"
      )
    )
  );

new WP_Customize_Controlはなくても動きますが、余計な警告が出る可能性があるみたいです
これがあったほうが確実かと思い一応記しておきます
もしこのインスタンスを省くのであれば引数の$wp_customizeは書かずに、
すぐにコントロールのIDを第一引数にします

さてnew WP_Customize_Controlの引数の解説ですが

  • “section” => “セクションID”,
  • “settings” => “セッティングID”

ということでここで上記で設定したID、
セクションIDとセッティングIDを紐付けます

その他のパラメータとしては
labelではその項目の名前となるテキストを入れます

typeではいわゆるHTMLのinputタグに指定する項目であれば何でも指定できる属性値になります

  • text    => テキスト
  • checkbox  => チェックボックス
  • radio  => ラジオボタン
  • select  => セレクトボックス
  • textarea  => テキストエリア
  • dropdown-pages => 固定ページのドロップダウン
  • email  => メールアドレス
  • url  => URL
  • number  => 数値

とこんな内容ですね

また試験的にではありますが

画像アップロード、カラーピッカー、日時の登録

こちらに関してはそれぞれ専用のインスタンス変数を用意して

typeパラメータは指定しないこともあります

メインで使うのはtextとtextareaでしょうから、ほどんど事足りるとは思いますが

完成コードに参考として載せてあります

これでカスタマイザーの登録は完了しました
次は今回カスタマイザーで設定した内容を実際のサイトに反映させる方法です

HTMLにカスタマイザーの値を反映

<?php
  $greeting_text = get_theme_mod('greeting_text');
  if (!empty($greeting_text)) {
   echo esc_html($greeting_text);
   }
  ?>

ここで新しい関数の登場です

get_theme_mod(セッティングID, 初期値)

こちらはセッティングIDを引数に値を取り出す関数です

第二引数は初期値で此処に書いた内容がデフォルトで表示されます

ちなみに固定ページの表示などは多少記述が変わります

<?php //固定ページを表示
      $page_id = get_theme_mod( 'my_dropdown_setting' );
      if($page_id) {
        $content = get_post($page_id);
        echo $content->post_content;
      }
    ?>

これは固定ページの設定はページIDとして出力されることからこのような出力方法になります

他にも出力方法が変わっているものもあるかもしれません

意外とググると簡単に出てくるので都度調べようと思います

まとめ

ざっと簡単にですが$wp_customizeを使用してカスタマイザーを自在に自作していく方法をみてきました
今回は基礎的な部分の解説になりましたが、やはりWordPressの機能としてあるもので、同じようなことができるカスタムフィールドと比べてもこちらのカスタマイザーをいじって提案してくような形のほうがクライアントに説明しやすいですし、操作性も良好だと感じました

そして将来性としての可能性も夢があります

たとえば、カラーピッカーを使用してHTMLのスタイルタグに出力されるようにしておくことで
ユーザーの自由にコンテンツの色味を変更したり、ブートストラップのクラスと連携して好きなようにレイアウトを変更したりと、この形を基本として覚えておいて、様々なカスタムを試して見たいと思います

お疲れさまでした

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA