AMP for WP – Advanced Custom Fields の使い方 (2.8.1)

• フィールドの設定
• ACFサンプルコード

このアドオンを導入するとプラグイン「追加項目」の機能をAMPサイトでも使用できるようになります。
ご使用の際には追加項目プラグインが必要です。

フィールドの設定

このプラグインをインストールして有効化すると、サイドメニューに AMP ACF という新しいメニューが追加されています。カスタムフィールドの設定はこのメニューから行います。

1. サイドメニュー > [AMP ACF] をクリックします。
   
2. カスタムフィールドを新しく作成します。
   表示された画面上部の [新規追加] をクリックします。
   ※上図の [新規追加] をクリックしてもよい。
   
   編集画面が表示されます。
   
3. タイトルを入力します。（上図）
4. 表示場所を選択します。（上図）
   • データの表示：
     投稿ページ、固定ページ、ホームページ、アーカイブなどフィールドを表示するページを選択します。
   • コンテンツ内の表示位置：
     ここでは、「データの表示」で選択したページ内のどこにデータを表示するかを選択します。
     例：ヘッダーの後ろ、アイキャッチ画像の前など
     • ヘッダーの後（グローバル設定）
     • アイキャッチ画像の前（単一投稿）
     • アイキャッチ画像の後（単一投稿）
     • コンテンツメタデータの後（単一投稿）
     • コンテンツメタデータの前（単一投稿）
     • コンテンツの前（単一投稿）
     • コンテンツの後（単一投稿）
     • コンテンツの下（単一投稿）
     • フッターの上（サイト全体）
     • フッター内（サイト全体）
     • ショートコード（手動）
       
       [ショートコード（手動）] を選択した場合、ショートコードのメタボックスが表示され、ショートコードが自動生成されます。このショートコードをコピーして投稿／固定ページの任意の場所にペーストすると設定したフィールド情報が表示されます。
5. 条件ロジックの設定
   
   ここで設定したフィールドを「どんな」時（条件を満たした場合）「どこ」に表示させるかを設定します。
   例）表示条件を、「投稿タイプ」が「投稿ページ」の場合（左の項目が右の項目に等しい場合）に設定します。（上図）
   条件設定には、「A = B（A は B に等しい）」と「 A <> B（A と B は等しくない ）」の２種類があります。
   項目の右側の [追加] または [削除] をクリックすると条件の追加や削除ができます。
6. PHPエディタ
   画面（黒）にPHPのフィールドコードを入力します。
   
   WordPressテンプレートのACFにフィールドを表示するには、短いPHPコード（「the_field(‘field_name’)」等）を入力する必要がありますが、このプラグインも同様です。以下の画面にコードを入力する必要があります。使用できるコードはACFで紹介されているいずれかのコードを参考にして画面に入力してください。
7. AMP JavaScript (高度な設定)
   このフィールドは、AMP JSを必要とするPHPコードエディターで特別なAMPマークアップを使用している場合にのみ必要です。例えば「 amp-carousel.js」ファイルを読み込む必要がある「amp-carousel」などです。フィールドを通常表示だけの場合は設定する必要は特にありません。
   
8. 画面右上の [公開／更新] をクリックします。
   

カスタムフィールドの設定は以上です。

<p><?php the_field('field_name'); ?></p>

<?php

$variable = get_field('field_name');

// do something with $variable

?>

if(get_field('field_name'))
{
echo '

‘ . get_field(‘field_name’) . ‘

';
}

?>

$values = get_field('field_name');
if($values)
{
echo '
';

foreach($values as $value)
{
echo '
' . $value . '
';
}

echo '';
}

// always good to see exactly what you are working with
var_dump($values);

?>

<img src="<?php the_field('image_test'); ?>" alt="" />

<?php $image = wp_get_attachment_image_src(get_field('image_test'), 'full'); ?> 
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('image_test')) ?>" />

・sub_field_1 = , sub_field_2 = , etc

$sub_field_3 = get_sub_field('sub_field_3');
// do something with $sub_field_3

?>