トミソートレジャーショップで使用 tomiso-shop/
custom filed templete が アップデートの問題なのか追加できなくなっているのでこちらのプラグインで対応 こっちの方が断然良い！！
チェック項目で管理画面内に表示させるものを全てコントロールできる。
一応情報として下記は記して残しておくが、結論から言って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>
ページに出力するために、phpに記載方法
フィールドグループを適用させた投稿タイプのテンプレートを編集し、カスタムフィールドのフィールド値を出力しましょう。
カスタムフィールドのフィールド値を出力する際は、基本的には以下のコードを使用します。「フィールド名」という部分は、表示させたいカスタムフィールドの「フィールド名」に置き換えて使いましょう。
「フィールド名」は、フィールドグループを作成した際に、各フィールドに設定したフィールド名のことです。
<?php the_field('フィールド名'); ?>例えば、フィールド名が「sample_text」の場合、以下のコードを使用することでフィールド値を出力できます。
<?php the_field('sample_text'); ?>↓手順の4 で表記されている。
画像の出力設定
画像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】カスタム投稿タイプにカスタムフィールドを設定する