WordPressの投稿一覧をタイトル・サムネイル・説明文にする方法

WordPress公式テーマのTwentyTwelveは、トップページの投稿一覧は本文を表示するスタイルです。

これをタイトル、サムネイル、説明文にする方法を書き留めておきます。これでトップページに記事の一覧をたくさん表示することができます。

コードの参考にしたのはStinger3です。一昔前のテーマですが陳腐化していないですよね。カスタマイズ性がそれほど無い分、必要なコードがわかりやすくて良いです。

サンプルのサイトは15分でわかるインデックス投資です。WordPressの投稿一覧を投稿日の古い順(昇順)で表示するコードから読んでもらえるとどういう目的なのかがわかりやすくて良いかもです。

元のindex.php

<?php if ( have_posts() ) : ?>
    <?php /* Start the Loop */ ?>
    <?php while ( have_posts() ) :the_post();?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>
    <?php twentytwelve_content_nav( 'nav-below' ); ?>
<?php else : ?>

元のコード。content.php、つまり本文をそのまま表示します。

else以下には投稿が無い場合の処理が書かれていますが、ここでは省略。

index.php

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) :the_post();?>
        <h3 class="entry-title-ac"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
        <div class="thumbBox">
            <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
            <?php $title= get_the_title(); the_post_thumbnail(array(300, 169), array('alt' =>$title, 'title' => $title)); ?></a>
        </div>
        <div class="descBox">
            <p><?php echo mb_substr(get_the_excerpt(), 0, 140); ?></p><br /><p><a href="<?php the_permalink() ?>">続きを読む</a></p>
        </div>
    <?php endwhile; ?>
    <?php twentytwelve_content_nav( 'nav-below' ); ?>
<?php else : ?>

子テーマにindex.phpを複製してコードを書き換えます。style.cssは差分だけ書き込めばOKですが、その他は上書きされるので変更しない箇所は丸ごと残しておく必要があります。

ifからelseまで、まるっとこのような形に書き換えました。それぞれの関数の意味は以下の通り。

the_permalink()記事のURL
the_title()記事のタイトル
the_title_attribute()記事のタイトル(上とどう違う?)
the_post_thumbnail()サムネイル
get_the_excerpt()記事の抜粋
mb_substr(sample, 0, 140)指定した文字数を表示 (対象の文字列, 開始文字数, 表示する文字数)

記事タイトルはh3を付与。h1はサイトタイトル、h2はサイトデスクリプションに指定されているからです。

entry-title-acで指定して、記事一覧用のh3デザインにします。同ページ内でサイドバーのウィジェットタイトルもh3で指定されておりその区別ですね。

thumbBoxとdescBoxで範囲を指定し、レスポンシブに表示させます。CSSは次の項目で説明していますがお好みですね。

style.css

.entry-title-ac {
	margin-bottom: 10px;
}
.entry-title-ac a {
	text-decoration: none;
	font-size: 120%;
}
.site {
	margin: 0 auto;
	overflow: hidden;
}
.thumb-box {
	width: 100%;
	margin-bottom: 10px;
}
.desc-box {
	width: 100%;
	margin-bottom: 30px;
}

@media screen and (min-width: 600px) {
	.entry-title-ac a {
		font-size: 140%;
	}
	.site-content {
		float: left;
		width: 71.11111%;
	}
    .widget-area {
		float: right;
		width: 22.22222%;
	}
}

@media screen and (min-width: 950px) {
	.site {
		max-width: 900px;
	}
	.site-content {
		width: 640px;
	}
    .widget-area {
		width: 200px;
	}
	.thumb-box {
		float: left;
		width: 300px;
		height: 200px;
	}
	.desc-box {
		float: right;
		width: 320px;
		height: auto;
		margin-bottom: 0;
	}
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です