ブログ

WordPressで新着情報を管理 その2 – カスタムフィールドの設定 

custom_field

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

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


目次

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

1.カスタムフィールドの設定

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

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

表示オプション2.カスタムフィールドを追加

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

カスタムフィールド

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

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

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

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

<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>

4.完成

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

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

※表示イメージ
新着一覧

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

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

  • WordPressで新着情報を管理 その2 – カスタムフィールドの設定  はコメントを受け付けていません。
  • WordPressカスタマイズ
  • このエントリーをはてなブックマークに追加

関連記事

コメントは利用できません。
ページ上部へ戻る