WordPressで画像リンクをランダム表示して目玉コンテンツを目立たせよう!

トップページのウェルカムメッセージエリアのバナー画像(茶生)

こんにちは!

WordPress初心者・寿天(すあま)と茶生(ちゃお)のサイト改造!

WordPressでDIYシリーズ!!

そうッス!姐さん!
トップページのウェルカムメッセージエリアにちょいと気になるところがあるんスよ。

お、さっそくですね。
なになに?

トップページのウェルカムメッセージエリアにバナー画像を出したい!

最近、トップページのウェルカムメッセージエリアにおいらたちイマジファミリーのイラストや漫画のお知らせを載せたじゃねぇッスか?

トップページのウェルカムメッセージエリア(before)

あぁ、うん。
載せたね。

・・・ちぃとばかし、インパクトに欠けてねぇッスかねぇ?
どんな雰囲気のイラストを描いているのかが伝わりやすいように、
もうちっとどうにかできねぇッスかねぇ・・・?

あ~確かにそうだね。
少し地味だし、イラストのテイストとか分かりにくいかも^^;

このお知らせ自体はウィジェットでも載せていて、
そっちの方はバナー画像も一緒なので、いい感じなんですけどねぇ。

ウィジェットで表示しているお知らせ

ただ・・・このサイズの画像をウェルカムメッセージエリアに出しちゃうと、
エリアが大きくなり過ぎてしまうと思うんですよねぇ・・・。

あ・・・それもそうッスね・・・;
あのエリアはなるべくこれ以上広げたくねぇッスね。

しかし、あのイラストはけっこう良いと思うんスよねぇ。
イマジファミリーの良さが出てやすし。

そうだねぇ・・・。

せっかくブログのトップページに出してるお知らせなんだし、
このイラストはできれば出したいけど・・・

あ、そうだ!

この画像、ちょうど3人それぞれのイラストが帯みたいに連なってるじゃない?

だったら・・・

イマジファミリー3人それぞれのバナー画像を作って、ランダム表示させちゃえばいいんじゃない!?

おお!!
そいつぁ名案ッス!!


横長のバナー画像なら、エリアもそこまで広がらねぇッスよね!

よしっ!さっそくやってみましょう!

サイトのトップページでバナー画像をランダム表示してみた!

それでは、さっそく実装してみましょう!

【手順1】バナー画像を作る

まずはバナー画像を用意しましょう!

今回は元のバナー画像を3つに切り分けるだけなんで簡単ッスね!
・・・あ、タイトルも入れときやすか!

そうだね。そうしよう。

よしっ!できたッスよ!
ふむ、これもけっこういい感じじゃねぇッスか!

イマジライフ別館(note)バナー(すあま)

イマジライフ別館(note)バナー(福夜)

イマジライフ別館(note)バナー(茶生)

おお~!いいねいいね!

表示させるのが楽しみになってきた♪

あと、ファイル名についてですが、
<任意の文字列>+番号で付けるようにしましょう。

例えば、「test1.png」、「test2.png」といった具合ですね。

番号は連番で付けます。

作った画像は使用しているテーマディレクトリの下にimagesフォルダを作って格納します。

【手順2】バナー画像をランダム表示する

それでは、作ったバナー画像をトップページのウェルカムメッセージエリア上でランダム表示させてみましょう。

該当箇所のphpファイルに以下のソースコードを追加します。

1
/**
2
 * バナー画像をランダムで表示する
3
 */
4
<a href="リンク先URL" target="_blank">
5
    <img src="<?php echo get_template_directory_uri(); ?>images/任意のファイル名<?php echo (mt_rand(1,3)); ?>.png" alt="任意の文字列"></img>
6
</a><br/>
7
<a href="リンク先URL" style="font-size: 20px" target="_blank">Imagination Life 別館(note)</a>
なるほど。
phpでファイル名を組み立てて、画像を呼び出すんスね。

そして、mt_rand()ってぇのがランダムで番号を出す関数ってぇわけッスか。
今回の場合は、mt_rand(1,3)とすることで、
1~3のいずれかの番号をランダムで決めてもらうんスね。

うん、その通りです。

あと、テキストリンクも追加してみましょう。

画像だけだと、それがリンクかどうか分かりにくいので、
テキストリンクも一緒に載せておくといいと思います。

では、スタイルも少し整えて表示させてみましょう!

どうだ!ドン!

トップページのウェルカムメッセージエリアのバナー画像(茶生)

やったッス!!
おいらのバナーが表示されたッスよ!!

うんうん。いい感じですね♪

では、再読み込みさせてみるとどうなるでしょうか?

それ!F5ドン!

トップページのウェルカムメッセージエリアのバナー画像(すあま)

出たぁーーーー!!

今度はすあま姐さんの画像が出たッス!
これけっこう面白いッスね!

そうだね!
おみくじみたいで楽しいね!(笑)

画像のランダム表示って、サイトに訪れる楽しみを作るのにいいかもしれないですね!

他のところでも使ってみたいなぁ☆

最後に

はい!
今回は「WordPressで画像リンクをランダム表示して目玉コンテンツを目立たせよう!」ということでお送りしました。

これけっこういいですね!
サイトが一気に楽しいものになりますね。

そうッスね!
想像していた以上に良いもんができたッスね!
今日は何だか楽しそうなことしてるわね☆
あ、福夜(ふくよ)姐さん!
ちょうど良いところに!
せっかくッスから、福夜姐さんにも見ていただきやしょう!

そうだね!

トップページのウェルカムメッセージエリアに、イマジファミリーそれぞれのバナー画像がランダム表示されるようになったよ♪

トップページのウェルカムメッセージエリアのバナー画像(福夜)

んまぁ!!
私の画像だわ!!


なるほど、どの画像が表示されるかは毎回のお楽しみってことね。
ステキ!
ますます楽しいサイトになってきたわね☆

他のところもこれ使って何かできないかな~。

ちょっと考えてみますか^^

 

こちらの記事を読んで、参考になった!面白かった!という方は、
下のステキボタンやソーシャルボタンにて教えてください^^!
とても励みになります!
  • ステキ! (0)