前回の記事の補足を書いていきます。

トップページに新着情報一覧を5件表示させる方法は前回説明しました。
今回は、見出しのリンク先をカスタムフィールドを使って設定する方法を説明します。

目次

1. カスタムフィールドの設定
2. カスタムフィールドを追加
3. トップページの見出しにリンクを設定する
4. 完成

１．カスタムフィールドの設定

WordPress標準のカスタムフィールドを利用します。

まず、投稿画面にカスタムフィールド設定を表示させるために、
表示オプションのカスタムフィールドをチェックします。

投稿テキストの下に「カスタムフィールド」が表示されればOKです。

２．カスタムフィールドを追加

新規追加リンクをクリックし、名前に「url」、値に「表示させたいURL」を入力して、
「カスタムフィールドを追加ボタン」をクリックしてください。

カスタムフィールドの設定はここまでで完了です。

次に、トップページの見出しに設定する方法を説明します。

３．トップページの見出しにリンクを設定する

実際のソースコードは下記になります。

<div id="topics_list">
		<?php
		$args = array( 'posts_per_page' => 5, 'order'=> 'DESC', 'orderby' => 'date' );
		$posts = get_posts($args);

		foreach ($posts as $p) :
		?>
			<div class="date"><?php echo mysql2date( 'Y/m/d', $p->post_date ) ?></div>
			
			<?php if(get_post_meta($p->ID , 'url' ,true)){ ?>
			<div class="text"><a href="<?php echo get_post_meta($p->ID , 'url' ,true); ?>" target="_blank"><?php echo $p->post_title; ?></a></div>
			<?php }else{ ?>
			<div class="text"><?php echo $p->post_title; ?></div>
			<?php } ?>
		<?php endforeach; ?>
</div>

前回の記事のソースコードとの違いは、見出しタイトル出力する箇所です。
具体的には下記のコードが追加になっています。

<?php if(get_post_meta($p->ID , 'url' ,true)){ ?>
<div class="text"><a href="<?php echo get_post_meta($p->ID , 'url' ,true); ?>" target="_blank"><?php echo $p->post_title; ?></a></div>
<?php }else{ ?>
<div class="text"><?php echo $p->post_title; ?></div>
<?php } ?>		

カスタムフィールドの値の取得はget_post_meta()で行います。
引数に、投稿IDとカスタムフィールドの名前を指定します。

get_post_meta($p->ID , 'url' ,true)

何も設定されていない場合は値が取得できませんので、else分岐の処理を実行します。

取得できた場合は、aタグのhref属性に取得した値を設定します。

<a href="<?php echo get_post_meta($p->ID , 'url' ,true); ?>" target="_blank"><?php echo $p->post_title; ?></a>

４．完成

以上、でカスタムフィールドによるリンク設定が完了しました。
実際の表示は、こちらのページからご確認ください。

サンプル：組み込み先ホームページ
====================================
http://turbo-w.com/

【2017/08/02追記】
サイトリニューアルのため上記URLでは閲覧できなくなりました。
下記にて参照できます。
http://old.turbo-w.com/
====================================

※表示イメージ

WordPressは下記バージョンを使用
====================================
WordPress 4.2.2
====================================

次回は新着情報一覧画面の実装について説明します。