【Wordpress】WordPressでサムネイルとタイトルの一覧を表示する方法

どうも、ぱぱおです。ぱぱおはWEB系のエンジニアなんですが、仕事でWordPressを扱うことはほとんどないため、色々調べながら、ブログをちょこちょこカスタマイズしてます。

そのへんの調べたことや、試行錯誤した部分を備忘録がてら、他の人にも役立ててもらえれば良いかな、と思って残しておきたいと思います。

で、今回はホーム画面で、記事のサムネイルとタイトルの一覧を表示したいと思って、そのやり方を調べました。

プラグインを入れるとかの方法もあるみたいなんですが、サイドバーに出すのはプラグインであっさりできたんですが、メインの部分に出すのはいくつか試してだめだったので、ソースコードを変更したらあっさりできたので、そのやり方を公開します。

ホーム画面のテンプレートを編集する

ホーム画面のテンプレートの編集はWordPress管理画面の「外観→テーマエディター」でできます。

ホーム画面を編集する場合、使用しているテーマにもよるみたいですが、ぱぱおの使っているテーマでは、テーマファイルの中の「メインインデックスのテンプレート（index.php）」というファイルを編集すればOKでした。

テーマの編集の際に気をつけないといけないこと

テンプレートを直接編集するので、気をつけなければいけないのは「テーマの更新」です。

テーマの更新をすると、そのテーマのソースコードがすべて新しいもので上書きされてしまうので、独自にそのテーマに入れているカスタマイズ部分が消えてしまいます。

なので、更新する際にはファイルのバックアップ等を取っておいて、更新した後に、再度カスタマイズしたファイルのカスタマイズ部分を反映する必要があります。

そのへん、他の方々はどうやってるんですかね。

ぱぱおはまだ慣れていないので、とりあえずテーマの更新はしないようにしています。

いよいよメインテンプレートに一覧を表示する

前置きが長くなりましたが、いよいよメインテンプレートにサムネイルとタイトルの一覧を表示するための変更部分の話です。

if ( have_posts() )という記述部分を探してください。

もしホーム画面が、投稿した記事全文が表示されているなら下のような形になっているんじゃないかと思います。

if ( have_posts() ) :
			
    while ( have_posts() ) : the_post();
				
        get_template_part( 'content', get_post_format() );
					
    endwhile;
	
elseif ( is_search() ) : ?>

これは、もし表示できる記事があったら、「設定→表示設定」の「1ページに表示する最大投稿数」で設定している数だけ記事を表示するよ、という意味です。

これを下のように変えてあげると、記事全文を表示するのではなく、サムネイル画像とタイトルだけの表示にできます。

if ( have_posts() ) : ?>
    <ul>
        <?php while (have_posts()) : the_post(); ?>
            <li class="thumbnail_list">
                <div class="thumbnail"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
                <div class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
            </li>
        <?php endwhile; ?>
    </ul>
<?php elseif ( is_search() ) : ?>

スタイルを調整

このままだと見た目がイケていないのと、タイトルが長くなったときにもすべて表示されてしまうので、タイトルは3行までで、入り切らない場合は「…」で省略するようにしました。（ChromeとSafariではなりますが、他のブラウザはならないものもあります）

スタイルの修正は同じくWordPress管理画面の「外観→テーマエディター」でテーマファイルの「スタイルシート（style.css）」を編集します。

「6. Single post」となっている部分の上に下記の5行を追加します。

.thumbnail_list { width:46%;float:left;margin:0 2% 20px 2%; }

.thumbnail_list:hover  > .thumbnail {opacity: 0.5;}

.thumbnail_list:hover  > .title {text-decoration: underline;}

.thumbnail_list .thumbnail { margin-bottom:5px; }
	
.thumbnail_list .title { line-height: 20px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;height: 60px;overflow:hidden; }

/* -------------------------------------------------------------------------------- */
/*	6. Single post
/* -------------------------------------------------------------------------------- */

こんな感じの見た目になります。ちなみにスマホでも同様に2列で表示されます。省略表示がわかるようにタイトルを長くしてます。