Wordpress で固定ページ内に記事一覧を表示するショートコードを追加する(Luxeritas 対応版)

はじめに

「Wordpress の固定ページ内に記事一覧を表示したいなー」と思ったので、やってみました。

あ、「記事一覧(最新 10件)」というのは単なるタイトルタグなので、任意で追加してください。スクショを載せておきます(いつかレイアウトを変えちゃうかもしれないので)

実現にあたり、こちらの記事を大いに参考にさせていただきました。ありがとうございます(∩´∀｀)∩

https://yaruzou.net/luxeritas-shortcode-phpyaruzou.net

上記のサイトの説明に加えて、Luxeritas の記事一覧のように、タイル上に記事を並べるようにタグやクラスを適宜改造した版をこれから説明とともに書いていきます。

注意事項: Luxeritas 自体のアップデートによって、クラス名などが変更される可能性もあります。その時には適宜追従しましょう₍₍ ◝('ω'◝) ⁾⁾ ₍₍ (◟'ω')◟ ⁾⁾

Luxeritas のショートコード登録機能の使い方

wordpress 管理画面似ある下記のメニューから「定型文登録」を選択します。

定型文登録を選択すると、画面右側に「定型文」「ショートコード」などのタブが表示されるのでショートコードを選択

新規追加ボタンをクリックして、コードの登録を行っていきます。

ラベルは分かりやすい名前にしてもらって、ショートコードは自分のブログに埋め込む際に使う文字列を指定します。

他のサイトを見ていると、ショートコードの追加のために FTP で php ファイルを特定ディレクトリにアップロード、なんて解説がありますが、Luxeritas は管理画面経由で登録できるので便利ですね٩( 'ω' )و 

記事一覧を表示するスクリプト

実際の Contents 内に記述するコードは下記のように改造しました。

global $post, $luxe;
$target_cat_name=$args["category_name"];//カテゴリ名を変数に代入
$max_posts=$args["newposts"];//新規投稿数を変数に代入

/*　　取得する条件　　*/
$newitems = array(
  'posts_per_page' => $max_posts,
  'offset'=> 0,
  'category_name' =>$target_cat_name,
  'orderby' => 'date',
  'order' => 'DESC',
  'post_type' => 'post',
  'post_status' => 'publish',
);

/*　表示させるための $contents に代入　*/
$contents ='';
$itemlist = get_posts( $newitems );
$contents .= '<div id="list">';
// ここで何列で並べるかを指定する。ここでは2列で記事が並べられるように指定している
// ここは変数化してもいいかもしれない
$contents .= '<div id="tile-2">';

/*　　新着表示件数ループ　　*/
foreach ( $itemlist as $post ) :
setup_postdata( $post );
$contents .= '<div class="toc grid clearfix">';
$contents .= '<section>';
$contents .= '<figure class="term">';
if ( has_post_thumbnail($post_id) ) {
  $contents .= get_the_post_thumbnail($post_id, array(320, 180), array('class' =>  'thumbnail wp-post-image')); //サムネイルを表示させたい時
} else {
  $attachment_id = thk_get_image_id_from_url( $luxe['no_img'] );
  $contents .= wp_get_attachment_image( $attachment_id, array(320, 180), 0, array( 'itemprop' => 'image', 'class' => 'thumbnail' ) );
}
$contents .= '</figure>';
$contents .= '</section>';
$contents .= '<h2 class="entry-title" itemprop="headline name">';
$contents .= '<a href="';
$contents .= get_the_permalink();
$contents .= '" class="entry-link">';
$contents .= get_the_title();
$contents .= '</a>';
$contents .= '</h2>';
$contents .= '<p class="meta">';
$contents .= '<i class="far fa-calendar-alt"></i><span class="date"><time class="entry-date updated" itemprop="datePublished">';
$contents .= get_the_date('Y年m月d日');
$contents .= '<;/time></span>';
$contents .= '</div>';
endforeach;
/*　　ループ終わり　　*/

$contents .= '</div>';
$contents .= '</div>';
$contents .= '<p><a href="'.get_category_link($target_cat).'">もっと見る</a></p>';
wp_reset_postdata();

固定ページ内に記事一覧を埋め込む

そして、保存が済んだら、固定ページ内で下記のように記載します。

cat_new_posts category_name="Hardware" newposts="10"

となっている箇所が該当箇所です。

category_name は任意の表示したいカテゴリを指定してください。

これで固定ページ内に 2カラムで記事が表示されるようになると思います٩(ˊᗜˋ*)و