ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

【WordPress】日付・色分けカテゴリ・投稿タイトルのみの新着情報を実装する

July 31 2018

WordPressで企業サイトを構築しててよくあるのがトップの固定ページに「お知らせ」とか「ニュース」とか「新着情報」という形で、投稿へのリンクを表示させるという物。
テーマによっては最初から実装されてたりしますし、そういうプラグインも色々あるんですがいまいち多機能過ぎて。

アイキャッチ画像、投稿の抜粋文、メタ情報etc・・いや、そんなんいらんねん。
投稿日とタイトルだけのやつなら色々と見つかるのだけど、もう一声。
投稿カテゴリーを色分けして表示させる、というのがなかなかなかったりする。
テンプレートに書き込むよりも出来たらショートコードでの実装が色々と楽やし出来たらそれで。
(テンプレートに書き込むと数ヶ月ぶりに触った時に見失ったりするため)

カテゴリー名を取得する時にきっとスラッグも取得出来るやろうしスラッグ名をCSSに指定してやれば色分けもいけるやろ、と漠然としたまま試行錯誤開始。
ちなみにこれはカスタム投稿タイプや固定ページには非対応にしておく(時間がない&面倒くさい&また後日って事で)

定義リストで日付をdtタグに、spanで囲んだカテゴリーもdtタグ、そしてddタグに投稿内容を。

で、完成したのが以下。これをfunctions.phpに書き込む。

function oc_topics_list( $atts ) {
	$settings = shortcode_atts( array(
		'cat_slug' => '',
		'count' => 10,
		'post_type' => 'post',
	), $atts );
	$html = "";
	
	$args = array(
		'posts_per_page'   => $settings["count"],
		'orderby'          => 'date',
		'order'            => 'desc',
		'post_type'        => $settings["post_type"],
		'post_status'      => 'publish'
	);
	
	if( !empty($settings["cat_slug"]) ) {
		$args["category_name"] = $settings["cat_slug"];
	}
	
	$topics = get_posts( $args );

	
	foreach($topics as $topic) {
		$date   = get_the_time("Y年m月d日",$topic);
		$cats   = get_the_category($topic->ID);
		$url    = get_permalink($topic);
		$catname = $cats[0]->cat_name;
		$catslug = $cats[0]->slug;
		$title  = get_the_title($topic);

		$html .= "<dt class=\"date\">{$date}<span class=\"{$catslug}\">{$catname}</span></dt>
		<dd class=\"content\"><a href=\"{$url}\">{$title}</a></dd>
		";
	}	
		return "<dl class=\"topics-list\">{$html}</dl>";
}
add_shortcode( 'topics_list', 'oc_topics_list' );

で、固定ページや投稿の編集画面で新着情報を表示させたいとこで[topics_list]で表示可能です。
spanタグにはスラッグ名でクラスが入るのでそれを好きな色に指定してあげればよいです。
表示数の制限は[topics_list count=10]という感じで調整。
[topics_list count=10 cat_slug=”hoge”]などで表示カテゴリの制限も出来るけど、今回は複数のカテゴリを色分け表示するのが目的なので参考までに。

あとはアレですな。
投稿カテゴリを作った際にきっちりとスラッグを英語で作成しておく事。(意外にこれを忘れるパターンが多い)

| Posted in Wordpress | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jul 2018 August 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31