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コンテンツエディターにカスタムメタボックスを追加する

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

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

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

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

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

ここで、メタボックスのスタイル、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でもフォローできます。