Amazonでセール中のゲーミング周辺機器! >>
スポンサーリンク

WordPressの投稿テンプレート作成を可能にする!カスタムフィールドプラグインAdvanced Custom Fieldsの使い方【出力編】

WordPress
Lumix / Pixabay
この記事は約10分で読めます。

設定編に続き、出力編となります。投稿テンプレートを作成するためには、テーマをカスタマイズしていく必要があります。WordPressテーマを編集することになりますが、コピペでできます。

今回は、「投稿テンプレートを作る」という目的で設定していきます。

Wordpressの投稿テンプレート作成を可能にする!カスタムフィールドプラグインAdvanced Custom Fieldsの使い方【設定編】
Wordpressで投稿をするときに、「投稿テンプレートとかあったらいいのにな~」とか、「一つのエディタにたくさん書いていくとぐちゃぐちゃになってめんどくさい!」と思ったことはありませんか? 投稿(編集)ページにテンプレートを簡単に作...
スポンサーリンク
スポンサーリンク
スポンサーリンク

出力タグ

基本

<?php if( get_field('フィールド名') ) { ?>
	<p><?php the_field('フィールド名'); ?></p>
<?php } ?>

基本的には、get_field(‘フィールド名’) で出力できます。

前後をHTMLやCSSで装飾してやることで、それっぽくなります。

下に書いてくもの以外の時は、基本的にはこれでいけます。

画像(返り値が画像URL)

<?php if( get_field('フィールド名') ) { ?>
	<img src="<?php the_field('フィールド名'); ?>">
<?php } ?>

get_field(”)で、画像URLが返ってくるので、画像として表示させるには、周りを img src=” “で囲ってあげるだけです。

画像(返り値が画像ID)

<?php if( get_field('フィールド名') ) { ?>
	<?php $imgid = get_field('フィールド名');
		$img = wp_get_attachment_image_src( $imgid , 'full' ); ?>
	<img src="<?php echo $img[0]; ?>" width="<?php echo $img[1]; ?>" height="<?php echo $img[2]; ?>" alt="<?php the_title_attribute(); ?>">
<?php } ?>

画像IDが返ってくるので、wp_get_attachment_image_src() で、IDに相当する「URL」「width」「height」を配列で取得し、<img>内にそれぞれ配置してやるだけです。画像サイズはお好みでどうぞ。(今回はfull)

チェックボックス(セレクトボックス 複数選択可 の時)

<?php if( get_field('フィールド名') ) { ?>
	<ul>
	<?php $check = get_field('フィールド名');
		foreach ( (array)$check as $value ) { ?>
		<li><?php echo $value; ?></li>
	<?php } ?>
	</ul>
<?php } ?>

セレクトボックスを複数選択可にした場合、チェックボックスと同じ、配列で出力されるので、 foreachを使います。

真/偽

<?php if( get_field('フィールド名') ) { ?>
<?php
	真の時表示されるもの;
	} else {
	偽の時表示されるもの;
?>
<?php } ?>

真/偽そのものを表示することはほとんど無いと思うので、上記のようになります。

スポンサーリンク

ページリンク

<?php if( get_field('フィールド名') ) { ?>
<?php $pagelink = get_field('フィールド名');
	foreach( (array)$pagelink as $value) { ?>
		<p>ページリンク:<a href="<?php echo $value; ?>"><?php echo $value; ?></a></p>
	<?php } ?>
<?php } ?>

選択したページのURLが配列として取得できます。

投稿オブジェクト

<?php if( get_field('フィールド名') ) { ?>
<?php $post_object = get_field('フィールド名');
	foreach ( $post_object as $object ) { ?>
		<p>投稿オブジェクト:<a href="<?php echo $object->guid; ?>" target="_blank"><?php echo $object->post_title; ?></a></p>
	<?php } ?>
<?php } ?>

選択したページのオブジェクト全体が取得できます。

タクソノミー(返り値がTerm Object)

<?php if( get_field('フィールド名') ) { ?>
	<?php $term = get_field('フィールド名'); ?>
	<p>タクソノミー:<?php 
	foreach((array)$term as $value) { ?>
		<a href="<?php echo get_bloginfo('url') . '/archives/category/' . $value->slug; ?>"><?php echo $value->name; ?></a>
		<?php if(next($term)!==FALSE){ echo ", ";} ?>
	<?php } ?>
	</p>
<?php } ?>

オブジェクト型で返ってきます。また、配列です。

ユーザー(セレクトボックス)

<?php
if( get_field('フィールド名') ) { 
	$user = get_field('フィールド名'); ?>
	<p>ユーザー:<a href="<?php echo get_bloginfo('url') . '/author/' . $user['user_nicename']; ?>"><?php echo $user['nickname']; ?></a></p>
<?php } ?>

マルチの場合は、配列処理となりますが、あまり使わないので割愛します。

Google Map

<?php
if( get_field('フィールド名') ) { 
	$googlemap = get_field('フィールド名'); ?>
<script src="//maps.google.com/maps/api/js"></script>
<div id="googlemaps" style="width:600px; height:400px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window,"load",function(){
	var mapdiv=document.getElementById("googlemaps");
	var myOptions = {
		zoom:17,
		center:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
		mapTypeId:google.maps.MapTypeId.ROADMAP,
		scaleControl:true
	};
	var map=new google.maps.Map(mapdiv,myOptions);
	var marker=[];
	var infowindow=[];
	marker[0]=new google.maps.Marker({
		position:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
		map:map,
		title:"<?php echo $googlemap['address']; ?>"
	});
});
</script>
<?php } ?>

Google Mapの住所/経度/緯度を配列で取得できます。

それらを、GoogleMap APIと共に組み込むと、地図を表示させることが出来ます。

 

以上の出力タグを、それぞれを表示したい場所へ記述するだけです。

スポンサーリンク

実際に出力してみる

前回の「せあせあ」を実際に出力してみようと思います。

Wordpressの投稿テンプレート作成を可能にする!カスタムフィールドプラグインAdvanced Custom Fieldsの使い方【設定編】
Wordpressで投稿をするときに、「投稿テンプレートとかあったらいいのにな~」とか、「一つのエディタにたくさん書いていくとぐちゃぐちゃになってめんどくさい!」と思ったことはありませんか? 投稿(編集)ページにテンプレートを簡単に作...

目標: 「ペンギンさんの一言」の下に「せあせあ」を表示させる。

 

1-1

まずは、「外観」→「テーマの編集」に行きましょう。

2

テンプレートの編集をするときは、子テーマに!

そして、個別投稿(single.php)にいきます。(右の一覧から探してください)

このブログのテーマは、「Simplicity2」を利用させていただいています。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

「Simplicity2」では、「entry-body.php」内に記述しているようなので、「entry-body.php」に行きます。

(ご自分の利用されているテーマ内で表示したい場所を探してください。)

【豆知識】Google Chromeを使って、相当する場所を簡単に探す

5

調べたいページを開いて、「調べたい要素」を右クリックして「検証」をすると、デベロッパーツールが起動し、相当する場所のHTMLを表示してくれます。

「ペンギンさんの一言」の場合、「main」→「post」→「article」→「footer」内にあるということがわかりますね!

参考

初心者でもWeb制作が簡単に! GoogleChrome デベロッパーツールのススメ
「このサイトってどんな風にHTML書いてるんだろう……」とか「ココの部分をちょっと参考にしたいな」とか思ったことはありませんか? 知識がある方なら、頭の中である程度コードを組むことが出来ると思うのですが、初心者となるとそうはいきません...

 

3

「entry-body.php」に来ました。

赤枠で囲ってある場所が、記事本文を表示させている場所です。

そして、青枠が「footer」その下に「ペンギンさんの一言」があります。

Google Chromeで確認したとおりの順番になっていますね。

 

では、その下にコードを書いていきましょう。

4

<?php if( get_field('seasea') ) { ?>
<h4>せあせあ</h4>
<div id="seasea">
	<?php the_field('seasea'); ?>
</div>
<?php } ?>

こんな感じですね。if で囲うことで未入力時には<h4>せあせあ</h4>を表示しないようにしています。また、<div id=”seasea”></div>で囲うことで、cssを後々編集できるようにしています。

6

表示を確認してみましょう。しっかりと表示したい場所に表示できていますね。

 

このような感じで、出力コードを記載していきます。

周りを他のコードで囲んでやることで、簡単にいろいろなものを実装できますね!

このプラグインだけで本当にいろんな事ができそうです。

コメント

タイトルとURLをコピーしました