株式会社シスアナコム

情報システムに関することなら、どんなことでも適切に助言いたします!

この投稿は1年以上前に公開されました。
現在では状況や内容が変わっている可能性があります。
ご注意下さい。m(_ _)m

STINGER3で単一記事の投稿文書にアイキャッチ画像を表示する

      2014/04/16

シスアナコム社長の杉山です。

週末なのでいつも通りひとことを更新します。

今週はワードプレスのテーマをSTINGER3に変更しました。

その後、とりあえず早く修正した方が良いと感じたメニューとアドセンス広告の部分を修正。

その作業記録のため、ほぼ毎日のようにひとことを書きましたが、基本は無理せず週1で更新にしたいと思っています。

アイキャッチ画像の「NO IMAGE」への対応

今回、STINGER3をカスタマイズする部分はアイキャッチ画像です。

STINGER3ではアイキャッチ画像を上手く活用して画面をデザインしています。

ただし、アイキャッチ画像が登録されていないと、「NO IMAGE」と表示されて少しかっこ悪くなります。

そのため、過去の文書を修正してアイキャッチ画像を登録した方が良いです。

もし、登録過去の文書内に画像が存在するのであれば「Auto Post Thumbnail」というプラグインで対応することもできます。

本サイトの場合は文書数がまだ少ないので、手動で対応するつもりです。

単一記事へアイキャッチ画像を表示させる

しかし、文書のタイトルやアイキャッチ画像をクリックして、単一記事(文書全体)を表示させると、アイキャッチ画像は表示されません。

せっかく登録した画像なのですから、文書内にも表示されるようにカスタマイズしてみます。

文書内に表示するアイキャッチ画像のサイズは、トップページの一覧で表示されている画像の大きさではちょっと小さい。

なので、単一記事にはもう少し大きめの画像を表示します。

さらに、その画像をクリックした時に、プラグイン「wp-jquery-lightbox」でさらに拡大して表示できるようにしてみます。

カスタマイズするファイルはsingle.php

前回のひとことと同様に、STINGER3がインストールされたフォルダから子テーマのフォルダにファイルをコピーします。

コピーすべきファイルは「single.php」

単一記事を表示するために使われるプログラムです。

コピー後、ワードプレスの管理メニューから外観→テーマ編集で「単一記事の投稿(single.php)」をクリックして編集を行います。

アイキャッチ画像を表示するプログラム

アイキャッチ画像を表示するプログラムを挿入する部分は、ぱんくず→タイトル→公開日→最終更新日の順に表示さた後、本文の前。(「<?php the_content(); ?>」の前。)

ここに以下のプログラムを挿入します。

</div>
<?php if ( has_post_thumbnail() ) the_post_thumbnail('medium'); ?>
<?php the_content(); ?>

これでアイキャッチ画像が本文の前に表示されるようになるはずです。

大きさの指定を「medium」にしたのは、アイキャッチ画像を画面一杯に表示すると大きすぎると感じたから。

画面全体に表示させたい場合は、大きさの指定を外して下さい。

余談ですが、関数名がサムネイル(thumbnail)になっているのは、以前、アイキャッチ画像のことを投稿サムネイルと呼んでいたからだそうです。

拡大表示に対応させる

次に、プラグイン「wp-jquery-lightbox」で拡大表示するため、先ほど挿入した1行のプログラムを以下のように修正します。

</div>
<?php if ( has_post_thumbnail() ): ?>
<?php $src_info = wp_get_attachment_image_src(get_post_thumbnail_id(),'full'); ?>
<a href="<?php echo $src_info[0] ?>" rel="lightbox">
<?php the_post_thumbnail('medium'); ?>
</a>
<?php endif; ?>
<?php the_content(); ?>

これで画像をクリックすると拡大して表示されるようになるはず。

大きな画像へのリンクを作って「rel=”lightbox”」と指定しているだけです。

では。

 - ひとこと, ひとこと(ワードプレス)

↓ブログランキングに参加しています!


ネット・PC(全般) ブログランキングへ
にほんブログ村 IT技術ブログ ITコンサルティングへ
にほんブログ村

Message

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