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

トップページ記事リスト（一覧）をタイル化し高さを揃える【プラグイン不要、コピペでOK】　～Luxeritasカスタマイズ

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

【追記：2020/2/10】
本記事はLuxeritasにタイル機能がなかった頃（ver1.12）に記したものです。
現行バージョン（ver3.7）では、テーマ本体にタイルレイアウト機能があります。
（カスタマイズ→グリッドレイアウトから選択できます）

もし他テーマをお使いで本記事に紛れ込んでしまった場合は、こちらの記事へお回り下さい。
（2017/3/22、Lightningは記事分割しました）

Bootstrapを利用してトップページをタイル型に変更する　～Lightningカスタマイズ第９回
連載9回目は、トップページをリスト型からタイル型に変更します。 ここはもう、趣味の領域。 ただLightningはBootstrapベース。 やろうと思えば、プ...
kimoota.net
2017.03.22

【以下、過去の記事です】

 

質問者の写真

トップページをタイル表示にしたいよ～。
 
解答者の写真
Pinterestみたいなの？
 

質問者の写真

ああいう高さバラバラなの見づらいからやだ！
　タイルの高さ揃えたい！
 

本記事ではLuxeritasのサイトorブログのトップページ記事リスト（一覧）をプラグイン無しでタイル化し、高さを揃えて表示する方法を紹介します。
また、カテゴリ別アーカイブにも対応しています。
そしてコピペでOKです。

スポンサーリンク
この記事を読む方へのオススメ
Luxeritasのトップ・カテゴリページの記事カード（タイル）の枠線カスタマイズ
Luxeritasのサイドバー用関連記事ウィジェットを作ってみる
Luxeritasのカルーセルスライダーウィジェットのデザインをカスタマイズする
帯状メニューに「サイトマップ」と「問い合わせ」ボタンを追加する　～Luxeritasカスタマイズ

タイル化した見本　～Bootstrapがあれば簡単にできます

一般にWordPressテーマでタイル化するとなれば、色々と難儀するポイントが多くて四苦八苦します。
特に高さを揃える。
色々見て回っていると、タイルの高さを揃えたいという声を結構見かけました。
Pinterestみたいなのは写真メインかつ大量表示だといいんですけど、文章メインな普通のブログだと見づらさの方が先に立つかなって思います。
実際に超人気のテーマSimplicity2ですと「タイル　高さを揃える　Simplicity」で検索すると結構記事が出てきます。

しかしLuxeritasはBootstrapを積んでいるので楽にいけます。

……もちろんBootstrapを扱えればですけどね。

初めてだけにかなり苦労しました。
でも、できました！

パターン１：抜粋なし　高さだけ揃えてカードの高さは揃えない

サイトトップをタイル化した画像（プラグインなし、Bootstrap）

パターン２：抜粋を入れてカードの大きさも高さに合わせる

 

 

 

最初に断り事

本記事のベースとなるverは1.12（16.12.19リリース）となります。
ウィジェットには対応していませんので御承知おきください。
私はウィジェットを設置するつもりないので対応する予定もありません。

また、

私はBootstrap以前にPHPをほとんど知りません。

見よう見まねでやっただけですので、間違っていれば、あるいはよりよい書き方があれば、遠慮無く御指摘ください。

スポンサーリンク

タイル化手順

事前準備

子テーマなどの用意

子テーマをインストールしていない場合は、公式ページ からダウンロードしてインストールしてください。
また、親テーマのlist.phpを子テーマに入れます。
編集は、子テーマのlist.phpで行います。

カスタマイザーを設定する

カスタマイズ→カラム操作→領域の分離と結合→コンテンツ領域→「コンテンツ領域を項目ごとに分離」にチェック。

サイドバーは300pxにしています。

ファイル編集の前に　～ざっくりしたBootstrapの説明

Bootstrapのグリッドシステムは、container→row→colの属性をつけられた要素で構成します。
col：タイル（の各要素を入れるブロック）。
row：行の操作。
container：rowをまとめる。

本記事の例におけるレイアウトはタイル３枚並びの１パターンのみ。
rowは高さを揃える役割くらいに捉えていただいて結構です。

html

list.phpの編集

<div id="list" itemscope itemtype="http://schema.org/SearchResultsPage">
<?php
}
else {
?>
<div id="list">

↓

<div id="list" class="container-fluid" itemscope itemtype="http://schema.org/SearchResultsPage">
<?php
}
else {
?>
<div id="list" class="container-fluid">
<div class="row list-card row-eq-height">

一覧を囲んでいる#listにBootstrapのcontainer-fluid属性を付与します。
container-fluidはcontainerより柔軟なレイアウトができます。

次いで、同じくBootstrapのrowで囲みます。
row-eq-heightはタイルの高さを揃えるために必要となる属性です。

<div class="toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix">

↓

<div class="toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' col-sm-6 col-md-4 ' : ' '; ?>clearfix">

〆は#bottom-areaの上で。

tocがBootstrapのcolにあたる要素ですので属性を付与します。
colに続く英字と数字で、解像度とタイルの列を調整できます。
本記事の例はスマホで１列、タブレットなど（sm）で２列、PC（md）で３列の構成です。
スマホは記述の必要なし。
タブレットは12÷6＝２、PCは12÷4＝3。
レイアウトを変えたい場合は、この英字と数字を調整してください。

記事出力部分。新たにタイルとなる部分です。

<section>
<h2 class="entry-title" itemprop="headline name"><a href="<?php the_permalink(); ?>" class="entry-link" itemprop="url"><?php the_title(); ?></a></h2>
<?php
 $meta_under = false;
 get_template_part('meta');

// ソースに無駄があるけど、速度的にこっちのが速いので if 分岐多段にした
 if( $luxe['list_view'] === 'excerpt' ) {
 if( !isset( $luxe['sticky_no_excerpt'] ) ) { // sticky_post も含めて全部抜粋で表示する場合
 get_template_part('list-excerpt'); // 抜粋表示
 }
 elseif( is_sticky() === true ) { // sticky_post の場合
 get_template_part('list-content'); // 記事全文表示
 }
 else {
 get_template_part('list-excerpt'); // 抜粋表示
 }
 }
 else {
 get_template_part('list-content'); // 記事全文表示
 }
?>
</div>
<p class="read-more"><?php
 if( isset( $luxe['read_more_text'] ) ) {
?><a href="<?php the_permalink(); ?>" class="read-more-link" itemprop="url"><?php echo ( isset( $luxe['read_more_short_title'] ) ) ? read_more_title_add( $luxe['read_more_text'] ) : $luxe['read_more_text']; // 記事を読むリンク ?></a><?php
 }
?></p>
</section>

次の通り修正します。

<section>
<div class="card">
<figure class="term">
<?php
if( isset( $luxe['thumbnail_visible'] ) ) {
 $post_thumbnail = has_post_thumbnail();
 if( !empty( $post_thumbnail ) ) { // サムネイル

$thumb = 'thumbnail';
 if( $luxe['thumbnail_is_size'] !== 'generate' ) {
 $thumb = $luxe['thumbnail_is_size'];
 }
 elseif( $luxe['thumbnail_width'] > 0 && $luxe['thumbnail_width'] !== 150 ) {
 $thumb = 'thumb' . $luxe['thumbnail_width'] . 'x' . $luxe['thumbnail_height'];
 }
?>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail( $thumb, array( 'itemprop' => 'image', 'class' => 'img-responsive' ) ); ?></a>
<?php
 }
 elseif( isset( $luxe['noimage_visible'] ) ) {
 $no_img_png = 'no-img.png';
 $no_img_wid = 150;
 $no_img_hgt = 150;

switch( $luxe['thumbnail_is_size'] ) {
 case 'medium':
 case 'large':
 case 'full':
 $no_img_png = 'no-img-300x300.png';
 $no_img_wid = 300;
 $no_img_hgt = 300;
 break;
 case 'generate':
 if( $luxe['thumbnail_width'] >= 150 ) {
 $no_img_png = 'no-img-300x300.png';
 $no_img_wid = $luxe['thumbnail_width'];
 $no_img_hgt = $luxe['thumbnail_height'];
 }
 break;
 default;
 break;
 }
?>
<a href="<?php the_permalink() ?>"><img src="<?php echo TURI; ?>/images/<?php echo $no_img_png; ?>" itemprop="image" class="thumbnail" alt="No Image" title="No Image" width="<?php echo $no_img_wid; ?>" height="<?php echo $no_img_hgt; ?>" /></a>
<?php
 }
}
?>
</figure><!--/.term-->

<?php
 $meta_under = false;
 get_template_part('meta');
?>

<h2 class="entry-title" itemprop="headline name"><a href="<?php the_permalink(); ?>" class="entry-link" itemprop="url"><?php the_title(); ?></a></h2>
</section>

.cardで、サムネイルやタイトルなど、colにいれる要素をまとめます。

出力を、サムネイル→メタ→タイトルの順番に並べ変えます。

「抜粋」と「記事を読む」がないのは、デザインをすっきり見せるため。
単に好みですなので、つけたい場合は残して下さい。
（私も戻すかもしれません）

その場合、if分岐は要らないので、これだけでいいです。

<?php echo get_the_excerpt(); ?>
<a href="<?php the_permalink() ?>">続きを読む</a>

完成

編集したlist.phpは全部まとめるとこんな感じです。

$_is_search = is_search();

if( $_is_search === true ) {
?>
<div id="list" class="container-fluid" itemscope itemtype="http://schema.org/SearchResultsPage">
 
<?php
}
else {
?>

<div id="list" class="container-fluid">

<div class="row list-card row-eq-height">

<?php
}

global $luxe, $meta_under;

$b_flag = true;
$s_flag = true;

if( $_is_search === true ) {
 if( $luxe['content_discrete'] === 'discrete' ) {
 if( $b_flag === true ) {
 ?><div class="toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' grid ' : ' '; ?>clearfix"><?php
 if( $luxe['breadcrumb_view'] === 'inner' ) get_template_part( 'breadcrumb' );
 thk_search_result();
 $b_flag = false;
 ?></div><?php
 }
 }
}

if( have_posts() === true ) {
 while( have_posts() === true ) {
 the_post();
?>

<div class="toc<?php echo $luxe['content_discrete'] === 'discrete' ? ' col-xs-12 col-sm-6 col-lg-4 ' : ' '; ?>clearfix">


<?php
 if( $luxe['breadcrumb_view'] === 'inner' && $b_flag === true ) {
 get_template_part( 'breadcrumb' );
 $b_flag = false;
 }

if( $_is_search === true ) {
 if( $luxe['content_discrete'] === 'indiscrete' && $s_flag === true ) {
 thk_search_result();
 $s_flag = false;
 }
 }
?>

<section>
<div class="card">
<figure class="term">
<?php
if( isset( $luxe['thumbnail_visible'] ) ) {
 $post_thumbnail = has_post_thumbnail();
 if( !empty( $post_thumbnail ) ) { // サムネイル

$thumb = 'thumbnail';
 if( $luxe['thumbnail_is_size'] !== 'generate' ) {
 $thumb = $luxe['thumbnail_is_size'];
 }
 elseif( $luxe['thumbnail_width'] > 0 && $luxe['thumbnail_width'] !== 150 ) {
 $thumb = 'thumb' . $luxe['thumbnail_width'] . 'x' . $luxe['thumbnail_height'];
 }
?>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail( $thumb, array( 'itemprop' => 'image', 'class' => 'img-responsive' ) ); ?></a>
<?php
 }
 elseif( isset( $luxe['noimage_visible'] ) ) {
 $no_img_png = 'no-img.png';
 $no_img_wid = 150;
 $no_img_hgt = 150;

switch( $luxe['thumbnail_is_size'] ) {
 case 'medium':
 case 'large':
 case 'full':
 $no_img_png = 'no-img-300x300.png';
 $no_img_wid = 300;
 $no_img_hgt = 300;
 break;
 case 'generate':
 if( $luxe['thumbnail_width'] >= 150 ) {
 $no_img_png = 'no-img-300x300.png';
 $no_img_wid = $luxe['thumbnail_width'];
 $no_img_hgt = $luxe['thumbnail_height'];
 }
 break;
 default;
 break;
 }
?>
<a href="<?php the_permalink() ?>"><img src="<?php echo TURI; ?>/images/<?php echo $no_img_png; ?>" itemprop="image" class="thumbnail" alt="No Image" title="No Image" width="<?php echo $no_img_wid; ?>" height="<?php echo $no_img_hgt; ?>" /></a>
<?php
 }
}
?>

</figure><!--/.term-->


<?php
 $meta_under = false;
 get_template_part('meta');
?>

<h2 class="entry-title" itemprop="headline name"><a href="<?php the_permalink(); ?>" class="entry-link" itemprop="url"><?php the_title(); ?></a></h2>
</div><!--/.card-->
</section>
</div><!--/.toc-->
<?php
 } // end while()
?>

<?php
} // end have_posts()

?>
</div><!--/.listcard-->
<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 );
}
?>
</div>
</div><!--/#list-->

こちらが現在の本サイトのベース。
本サイトと同じでよければ、そのままコピペしてください。
簡略化するために不要な部分を適宜削っています。固定ページ分岐は要らないので。
SNSも削ってしまっています。使う場合は書き加えて下さい。

CSS

本サイトの例です。

/************************************
**　ホーム新着記事
************************************/
.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;
}

お好みで。
ただし、以下の部分は触るとサムネイル表示が崩れます。

#list .term img{
max-width:200% !important;
width:100% !important;
}

タイルの高さを揃えたい時は次の記述を追加してください。

.card{
height:100%;
}
スポンサーリンク

トップページのみをタイル化する方法

トップページ限定でタイル化したい場合は、

１　home.phpを子テーマにコピーする。

２　子テーマのlist.phpを「homelist.php」に変更する。

３　home.phpの次の部分を書き換える。

<?php
get_template_part( 'list' );
?>

↓

<?php
get_template_part( 'homelist' );
?>

まとめ

解答者の写真
コードは長いけど、基本にはコピペでいけるわ。
よかったら試してみて。
ブログやサイトを始めたい・引っ越したい方へ

レンタルサーバーWING。
KUSANAGI＆WEXALが使えるVPS。
どちらでも高速でコスパに優れたConoHaで始めるのがおすすめです。
もっと知りたい方はボタンをクリックしてください。
（ボタン経由で入会した場合、1000円分のクーポンがもらえます）

Go To ConoHa公式サイト
この記事を書いた人
天満川鈴

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

天満川鈴をフォローする
Luxeritas
wordpress
スポンサーリンク
天満川鈴
スポンサーリンク

コメント

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