Luxeritas ルクセリタス3系フロントページでカテゴリー別新着記事表示

2018年11月4日

Luxeritas ルクセリタス3系フロントページでカテゴリー別新着記事表示

Luxeritas3.x系がリリースされてかなり経過、Luxeritas4系リリースの話もされる中、あれこれ堂的備忘録もようやくルクセリタス3系(現在3.3.5)に。Luxeritas3にするきっかけは運営する別サイトでルクセリタス3系をテーマに変更したこと。

別サイトというのが別ドメイン、別サブドメインで別分野(別テーマ)で運営してたサイトをひとつにまとめたサイトで、トップページの新着記事(2年以上放置してたので全く新着ではない)一覧を見ても何が何やらわからん状態。

ほとんどアクセスないし、デフォルトでルクセリタス使ってればいいじゃんと思ったけど、知的好奇心を満たすために、この備忘録のネタ作りのために、フロントページにカテゴリー別で新着記事リストを表示するようにカスタマイズしてみた。

固定ページにするべきか子テーマにhome.phpか

ルクセリタス3系フロントページでカテゴリー別新着記事表示
ルクセリタス3系フロントページでカテゴリー別新着記事表示

別サイトというのが下のサイト。何の変哲もないただの初老のおっさんのブログかなんかわからんサイト。ここにWordPressやらダイエットやらバレーボールやらパソコンやらの記事があってわけわかめ状態。

これをカテゴリー別に一覧にしてみたいなあと軽く思ったわけだが、Luxeritas Theme 公式ページ のように固定ページをフロントページにして、カテゴリー指定してn件カテゴリーの新着記事リストを表示できるショートコードを作ってカテゴリー別新着記事を表示するか、Luxeritasのhome.phpを子テーマにコピーして無理矢理カテゴリー別で新着記事を表示させるか悩んだわけでして。

Luxeritas Theme 公式ページのようにすれば AMPページも有効 になるみたいだし固定ページをフロントページしようかと思ったが、果たしてグリッドレイアウト(タイル)がAMP対応になるのかどうかわからないし、結局home.phpをドロくさく編集してフロントページにした。

ちなみに後で試してみたら、グリッドレイアウト(タイル)のままではAMPページに表示されないが、普通のサムネイルつきの記事一覧が表示され、AMPテストも有効と出た。今からやり直すか。

なぜフロントページをAMPに対応させたいのか、アクセス解析を見てるとトップページのAMPページに結構アクセスがあるから。対応していないのだから結局404になってしまうわけでしてそれがもったいないような。

フロントページでカテゴリー別新着記事表示

フロントページのレイアウトは、タイル型の最大2列にする。

大まかな手順は、Luxeritas(親テーマ)のhome.phpを子テーマにコピーして必要なコード以外を削除、WP_Queryで指定カテゴリーの記事リストを指定件数取得、親テーマのlist-excerpt-tile.phpを参照して成型してショートコード登録、home.phpにショートコードを貼り付けるといった感じ。

て、どんな感じかまったくわからないですが、本人が納得してればよしということで。だめな時はコピーした子テーマのhome.phpを削除すれば元に戻る。

home.phpを子テーマにコピー必要なコード以外を削除loop-grid.phpを参照新たにコードを追加

<?php
/**
 * Luxeritas WordPress Theme - free/libre wordpress platform
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * @copyright Copyright (C) 2015 Thought is free.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 * @author LunaNuko
 * @link https://thk.kanzae.net/
 * @translators rakeem( http://rakeem.jp/ )
 */

global $luxe, $wp_query;
get_header();
$observe = 0;	// Intersection Observer;
?>
<div id="section"<?php echo $luxe['content_discrete'] === 'indiscrete' ? ' class="grid"' : ''; ?>>
<div id="list" class="<?php echo $luxe['grid_type']; ?>-<?php echo $luxe['grid_cols']; ?>">
<?php
if( is_front_page() && is_home() && !is_mobile() && !is_paged() ){
?>
<div class="posts-list-upper-front-widget toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">
<?php
dynamic_sidebar( 'posts-list-upper-front' );
?>
</div><!--/.posts-list-upper-front-widget-->
<?php
}
elseif( is_mobile() && is_front_page() && is_home() && !is_paged() ){
?>
<div class="posts-list-upper-front-widget-mob toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">
<?php
dynamic_sidebar( 'posts-list-upper-front-mob' );
?>
</div><!--/.posts-list-upper-front-widget-mob-->
<?php
}
?>
<?php
// 記事一覧上部ウィジェット
if( is_active_sidebar('posts-list-upper') === true ) {
?>
<div class="posts-list-upper-widget toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">
<?php
dynamic_sidebar( 'posts-list-upper' );
?>
</div><!--/.posts-list-upper-widget-->
<?php
}
?>


<?php
// 記事一覧の中央ウィジェット
if(function_exists('dynamic_sidebar') === true && is_active_sidebar('posts-list-middle') === true ) {
?>
<div class="posts-list-middle-widget toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">
<?php
dynamic_sidebar( 'posts-list-middle' );
?>
</div><!--/.posts-list-middle-widget-->
<?php
}
?>


<?php
// 記事一覧下部ウィジェット
if( function_exists('dynamic_sidebar') === true && is_active_sidebar('posts-list-under') === true ) {
?>
<div class="posts-list-under-widget toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">
<?php
dynamic_sidebar( 'posts-list-under' );
?>
</div><!--/.posts-list-under-widget-->
<?php
}
// ページネーションや SNS ボタンのエリア
$bottom_area = false;
$_is_home = is_home();

if( ( isset( $luxe['pagination_visible'] ) && apply_filters( 'thk_pagination', true ) === true ) || ( $_is_home === true && isset( $luxe['sns_toppage_view'] ) ) ) {
	$bottom_area = true;
}
if( $bottom_area === true ) {
?>
<div id="bottom-area" class="toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">
<?php
}
// ページネーション
if( isset( $luxe['pagination_visible'] ) ) {
	echo apply_filters( 'thk_pagination', null );
}
// SNS ボタン
if( $_is_home === true && isset( $luxe['sns_toppage_view'] ) ) {
	get_template_part('sns-front');
}
if( $bottom_area === true ) {
?>
</div>
<?php
}
if( isset( $first ) && isset( $post_count ) && $first < $post_count ) {
?>
</div>
<?php
}
?>
</div><!--/#list-->
</div><!--/#section-->
</main>
<?php thk_call_sidebar(); ?>
</div><!--/#primary-->
<?php echo apply_filters( 'thk_footer', '' ); ?>

Luxeritas(親テーマ)のhome.phpを子テーマにコピーして必要なコード以外を削除。ちなみに元のhome.phpにはグリッドレイアウトの場合、loop-grid.phpをゲットしなはれというようなことが書いてるみたい。

親テーマのloop-grid.phpを見て必要だろうと思われる部分をhome.phpに追加。何故必要だろうと思われるのか、loop-grid.phpを見てもはっきり言ってチンプンカンプンだから。

記事一覧上部ウィジェット、記事一覧中央ウィジェット、記事一覧下部ウィジェットの各ウィジェットエリアを表示。なお、中央ウィジェットはコンテンツエリア幅いっぱいということになる。

リストの何番目に中央ウィジェットを表示するという機能がルクセリタスにあるが、loop-grid.phpのコードを見ても私には理解できなかったし、カテゴリーの記事一覧に組み込むのは私には無理なのでこのようにした。

23行目から42行目はカスタマイズして追加したフロントページ専用のウィジェットエリアを表示するコード。フロントページ専用のウィジェットエリアについての詳細は下のページ。

指定カテゴリ指定件数新着記事を取得するショートコード

<?php
function show_cate_post($atts) {
global $luxe, $wp_query;
extract(shortcode_atts(array(
'cate' => 1,
'show' => 3
), $atts));
$cate = rtrim($cate, ",");
$paged = (int) get_query_var('paged');
$args = array(
'posts_per_page' => $show,
'paged' => $paged,
'orderby' => 'date',
'post_type' => 'post',
'post_status' => 'publish',
'cat' => $cate
);
$the_query = new WP_Query($args);
$cate = explode(",", $cate);
$catenames = "";
$catelinks = "";
$catedes   = "";
foreach ($cate as $cateid) : // カテゴリー名、リンク、説明 取得ループ
$catenames .= get_the_category_by_ID($cateid)." , ";
$catelinks .= "<a href=\"".get_category_link( $cateid )."\" title=\"".get_the_category_by_ID($cateid)."\">".get_the_category_by_ID($cateid)."</a> , ";
$catedes   .= category_description( $cateid )." , ";
endforeach;
$catenames = rtrim($catenames, ", ");
$catelinks = rtrim($catelinks, ", ");
$catedes   = rtrim($catedes, ", ");
$catedes   = strip_tags($catedes);
ob_start();
?>
<h2 class="cate-name"><?php echo $catenames; ?></h2>
<div class="catedes"><?php echo $catedes; ?></div>
<div id="tile-2">
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="toc clearfix">
<section>
<?php get_template_part( 'figure' ); ?>
<h3 class="entry-title" itemprop="headline name">
<a href="<?php the_permalink(); ?>" class="entry-link" itemprop="url"><?php the_title(); ?></a>
</h3>
<p class="meta">
<i class="fa fa-calendar"></i><span class="date published">
<meta itemprop="datePublished" content="<?php the_time('Y-m-d'); ?>T<?php the_time('H:i:sP'); ?>"/><?php the_time('Y年n月j日'); ?>
</span>
<?php if (get_the_modified_time('Y-m-d') != get_the_time('Y-m-d')) : ?>
<i class="fa fas fa-repeat"></i><span class="date">
<time class="entry-date updated" datetime="<?php the_modified_time('Y-m-d'); ?>T<?php the_modified_time('H:i:sP'); ?>" itemprop="dateModified">
<?php the_modified_time('Y年n月j日') ?>
</time></span><?php endif; ?>
</p>
<div class="excerpt" itemprop="description"><div class="exsp">
<?php 
$str = get_the_content();
$count = 60;
$more = '...';
echo wp_html_excerpt( $str, $count, $more );
 ?>
</div></div>
</section>
</div><!--/.toc-->
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><span class="aka-futo"><?php echo "残念!投稿が見つかりません" ; ?></span></p>
<!-- 投稿が無い場合の処理 -->
<?php endif; ?>
</div><!--/#tile-3-->
<div class="fon14" style="text-align:right;margin-bottom:50px;">
<?php echo $catelinks; ?> 記事一覧
</div>
<?php
$lis = ob_get_contents();
ob_end_clean();
return $lis;
}
add_shortcode('cate-post', 'show_cate_post');

loop-grid.phpでタイル型の場合list-excerpt-tile.phpをゲットということなので、list-excerpt-tile.phpを参照してWP_Queryサブループで指定カテゴリーの指定件数新着記事を取得するショートコードを作成、登録する。

上のコードをそのままfunctions.phpに貼り付ければいいのだが(その場合先頭の<?phpはいらない)、子テーマフォルダにshoフォルダを作り、上のコードを貼り付けUTF-8Nで保存したcate-post.phpを作成shoフォルダにアップロード。

functions.phpに下のコードを追記する。

get_template_part( 'sho/cate', 'post' );

41行目、<?php get_template_part( 'figure’ ); ?> の部分、投稿サムネイルを表示する部分なのだがどうすればいいかわからなかったので、その部分をコピーしてfigure.php としてファイルを作り、子テーマフォルダにアップする。内容は下のようなもの。UTF-8Nで保存。

<?php
global $luxe, $wp_query;
?>
<figure class="term">
<?php
if( isset( $luxe['thumbnail_visible'] ) ) {
$attachment_id = false;
$post_thumbnail = has_post_thumbnail();
if( $post_thumbnail === false && isset( $luxe['no_img'] ) ) {
$attachment_id = thk_get_image_id_from_url( $luxe['no_img'] );
if( $attachment_id !== false ) $post_thumbnail = true;
}
if( $post_thumbnail === true ) {	// サムネイル
$thumb = $luxe['thumbnail_is_size_tile'];
?>
<a href="<?php the_permalink() ?>" aria-hidden="true"><?php
if( $attachment_id !== false ) {
echo wp_get_attachment_image( $attachment_id, $thumb, 0, array( 'itemprop' => 'image', 'class' => 'thumbnail' ) );
}
else {
$attachment_id = get_post_thumbnail_id();
if( thk_thumbnail_exists( $attachment_id, $thumb ) === false ) {
$thumb = 'full';
}
the_post_thumbnail( $thumb, array( 'itemprop' => 'image', 'class' => 'thumbnail' ) );
}
?></a>
<?php
}
elseif( isset( $luxe['noimage_visible'] ) ) {
$no_img_png = 'no-img-320x180.png';
$no_img_wid = 320;
$no_img_hgt = 180;
switch( $luxe['thumbnail_is_size_tile'] ) {
case 'thumb75':
$no_img_png = 'no-img-75x75.png';
$no_img_wid = 75;
$no_img_hgt = 75;
break;
case 'thumbnail':
$no_img_png = 'no-img-150x150.png';
$no_img_wid = 150;
$no_img_hgt = 150;
break;
case 'medium':
case 'user_thumb_1':
case 'user_thumb_2':
case 'user_thumb_3':
$no_img_png = 'no-img-300x225.png';
$no_img_wid = 300;
$no_img_hgt = 225;
break;
case 'large':
case 'full':
$no_img_png = 'no-img.png';
$no_img_wid = 1024;
$no_img_hgt = 768;
break;
default:
break;
}
$no_img_org = '<img src="' . TURI . '/images/' . $no_img_png . '" itemprop="image" class="thumbnail" alt="No Image" title="No Image" width="' . $no_img_wid . '" height="' . $no_img_hgt . '" />';
if( !isset( $luxe['lazyload_thumbs'] ) ) {
$no_img = $no_img_org;
}
else {
$no_img = '<img src="' . TURI . '/images/trans.png" data-src="' . TURI . '/images/' . $no_img_png . '" itemprop="image" class="lazy thumbnail" alt="No Image" title="No Image" width="' . $no_img_wid . '" height="' . $no_img_hgt . '" />';
if( isset( $luxe['lazyload_noscript'] ) ) {
$no_img .= '<noscript>' . $no_img_org . '</noscript>';
}
}
?>
<a href="<?php the_permalink() ?>" aria-hidden="true"><?php echo $no_img; ?></a>
<?php
}
if( isset( $luxe['lazyload_thumbs'] ) && $observe < 3 ) {
echo '<script>thklazy()</script>';
}
++$observe;
}
?>
</figure><!--/.term-->
[cate-post cate="1,63″ show="6″]

ショートコードの仕様は、カテゴリーと表示件数を指定するようになっている。表示したいところに上の様に記入すればよい。cateでカテゴリーIDでカテゴリーを指定、showで表示件数を指定する。複数カテゴリーの指定もできる。カンマ区切りで続けてカテゴリーIDを指定すればよい。

表示についても、カテゴリー名、カテゴリー説明、カテゴリーリンクも複数指定に対応して連記されるようにしている。

ルクセリタスはカテゴリー一覧ページにhtmlタグ使用可能で説明を表示できる機能があるが、フロントページではカテゴリー名の下にhtmlタグを抜いてカテゴリー説明を表示する。

home.phpにショートコードを追加

home.phpを子テーマにコピー必要なコード以外を削除し新たにコードを追加 のhome.phpテンプレートの55~56行目、69~70行目あたりに下のようなショートコードを実行するコードを追記する。

<?php echo do_shortcode('[cate-post cate="1,63" show="6"]'); ?>
<?php echo do_shortcode('[cate-post cate="275" show="6"]'); ?>

要するに記事一覧上部ウィジェットと中央ウィジェットとの間、中央ウィジェットと記事一覧下部ウィジェットとの間にショートコードを埋め込むということ。

ちなみに、固定ページや投稿ページでショートコードを使う場合は、ショートコードを下の様に<div id="list"></div>で囲わないと表示されないようだ。

<div id="list"> 

[cate-post cate="1,63″ show="6″]

</div>

とりあえず以上で思ったようにフロントページにカテゴリー別で新着記事が表示されて、ページ読み込みの速度もさほど落ちず(画像の最適化のみ)、Luxeritasを使えてるのではないでしょうかね。

実際の動作は下記サイトで確認ください。この備忘録でフロントページをカテゴリー別新着記事一覧にしてもあまり意味がないように思いますから。