AZuSk's secret log

AZuSkの日々的Hack雑記

wordpressのテーマstinger5の記事冒頭にアイキャッチ画像を表示する為の改造

      2014/11/18

photo credit: somenice via photopin cc

stinger5の初期状態のままだと、アイキャッチを設定しても、記事一覧には表示されますが、記事本文には表示されません。それではちょっと寂しいと感じましたので、テーマファイルを改造してみました。
最後の「まとめ」に、コピペで改造できるようにソースコードを載せています。

スポンサーリンク

hoge.secret.jp_300x250

編集エディタのアイキャッチ画像設定方法

stinger5では、記事一覧にはアイキャッチが表示されるのですが、記事ページには表示されません。
そこで、アイキャッチ画像を記事本文の上に追加します。

素材は、無料写真素材検索サイトのphotopinからダウンロードしました。
著作権表示のソースコードがコピペで貼れる便利さがあり、ブロガー必須のサイトです。

まず最初に画像の準備をします。

検索窓にキーワードを入力します
サイトを開いて検索窓へキーワードを入力します。
今回は「wordpress」と入れました。
ここで一つ注意点があります。
検索語は英単語を使うことです。
英語のサイトなので日本語では検索結果が全く出ません。

first_stinger5_03
得られた検索結果一覧です。
ここから画像を選ぶのですが、グレーの破線から上は有料画像へのリンクになっています。
私たちは無料素材を探している訳ですから、破線の下の画像から選びましょう。

今回はこの画像を選びました。画像にカーソルを乗せるとダウンロードリンクが現れます。
また、プレビュー画面へのリンクも出ます。検索結果一覧の縮小画像はトリミングされているので、確認の時はプレビューするのがいいです。
いざダウンロードしようとしたら縦長画像だったなんてことがありますから。
カーソルを乗せるとダウンロードリンクが現れます

first_stinger5_04
画像をダウンロードしますが、画像サイズは記事部分の横サイズの580px以上あった方が画像が偏らないでいいのではないかと思います。
ここに大事な事が一つあります。右下の窓にクレジット表記のソースコードが自動出力されています。このコードを全部選択して右クリックからコピーを選んで、クリップボードにコピーしておきます。

次は投稿エディタでアイキャッチを設定します

キャプション欄に著作権のソースコードを書く
それをwordpressの投稿エディタ画面の「アイキャッチ画像を設定」をクリックして、写真をアップロードします。
先ほどコピーした著作権表記はキャプションの欄にペーストします。
これで記事はOKです。

アイキャッチを表示する為のテーマファイルの修正方法

single.phpに以下を追加します

「the_content();」が記事本文を表示する命令文なので、single.php内から「the_content();」を探して(私のsingle.phpでは47行目にありました。)、その上にアイキャッチ表示のphpのコードを追加します。

「<?php ?>」は、この中はプログラミング言語phpの命令文ですよという決まりなので忘れずに書きましょう。

と書くとアイキャッチに設定した画像を実サイズで表示します。

同じく、アイキャッチのキャプションを表示するには、

と書きます。

stinger5のスタイルシートstyle.cssで、imgタグにmax-width:100%の設定が付いているので、画像の横サイズが580ピクセル以上でも、記事欄外まではみ出すことはありません。

また、

とすると画像にclass=”size-full”を付けます。
stinger5のstyle.cssでsize-fullクラスは下余白10ピクセルになっているので、本文直上に画像を表示している場合は隙間が空いて見やすくなります。
著作権クレジット表記を画像のすぐ下に書く場合は、続いて「ここまでアイキャッチ表示コード追加」と「the_content();」の間に記述します。
クレジットと画像の隙間は無い方が関連性が分かりやすいので、この場合は

とします。

アイキャッチと本文の間に興味を引くような抜粋文を載せると、本文への導線にもなります。
ただし、抜粋文を書いていない場合は表示しないように条件分岐しておきます。

スタイルシートでの装飾方法

画像とクレジットの格納divボックスにクラス名を付けていますので、cssで装飾もできます。
例えば、左半分に画像を置いて、右半分に抜粋文を載せることもできます。
(抜粋文を表示するコードも追加する必要はありますが。)

のように記述できます。

画像を横幅いっぱいに表示し、下に抜粋文を表示する場合は、特にcssの記述は必要ありません。
first_stinger5_07

しかし、例として、画像を左側に小さくし、右側に抜粋文を表示するスタイルにしてみたいと思います。
first_stinger5_08
画像の幅を25%、抜粋文の幅を70%にして、それぞれをfloat属性で左右に流し込みます。
ブロック間に5%分の隙間を確保しています。
抜粋文の後にfloat解除する為に、classにclearfixを指定しておきます。

それを、style.cssに追記するか、自作のスタイルシートを追加読み込みしてください。

まとめ(コードをコピペできます)

普通に本文の上に画像とクレジットを表示する場合

「<?php the_content(); //本文 ?>」を以下の通り置換してください。

アイキャッチ画像→本文→クレジットの順に表示する場合

当ブログでは記事の下にクレジットを表示しています。
このような形式にする場合は、「<?php the_content(); //本文 ?>」を以下の通り置換してください。

cssの装飾方法

未分類

スポンサーリンク

hoge.secret.jp_336x280

hoge.secret.jp_336x280

Comment

  1. […] wordpressのテーマstinger5の記事冒頭にアイキャッチ画像を表示する為の改造 […]

  2. ひーさん より:

    まさに私が求めていた情報がここにありました!!ありがとうございます!!愛キャッチで設定+記事でも設定って二度手間でどうにかしたいと思ってました。助かります!

  3. ひーさん より:

    興奮のあまり誤字してました。。。愛キャッチって。アイキャッチですね 笑

Message

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

CAPTCHA


  関連記事

no image
キーボード入力 (今日のテーマ)

BlogPet 今日のテーマ キーボード入力「キーボードをタイピングする時はロー …

no image
育児消耗品の価格調査~アマゾンvs楽天

アマゾンは送料無料 楽天は各ショップ毎に送料が違うので、それも考慮して買いましょ …

no image
ブログ通信簿

パソコンのお仕事というblogをおもしろいなあと思ってつらつらーっと読んでいたら …

no image
WordPressのテーマ’DarkCity’のpタグ

よくブログって空白行でタメを作りますよね。 ここまでタメて一発ギャグ どこが不具 …

no image
ScribeFireにて

ScribeFireを使ってHPからログインしないで投稿するテスト。 ああ、Sc …

wordpressのテーマをstinger5にして最初にカスタマイズした所

wordpressのテーマをstinger5に変更しました。
SEOに強く、アフィリエイト効果も高い洗練されたテーマですが、読者がもっと読み易くなるポイントがあります。
ほんの少しの書き換えで変わるのでご紹介します。
ソースはコピペで簡単に改造できますので初心者でも簡単です。

no image
iCalendar形式の最低限の書式メモ

先日、某HPの為にiCalendar形式のファイル出力phpを作ったのですが、昨 …

no image
3Dチャット@IMVU

3Dのキャラでチャットできる、所謂アバターってやつ。 YouTubeに釣られて登 …

no image
トップページをブログ形式にしてみるテスト

旧geocityesのブログも忘れ去られ、現auOneも更新することが稀になりつ …

no image
blogengine for Free

偶然見つけたので貼っておきますね。 OEM用イントラブログ構築エンジンbloge …