アフィーロード

アフィリエイトがあるじゃないか!

*

アイキャッチ画像を記事の先頭に自動で表示させる簡単な方法!

    2015/09/13

記事の先頭に画像があると、見栄えが良さそうだなと思います。

しかし、アイキャッチ画像を用意するのも面倒なのに、さらにもう一枚となると結構な手間になりそうなので考えてしまいます。。。

アイキャッチ画像・・・そう記事一覧のサムネイルです。

記事の掴みようの画像なので、トップ画像としても適しています。これを併用すればいい訳ですよ!

直接記事の先頭に貼り付けても良いのですが、自動で貼り付けてくれる方法があるので楽しましょうw

その方法は非常に簡単。設定したアイキャッチ画像は、記事一覧のサムネイル以外に、新着記事や関連記事にも表示されているので、同じ方法を使って記事本文の先頭に挿入するだけです。

サムネイルを本文先頭に自動で表示させる手順

単一記事に関するコードはsingle.phpに記述されています。親テーマを直接編集するより子テーマを編集した方が、後々良いのでそうします。詳しくは、WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう!を参考にしてください。

  1. single.phpの子テーマを作成する。
  2. 子テーマのsingle.phpに親テーマのsingle.phpの内容を全てコピーする。
  3. 子テーマのsingle.php内に<?php the_post_thumbnail();  ?>を挿入する。
</div> 
   <?php the_post_thumbnail(array(640,480)); ?> //アイキャッチ
   &nbsp;
   <?php the_content(); //本文 ?>

解説

the_post_thumbnail();はアイキャッチに設定した画像を表示するための関数です。()内の引数は、’thumbnail’・’medium’・’large’・’full’(シングルクォーテーションで囲む)、もしくは幅と高さをピクセル単位で指定した配列になります。

例では、array(640,480)としていますが、この場合、画像の幅が650pxかつ高さが320pxを超えない範囲いっぱいに表示します。アイキャッチ画像が一覧用の大きさに合わせている様な場合は、’full’でいいでしょう。

画像に枠を付けている場合は、記事ブロックの幅より少し小さくします。また、高さが長過ぎると鬱陶しくなるので、小さめにした方が良さそうです。

&nbsp;は画像と本文との間隔を空けるために追加したものです。

本文を画像の右に回りこませる

画像を小さ目サイズにして、横のスペースに本文を表示したい場合の方法です。

single.php

<div id="topimg">
   <?php the_post_thumbnail(array(650,320)); ?> //アイキャッチ
</div>
<?php the_content(); //本文 ?>

style.css

#topimg {
   float:left;
   margin-right:10px;
   margin-bottom:10px;
}

 画像表示部分を<div>で囲って、CSSでfloatを使って回り込ませ、右と下に余白を取っています。

まとめ

サムネイル作りは凝り出すと時間もかかって面倒ですが、読者の目を引かせる重要な要素なので頑張って作りましょう。

でも良い画像が思いつかない時は、適当でもいいよねw

 - WordPress, テーマ

Message

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

  関連記事

STINGER5の子テーマでCSSが上手く反映されない原因を解決!

子テーマを作ったので、取り合えず文字サイズでも変更してみようと思ったのですが、な …

リビジョンは便利機能だけど、溜まり続けるので何とかするプラグイン「Revision Control」と「Delete Revision Manager」

記事を書いていると、保存する前にうっかりページを移動したり、閉じてしまう事があり …

変更不可能なWordPressのログインIDを変えてセキュリティアップする方法

ログインIDなんてニックネームみたいなものだからと、適当に付けている人は多いので …

サイドバー広告を表示させ続ける追尾広告の実装方法【STINGER5】

アフィリエイトについて扱ってるブログなのに、今まで広告を全く掲載していませんでし …

WordPressをインストールした後やっておきたい事のまとめ

新しいサイトを作って、WordPressをインストールした後に毎回しておくべき事 …

Google Analytics Dashboard for WPを導入してWordPressで解析確認!エラーが出た時の対処方法あり

Google Analyticsでアクセスを確認したいけど、その度にログインする …

WordPressのログインIDがバレるのをEdit Author Slugで防ぐ

ヤバイよヤバイよ、何て仕様なんだあ。何がヤバイかと言うと、ログインIDがダダ漏れ …

Google Analytics by Yoastを使えばトラッキングコードを貼るのも簡単です!

解析ツールの定番Google Analytics(アナリティクス)を導入するとき …

目次
「Table of Contents Plus」プラグインで目次を簡単に作成!

雑誌を読む時は、まず目次から見るという人は多いと思います。 目次を見ると、記事の …

ワードプレスのロゴ
エックスサーバーにWordPressをインストールする

サーバーを借りました、ドメインも取りました、次が何をするの? それは、WordP …