WordPressのテーマカスタマイザーでオリジナルの項目を追加する

トップページのメインビジュアルやバナー等をお客様が自分で変更できるようにする時に、設定用の固定ページとカスタムフィールで設定させる方法をとることが多いのだけれど、プレビューするのがちょっと力技だった。
受託案件である程度汎用的なテーマを作ることになったので、カスタマイザーを使うことにした。「カスタマイザー」は「外観」→「カスタマイズ」でテーマをカスタマイズできる機能。

参考にしたサイト

手順

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

「セクション」はカスタマイザーの左側の「サイト基本情報」とか「メニュー」とかカスタマイズできる項目のメニュー部分。カスタマイズ項目をグループ化してセクションにまとめることができる。
まずはオリジナルのセクションを追加するために、function.phpに以下記述する。
今回はヘッダーとフッターのカスタマイズをするため、「ヘッダー・フッターの設定」というセクションを作る。

※「サイト基本情報」などのデフォルトのセクションの中に設定項目を追加する場合は不要。

2.コントロールを追加する。

コントロールはセクションの中に表示される各設定項目のフォーム。
ラジオボタン、チェックボックス、テキストなどのフォーム。
カラーピッカー、画像のアップロードと選択、メディアのアップロードなどのフォームが作れる。
今回はヘッダーに表示するロゴ画像のアップロードと予約ボタンのリンク先URLの入力欄、コピーライトのテキストの入力欄を作成。
function.phpの「function theme_customize($wp_customize){・・・}」の中、1のセクションの後に以下追記。

    • ライブプレビューでJavaScriptでリアルタイムに変更をプレビューしたい項目ではadd_settingで「’transport’=>’refresh’」を「’transport’=>’postMessage’」とする。
      「ページ再読込のタイミングで送る」→「フォームに書き込んだタイミングで送る」という感じなのかな。
    • 画像のアップロード・選択の場合URLを返すように「’sanitize_callback’ => ‘esc_url’,」
    • 「add_control」のクラスは以下のように変更
       ラジオボタン、チェックボックス、テキストなど:WP_Customize_Control
       カラーピッカー:WP_Customize_Color_Control
       画像のアップロードと選択:WP_Customize_Image_Control
       メディアのアップロード:WP_Customize_Upload_Control
       参照:https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
    • デフォルトのセクションの中に設定項目を増やしたい時は、「’section’ => ‘セクションID’」の部分にデフォルトのセクションを指定する。
      「サイト基本情報」に追加する場合、「’section’ => ‘title_tagline’,」
    • 「’type’ => ‘text’」はフォームの種類を設定。htmlのinputタグのtypeと同じ。
      チェックボックスならcheckbox、ラジオボタンならradio。
    • ラジオボタンの場合の書き方もメモしとく。

3.ロゴ画像のURLの取得をテーマで使いやすいように関数にしておく

function.phpの「function theme_customize($wp_customize){・・・}」の後に追記。

4.ライブプレビュー用のJavaScriptをエンキューする

手順3の記述の後に追記。ライブプレビュー用のJavaScriptはテーマディレクトリ内の任意の場所に作成(次の手順5)。
JavaScriptのファイル名は任意でも構わないようですが、一般的には「theme-customizer.js」とするようです。

5.ライブプレビュー用のJavaScriptを作成する

ライブプレビュー用のtheme-customizer.jsはテーマディレクトリ内の任意の場所に作成。
jQuery使ってプレビューを書き換えます。

6.テーマのテンプレートファイルを編集する

テンプレートファイルのカスタマイザーを使って変更する箇所の書き方。

ヘッダーのロゴを入れ替える箇所(header.phpの該当箇所)

ヘッダーのWeb予約ボタンのリンクの入れ替え(header.phpの該当箇所)

フッターのコピーライトを入れ替える箇所(footer.phpの該当箇所)

 

About sakaism

名古屋で働くWebデザイナー 最近はデザインとは別のフィールドを持ちたいなぁとも思っている。
This entry was posted in テンプレート作成, 管理画面カスタマイズ. Bookmark the permalink.

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください