[WordPress ]アイキャッチ画像をタイトルの下へ持ってくる方法

色鉛筆
Pocket

今回もブログの下地作りためにやった作業内容をメモしていきます。
今回はアイキャッチ画像をタイトルの下に持ってくる作業ですね。
WordPress初期設定ではアイキャッチ画像がタイトルの上に来るようになっていました。人それぞれ好みはあると思いますが、私は記事タイトルが一番上に来たほうがいいと思い、タイトルの下にアイキャッチ画像がくるような設定方法を探しました。
以下がその方法になります。

”個別ページ”のアイキャッチ画像をタイトルの下へ持ってくる方法

言い忘れてましたが、今回行ったのは”個別ページ”の記事のアイキャッチ画像の位置変更です。どうやら固定ページでは別の作業が必要なようですね。

それは後で書き留めるとして、今回は”個別ページ”アイキャッチ画像の位置をタイトルの下へ持って来てみましょう。

「外観」→「テーマ編集」→「content.php」へ移動します。

ちょっと画像では分かりにくいですね^^;

画像内の線で囲んだコードが下のものになります。

<?php
if ( ! post_password_required() && ! is_attachment() ) :

 

 

                the_post_thumbnail();

            endif; ?>

このコードがアイキャッチ画像を表示させるコードになります。このコードが初期状態ではタイトルを表示させるコードの上にあるので、このコードを記事タイトルを表示させるコードの下に持っていけばいいんですね。
目安となるのが記事本文を表示させるコードの上に持って行くようにしましょう。

記事本文を表示するコードが下のものになります。

<div class=”entry-content”>
<?php the_content( __( ‘Continue reading <span class=”meta-nav”>&rarr;</span>’, ‘twentytwelve’ ) ); ?>
<?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”>’ . __( ‘Pages:’, ‘twentytwelve’ ), ‘after’ => ‘</div>’ ) ); ?>
</div><!– .entry-content –>

このコードを探して、このコードの上にアイキャッチ画像を表示させるコードを切り取って移動させます。

赤枠がアイキャッチ画像を、緑枠が記事本文をそれぞれ表示するコードになります。
画像の様なコードの書き方で大丈夫だと思います。あとは設定を保存して完了です。

アイキャッチ画像の大きさを調整する

位置変更を行ったついでにアイキャッチ画像の大きさ調整をします。これまた初期状態ではアイキャッチ画像が大きく表示されすぎるような気がするので、一定の大きさ以上にならないように調整します。

<?php if ( ! post_password_required() && ! is_attachment() ) :

                the_post_thumbnail();

            endif; ?>

このアイキャッチ画像を表示されるコードの中に大きさ指定を行います。例えば

<?php if ( ! post_password_required() && ! is_attachment() ) :

                the_post_thumbnail(array(500, 500));

            endif; ?>

という感じで、記述すれば画像が500×500以上の大きさになることはなくなります。

”array(XXX, XXX)”が大きさを指定するコードなんですね。

このサイズは人によってお好みでいいと思います。

はい、ここまでがアイキャッチ画像をタイトルの下へ位置変更、画像の大きさ調整になります。
お疲れ様でした!

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。