この週末は、以前からやろうやろうと思っていたWordpressのレイアウト変更（本文抜粋＆アイキャッチ画像）を行いました。

具体的には、以下の２つを実施しました。
１．ブログTOPページ等の表示される本文を抜粋表示に変更する
２．本文が抜粋表示される際にアイキャッチ画像も表示する

当ブログでは、PC/iPad向けに　Twenty Elevenの子テーマを、スマフォ向けには、Yokoの子テーマを使っています。なので、修正は、それぞれの子テーマの該当ソース（*.php）を修正することになります。
※それぞれのテーマでは、デフォルトのTOPページは全文表示になっています。

さて、いざ取り組もうとしたら、わからないことばかり…

本文の抜粋表示ってどうやればできるの？　
アイキャッチ画像はどうすれば表示できるようになるの？

でも、Google先生のおかげで、今回も無事設定することができました。v(￣Д￣)v ｲｴｲ

では、忘備録も兼ね、私が設定した方法を参考にした記事と共に、ご紹介しまーす！

---

１．ブログTOPページ等の表示される本文を抜粋表示に変更する

参考にした記事：
☞ WordPressの投稿記事一覧を抜粋表示する条件分岐タグの使い方｜ThePresentNote

変更の対象は、content.phpです。the_excerpt() が本文を抜粋するWordpressのタグなので、以下のように修正しました。

変更前：

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

変更後：

<?php if ( is_home() or is_category() or is_archive() or is_tag() or is_search() ) : ?>
<div class="entry-summary">
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

is_search() の分岐のところに、is_home()、is_category()、is_archive()、is_tag() を追加しました。

なぁ〜んだ簡単だね！

２．本文が抜粋表示される際にアイキャッチ画像も表示する

参考にした記事：
☞ 記事内の一番最初の画像を取得してサムネイル画像表示
☞ WordPressの記事一覧にアイキャッチを表示させてみた（＋αで個別記事にも）

いくつか記事を読んで、Wordpress標準のアイキャッチ画像が、便利そうだったのですが、いままで投稿する際に、アイキャッチ画像を設定してなかったのと（プラグイン Aito Post Thumbnailを使えば自動でアイキャッチ画像を設定できますけどね）、記事内の画像をサムネイル画像として設定する事の方がリーズナブルに思えたので、当ブログでの基本設定は一つ目の記事を採用！

一つ目の記事にしたがって、まず、functions.php に以下のコードを追加！

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if(empty($first_img)){ //Defines a default image
		$first_img = "default.jpg"; // デフォルト画像を指定する
	}
	return $first_img;
}

※コード中の default.jpgは、記事内に画像が一つも無かった場合のデフォルト画像を指定します（ブログの環境に合わせて修正ください）。

次に、１で修正した content.php の同じ箇所（ the_excerpt()の前 ）に、functions.php に追加したアイキャッチ画像を表示するコードを追加します。

変更後（その１）：

<?php if ( is_home() or is_category() or is_archive() or is_tag() or is_search() ) : ?>
<div class="entry-summary">
	<img class="alignleft" src="<?php echo catch_that_image(); ?>" alt="" width="180" height="" />
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

※上のコードは、PC/iPad用です。スマフォ用は、width=”120″にしています。
※あと、アイキャッチ画像の回りをテキストが回りこむように、class=”alignleft”を指定してあります。

このままでも良かったのですが、後でWordPress標準のアイキャッチ画像を使いたい時もあるかも？ということで、以下のように追加修正しました。

変更後（その２）：

<?php if ( is_home() or is_category() or is_archive() or is_tag() or is_search() ) : ?>
<div class="entry-summary">
	<?php if ( has_post_thumbnail()) { ?>
		<span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail( array(180,9999) ); ?></span>
	<?php } else { ?>
		<img class="alignleft" src="<?php echo catch_that_image(); ?>" alt="" width="180" height="" />
	<?php } ?>
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

※記事に、アイキャッチ画像が設定されているとき（ has_post_thumbnail() が TRUE のとき ）は、そちらを優先し、設定してないときは、記事内の画像を表示するようにしてあります。
※この設定は、PC/iPad用テーマにだけ設定してあります。

そして、これが、今回の成果です！　
うーん、スッキリ！(^O^)

PC画面：

iPhone画面：

以上、今回設定したWordpressの変更内容でした。

まだ全文表示のままで、ブログを運営されてるあなた、そして、アイキャッチ画像を設定してない方は、参考にしてください。