work.log

元エンジニアの備忘録的ブログ

WordPressで記事一覧を出力するショートコード

投稿:2013-08-15 19:14  更新:

WordPress のカスタマイズ記事がゴチャゴチャしてきたので少しだけ整理。

カテゴリ・タグで分けてはいても、ブログだと古い記事を遡って探すのはちょっと面倒ですので、関連記事をまとめた固定ページを作ろうと思います。

手動で書いてもいいですが、折角 WordPress を使っているのでここはショートコードを使った自動表示にすることにしました。

記事一覧を出力するショートコードのサンプル

アイキャッチ画像も抜粋表示もいらないので、とりあえずタグに紐づいた記事一覧を表示させてみます。

functions.php に以下の様なコードを追加。

function my_posts_list( $tag = FALSE  ) {

	if ( $tag ) {

		global $post;
		$args = array(
			'tag_slug__in' => $tag['tag'],
			'nopaging'     => 1,
			'order'        => ASC,
			'orderby'      => date
		);

		$my_query = new WP_Query( $args );

		if( $my_query->have_posts() ) {

			$list = "<ul style='line-height:2.5;'>\n";

			while ( $my_query->have_posts() ) {

				$my_query->the_post();
				$permalink = get_permalink();
				$title     = get_the_title();

				$list .= '<li>';
				$list .= "<a href='$permalink' title='$title'>$title</a>";
				$list .= "</li>\n";

			}

			$list .= "</ul>\n";

			wp_reset_query();

		}

	}

	return $list;

}
add_shortcode( 'mypostslist', 'my_posts_list' );

WP_Query を使って、タグの slug 名をキーに記事一覧を引っ張り、日付の昇順でソートして表示するようにしました。

後は表示させたい場所で、[mypostslist tag=”slug”] というショートコードを書くと以下のように表示されます。

ショートコードの表示例

早速、固定ページにショートコードを貼り付けてサマリーページを作ってみましたが、アーカイブページを辿るよりは見やすくなったかなという感じです。

記事一覧を出力するショートコードについてはこんな感じです。