Luxeritas ショートコードで カテゴリー別 記事一覧を表示

まず最初に、WordPressの標準テーマ Twenty Seventeen で活用していた「ショートコード」と同じように、子テーマの【 functions.php 】を使ってショートコード作成して見る。

/*----------------------------------------------------*/
function fnc_hello() {
    return "functions.php での ショートコードのテスト";
}
add_shortcode('hello', 'fnc_hello');
/*----------------------------------------------------*/

/*----------------------------------------------------*/
/* 指定されたカテゴリのリストを表示するショートコード */
/*----------------------------------------------------*/
function catlists($atts) {

	$catid = $atts["catid"];//カテゴリIDを変数に代入
	$depth = 0;
	$html = '';

	$args = array(
	'show_option_all'    => '',
	'orderby'            => 'name',
	'order'              => 'ASC',
	'style'              => 'list',
	'show_count'         => 1,
	'hide_empty'         => 1,
	'use_desc_for_title' => 1,
	'child_of'           => $catid,
	'feed'               => '',
	'feed_type'          => '',
	'feed_image'         => '',
	'exclude'            => '', 
	'exclude_tree'       => '',
	'include'            => '',
	'hierarchical'       => 1,
	'title_li'           => '',
	'show_option_none'   => __( '' ),
	'number'             => null,
	'echo'               => 0,
	'depth'              => $depth,
	'current_category'   => 0,
	'pad_counts'         => 0,
	'taxonomy'           => 'category',
	'walker'             => null
	);
    
	$html .= wp_list_categories($args);
	return $html;
}
add_shortcode('catlist', 'catlists');
/*----------------------------------------------------*/

作成したショートコードが、正しく動作するかテストするための固定ページを作成。

固定ページを表示してみる。正しく動作しているが、「カテゴリーリスト」のマーカーが気になる。

<div>[hello]</div>
<div>ロードコースのカテゴリー</div>
<ul style="list-style: none;">[catlist catid=3]</ul>
<div>カスタマイズのカテゴリー</div>
<ul style="list-style: none;">[catlist catid=4]</ul>

「カテゴリーリスト」のマーカーが消え、見易くなった。

「Luxeritas」→「ショートコード登録」を選択する。

ショートコード登録画面が表示されるので、「新規追加」をクリックする。

ショートコード編集画面が開くので、
【ラベル】には、ショートコードの名称（ショートコード挿入時に表示される見出しになる）を、
【ショートコード】には、ショートコードの記述様式の通りに設定する。
【Contents 】には、ショートコードのPHPを、
【PHP Code】にチェックを入れ、
【有効化】にもチェックを入れ、「保存」をクリックする。

global $post;
$target_cat=$args["catid"];//カテゴリIDを変数に代入
$max_posts=$args["num"];//記事数を変数に代入

/*　　取得する条件　　*/
$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 .= '<div class="kkijiDispArea">';

/*　　記事数分ループ　　*/
foreach ( $itemlist as $post ) :
setup_postdata( $post );
$contents .= '<div class="kkiji">'; // 記事ごとの区切りのdiv

//サムネイルを表示する	
$contents .= '<div class="kkijiImgArea">';
$contents .= get_the_post_thumbnail($post_id, 'thumbnail');
$contents .= '</div>';

// 文章エリアをdivで囲う
$contents .= '<div class="kkijiStringArea">';

// タイトルとリンクの設定
$contents .= '<div class="kkijiTitle">';
$contents .= '<a href="';
$contents .= get_the_permalink();
$contents .='">';
$contents .= get_the_title();
$contents .= '</a></div>';

// 本文の抜粋して取得して表示
$contents .= '<div class="kkijiContent">';
$contents .= '<a href="';
$contents .= get_the_permalink();
$contents .='">';
$contents .= mb_substr(get_the_excerpt(),0,90);
$contents .= '</a></div>';

// 投稿年月日を取得
$year = get_the_time('Y'); // 年
$month = get_the_time('n'); // 月
$day = get_the_time('j');	// 日

// 更新年月日を取得
$myear = get_the_modified_date('Y');  // 年
$mmonth = get_the_modified_date('n'); // 月
$mday = get_the_modified_date('j');  // 日

$contents .= '<div style="text-align:right;"><span>更新日：' . $myear . '年' . $mmonth . '月' . $mday . '日</span>';
$contents .= '<span>　投稿日：' . $year . '年' . $month . '月' . $day . '日</span></div>';	

$contents .= '</div></div>';

endforeach;
/*　　ループ終わり　　*/

$contents .='</div>';
$contents .= '<p style="text-align: right;"><a href="'.get_category_link($target_cat).'">もっと見る</a></p>';

wp_reset_postdata();

/*------------------------------------------*/
/* ショートコードでの記事一覧表示用            */
/*------------------------------------------*/
.kkijiDispArea .kkiji {
 padding: 5px 10px 5px 5px;
 margin: 0px 10px 0px 5px;
 border:1px solid #bbb;
 word-wrap:break-word;
 max-width:100%;
 border-radius:5px;
 margin-bottom: 20px;
 background: #f0ffff;
}

.kkijiDispArea a {
 color: #333;
 background: #fbfaf8;
 display: block;
}
 
.kkijiDispArea a:hover{
 background: #fee;
}

.kkijiDispArea .kkiji:after {
    content: '';
    display: table;
    clear: both;
}
 
.kkijiImgArea {
	width: 20%;
    float: left;
}
 
.kkijiStringArea {
    width: 80%;
	padding-left: 15px;
    font-size: 75%;
    float: left;
}
 
.kkijiTitle {
 font-size: 14px;
 font-weight: bold;
}
/* ショートコードでの記事一覧表示用 ここまで   */
/*-----------------------------------------*/

ショートコードの登録が完了すると、ショートコード一覧に【ラベル】と【ショートコード】が表示され、編集が可能になる。

Luxeritasでは、編集画面のツールバーに、ショートコードのアイコンが追加されている。

ショートコードアイコンをクリックすると、ショートコードのプルダウンメニューが開き、挿入したいショートコードを選択すれば、ショートコードが自動で挿入できる様になっている。

テスト用の固定ページを作成。

作成した固定ページを表示してみる。

Luxeritas のショートコードは、子テーマ「luxech」の「shortcodes」の中に、拡張子［.inc］で保存される。

この［.inc］ファイルの中身はテキストで、テキストエディタで開くと次の様になっている。

WordPressの標準テーマ Twenty Seventeen で作成していた「ショートコード」の記述様式。