WordPress の Twenty Twelve でページごとにサイズを変えてアイキャッチ画像を設定

photo of eye-catch
photo credit: Ehsan Khakbaz via photopin cc

テーマファイルを弄ることへの恐れがあって、ずっと見て見ぬふりをしてきたアイキャッチ画像の設定をようやくやってみました。デフォルトテーマの Twenty Twelve をベースに、記事の一覧ページにはサムネイルサイズを、記事の個別ページにはより大きなサイズを表示させるようにしました。

目次

  1. 参考資料
  2. まずはバックアップ
  3. functions.php を編集
  4. テスト記事でプレビュー
  5. タイトルと本文の間に表示させる
  6. 記事の一覧ページと個別ページで表示サイズを変える
  7. 本文がサムネイルの右側に回り込むようにレイアウトを整える

1. 参考資料

今回の作業でお世話になった先は次の通りです。書籍の方は、テーマの自作を目指して少しずつ勉強している本。サイトはいろいろと見て回ったところ、こちらの2つがすごく分かりやすかったです。

書籍:

サイト:

2. まずはバックアップ

テーマファイルを直接編集するのは恐いので、まずバックアップを取ることにしました。

FTP アプリで /wp-content/themes フォルダを開き、テーマフォルダの twentytwelve をローカルにダウンロード。任意のフォルダ名に変更した上で再度 /wp-content/themes にアップロードし、これをカスタマイズしながら使っていくことにしました。

3. functions.php を編集

WordPress の管理画面の「外観」→「テーマ編集」から functions.php を開きます。アイキャッチ画像の機能を有効にするには次のコードを記述する必要があるのですが、これはすでに Twenty Twelve の functions.php には書き込まれていました。

add_theme_support( 'post-thumbnails' );

その次の行には、アイキャッチ画像の大きさを指定する以下のコードが記述されていました。このままだとアイキャッチ画像をアップロードした際に幅 624px サイズの画像が自動的に生成されます。後述しますが、アイキャッチ画像を表示させる際には「メディア設定」の画像サイズを指定できるので、ひとまずこの行は削除しました。

set_post_thumbnail_size( 624, 9999 );

4. テスト記事でプレビュー

その後、早速テスト用の記事を作り、投稿画面の右下にある「アイキャッチ画像を設定」から画像を設定します。

photo of screen shoot

好きな写真を選び、右下の「アイキャッチ画像を設定」をクリック。

photo of screen shoot

記事をプレビューすると、アイチャッチ画像が表示されます。この時点ではフルサイズで表示され、画像の下にタイトルが続いています。

photo of screen shoot

5. タイトルと本文の間に表示させる

続いて「テーマ編集」画面で、記事のタイトルと本文を出力する content.php を開きます。

アイキャッチ画像の表示に使うのは次のコードです。

<?php the_post_thumbnail(); ?>

content.php の中では、このようにタイトルの前に記述されていました。

<?php the_post_thumbnail(); ?>
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>

実際にはタイトルの前ではなく後に表示させたいので、ここでは1行目のコードを削除し、以下のようにしました。

<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>

削除したコードはアイチャッチ画像を表示させたい場所に記述する必要があります。content.php の中で、本文を出力するコードは次のように記述されていました。

<div class="entry-content">
        <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>

そこで、このブロックの直前に挿入したところ、無事にタイトルと本文の間に表示されるようになりました。

<?php the_post_thumbnail(); ?>
<div class="entry-content">        
        <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>

6. 記事の一覧ページと個別ページで表示サイズを変える

アイチャッチ画像を表示できるようになったところで、記事の一覧ページではサムネイルサイズ、個別ページでは通常のサイズといった具合に、ページごとに表示サイズを変えるための設定をしました。

表示に当たっては、以下のパラメータを使うことで、「設定」→「メディア」の「画像サイズ」であらかじめ設定しているサイズを指定できます。

サムネイル:

<?php the_post_thumbnail( 'thumbnail' ); ?>

中サイズ:

<?php the_post_thumbnail( 'medium' ); ?>

大サイズ:

<?php the_post_thumbnail( 'large' ); ?>

フルサイズ:

<?php the_post_thumbnail( 'full' ); ?>

問題は、ページによってどうやってパラメータを変えるかなのですが、そのためには条件分岐タグというものを使うとのこと。こちらも Webデザインレシピ さんに分かりやすい解説がありました。

このページや参考書を頼りに、ひたすら content.php ファイルとにらめっこ…。結局、こんな風に content.php を修正したところ、記事の個別ページではフルサイズのアイキャッチ画像が、それ以外のページではサムネイルサイズのアイキャッチ画像が表示されるようになりました。

変更前:

<?php the_post_thumbnail(); ?>
<div class="entry-content">

変更後:

<?php if ( is_single() ) : ?>
<?php the_post_thumbnail( 'full' ); ?>
<?php else : ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php endif; // is_single() ?>
<div class="entry-content">

先ほどのテスト用の記事を公開して、ブログのトップページと記事の個別ページを表示させてみました。

こちらがトップページ。

photo of screen shoot

こちらが記事の個別ページです。

photo of screen shoot

7. 本文がサムネイルの右側に回り込むようにレイアウトを整える

最後に、トップページではサムネイルサイズのアイキャッチ画像の下に記事の本文が表示され、画像の右側が空白になっているので、レイアウトを整えます。

スタイルシートを適用できるように、まずは content.php を修正します。

変更前:

<?php if ( is_single() ) : ?>
<?php the_post_thumbnail( 'full' ); ?>
<?php else : ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php endif; // is_single() ?>
<div class="entry-content">

変更後:

<div class="entry-post-thumbnail">
        <?php if ( is_single() ) : ?>
        <?php the_post_thumbnail( 'full' ); ?>
        <?php else : ?>
        <?php the_post_thumbnail( 'thumbnail' ); ?>
        <?php endif; // is_single() ?>
</div><!-- .entry-post-thumbnail -->
<div class="entry-content">

次は style.css に以下のコードを追記します。

/* サムネイル画像 */  
div.entry-post-thumbnail {
  float: left;
  margin: 0 10px 10px 0;
}

これで本文がアイキャッチ画像の右側に回り込んで表示されるようになりました。

photo of screen shoot

今回作業したのはここまでです。練習用のテーマではなく、既存のテーマに手を加える初めての試みでしたが、自分で調べたり、考えたりしながらテーマを修正していく作業は思いのほか、楽しい経験。はまりそうです。

4 thoughts on “WordPress の Twenty Twelve でページごとにサイズを変えてアイキャッチ画像を設定

  1. Pingback: アイキャッチ(サムネイル)表示を変更する Twenty Twelve改造マニュアル | 創造web

  2. Pingback: TwentyTwelveのカスタマイズ② | My Dear Robi-週刊ロビ組立日誌

  3. Pingback: アイキャッチ編集その後 | 好き勝手気まま

  4. Pingback: 今さら聞けない、WordPress「Twenty Twelve」のアイキャッチ画像の位置を記事タイトルの下に変更したい | ローカルブロガーのメモ帳

コメントを残す

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