ウィジェットは、WordPress テーマにウィジェット領域を追加することで、ユーザーがコード行を記述することなく独自のカスタムコンテンツを挿入できるようになります。
サイドバーやフッターで最も一般的で、検索ウィジェット、最新の投稿ウィジェット、またはカスタムメニューなどのウィジェットを保持するためによく使 しかしあなたのページにそれらを加え、型板を掲示すればそれらをさらにもっと強力にさせる。
好きなテンプレートファイルにウィジェット領域を追加できます。 私は、ヘッダー、メインナビゲーションの前後、コンテンツの前後などの場所で、私のテーマにそれらをたくさん追加したいと思っています。 サイト内のすべてのページで使用されているテンプレートパーツ（ヘッダーなど）に追加するか、より具体的に特定のコンテンツタイプのテンプレートファ
この記事では、その方法を紹介します。 私は、デフォルトのTwenty Seventeenテーマの子テーマを作成し、その子テーマ内で、私はいくつかの新しいテンプレートファイルを作成します：カスタムページテンプレートファイ
これらのそれぞれに、そのコンテンツタイプに固有のウィジェット領域を追加するので、ユーザーはそれぞれページテンプレート、カテゴリアーカイブ、または単一の投稿を使用してページを表示しているときにのみ表示されます。
だから始めましょう！
注: この投稿のコードをGitHubに追加したので、このチュートリアルと一緒に作業しているかどうかを確認できます。
子テーマの設定
私はtwenty seventeenテーマの子を使用するつもりです：あなた自身のテーマで作業している場合は、子テーマを作成するのではなく、直接編集するこ ただし、サードパーティのテーマを使用している場合は、子テーマを作成する必要があります。 これは、テーマを更新すると、テーマに加えた変更が失われるためです。
だから、あなたのwp-content/themesフォルダに、あなたのテーマの名前で新しいフォルダを作成します。 私は私のwpmu-template-widgetsを呼んでいます。 その中に、スタイルを追加します。cssファイルにこれを追加します：
あなた自身のテーマで作業している場合は、この手順をスキップすることができ、覚えておいてください。 また、別の親テーマを使用している場合は、それを反映するようにスタイルシートを編集する必要があります。 あなたがわからない場合は、子テーマの作成に関する私たちの記事をチェックしてくださ
ウィジェット領域の登録
ウィジェット領域をテンプレートファイルに追加する前に、テーマのfunctionsファイルに登録する必要があります。 テーマに既にfunctionsファイルがある場合はfunctionsファイルを開くか、新しい子テーマの場合はfunctionsというファイルを作成します。php。
まず、ウィジェットを登録するための空の関数を追加し、それをwidgets_initフックにフックすることから始めましょう。 これを関数ファイルに追加します:
その関数内で、4つのウィジェット領域を登録します:1つの投稿とカテゴリアーカイブのテンプレートのそれぞれ1つ、およびカスタムページテンプレートの2つです。
最初のウィジェットを登録することから始めます。
これはregister_sidebar()関数を使用し、次のようなパラメータの配列を使用します:
- ウィジェット管理画面とカスタマイザに表示されるウィジェット領域の名前。 私はこれを翻訳可能にしました。
- ウィジェット領域の一意のID。
- 国際化のためのプレースホルダを使用するウィジェットの前のマークアップ。
- ウィジェットのタイトルの前後のマークアップ。
h3要素で囲まれています。
それが最初のものです。 さて、まだあなたの関数の中に、他の3つを追加します：
だから私たちは今4つのウィジェットを持っています:
- 一つの投稿の内容の後に一つ。
- カテゴリアーカイブのコンテンツの前の一つ。
- ウィジェット化されたページテンプレートのコンテンツの前後に一つ。
ウィジェット領域を移動したい場合（例えば、カテゴリアーカイブをコンテンツの後に置くか、単一の投稿をコンテンツの前に置くなど）、適切に名前を変更する必要があります。 これは、将来コードを編集するときに何が起こっているのかを知るためであり、ユーザーはウィジェット管理画面を介してウィジェットを追加するときにウィジェットエリアがどこに出力されるのかを知るためです。 これを変更する場合は、次のステップでテンプレートファイルの正しい場所にウィジェットを出力するコードを配置する必要があります。
ウィジェットの管理ページを開くと、ウィジェットの準備ができたウィジェット領域が表示されます:
しかし、新しいウィジェットエリアにウィジェットを追加すると、サイトのフロントエンドには表示されません。 それらはまだテンプレートファイルにコード化する必要があります。
テンプレートファイルへのウィジェット領域の追加
ここで、ウィジェット領域を出力するコードを追加します。 独自のテーマを使用している場合は、既存のテーマテンプレートファイルを編集するだけで済みます。 子テーマを使用して作業している場合（またはテーマに関連するテンプレートファイルがまだない場合）、新しいファイルを作成する必要があります。
ウィジェット化されたページテンプレートファイルから始めましょう。
テーマフォルダに新しいファイルを作成します。 私は私のpage_widgetizedを呼んでいます。php。 そのファイルを開き、それにこれを追加します：
これは、カスタムページテンプレートであることをWordPressに伝えます。 あなたがそれらについての詳細を知りたい場合は、私たちの詳細なガイドをチェックしてくださ
注:ファイル名としてpage-widgetizedを使用しないでください。 これは、Page-がWordPressで予約された接尾辞であるためです。 ダッシュの代わりにアンダースコアを使用するか、必要に応じて最初にpageを使用しないでください。
そのコメントアウトされたテキストの下に、あなたのテーマ（または親テーマ）ページからすべてをコピーします。phpファイル。 別の方法は、ファイルのコピーを作成し、コメントアウトされたテキストを追加することです。
サイト内のページを編集するときにこのテンプレートを選択できるようになりました:
あなたがウィジェットを試すことができるように、あなたのページのいずれかのためにそれを選択します。 ここに私のページがあります:
私はテンプレートファイルにウィジェット領域を追加していないように、それは今非常にエキサイティングに見ていません。 そうしよう
テンプレートファイルで、ページコンテンツのすぐ上に次のコードを追加します。
これは、関数ファイルに登録したときにウィジェット領域用に作成した一意のIDを使用して、ウィジェット領域が設定されているかどうかを確認します。 値が設定されている場合は、ウィジェット領域の内容を出力します。
コンテンツの下にウィジェット領域を追加します。 コンテンツの後（および囲む要素の内側）に、次のように追加します。
ページテンプレートファイルを保存します。
ここでは、私のページテンプレートファイルの完全なコードですので、ループの前後のウィジェット領域を見ることができます：
今それをテストします。 私は新しいウィジェット領域のそれぞれにウィジェットを追加しました:
そして、ここで彼らは私のページ上でどのように見えるかです:
これがカスタムページテンプレートの設定です。 次に、他の2つのページテンプレートファイルを編集する（または必要に応じて作成する）必要があります。 次の手順に従います:
- 子テーマを使用している場合は、categoryというファイルを作成します。php。 カテゴリの内容をコピーします。あなたの親テーマ（それがある場合）またはアーカイブからのphpファイル。phpファイル（またはインデックス。それがない場合はphp）。
- 子テーマで作業していないが、テーマにカテゴリがない場合。phpファイルは、アーカイブをコピーして作成します。phpファイル（または、それらのいずれかを持っていない場合は、インデックス。phpファイル）。
- カテゴリアーカイブファイルのコンテンツの上にウィジェット領域を追加します。
ウィジェット領域のコードは次のとおりです。
単一のテンプレートでこれを繰り返します:
- 単一の投稿を作成します。テーマにphpファイルがない場合（または子テーマを使用している場合）。 親テーマの単一投稿から内容をコピーします。それにphpファイル、またはテンプレート階層内の次のテンプレートファイルから（単一。php、単数形。phpまたはインデックス。php）。
- 再び、ウィジェット領域を追加します–今回はコンテンツの後に追加します。
ここにコードがあります：
ウィジェットを追加すると、彼らはあなたのサイトに表示されます。 ここでは、単一の投稿の後に最近の投稿のリストを表示しています:
テンプレートにウィジェットエリアを追加すると、柔軟性が得られます
ウィジェットエリアは、テーマのユーザーがコードを記述せずに余分なコンテンツを追加できるようにします。 しかし、彼らはサイドバーのためだけではありません。 テンプレートファイルに追加のウィジェットエリアを追加すると、ウィジェットを追加できるサイト内のターゲットエリアが表示されます。
すべてのファイルにウィジェット領域を追加したり、異なるバージョンのサイドバーを使用したりすることもできます。異なるコンテンツタイプのphpファイル。 世界はあなたの牡蠣です！