追加項目

追加項目 の使い方

• カスタムフィールドの追加方法
• カスタムフィールドの表示方法
  • テーマのファイルに設定する方法
  • ショートコードで表示させる方法
• リピーターフィールドの使い方
• フレキシブルコンテンツの使い方
• オプションページの作り方

カスタムフィールドの追加方法

追加項目 を使って独自のフィールドを追加するには、次のような形で編集・設定を行っていきます。

ここではテストとして、「記事タイトル下にリード文のフィールドを作成」を行っていきます。

1. [カスタムフィールド]  > [新規追加] をクリックします。
   
2. フィールドグループのタイトルを入力してください。
   その後、[場所] > [ルール] で [投稿タイプ] と [投稿] になるように設定してください。
   
3. [フィールドを追加] をクリックします。
   
4. フィールドの項目ラベル・フィールド名・フィールドタイプを入力していきます。
   
5. [設定] > [有効] を [はい] にしてください。
   これで編集は完了ですので、右上の [更新] ボタンをクリックしてください。
   
6. 次に、投稿ページにカスタムフィールドが表示されているかを確認します。
   [投稿] > [新規追加] をクリックし、記事のタイトルを入力しましょう。
   
7. 画面を下までスクロールすると、先ほど作成したカスタムフィールドが表示されていることが分かります。
   設定した項目に実際にリード文を書き、[更新] ボタンを押せば完了です。
   
8. ただし、ここまでの設定だけでは実際のページに内容は反映されません。
   詳しくは次の項目でお伝えします。

カスタムフィールドの表示方法

追加項目 は、設定するだけではなく表示設定を行っておかないと、実際のページに内容が反映されません。

ここでは、次の2つの表示設定の方法をお伝えしていきます。

• テーマのファイルに設定する方法
• ショートコードで表示させる方法

テーマのファイルに設定する方法

まずは、WordPress テーマのPHPファイルに必要情報を記述する方法です。

今回は投稿ページでカスタムフィールドを表示させるため、「single.php」や「singlular.php」ファイルが該当します。

関数は「the_field();」を利用し、()内に含める関数は先ほど設定したフィールドグループの編集画面で確認することができます。

よって今回は、「the_field( ‘lead’ );」という関数をPHPファイルに挿入します。

ショートコードで表示させる方法

ショートコードを利用する場合、投稿編集ページの本文に を埋め込んでください。
上記の例の場合は、「」というショートコードを設置することで、値が表示されます。

また、特定の投稿記事で設定した値を取得する場合は、 のショートコードを利用します。
post_id（投稿ID）に記載する数字は、投稿編集画面のURLの「?post=」の後に記載された数字になります。

リピーターフィールドの使い方

追加項目 で利用できるリピーターフィールドは、一つのフィールドを何度も繰り返してグループの項目として設定できます。
たとえば、リンクURLを繰り返し何度も設定していくことで、関連リンク集というグループのカスタムフィールドが完成します。

ここでは、関連リンク集を作るイメージでリピーターフィールドの使い方を詳しく説明していきます。

1. [カスタムフィールド] > [新規追加] をクリックします。
   編集画面でタイトルを入力し、[フィールドを追加] をクリックしてください。
   
2. 以下の項目を設定してください。
   
   • 項目ラベル：項目のタイトルを入力します。
   • フィールド名：フィールド名を入力します。
   • フィールドタイプ：[リピーター] を選んでください。
3. [サブフィールド] > [フィールドを追加] をクリックします。
   
4. 以下の設定を行ってください。
   
   • 項目ラベル：項目のタイトルを入力します。
   • フィールド名：フィールド名を入力します。
   • フィールドタイプ：[画像] を選んでください。
   • [フィールドを閉じる] をクリックします。
5. さらに [サブフィールド] > [フィールドを追加] をクリックします。
   
6. 以下のように設定してください。
   
   • 項目ラベル：項目のタイトルを入力します。
   • フィールド名：フィールド名を入力します。
   • フィールドタイプ：[Wysiwyg エディタ] を選んでください。
7. 加えて以下のように設定してください。
   
   • ツールバー：[Basic] を選択します。
   • メディアアップロードボタンを表示しますか：[なし] を選択します。
   • Wrapper の属性：幅60%に設定します。
   • [フィールドを閉じる] をクリックします。
8. 最後にもう一度だけ [サブフィールド] > [フィールドを追加] をクリックします。
   
9. 以下のように設定してください。
   
   • 項目ラベル：項目のタイトルを入力します。
   • フィールド名：フィールド名を入力します。
   • フィールドタイプ：[リンク] を選んでください。
   • [フィールドを閉じる] をクリックします。
10. メインフィールドの [ボタンラベル] にサブフィールドを追加するときのテキストを入力してください。
    [フィールドを閉じる] をクリックします。
    
11. [場所] > [ルール] で左側を [ページ] を選択します。
    [公開] を押して編集は完了です。
    
12. 次に [固定ページ] > [固定ページ一覧] をクリックします。
    編集したいページをクリックしましょう。
    
13. 一番下に先ほど編集したカスタムフィールドが追加されています。
    [Add Slide（ボタンラベルに設定したテキスト）] をクリックしましょう。
    
14. サブフィールド付きのフィールドが表示されるので、[画像の追加] を選びます。
    メディアから任意の画像を選んで追加しましょう。
    
15. 後は [Content] の部分にコンテンツとなる文章を入力し、[Link] へリンク先のURLを挿入します。
    リピーターフィールドは、この 14 と 15 の設定を何度も繰り返し行うことができます。
    
16. 最後に [公開] を押すとフィールドの設置は完了しますが、無料版プラグインと同様、PHPファイルを設定しなければデータが反映されません。
    基本ループ用の関数は以下の通りですので、設置するページごとのPHPファイルへペーストしましょう。

<?php

// check if the repeater field has rows of data
if( have_rows('repeater_field_name') ):

 	// loop through the rows of data
    while ( have_rows('repeater_field_name') ) : the_row();

        // display a sub field value
        the_sub_field('sub_field_name');

    endwhile;

else :

    // no rows found

endif;

?>

フレキシブルコンテンツの使い方

フレキシブルコンテンツとは、サブフィールドの項目を自由に設定でき、追加・編集・並び替えによって高度にカスタマイズできる機能です。

ここでは、ダウンロードコンテンツのフィールドをフレキシブルコンテンツ機能を使って作成しています。

1. フレキシブルコンテンツの設定方法は、基本的にリピーターフィールドと同じです。
   以下の画像はフレキシブルコンテンツの設定画面なので、レイアウトという項目が追加されています。
   
   • 親フィールドのフィールドタイプ：必ず [フレキシブルコンテンツ] を選びましょう。
   • レイアウト：コンテンツの編集時に使用できるレイアウトを定義します。ラベルや名前、制限、表示、フィールドの設定などを細かく編集することができます。
   • ボタンラベル：行を追加するときのボタンの表示名
   • 最小レイアウト：必要なレイアウト数に制限を設定するときに利用します。
   • 最大レイアウト：許可されるレイアウト数に制限を設定するときに利用します。
2. こちらも編集が完了すれば [公開] をクリックします。
   そして、先ほどと同じように [固定ページ一覧] から編集ページへ移動します。
   すると、編集したフレキシブルコンテンツフィールドが表示されますので、[Add Row] をクリックしてください。
   
3. 今回作成したフレキシブルコンテンツフィールドの場合、以下のように表示されます。
   
4. 最後に [公開] を押すとフィールドの設置は完了しますが、無料版プラグインと同様、PHPファイルを設定しなければデータが反映されません。
   基本ループ用の関数は以下の通りですので、設置するページごとのPHPファイルへペーストしましょう。

<?php

// Check value exists.
if( have_rows('content') ):

    // Loop through rows.
    while ( have_rows('content') ) : the_row();

        // Case: Paragraph layout.
        if( get_row_layout() == 'paragraph' ):
            $text = get_sub_field('text');
            // Do something...

        // Case: Download layout.
        elseif( get_row_layout() == 'download' ): 
            $file = get_sub_field('file');
            // Do something...

        endif;

    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;

オプションページの作り方

オプションページとは、サイト全体の任意のページに表示できるカスタムフィールドのことで、ヘッダーやフッター用に適しています。

ここでは、オプションページの作り方をお伝えしていきます。

途中、PHPファイルを編集する必要がありますので、以下の関数をご利用ください。

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_page();
	
}

1. [外観] > [テーマエディター] > [テーマのための関数（functions.php）] をクリックします。
   
2. 以下の画像と同じように、先ほどの関数をペーストしてください。
   [ファイルを更新] をクリックして保存します。
   
3. 次にオプション用のフィールドグループを作成します。
   
   1. [カスタムフィールド] > [新規追加] をクリックしてください。
   2. 任意のフィールドを追加して編集します。
   3. [場所] > [ルール] > [オプションページ] を選択します。
   4. [更新] をクリックして保存します。
4. 最後にオプションページを作成しましょう。
   
   1. [Options] をクリックします。
   2. 先ほど設定したオプション用フィールドに任意項目を設定・編集していきます。
   3. [Update] をクリックして編集完了です。

追加項目 の使い方は以上です。

30種類以上の項目を使ってカスタムフィールドが作成でき、サイト制作の幅を大幅に広げることができます。

特に、幅広いコンテンツ（文章以外にメルマガやダウンロード系、動画など）を持つサイトに適しているため、ぜひ導入をご検討ください。