WordPressの投稿と投稿タイプにカスタムメタボックスを追加する方法

WordPressは、公開日、カテゴリ、タグなどのメタデータをコンテンツに自動的に追加します。ただし、独自のカスタムメタデータも追加したい場合があります。

追加情報を収集する必要がある場合でも、編集プロセスを合理化する必要がある場合でも、ユーザーインターフェイスを改善する必要がある場合でも、メタボックスは柔軟なコンテンツ管理のための強力なツールになります。

WPBeginnerでは、カスタムメタボックスを使用して投稿やページの機能を強化しています。これにより、コンテンツを最適化するためにカスタムフィールドを追加することの長所と短所をより深く理解することができました。

この記事では、WordPressでカスタムメタデータボックスを作成することにより、コンテンツにユニークな情報を簡単に追加する方法を紹介します。

WordPressのカスタムメタボックスとは？

WordPressで投稿や固定ページ、またはカスタム投稿タイプを作成すると、そのコンテンツには通常、独自のメタデータが含まれます。このメタデータは、日時、作成者名、タイトルなど、コンテンツに関連する情報です。

デフォルトのカスタムフィールドボックスを使用して、独自のメタデータを追加することもできます。

プロのヒント: 投稿エディターにカスタムフィールドボックスが表示されない場合は、WordPressでカスタムフィールドが表示されない場合の対処法に関するガイドを参照してください。

カスタムフィールドボックスは、少数の投稿にカスタムメタデータを追加したいだけであれば良い解決策です。しかし、コンテンツに多くのユニークな情報を追加する予定がある場合は、カスタムメタデータボックスを作成するのが理にかなっています。

実際、人気のWordPressプラグインの多くは、投稿や固定ページの編集画面にカスタムメタボックスを追加します。次の画像では、AIOSEOが提供するカスタムメタボックスを使用して、投稿にSEO情報を簡単に追加する方法を確認できます。

それを踏まえた上で、WordPressの投稿やカスタム投稿タイプにカスタムメタボックスを簡単に追加する方法を見ていきましょう。

WordPressの投稿と投稿タイプにカスタムメタボックスを追加する方法

WordPressにカスタムメタボックスを追加する最も簡単な方法は、Advanced Custom Fieldsを使用することです。このプラグインを使用すると、投稿や固定ページにあらゆる種類の追加情報を添付し、ショートコードを使用してそのデータを訪問者に表示できます。

まず、Advanced Custom Fieldsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

カスタムメタボックスを作成する

有効化したら、WordPress管理画面のサイドバーから ACF » フィールドグループ ページにアクセスしてください。

ここで、「新規追加」ボタンをクリックします。

これで、メタデータボックスに表示されるカスタムフィールドを作成できます。

まず、「フィールドグループタイトル」と表示されているフィールドにタイトルを入力する必要があります。これはWordPressコンテンツエディタに表示され、メタボックスのタイトルとして使用されます。

とはいえ、特にマルチアザーWordPressブログを管理している場合や、他の人とダッシュボードを共有している場合は、わかりやすい名前を使用することをお勧めします。

これが完了したら、最初のフィールドをメタボックスに追加する準備が整いました。

WordPressメタボックスにカスタムフィールドを追加する

まず、「フィールドタイプ」ドロップダウンを開き、追加したいフィールドのタイプ（日付ピッカー、チェックボックス、テキストフィールドなど）を選択します。

その後、フィールドのラベルを入力します。

Advanced Custom Fieldsは、このラベルをフィールドの前に表示するため、ユーザーがどのような情報を入力する必要があるかを理解するのに役立ちます。

Advanced Custom Fieldsは「フィールド名」を自動生成するので、このフィールドは空のままで構いません。

これが完了したら、「デフォルト値」を入力したい場合があります。ユーザーが独自の情報を追加しない場合、これはページ、投稿、またはカスタム投稿タイプに自動的に追加されます。

作成しているフィールドの種類によって、より多くのオプションが表示される場合があります。たとえば、「ファイルタイプ」ドロップダウンから「画像」を選択した場合、画像形式を選択できます。

これらのオプションのほとんどは説明不要なので、画面の指示に従ってカスタムフィールドを設定できます。

フィールドの設定が完了したら、「フィールドを閉じる」ボタンをクリックしてセクションを折りたたみます。

「フィールドを追加」ボタンをクリックすると、カスタムメタボックスにさらにフィールドを追加できます。

次に、上記で説明したのと同じプロセスに従って、フィールドを構成します。

WordPressコンテンツエディターにカスタムメタボックスを追加する

カスタムメタボックスの設定が完了したら、メタボックスを表示する場所とタイミングを定義する必要があります。

これを行うには、「設定」セクションまでスクロールし、「場所ルール」タブをクリックします。

Advanced Custom Fieldsは、あらゆる種類のコンテンツにボックスを追加できます。たとえば、特定の投稿タイプ、カテゴリ、タクソノミー、ナビゲーションメニューなどにメタボックスを表示できます。

ドロップダウンメニューを使用して、メタボックスをWordPressダッシュボードのどこに表示するかを選択するだけです。たとえば、ゲスト投稿を受け入れる場合は、「ゲスト投稿」カテゴリのすべての投稿にボックスを追加したい場合があります。

その後、「プレゼンテーション」タブをクリックします。

ここでは、メタボックスのスタイル、WordPressブログのどこに表示するか、ラベルと指示が表示される場所を選択できます。

同じ場所に複数のボックスを追加する場合は、「順序番号」フィールドに入力することで表示順序を変更できます。

たとえば、最も重要なメタボックスを画面の上部に表示すると、編集ワークフローを改善することができます。

不明な場合は、このフィールドを0のままにしておくことができます。

この画面には、WordPressが通常投稿編集画面に表示するすべてのフィールドのリストも表示されます。

フィールドを非表示にしたい場合は、そのボックスをチェックするだけです。たとえば、カスタムフィールドを使用して著者情報ボックスを作成している場合、デフォルトの「著者」フィールドを非表示にしたい場合があります。

変更に満足したら、「変更を保存」をクリックしてフィールドグループを公開します。

これで、WordPressの投稿、固定ページ、またはカスタム投稿タイプのカスタムメタボックスが正常に作成されました。設定に応じて、投稿エディターにアクセスして、カスタムメタボックスが機能していることを確認できます。

WordPressテーマでカスタムメタボックスデータを表示する

これで、WordPressダッシュボードにカスタムメタボックスを正常に追加できました。ユーザーがメタボックスに入力した情報は、投稿を保存または公開するとWordPressデータベースに保存されます。ただし、この情報はデフォルトではウェブサイトに表示されません。

これを念頭に置いて、訪問者が見ることができるように、カスタムメタデータがWordPressテーマに表示されることを確認しましょう。

ショートコードを使用するか、WordPressテーマファイルを編集することで可能です。

ショートコードを使用してカスタムメタデータを表示する方法

WordPressにショートコードを追加するのが最も簡単な方法であり、情報がウェブサイトのどこに表示されるかを正確に制御できます。

たとえば、「スター評価」フィールドを作成した場合、ショートコードを追加するだけで、投稿タイトルの後、コンテンツ内、フッター、またはその他の場所にこの情報を表示できます。

ただし、ショートコードは、すべてのページ、投稿、またはカスタム投稿タイプに手動で追加する必要があります。コンテンツが多い場合、これには多くの時間と労力がかかる可能性があります。

フィールドのショートコードを取得するには、ACF » フィールドグループに移動します。次に、表示したいフィールドグループにカーソルを合わせ、表示されたら「編集」リンクをクリックします。

これで、このグループを構成するすべてのフィールドが表示されます。

表示したいフィールドごとに、「名前」フィールドの値に注意してください。

これが完了したら、カスタムメタデータを表示したいページ、投稿、またはカスタム投稿タイプに移動します。

次に、「+」アイコンをクリックして「ショートコード」と入力します。

適切なブロックが表示されたら、クリックしてレイアウトに追加します。

これで、次のショートコードをブロックに追加できます。"article_byline" を表示したいフィールドの名前に置き換えることを忘れないでください。

これで、これらの手順を繰り返して、投稿に複数のカスタムフィールドを追加できます。

変更が完了したら、「公開」または「更新」ボタンをクリックします。これで、WordPressウェブサイトにアクセスして、カスタムメタデータが機能していることを確認してください。

WordPressテーマを編集してカスタムメタデータを表示する方法

すべてのページ、投稿、またはカスタム投稿タイプで同じ場所にカスタムメタデータを表示したい場合は、WordPressテーマファイルにコードを追加できます。

これは長期的には時間を節約できますが、最も初心者向けの方法ではありません。また、WordPressテーマを次に更新したときにすべてのカスタムコードが失われるため、子テーマを作成することをお勧めします。その後、子テーマにカスタムコードを追加できます。

テーマファイルを編集したことがない場合は、WordPressでコードをコピーして貼り付ける方法に関する初心者向けガイドをご覧ください。

カスタムメタデータを表示したいファイルを編集する必要があります。これはテーマによって異なりますが、通常はサイトのsingle.php、content.php、またはpage.phpファイルを編集する必要があります。

適切なファイルを見つけたら、WordPressループ内にコードを追加する必要があります。このループを見つけるには、次のようなコードを検索してください。

	<?php while ( have_posts() ) : the_post(); ?>

この行の後、ループを終了する行の前にコードを貼り付けることができます。

	<?php endwhile; // end of the loop. ?>

例として、カスタムフィールドコードは次のようになります。

	<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

コードをCSSクラスを持つh2見出しで囲んでいることに注意してください。これにより、テーマにカスタムCSSを追加することで、後でカスタムフィールドのフォーマットとスタイルを設定できます。

もう一つの例はこちらです。

<blockquote class="article-pullquote">
 
<?php the_field('article_pullquote'); ?>
 
</blockquote> 

テーマにコードを追加する際は、フィールド名を置き換えるのを忘れないでください。

これが完了したら、カスタムフィールドに既にデータを入力した投稿にアクセスできます。これで、独自のメタデータが機能しているのがわかります。

この記事が、WordPressの投稿や投稿タイプにカスタムメタボックスを追加する方法を学ぶのに役立ったことを願っています。また、WordPressテーマにブログ投稿メタデータを表示する方法に関するガイドや、WordPressの抜粋をカスタマイズする方法のチュートリアルも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。