KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました! クリックで公式サイトが開きます。

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

この記事は約4分で読めます。
記事内に広告が含まれています。

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

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

スポンサーリンク

見本

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

404 NOT FOUND | きもおたねっと。
スパイ・公安、小説、ついでにパチンコのサイト

将来変更してしまっていた場合のために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のグリッドシステムとは? 実例と一緒にグリッドシステムに用意されたクラスを復習します

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

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_post_thumbnail

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搭載テーマ、色々活用してみたいものです

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速!
サイト管理・カスタマイズのタイパも抜群!
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群!
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
8年来のKUSANAGI推し。

元公安調査庁職員、発達障害(ADHD)

天満川 鈴をフォローする
Luxeritas

This website stores cookies on your computer. These cookies are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to to opt-out of any future tracking, a cookie will be setup in your browser to remember this choice for one year.

Accept or Deny

タイトルとURLをコピーしました