特定カテゴリの記事一覧を固定ページにタイル状で出力する ~Luxeritasカスタマイズ
本記事は特定カテゴリの記事リストを固定ページに出力する方法を紹介するものです。
他サイトの記事と異なり、Luxeritas 特化が売り。
タイルギャラリーとして表示します(※要Bootstrapモード)
これを応用すれば色々応用が効くと思います。
なおトップページのタイルギャラリー化につきましては、こちらの記事を御参照ください。
【2017/3/12 CSSの記述抜けを修正しました】
見本
私が実装したのは、小説紹介の記事リストを作りたかったため。
見本はこちらのページ下部を御覧ください。
将来変更してしまっていた場合のためにSSも載せておきます。
タブレットで2列表示、スマートフォンで1列表示となります。
設置方法
1 固定ページ内でPHPを読み込めるようにする
こちらの記事を御参照ください。
2 PHPファイルを作る
名前は何でもいいのですが、slist.phpとでもしておきます。
ファイルには次のコードを記述します。
<div id="list" 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÷(指定した数字)=カラム数となります。
詳しく知りたい場合はこちらを。
サムネイルサイズを変更したい場合、パラメータについてはこちらを御参照ください。
3 CSSを記述する【2017/3/12 コードが抜けていたので追加しました】
本サイトの例です。
Luxeritasを前提にしているので、他テーマで実装する場合は書き加える必要があるかもしれません。
/************************************
** ホーム新着記事
************************************/
.row-eq-height {
display: flex;
flex-wrap: wrap;
}
.list-card{
margin-top:20px;
}
#list .entry-title{
font-size: 16px;
}
#list .toc{
padding: 5px !important;
}
.card{
border: 2px solid #f5f5f5;
padding: 10px;
}
#list .meta{
margin-bottom:5px;
}
#list .term img{
max-width:200% !important;
width:100% !important;
}
行の高さは揃えてますが、カードそのものの高さを揃えたい方は次の記述を加えて下さい。
.card{
height:100%;
}
4 2で作ったファイルをmyphpfilesフォルダに入れる
次いで固定ページの表示させたい場所に、[myphp file=’slist’]([]は半角に変えて)と記述します。
まとめ
他サイトで紹介している方法だとCSSまで扱ったものが少なかったため、記事にしてみました。
これを応用すれば、例えばトップページにカテゴリごとの新着記事を並べるなんていうのもできます。
せっかくのBootstrap搭載テーマ、色々活用してみたいものです。
よろしければお試し下さい。
ディスカッション
コメント一覧
まだ、コメントがありません