なぜ特定年月の投稿を一覧表示するのか
通常のカレンダーは、年月日だけの表示です。記事ごとの情報を表示すれば、一覧が楽しくなって記事も選ばれやすい。そこで、年月で抽出した投稿をタイトルとアイキャッチで表示することにしました。
固定ページに投稿一覧を表示する
表示するページは年月ごとのため、それぞれ固定ページにします。
固定ページでは、指定の年月と該当する投稿のタイトルとアイキャッチを表示し、それぞれ投稿へのリンクを付けます。
年月の指定にはカテゴリーを使い、カテゴリーの指定と一覧の取得にはショートコード*を使うことにしました。
*ショートコードとは
方法の手順
1.カテゴリーに年月を登録
WordPRessの管理画面>投稿>カテゴリー
「年月」カテゴリーを登録します。
例)2020年7月の場合
名前「2020年7月」スラッグ「202007」
親、概要は必要でしたら入力してください。
2.1を投稿に登録
WordPRessの管理画面>投稿>編集>カテゴリー
「年月」を選択、保存します。
例)2020年7月の場合
図はカテゴリー「7月」が 1 のスラッグ「202007」なので、チェックを入れます。
「アイキャッチ画像」は、一覧表示で画像を使うため、ここで登録しておきます。
3.functions.php に「特定年月で投稿を抽出する」ショートコードを書き込む
functions.php は、当該テーマのものを上書きします。子テーマの場合、子テーマの functions.php をFTPダウンロードします。
ダウンロードしたら、バックアップ*のため複製して保存します。上書きする内容は下記。
getMonthlyList … 関数名。お好きな名前で構いません。
"cat" … カテゴリーを指定。
$atts['cat'] … ショートコードで使う「カテゴリー指定」変数名。お好きな名前で構いません。
getCategoryArticle … ショートコードで使う変数名。お好きな名前で構いません。
*functions.php を上書き、アップロードして不具合が起きた場合。バックアップをアップロードすれば、事なきを得られます😃
*functions.php を上書き、アップロードして不具合が起きた場合。バックアップをアップロードすれば、事なきを得られます😃
<?php
function getMonthlyList($atts, $content = null) {
extract(shortcode_atts(array(
"num" => '-1', //全件
"cat" => $atts['cat'] //固定ページのショートコードから取得
), $atts));
// 処理中のpost変数をoldpost変数に退避
global $post;
$oldpost = $post;
// 指定カテゴリーの投稿を取得
$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
$retHtml = '
// アイキャッチ画像を丸く切り抜いた形で表示するためのスタイルを定義
<style>
:
</style>
if($myposts) {
$retHtml .= '<div class="getPostDispArea">';
foreach($myposts as $post) : $count++;
// 月初の投稿なら
if ($count <= 1):
// 投稿年月をセット
$year = get_the_time('Y');
$month = get_the_time('n');
$retHtml .= '<h2>' .$year . '年' . $month . '月' .'</h2>';
endif;
$retHtml .= '<div class="getPost">';
setup_postdata($post);
// アイキャッチをセット
if ( has_post_thumbnail() ) {
$retHtml .= '<div class="getPostImgArea">'.'<a href="' . get_permalink() . '">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</a></div>';
function getMonthlyList($atts, $content = null) {
extract(shortcode_atts(array(
"num" => '-1', //全件
"cat" => $atts['cat'] //固定ページのショートコードから取得
), $atts));
// 処理中のpost変数をoldpost変数に退避
global $post;
$oldpost = $post;
// 指定カテゴリーの投稿を取得
$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
$retHtml = '
// アイキャッチ画像を丸く切り抜いた形で表示するためのスタイルを定義
<style>
:
</style>
if($myposts) {
$retHtml .= '<div class="getPostDispArea">';
foreach($myposts as $post) : $count++;
// 月初の投稿なら
if ($count <= 1):
// 投稿年月をセット
$year = get_the_time('Y');
$month = get_the_time('n');
$retHtml .= '<h2>' .$year . '年' . $month . '月' .'</h2>';
endif;
$retHtml .= '<div class="getPost">';
setup_postdata($post);
// アイキャッチをセット
if ( has_post_thumbnail() ) {
$retHtml .= '<div class="getPostImgArea">'.'<a href="' . get_permalink() . '">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</a></div>';
} else {
$retHtml .= '';
}
// 投稿のタイトルをセット
$retHtml .= '<div class="getPostStringArea">';
$retHtml.= '<h4 class="getPostTitle">';
$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';
$retHtml.= '</h4>';
$retHtml.= '</div>';
$retHtml.= '</div>';
endforeach;
$retHtml.= '</div>';
} else {
$retHtml='<p>記事がありません。</p>';
}
$retHtml .= '';
}
// 投稿のタイトルをセット
$retHtml .= '<div class="getPostStringArea">';
$retHtml.= '<h4 class="getPostTitle">';
$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';
$retHtml.= '</h4>';
$retHtml.= '</div>';
$retHtml.= '</div>';
endforeach;
$retHtml.= '</div>';
} else {
$retHtml='<p>記事がありません。</p>';
}
// oldpost変数をpost変数に戻す
$post = $oldpost;
return $retHtml;
}
// 固定ページに特定年月の投稿データを渡す
add_shortcode("getCategoryArticle", "getMonthlyList");
?>
$post = $oldpost;
return $retHtml;
}
// 固定ページに特定年月の投稿データを渡す
add_shortcode("getCategoryArticle", "getMonthlyList");
?>
参考)ほぼコピペ。お世話になりありがとうございました。
4.特定年月の固定ページを作成
WordPRessの管理画面>固定ページ>新規作成
一覧表示する年月のページを作成します。
5.4に「特定年月で投稿を取得する」ショートコードを登録
3 の内容に合わせて登録します。書き方は下記。
[関数名 カテゴリーの変数名=カテゴリーのtag_id]
関数名 … 3 の「関数名」。例では getCategoryArticle でした。
カテゴリーの変数名 … 3 の「カテゴリーの変数名」。例では cat でした。
カテゴリーのtag_id … WordPRess 管理画面で、カテゴリーをマウスオーバーすると、画面の左下にURLが表示されます。このうち「tag_id=」の数字を指定します。
例)カテゴリー「2020年7月」(スラッグ「202007」)の投稿をすべて表示する
[getCategoryArticle cat=335]
WordPressでのウェブサイト「今日も良き日を♪」では、花写真を掲載しています。そのためカレンダーは、通常の年月日ではなく花の表示が合っています。
実例のWebサイト
「今日も良き日を♪」2020年5月はこんな感じ。
アイキャッチを丸く表示するには、3 の functions.php で、img のスタイルに「border-radius: 50%;」を指定します。
カテゴリーを特定することにより、特定の投稿を抽出する方法は、年月以外にも使えます。
実例では、検索やハッシュタグでも一覧に…するつもりです😃
コメント
コメントを投稿