小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

Luxeritasで固定ページに特定カテゴリ記事のタイルギャラリーを表示する ~Luxeritasカスタマイズ

Luxeritas
この記事は約5分で読めます。

Luxeritasにおいて、固定ページに特定カテゴリの記事リストを出力する方法を紹介します。
タイルギャラリーとして表示します(※要Bootstrapモード)
他サイトの記事と異なり、Luxeritas に特化しているのが売りです。
(記述を少なくでき、スタイルを合わせられる)

【追記:2020/02/10】
本記事の方法は現行バージョン(v3.7)でも使えます。
ただし記事執筆当時は、Luxeritasにまだタイル機能が実装されていませんでした。
Luxeritas本体の「list-excerpt-tile.php」を流用すれば更に簡略化できるのかもしれません。

スポンサーリンク
この記事を読む方へのオススメ

見本

私が実装したのは、小説紹介の記事リストを作りたかったため。
見本はこちらのページ下部を御覧ください。

楓のおすすめ
レビュアー紹介 楓(読み専)。 新人賞の下読み経験豊富。 とにかく活字中毒で、本がなくては生きていけない。 読書タイプは、作品を俯瞰しながら眺めてい...

将来変更してしまっていた場合のためにSSも載せておきます。

 

タブレットで2列表示、スマートフォンで1列表示となります。

スポンサーリンク

設置方法

1 固定ページ内でPHPを読み込めるようにする

こちらの記事を御参照ください。

WordPressの記事やテキストウィジェットの中でPHPを使えるようにする
テキストウィジェットに PHPの実行コード 書いても 動かないよ~   それWordPressの仕様だから だけどPHPファイ...

2 PHPファイルを作る

名前は何でもいいのですが、slist.phpとでもしておきます。
ファイルには次のコードを記述します。

<div id="slist" class="container-fluid">
<div class="row list-card row-eq-height">
<?php
 $wp_query = new WP_Query();
 $my_posts = array(
 'post_type' => 'post',
 'category_name' => '【カテゴリスラッグ名】',
 'posts_per_page'=> '【表示したい数】',
 );
 $wp_query->query( $my_posts );
 if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
?>
<div class="toc col-xs-12 col-sm-6 col-lg-4">
<div class="card">
<div class="terms"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
<div class="entry-title"><a href="<?php the_permalink(); ?>" class="entry-link"><?php the_title(); ?></a></div>
<?php
 $meta_under = false;
 get_template_part('meta');
?>
<?php echo get_the_excerpt(); ?>
<Div Align="right"><a href="<?php the_permalink() ?>">続きを読む</a></div>
</div></div>
<?php endwhile; endif; wp_reset_postdata(); ?>
</div></div>

高さを揃えたくない場合は2行目の「row-eq-height」を削除します。

レイアウトを変えたいときは「col-xs-12 col-sm-6 col-lg-4」を変更します。
xsがスマートフォン、smがタブレット、lgがパソコン。
Bootstrapのグリッドシステムでは12÷(指定した数字)=カラム数となります。

詳しく知りたい場合はこちらを。

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
Bootstrapのグリッドシステムとは? 実例と一緒にグリッドシステムに用意されたクラスを復習します

サムネイルサイズを変更したい場合、パラメータについてはこちらを御参照ください。

テンプレートタグ/the post thumbnail - WordPress Codex 日本語版

3 CSSを記述する

本サイトの例です。

.row-eq-height {
 display: flex;
 flex-wrap: wrap;
}
#slist .list-card{
margin-top:20px;
}
#slist .entry-title{
font-size: 16px;
}
#slist .toc{
padding: 5px !important;
}
#slist .card{
border: 2px solid #f5f5f5;
padding: 10px;
}
#slist .meta{
margin-bottom:5px;
}
#slist .term img{
max-width:200% !important;
width:100% !important;
}

行の高さは揃えてますが、カードそのものの高さを揃えたい方は次の記述を加えて下さい。

.card{
height:100%;
}

4 2で作ったファイルをmyphpfilesフォルダに入れる

次いで固定ページの表示させたい場所に、[myphp file=’slist’]([]は半角に変えて)と記述します。

スポンサーリンク

まとめ

解答者の写真
他サイトで紹介している方法だとCSSまで扱ったものが少なかったため、記事にしてみました
LuxeritasはせっかくのBootstrap搭載テーマ、色々活用してみたいものです
 
アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Luxeritas
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました