Advanced Custom Fieldsの使い方・出力関数〖WordPress カスタムフィールド〗

カスタムフィールドとは

カスタムフィールドは、投稿やページに独自の入力項目を追加できる機能です。標準のタイトルや本文以外の情報を追加・表示する際に便利です。

Advanced Custom Fields (ACF) のメリット

標準のカスタムフィールドに比べ、ACFは以下のメリットがあります：

• テキスト以外の入力フィールド（画像、ラジオボタン、チェックボックスなど）を使用可能
• 入力必須項目や文字数制限の設定が可能
• 30種類以上のフィールドタイプを利用可能

ACFのインストールと設定

インストール

1. WordPressの管理画面から「プラグイン > 新規追加」をクリックし、「Advanced Custom Fields」を検索してインストール・有効化。

フィールドグループの作成

1. 「カスタムフィールド > 新規追加」をクリックし、フィールドグループを作成。
2. 例として「商品情報フィールド」を作成し、以下のフィールドを追加:
   • 商品名（テキスト）
   • 商品価格（数値）
   • 商品カラー（ラジオボタン）
   • 商品画像（画像）

フィールドの出力

作成したカスタムフィールドをテーマファイルに表示するには、functions.phpやテンプレートファイルに以下のコードを追加します：

<?php
if( get_field('item_img') ): ?>
    <img src="<?php the_field('item_img'); ?>">
<?php endif; ?>

<table>
    <tr><th>項目</th><th>内容</th></tr>
    <tr><th>商品名</th><td><?php the_field('item_name'); ?></td></tr>
    <tr><th>商品価格</th><td><?php the_field('item_price'); ?></td></tr>
    <tr><th>商品カラー</th><td><?php the_field('item_color'); ?></td></tr>
</table>

よくあるミスと注意点

1. フィールドの出力コードを追加: フィールドの値を入力するだけでは表示されないため、テーマファイルに出力コードを追加します。
2. フィールド名の一致: 出力コードで使用するフィールド名が正しいか確認します。
3. バックアップと子テーマの利用: 編集前に必ずバックアップを取り、子テーマを使用してカスタマイズを行います。

まとめ

ACFを利用することで、WordPressサイトに柔軟で強力なカスタムフィールド機能を追加できます。適切な設定と管理を行い、サイト運営を効率化しましょう。

jQuery, WordPress