WordPressのアイキャッチ画像挿入

スポンサーリンク
Pocket

 

タイトルの下にある画像は、「アイキャッチ画像」という物でこれは記事内に挿入した画像ではありません。記事投稿画面にこのアイキャッチ画像を設定する場所があります。

投稿画面の右下にこのような項目があります。

ここをクリックして画像を設定すると記事の先頭にアイキャッチ画像が表示されます。

TwentyTwelveのアイキャッチ画像を記事タイトルの下に

選ぶテーマによって画像がタイトルの上だったり、下だったりしますが、カスタマイズしてタイトルの下にアイキャッチ画像を表示するようになります。

「個別ページ」と「固定ページ」は別々になっていますので、個別ページは「content.php」、固定ページは「content-page.php」をそれぞれ編集していきます。

1、個別ページでアイキャッチ画像の位置を変更する

「content.php」を、子テーマにファイルを追加して下さい。

アイキャッチ画像を表示するコードは「content.php」の中のこの記述です。

1
<?php the_post_thumbnail(); ?>

この記述がない場合はおそらくこの記述があります。

1
2
3
<?php if ( ! post_password_required() && ! is_attachment() ) :
                the_post_thumbnail();
            endif; ?>

この記述でアイキャッチ画像を表示させています。このコードの前後を見てみます。

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

アイキャッチ画像を表示するコードの下に「h1」という記述があります。この「h1」というのが記事タイトルの部分です。この「h1」よりも上にアイキャッチ画像のコードがあるので、記事タイトルの上にアイキャッチ画像が表示されます。

記事本文を表示させるコードを探します

1
2
3
4
<div class="entry-content">
            <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
            <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
        </div><!-- .entry-content -->

これが記事本文を表示させるコードです。つまり、div class=”entry-contentの部分の直前に先ほどのアイキャッチ画像を表示するコードを持ってくればいいという事になります。

➀アイキャッチ画像を表示させるコードを切り取ります。

1
<?php the_post_thumbnail(); ?>

もしくはこちらの場合もあるかもしれません。

1
2
3
<?php if ( ! post_password_required() && ! is_attachment() ) :
                the_post_thumbnail();
            endif; ?>

この記述を切り取り、本文表示コードの直前に貼り付け。結果的にこのようになります。

1
2
3
4
5
6
<?php the_post_thumbnail(); ?>
    <div class="entry-content">
    <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
        </div><!-- .entry-content -->

記事本文の直前にアイキャッチ画像を表示するコードを追加しました。

アイキャッチとその下の本文の部分がくっついて余白がない状態ですので、子テーマのCSSに次のコードを入れて本文部分のコンテンツの上に余白を入れます。

1
.entry-content{margin-top:30px;}

2、固定ページのアイキャッチ画像の位置を変更する

固定ページも同じように位置変更したい場合には子テーマの「content-page.php」を編集していきます。

子テーマの「content-page.php」から次の部分がアイキャッチ画像を出力するコードになります。

1
2
3
<?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>
            <?php the_post_thumbnail(); ?>
            <?php endif; ?>

部分を切り取っておきます。それで、記事本文を出力するコードの直前に貼り付ければ、記事タイトルの下にアイキャッチを移動する事ができます。

本文が始まるのがこの部分です。

1
<div class="entry-content">

この直前に最初に切り取ったアイキャッチ画像を出力するコードを移動させて下さい。

アイキャッチ画像のサイズを変更する

アイキャッチ画像のサイズを少し変更してます。また、トップページやカテゴリーページ等ではアイキャッチ画像をサムネイル画像(100px 100px)で表示させることもできます。

子テーマの「content.php」で変更できます。

1
<?php the_post_thumbnail(); ?>

これをこのように変更します。

1
<?php the_post_thumbnail(array(500, 500)); ?>

この「500」はサンプルですので好きなサイズに半角数字で変更する事ができます。また次のような記述も使えます。

  • the_post_thumbnail(‘thumbnail’) — サムネイル画像を表示
  • the_post_thumbnail(‘medium’) — 中サイズ画像を表示
  • the_post_thumbnail(‘large’) — 大サイズ画像を表示

この中サイズとか大サイズというのはWordPressの管理画面⇒「設定」⇒「メディア」で設定したサイズです。

このメディア設定で設定したサイズか直接サイズを指定する方法か2通りありますのでお好みで使ってください。

スポンサーリンク

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください