Advanced Custom Fields(ACF)

cocowaや宮城工務店 獅子魂にて利用

【2023年最新版】Advanced Custom Fieldsの基本的な使い方を紹介します

” https://usagicode.com/wordpress/how-to-use-advanced-custom-fields/ “

<div class="table-responsive my-5">
  				<table class="table table-bordered ">
				<tbody>
					
					
				<!-- 入力がある場合に表示させる -->
				<?php $value = get_field('dantaimei') ; if(empty($value)) : else:?>  
    			<tr>
     			<td class="th1 ">団体名</td>
      			<td class="td1"><?php the_field('dantaimei')?></td>
    			</tr>
				<?php endif;?>	

	  
				
  
	  
	
			</tbody>
			</table>
			</div>

URL箇所について

リンクを貼ろうとして<a></a>で囲うと表示されなくなる。リンクは貼れない。

画像について

画像を設置するためのフィールドです。
WordPressのコンテンツエディタやアイキャッチとは別に画像を設置したい場合などに使います。

テキストフィールドなどと違い「返り値のフォーマット」を選択する必要があります。単純に画像を表示させたいだけの場合は「URL」を選択し、下記コードを記述すると画像が表示されます。

画像フィールド出力方法
// プロフィールページで設定した画像を表示させる例
<img src="<?php the_field('profile_image'); ?>" >


ACFの仕様が変更になり、iframeが表示されなくなった!

https://daily-report.strange-brain.co.jp/acf-6-2-7%E4%BB%A5%E9%99%8D%E3%81%A7%E3%81%AEhtml%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%AE%E4%BB%95%E6%A7%98%E5%A4%89%E6%9B%B4%E3%81%B8%E3%81%AE%E5%AF%BE%E5%BF%9C%E6%96%B9%E6%B3%95/

影響を受ける例②

ACFで記事ごとにGoogleMapの地図のiframeタグを入れられるようにしてる!

→iframeタグが除去されてしまうので表示されなくなってしまいます

【おすすめ】the_field()ではなくget_field()を利用する

アナウンスがあったのはthe_field() などのようにechoを伴わずとも出力が可能な関数に対してなので、get_field() などの本変更の対象ではない関数を利用するようにすると、これまで通りのかたちで出力されるようになります。

<?php 
  //ACF 6.2.7以降 the_field()はHTMLエスケープされる
  the_field('field_name');

  //HTMLエスケープなしで値をそのまま出力
  echo get_field('field_name');
?>

獅子魂のマップ箇所を下記のように変更 single.php

変更前↓
<?php the_field('map')?>


変更↓
<?php echo get_field('map')?>

wordpressでyoutubeの埋め込み

エネル原人 でyoutubeの埋め込みアーカイブページ

 

e-genjin-archive

 

Advanced Custom Fields の oEmbed  を使ってyoutubeのURLを張り付ける

埋め込みサイズの入力欄で大きさを入力。

幅がでかいときにレスポンシブできるようにクラス名を フィールド値に加える

 

html

<div class=”d-flex flex-wrap justify-content-around align-self-center”>
<?php if(have_posts()):
while(have_posts()): the_post(); ?>

<div class=”archiveContainer”>
div class=”youtubBox  movie-wrap“><?php the_field(‘youtube’); ?></div>

<div class=”housou text-center”><?php the_field(‘housoubi’); ?></div>

<div class=”genjinName text-center”><?php the_field(‘genjin’); ?></div>
</div>

<?php endwhile; endif; ?>
</div>

 

css   

.archiveContainer .movie-wrap {
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}

.archiveContainer .movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

因みにアーカイブ集にするためにコンテナのサイズ下記にしている

.archiveContainer {
width:45%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #666666;
background-color: gold;

margin-right: 10px;
margin-left:10px;
margin-bottom: 40px; }

 

/*******************************************/
/*スマホ縦*/
@media (max-width: 479px){

.archiveContainer {
width:100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #666666;
background-color: gold;

margin-right: 10px;
margin-left:10px;
margin-bottom: 40px; }

}

 

Advanced Custom Fields  カスタムフィールド機能

 

トミソートレジャーショップで使用 tomiso-shop/

custom filed templete が アップデートの問題なのか追加できなくなっているのでこちらのプラグインで対応  こっちの方が断然良い!!


Advanced Custom Fieldsの全フィールドタイプを徹底解説

チェック項目で管理画面内に表示させるものを全てコントロールできる。

 


一応情報として下記は記して残しておくが、結論から言ってAdvanced Custom FieldのGoogle mapではなぜかAPIキーがセットされているのに 住所で検索すると【このページではGoogleマップが正しく読み込まれませんでした】とエラーになるのであきらめる。下記色々やったがだめだった。

代替案として、テキストエリアに マップのコードをペーストしてもらうことにする。プレースホルダーにはコード取得方法をしるしてやり方をアシスト。

※テキストエリアにグーグルマップいれるとbootatrapのガターが0になるっぽいので余白をクラスで左右に15pxづつ追加で調整すると良い。

 

↓レスポンシブにするためのCSS

.googlemap {height:250px;
      position: relative;
       padding-bottom: 56.25%;
       padding-top: 30px;
       height: 0;
       overflow: hidden;}

.googlemap iframe,
.googlemap object,
.googlemap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-left:15px;
padding-right:15px;
}

 

<div class=”col-md-4 googlemap“>
<?php the_field(‘shop_map‘); ?>
</div>

グーグルマップを埋め込めるようにするためには グーグルマップのAPIキーの取得と設定が必要となる。

キーの取得方法↓

https://www.zenrin-datacom.net/business/gmapsapi/api_key/index.html

キーを取得したらfunctions.php header.phpに下記記載して、APIキーを張り付ける

POINT!

keyの取得画面でGoole Cloud Platformでの表示項目が違う!

APIサービスの有効化がないので、代わりにAPIライブラリから Maps Javascript APIを選択。有効ボタン後は、 認証情報を作成しないとキーは作られない。

またキーは作るときに認証情報設定を必ずしないと有効にならないようだ。HTTPリファラーを選択して、ワイルドカードつける

http://cm-creation.net/yoshida/*  yoshida以降のものも認識してくれる。

APIキーはサイトドメインとして取得しなくてはならないようなので、テストサイト用に取得しても、本番はお客さんのドメインにワイルドカード付けて新たに発行する必要がある。

APIキーを編集するときは、APIとサービス→認証情報→APIキーをクリック

https://www.zenrin-datacom.net/business/gmapsapi/api_key/index.html

 

 

 

functions.phpに記載

下記のコードをfunctions.phpに追記します。
「APIキー」は、Google Maps APIで取得したAPIキーを記載してください。

1
2
3
4
5
function my_acf_google_map_api( $api ){
$api['key'] = 'APIキー';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

 

下記をheader.phpに記載↓

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

 

Advanced Custom FieldでGooglemapが表示されない時の対処法

 

 

 

 



ページに出力するために、phpに記載方法

 

フィールドグループを適用させた投稿タイプのテンプレートを編集し、カスタムフィールドのフィールド値を出力しましょう。

カスタムフィールドのフィールド値を出力する際は、基本的には以下のコードを使用します。「フィールド名」という部分は、表示させたいカスタムフィールドの「フィールド名」に置き換えて使いましょう。

 補足

「フィールド名」は、フィールドグループを作成した際に、各フィールドに設定したフィールド名のことです。

<?php the_field('フィールド名'); ?>

例えば、フィールド名が「sample_text」の場合、以下のコードを使用することでフィールド値を出力できます。

<?php the_field('sample_text'); ?>

↓手順の4 で表記されている。

 

Advanced Custom Fieldsの使い方:全項目の説明 / 出力方法 / 活用事例などを紹介

 

 

画像の出力設定

Advanced Custom Fields で画像出力する

画像IDで出力

画像のURLをそのまま返します。
画像をそのまま出力したいときには一番簡単ですね。

 

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

 

bootstrapの class=”img-fluid mx-auto d-block px-0″ を追加できるから 大きさはレスポンシブにできる

<?php if( get_field(‘sub_img1‘) ): ?>
<img src=”<?php the_field(‘sub_img1‘); ?>” class=”img-fluid mx-auto d-block”/>
<?php endif; ?>

 

 


【Advanced Custom Fields】カスタム投稿タイプにカスタムフィールドを設定する

【Advanced Custom Fields】カスタム投稿タイプにカスタムフィールドを設定する