お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

WordPress:カスタムポストを含めた「記事投稿者の情報&最近書いた記事」を自作する方法

どうもこんにちは。JBです。実は先日このサイトを若干リニューアルしたのですが、その際にWordpressをほんのりカスタマイズしました。というわけでその一部、「投稿者の最近の記事」を自力で表示させる方法を。

表題の通り、記事の投稿者情報+最新の投稿を4つ並べて表示します。
以前はVK Post Author Displayというステキプラグインを使っていたのですが…挿入箇所を自由にしたいのと、最近の投稿にカスタムポストも含めたかったということがあって仕方なしに自分で作ることに…!

プラグイン:VK Post Author Display

あとカテゴリーを親子関係にしており、子カテゴリーを表示させたかったのもありまして。

要件的には、

  • 投稿者情報はサムネイル+投稿者名+紹介文
  • 最近の投稿は4つまで表示
  • 通常投稿とカスタムポストを含める
  • カテゴリー・日時表示
  • カテゴリーは子孫カテゴリーを表示

こんな感じです。それでは行ってみましょう!

コード全容

そんなわけでコードを。functions.phpにこれを書き込みました。

function author_recent_post(){
	global $post;?>	
	<div class="article_author clearfix">
		<div class="author_thumb"><?php echo get_avatar(get_the_author_meta('ID')); ?></div>
		<div class="author_text">
			<p class="author_name"><?php echo esc_html(get_the_author_meta('display_name')); ?></p>
			<p><?php echo esc_html(get_the_author_meta('user_description')); ?></p>
		</div>
	</div>
	<h4>最近の投稿</h4>
	<ul class="bottom_post_list clearfix">
	<?php
		$args = array(
					'post_type' => array('column', 'post'),	//投稿タイプ設定
					'author' => get_the_author_meta('ID'),	//投稿者設定
					'numberposts' => 4						//取得投稿数設定
					);
		$author_posts = get_posts($args);					//ポスト取得
		if($author_posts){									//ポストありなし判定
			foreach($author_posts as $post) : setup_postdata($post);	//ループ開始
					$current_cat = '';
					if ('column'==get_post_type()) {						//ポストタイプ'column'
						$cat_terms = get_the_terms($post->ID, 'column_cat');//ターム取得
						foreach ( $cat_terms as $cat_term ) {
							if ( ! $current_cat || cat_is_ancestor_of( $current_cat, $cat_term ) ) {
								$current_cat = $cat_term;
							}
						}
						$cat_name=$current_cat->name;
					}else{												//通常投稿
						$cats = get_the_category();						//カテゴリー取得
						foreach ( $cats as $cat ) {
							if ( ! $current_cat || cat_is_ancestor_of( $current_cat, $cat ) ) {
								$current_cat = $cat;
							}
						}
						$cat_name=$current_cat->cat_name;
					}?>
					<li>
						<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
							<?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
						</a>
						<span class="date"><?php the_time('Y.m.d.') ?></span>
						<?php if(!empty($current_cat)){ ?>
							<span class="cat"><?php echo $cat_name; ?></span>
						<?php } ?>
						<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
							<?php the_title(); ?>
						</a>
					</li>						
	<?php 		
			endforeach;
		}else{echo esc_html('投稿がありません。');}
		wp_reset_query();
	echo '</ul>';
}

すんごい長いですね…きっと本当はもっと効率が良い書き方があるんだと思います。

コード詳細

ほいだら分割してみていきます。

投稿者情報の取得

3行目から9行目にかけて、投稿者情報の取得&表示をしています。と言ってもphpは少ないですが…

<div class="article_author clearfix">
	<div class="author_thumb"><?php echo get_avatar(get_the_author_meta('ID')); ?></div>
	<div class="author_text">
		<p class="author_name"><?php echo esc_html(get_the_author_meta('display_name')); ?></p>
		<p><?php echo esc_html(get_the_author_meta('user_description')); ?></p>
	</div>
</div>
  • 4行目:投稿者IDからアバター画像を取得&表示。
  • 6行目:ユーザー表示名を取得&表示。
  • 7行目:ユーザー概要を取得&表示。

ここら辺はすんなりと行くところですね!

最近の投稿ループ取得

13行目から、取得する投稿の設定に入ります。配列に設定を格納して、ポスト取得という感じです。

$args = array(
	'post_type' => array('column', 'post'),	//投稿タイプ設定
	'author' => get_the_author_meta('ID'),	//投稿者設定
	'numberposts' => 4						//取得投稿数設定
	);
$author_posts = get_posts($args);					//ポスト取得
  • 14行目:投稿を通常投稿、カスタムポスト’column’の二つから取得。
  • 15行目:現在の記事と同様の投稿者に限定。
  • 16行目:取得ポスト数は4つに。

設定した配列でポストを取得します(18行目)。

最近の投稿表示

19行目から取得したポストをループして表示します。21行目からが面倒くさいカテゴリー取得です。
とりあえず、カテゴリー格納変数を先に宣言しておきます(21行目)。

$current_cat = '';

ポストタイプを判定

カテゴリーと言いつつも…カスタムポストはターム、通常投稿はカテゴリーなので、処理を分岐します。ポストタイプがcolumnならターム取得、それ以外ならカテゴリーを取得しましょう(22行目から)!

if ('column'==get_post_type()) {				//ポストタイプ'column'
	$cat_terms = get_the_terms($post->ID, 'column_cat');    //ターム取得
	//処理省略
}else{								//通常投稿
	$cats = get_the_category();				//カテゴリー取得
	//処理省略
}

表示するカテゴリー名(またはターム名)を取得

子カテゴリーを表示したいので、その為の処理を…。ここではカスタムポストの方を使って見ていきます。
まずはタームをまるっと取得します(23行目)。ターム名は’column_cat’です。お使いのカスタムポストの名前に変えてください。

$cat_terms = get_the_terms($post->ID, 'column_cat');

次に、取得したカテゴリー配列を精査します。
先に宣言していたカテゴリー格納変数と内容がかぶってないor現在格納されているカテゴリーの祖先じゃない場合(何言ってるか分からないですな…)に変数を上書きします。24行目〜28行目の処理をすれば、そうなるはず…です…。

foreach ( $cat_terms as $cat_term ) {
	if ( ! $current_cat || cat_is_ancestor_of( $current_cat, $cat_term ) ) {
		$current_cat = $cat_term;
	}
}

最後に取得したカテゴリーの名前を取得(29行目)。

$cat_name = $cat_term -> name;

通常投稿でもタームをカテゴリーにして同様の処理をしました!

表示

39行目〜50行目でおなじみの表示処理をしています。パーマリンク・サムネイル・投稿日時・さっき取得したカテゴリー・タイトルです。

<li>
	<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
		<?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
	</a>
	<span class="date"><?php the_time('Y.m.d.') ?></span>
	<?php if(!empty($current_cat)){ ?>
		<span class="cat"><?php echo $cat_name; ?></span>
	<?php } ?>
	<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
		<?php the_title(); ?>
	</a>
</li>		

後処理

あとはループを閉めて、記事がない場合の処理をしてクエリをリセットします。

	endforeach;
}else{echo esc_html('投稿がありません。');}
wp_reset_query();

関数を呼び出す

関数化してあるので、任意の場所に

<?php author_recent_post(); >

とやれば、投稿内のお好きな場所に表示できるはずですー!
htmlとかcssは好きにいじれるので、見た目もガンガン変えられますよ!

まとめ

いかがだったでしょうか?

カスタムポストを含めない場合は、ポスト取得時の設定と条件分岐をバッサリ切り捨てれば、いい感じにいくと思います!
複数人で書いているブログで、「好き勝手な場所に入れたいぜ」という方とかは使ってみてくださいー。
ただよくわかって書いているわけではないので、「コピペしたら動かなくなったじゃねぇかコノヤロ」という残念な可能性もありますので、その辺りは自己責任でお願いします…。

それにしたってwordpressって大変ですね…もっと勉強したいと思います…。
それではー!

One Comment

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00