実際に書いたコードテーマカスタマイザーの使い所メリットデメリットおわりにテーマカスタマイザーとはWordPressの管理画面でプレビューしながらコンテンツを編集・更新・公開できる機能です。テキストなどを入力エリアに打ち込むとリアルタイムでプレビューが更新されるので直感的でわかりやすく、初心者でも簡単に修正・更新ができます。カスタマイズ」で表示される画面のことです。何も設定していないとうまく使えませんが、対応しているテーマの場合はここからコンテンツを変更できます。WordPressの受託案件で何度か使うことがあり、自作することが多くなったので使った方法やコードを一度まとめてメモとして残しておきたいと思います。公式では「テーマカスタマイズAPI」としてcodexに情報が掲載されています。今回は記事を書くに当たって、このブログのABOUTページにテーマカスタマイザーを追加しましたので、その手順をご紹介します。設定する前にテーマカスタマイザーはWordPressに元から入っているjQueryを使いますので、それをアクションフックで読み込まないようにしている場合は必ず読み込むように設定しておいてください。アクションフックfunctions.phpにアクションフックを追記します。'my_theme_customize_register');customize_registerフックを使ってテーマカスタマイザーに設定を追加します。テーマカスタマイザーの作成には、大きく分けて「セクション」「テーマ」「コントロール」の3つの設定を追加する必要があります。]);主なパラメーター設定項目は以下です。説明文ここではABOUTページだけ表示させるようにしました。]);主なパラメーター設定項目は以下です。リアルタイムで入力情報を反映させる(postMessage)か、入力するたびにリロードする(refresh)かを指定できる。初期値はrefresh。保存する値をoptionかtheme_modかを指定できる。初期値はtheme_mod。サニタイズする関数を追加できる。ここではABOUTページの「このブログについて」の見出しをカスタマイズしたいので、defaultとリアルタイムプレビューのみを設定。typeに関しては、optionsはデータベースにIDと紐づけて保存する、theme_modはテーマ名と紐づけて保存するといった違いみたいなので、子テーマ・親テーマとかで使い回す場合はoptions、それ以外はtheme_modでいいと思います。capability、sanitize_callbackに関してはこのブログに関しては必要がないので割愛します。公式テーマを作る人は必ず設定した方がいいそうです。]);主なパラメーター設定項目は以下です。フォームの種類を指定。フォームで指定できる種類は下記。数値ここでは先ほどの設定したテーマ・セクションに紐付けて、実際に入力するエリアを設定します。テキストを変更したいので、テキストボックスを表示させました。通常、カスタマイザーの項目に入力するとけっこうな頻度でプレビュー画面がリロードされてちょっと使いにくいのですが、selective_refreshを使うことでリロードさせずにAjaxで部分的に更新できます。'postMessage'としておく必要があります。実際の追加設定は以下です。]);主なパラメーター設定項目は以下です。コールバックをレンダリングします。ここでは部分的に更新したい要素にabout_lead_title-customizerというIDを付けてコントロールと連携させます。render_callbackではこの部分の情報を引数で取れるので、IDを取得し、カスタマイザーに保存した値を出力する関数get_theme_mod()で返します。ウィジェットのセレクティブリフレッシュウィジェットの入力も部分更新したいって場合は下記を追記。'customizer_widgets');テンプレートへの出力方法テンプレートファイルでは以下のようにして出力します。'このブログについて'))?></h2>先ほどもちらっと登場したget_theme_mod()関数を使って表示します。引数はコントロールのID、第2引数は初期値です。selective_refreshを使ったライブプレビューを適用するためにh2要素にidabout_lead_title-customizerを指定します。ちなみに、このidはテーマカスタマイザー上でしか必要ないのでは?と思って、is_customize_preview()関数を使い、プレビュー画面の時だけidを付けてみたのですがうまく動きませんでした。selective_refreshを多用する場合は少々htmlのコード量が多くなりますが仕方ないですね。実際に書いたコードここまでの方法で追加できるのはできます。1つ1つ作ってたらめちゃめちゃコード量多くなるやん・・・!ってなりますので、僕はある程度ルールを決めてループを回して設定するようにしています。sharesl(以下「当ブログ」)は、株式会社SHARESLが運営している開発者ブログです。<br>開発者が日々考えていることのアウトプットやメモとして残しておきたい備忘録としての記事を更新していきます。<br>最新技術やトレンドの記事というよりは、WEBサイト制作の実務の中で気づいたことをまとめて後で見返せるノートのような役割を目的としています。'当ブログは正当で確実な情報をまとめたものではありませんので、掲載された情報で生じた問題については一切の責任を追いません。コメントやお問い合わせ等で個人的なカスタマイズのご質問は基本的にはご対応いたしません。カスタマイズを含めてお仕事としてご依頼される場合はお問い合わせから株式会社SHARESLを通してご連絡ください。本免責事項等及び、当ブログに掲載されている情報は予告なしに変更、または削除されることがあります。'<p>当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。<br>このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。<br>このトラフィックデータは匿名で収集されており、個人を特定するものではありません。</p><p>この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。アナリティクス利用規約</a>」をご覧ください。}}こんな感じで10個以上のコントロールがありますが、配列でまとめて指定してあとはループで回すようにしています。これでも長いですが、1つずつ書くよりはかなりコードが短くて済むので良いかと。今回のABOUTページでは画像がなかったので設定は省きましたが、画像もカスタマイザーに含ませることができるみたいです。機会があれば追記します。テーマカスタマイザーの使い所こんなにコード量や設定項目が多いとテーマへ導入するハードルは高いと思います。導入コストが高い割に実際にはあまり使われなかった・・・なんてこともありえますので、どんな時に導入すれば良いか、メリット・デメリットを挙げて考えてみました。メリットプレビューを見ながら直感的な操作で編集・更新が可能なので、初心者でも簡単に扱える画面ごとにコンテンツを集約することができるので、固定ページに行ったり、投稿ページに行ったりと管理画面を行ったり来たりせずに編集できる入力フィールドが多くなっても変更しやすい。保存した情報はカスタムフィールドと違い、データを記事IDで管理していないのでどこからでも呼び出すことが可能。デメリットコントロールやセクションを動的に増やしてループさせる、といったことはできないビジュアルエディターが使えないので長文の編集には向かないフィールドが多くなればfunctions.phpに相当量のコードを書く必要がありコンテンツが多いサイトでは導入にかなりコストがかかる後から別の更新方法に変えるのは大変なので、一度使い始めるとロックインされそうこんなところですかね。僕の所感としては、10~15ページ以下の小規模コーポレートサイトや、簡単なLP、ポートフォリオサイトなど、固定ページのコンテンツ更新を頻繁に行うようなWebサイトには向いているかなーという感じです。逆に合わないのは100ページ以上の中規模サイトや、会員サイト・ECサイトなどの動的なサイト、エディタを使って投稿することがメインのメディアサイトなど。いったあまりにも多すぎる固定ページを持ったサイトや、逆にほとんど固定ページを持たないサイトに導入しようとすると、コストがかかるだけなのでオススメできないです。いうサイトに機能として付けてもあまり触ることもないまま次のリニューアルを迎えることになると思います。固定ページにコンテンツが多い固定ページを頻繁に更新する固定ページが多すぎないこのようなサイトに限り有効な機能だと思います。最近受けた案件では、コーポレートサイトで英語対応もしたいけど自動翻訳は使わず任意のテキストを入力したいっていう時に、テーマカスタマイザーを使いました。カスタムフィールドだと、WordPressのプレビューが直前のリビジョンを使うという仕様上、プレビューが全く使えません。プレビューが使えないと英語と日本語でテキストの長さが変わってしまってレイアウトが崩れる場合や、改行位置が変な箇所についてしまう場合があります。テーマカスタマイザーを使うとリアルタイムでプレビューを確認できて便利です。更新手順も少なくて済みました。更新して、PCフロントのページを確認して、スマホのページも確認して・・・という流れになります。該当のエリアを編集しながらデバイスごとの見た目も確認して、OKなら公開というように更新作業を大幅に短縮できます!おわりにWordPressのテーマカスタマイザーを自分で作ってカスタマイズプレビュー画面でライブプレビューできるようにするところまでをまとめました。導入までのハードルは少し高いかもしれませんが、理解して使いこなせるとWordPressの提案としてひとつ武器が増えるので、かなり強力です!WordPress案件を受けることが多いけどまだ試したことがないという方は一度試しておくことをおすすめします。ここに書いてあるテキストコンテンツの更新の使い方だけでなく、バナー画像の変更やテーマカラーの変更などもカスタマイザーに取り込めるのでテーマの作り方によってはカスタマイザーのみですべての箇所を更新できるように作ることも可能です。