WordPress

WordPressの投稿記事ごとにヘッダー(トップ)の写真を変える方法

投稿日:

今日は久しぶりにワードプレスネタです。
 
今日ちょっとやりたかったことができたのでそれを記録しておきます。
 

ワードプレスの投稿記事ごとに、ヘッダー画像を変える方法

多くのWebページでは、ページの一番上にヘッダー画像と呼ばれる大きな写真が表示されます。
ワードプレスのデザインテーマでも、殆どの場合、このヘッダー画像があります。
そして好みによって変更できます。
ただこのままだと、全ての記事、すべてのカテゴリーにおいて、同じヘッダー画像が表示されます。
今回は、投稿した記事ごとに、ヘッダー画像を変更したいと思いました。その手順を書いています。
今回使用したテーマは、ブロガーさんたち御用達のStinger5です。
 

通常のヘッダー画像の変更の仕方

通常、ヘッダー画像の変更は、管理画面の中の左メニュー内、「外観」 -->「 ヘッダー」とクリックしていきます。
th_1
この変更可能なヘッダーのことを、「カスタムヘッダー」と呼びます。
参考までに、カスタムヘッダーについて詳しく書いてあるブログのリンクを貼っておきます。
こちらのページでは、そのカスタムヘッダーの変更の仕方が詳しく乗っています。
カスタムヘッダーの設定
リンク先の記事ではワードプレスのバージョンが古いので、キャプチャー画面が現在のワードプレスとはかなり違いますが、基本的なところは同じです。
こうすることで、ワードプレスのトップ画像(ヘッダー画像)を変更することが出来ます。
今の最新のワードプレス 4.2でしたら、カスタムヘッダーの変更画面はこんなかんじです。
th_2
 

ヘッダー画像を表示しているプログラムとファイル

ヘッダー画像を表示するには、

  1. ヘッダー画像を使いますよという宣言を書いて
  2. 表示するためのプログラムを書く

という二段構成になっています。
ヘッダー画像を使いますよという宣言は、functions.php というフィルに書きますが、今回はStinger5を使っていますので、その設定はすでに書かれています。
ワードプレスには無数のデザインテーマがありますが、大概のデザインテーマにはこのカスタムヘッダーの設定はされています。 先ほどの 外観 ー ヘッダー という項目がなければ、カスタムヘッダーの設定がされていないことになります。
 
カスタムヘッダー設置についてはこちらのブログが詳しいです。
参考)カスタムヘッダーを設置する
 
 
このカスタムヘッダーを表示するためには、表示するためのプログラムを書きます。
もちろんStinger5にはこの表示用のプログラムも書かれています。
では、その表示用のプログラムの部分を見てみます。
管理画面の 外観 ー テーマの編集
をクリックします。
header.php というファイルがあります。
中程に以下のような記述が見つかります。
<div id="gazou">
<?php if(get_header_image()): ?>
<p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
<?php endif; ?>
</div>
 
これをもっとシンプルにすると
<?php if(get_header_image()): ?>
<img src="<?php header_image(); ?>"  />
<?php endif; ?>
たったこの3行だけでも、ヘッダーイメージは表示されます。
本当は、真ん中の一行
<img src="<?php header_image(); ?>"  />
だけで表示されますが、もしヘッダー画像が無いとおかしなことになってしまうので、ヘッダー画像があった時だけ表示するようにしてあります。だから3行あります。
 
そしてこの状態だと、全ての画面で同じヘッダー画像が表示されます。
 
今回はこれを、ブログの投稿記事ごとに変えようというわけです。
というのも、今新しいネットショップを作っています。
その商品ページのトップ画像が、全て同じだと味気ないと思ったからです。
 
商品ページと言っていますが、要はブログの1投稿記事のことになります。
ネットショップではカスタム投稿という、商品ページ専用のブログみたいなものを使いますが、今回は普通にブログの投稿記事のヘッダー画像を変更しています。
 
 

投稿記事ごとに、ヘッダー画像をかえる方法

これは、多分一番簡単な方法を選びました。
ブログに投稿した記事のページ、もしくは固定ページの場合は、サムネイル画像をヘッダー画像として(でっかく)表示します。
もともとブログの投稿記事には、サムネイル画像が付けられます。
このサムネイル画像を、ヘッダーの画像として利用しようというわけです。
ながれとしてはこうです。

  1. もし、投稿記事のページ(もしくは固定ページ)だったら、サムネイル画像をヘッダーの画像として、大きなサイズで表示してね。
  2. 商品ページ(もしくは固定ページ)じゃなかったら、通常のヘッダー画像を表示してね

簡単でいいですね。
ただ問題もあります。
サムネイル画像は小さく表示されます。 通常は150pxなどです。
今回、投稿記事ごとに表示するヘッダー画像は、Stinger5のヘッダー画像の幅、960pxで表示したいと思っています。
そのため、アップロードするファイルは幅960px 以上にし、サムネイルでは小さく、ヘッダー画像では大きく表示するようにします。
これはとても簡単です。
まず、サムネイル画像を表示するプログラムを見てみます。なぜなら、サムネイル画像を大きく表示したいからです。
 

サムネイル画像表示部分のプログラム

今回使用しているデザインテーマのStinger5は、もともとサムネイル画像が使えます。(おおかたのテーマは使えます)
 
サムネイル画像の設定部分を見てみます。
外観 から、 テーマの編集で、 functions.php をひらきます。
 
Stinger5 でしたら、66行目あたりに 以下の様な記述があります。
//アイキャッチサムネイル
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,100,true);
add_image_size('thumb150',150,150,true);
 
簡単に説明します
add_theme_support('post-thumbnails'); ※ この一行でサムネイルが使えるようになります。
その下の二行で、サムネイルのサイズを決めています。今回は二種類ありますね。
add_image_size('thumb100',100,100,true);
add_image_size('thumb150',150,150,true);
たとえば2行目は、 thumb150 という名前のばあいは、縦150px 横150px で表示してね
という意味です。
これを表示させる場合は、表示させたいところに以下のように書きます
<?php the_post_thumbnail( 'thumb150' ); ?>
the_post_thumbnail(); で、 サムネイルをここに表示して!
という命令になります。
( ) の中に、 thumb150 があります。
これは functions.php で、サムネイル設定したときにつくったサイズ決める部分の名前が入っています。
この()の中を引数といいますが、要は、ひっぱってくる値 ってことですかね。
これで、 150pxの写真を ここに表示してね ということになります。
サムネイルの小さな画像を、ヘッダー画像として表示する場合は、予め大きな写真をアップロードして、それを指定の大きさでヘッダー画像として表示してもらいます。
今回は横960px 縦300pxの画像を表示するようにします。
functions.php の先ほどの箇所に 1行追加します。
 
//アイキャッチサムネイル
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,100,true);
add_image_size('thumb150',150,150,true);
add_image_size('thumb960',960,343,true);  <--- この部分
thumb960 という名前の 横960px 高さ343px の大きさ と指定します。
※343pxは、白銀比の半分の値です。詳しくは白銀比で調べてみてください。
 
あとは表示するところで、この thumb960 を引っ張ってくればいいわけです。
ヘッダー画像を表示するところを見てみます。
Stinger5 の場合は、以下のようになっています。
<?php if(get_header_image()): ?>
<p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
<?php endif; ?>
これは、
・もしヘッダーイメージがあったら
・ヘッダー画像を表示してね
という意味ですが、これに以下の命令を追加します。

  • もし個別の投稿のページか、固定ページだったら thumb960 を表示してね。
  • もしそれ以外のページだったら、今までどおりヘッダー画像を表示してね。

該当箇所に2行追加します。
<?php if(is_singular()): ?>   <-- これと
<?php the_post_thumbnail( 'thumb960' ); ?>  <-- これ
<?php else: ?>
<p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
<?php endif; ?>
</div>
 
もっとシンプルにすると
<?php if(is_singular()): ?>   投稿ページか固定ページですか? もしそうなら
<?php the_post_thumbnail( 'thumb960' ); ?>  thumb960のサイズで表示してね
<?php else: ?>  そうじゃなかったら(投稿ページでも固定ページでもなかったら)
<img src="<?php header_image(); ?>"  /></p>  カスタムヘッダーの画像を表示してね
<?php endif; ?>  以上!
 
if(is_singular()): というのは、 WordPressがもともともっている関数というもので、「もし個別投稿記事のページか、固定ページだったら」という意味です。 だまっていれば YESってことになりますね。 プログラムは暴君なのです。 嫌なら嫌とはっきり言えと。 言わないならもうOKってことだね。ってことでズンズン進んでいきます。
実にわかりやすいです。
実はWordPressには、is_sinular() に似たもので、 is_single() という関数があります。
実はこちらのほうが、よく使うかもしれませんが、今日までその違いがわかりませんでした。
とても簡単に説明すると、 is_single() は、ブログの記事ページかどうかを判断します。
is_singular() は、ブログの記事ページ もしくは 固定ページ かどうかを判断します。。
詳しくはこちらをご覧ください。
WordPressの条件分岐タグis_singleとis_singularの違い
 
 
さて、header.phpに
<?php if(is_singular()): ?>
<?php the_post_thumbnail( 'thumb960' ); ?>
<?php else: ?>
<img src="<?php header_image(); ?>"  /></p>
<?php endif; ?>
と書きましたので見てみます。
これが通常のブログのトップです。
1つ目の投稿 test と、 2つ目の投稿 メガ進化アルバム をそれぞれクリックしてみます。
th_9
 
1つ目の投稿をクリックすると、サムネイルの大きいバージョンがヘッダー画像になっています。
th_4
これは2つ目の投稿記事のページです。ここはもともとヘッダー画像向けに大きな画像をアップロードしていませんでしたので、最大サイズで表示されています。 でもこれも面白いですね。縦長の写真を表示できるように設定すれば、それだけ和っぽいデザインになりそうですね。
 
th_5
 
では固定ページを見てみます。
固定ページでもサムネイル画像を別に指定したので、こんなかんじです。
ヘッダー画像を変えるとガラッとイメージかわりますね。まるで、火鉢売っているお店のページに見えません。
th_8
 
 
なお、プログラム自体、なにか足りない気がしています。
私の今の知識だとこの程度しか出来ないので、どなたか「ここにこれ付け足すといいよ」とか、あればぜひぜひ教えて下さい。
 
よろしくお願いいたします。
ではみなさん。ありがとうございました。

-WordPress
-,

Copyright© ヒバモン , 2018 All Rights Reserved Powered by AFFINGER5.