★ 今日はこんな記事も読まれています ★

Luxeritas のショートコード機能を使って php でカテゴリの新着記事を表示させる

2018年5月27日Luxeritas

ルクセリタスluxeritas ショートコード
Luxeritas に搭載された定型文機能に搭載されたショートコードを使って php を実行させる方法です。

Luxeritas の作者るなさんから誤りをご指摘いただいた部分を修正しての投稿です。少々忙しかったことや、一時疎開させていたテキストをなくしてしまったのでかなり間があいてしまいましたが、これで問題ないはず。

Luxeritas で PHP を実行させる方法

Luxeritas の機能を使って PHP を実行させるには、[Luxeritas] > [定型文登録] > [ショートコードタブ] で、ショートコード名とコードを追加しておく必要があります。

ルクセリタスluxeritas ショートコード

この画面で【新規追加】を押すと、ショートコード編集画面が開きます。

  • ラベルはビジュアルエディタのショートコード挿入時に表示される見出しで、日本語が使えます
  • ショートコードは [[ショートコード]] の形で利用する際のショートコードにあたり、後から編集することはできません（バージョン3.14現在）

ルクセリタスluxeritas ショートコード

下の二つのオプションでは、PHPコードとして実行させるか、表示させるか・有効にするかを設定できます。

  • PHPコードとして実行させたいときは有効に
  • テキストとして挿入させるものはPHPにはチェックを入れない

contents 内の白い部分にコードを記入していきます。

 

カテゴリーを指定して新着記事を表示させる

好きなカテゴリーの新着記事を表示させてみます。

ショートコードでは、新着件数とカテゴリの２つの引数を使い、 [cat_new_posts catid="カテゴリーID" newposts="新着件数"] の形で使えるようにします。

  • ショートコード名：cat_new_posts
  • 引数：カテゴリIDを “catid", 表示させたい件数を “newposts"

 

コード

global $post;
$target_cat=$args["catid"];//カテゴリIDを変数に代入
$max_posts=$args["newposts"];//新規投稿数を変数に代入

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

/*　表示させるための $contents に代入　*/
$contents ='';
$itemlist = get_posts( $newitems );
$contents .= '<ul>';

/*　　新着表示件数ループ　　*/
foreach ( $itemlist as $post ) :
setup_postdata( $post );
$contents .= '<li>';
//$contents .= get_the_post_thumbnail($post_id,'thumbnail'); //サムネイルを表示させたい時
$contents .= get_the_date('y/m/d');
$contents .=' &nbsp;<a href="';
$contents .= get_the_permalink();
$contents .='">';
$contents .=get_the_title();
$contents .= '</a></li>';
endforeach;
/*　　ループ終わり　　*/

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

ショートコードは [cat_new_posts catid="96" newposts="5"] の形になります。

[cat_new_posts catid="96" newposts="5"]

これを実行すると

もっと見る

Luxeritas カテゴリの新着5件が表示されていたら成功です。

 

デザインを整える

このままでは見栄えが悪いので、スタイルを適用します。

ここでは<div class="newposts-list">新着記事</div>で囲んで、中のul と li をいじります。直接ULをデザインしたければ、コードの<ul>にクラスを加えて<ul ="つけたいクラス">にしても構いません。

<style>.newposts-list {
position: relative;
margin: 3.5em 0em 1.8em;
padding: .45em 1em;
border: solid 1px #6F4A7A;
}
.newposts-list .box-title {
position: absolute;
display: inline-block;
top: -26px;
left: -1px;
padding: 2px 9px;
height: 26px;
line-height: 23px;
vertical-align: middle;
background: #6F4A7A;
color: #ffffff;
font-weight: normal;
border-radius: 5px 5px 0 0;
}
.newposts-list a{text-decoration:none;
position: relative;font-weight:400;
}
.newposts-list a::before {
font-family: 'FontAwesome';
content: "\f105";
margin-right:.22em;
color:#333;
}
.newposts-list ul{list-style-type:none; padding:0;margin:0;}
.newposts-list p{text-align: left; margin: 0;}
</style>

上のスタイルを適用した結果

Chrome カテゴリ新着記事3件

もっと見る

デザインセンスがない僕にはこれが精一杯。みなさんはもっと綺麗にできるはず。

 

Luxeritas 以外のテーマでショートコードを利用する方法

Luxeritas で登録したショートコードは、Luxeritas の子テーマ /wpy/wp-content/themes/luxech/shortcodes 内にファイルとして保存されています。

拡張子は［.inc］となっていますが、テキストです。これをテキストエディタで開くと、［<?php add_shortcode('cat_new_posts’］こんなのが書かれています。これを function.php に移植することで、Luxeritas 以外のテーマでもショートコードが使い続けられるようになっています。

（行頭の <?php は外す）

Luxeritas