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

トップページのウェルカムメッセージエリアのバナー画像（茶生）
こんにちは！寿天（すあま）です！

いきなりですが、今回は
WordPress初心者・寿天と茶生（ちゃお）のサイト改造！
WordPressでDIYシリーズ！！

そうッス！姐さん！
トップページのウェルカムメッセージエリアにちょいと気になるところがあるんスよ。
お、さっそくですね。
なになに？
目次
１．トップページのウェルカムメッセージエリアにバナー画像を出したい！
２．サイトのトップページでバナー画像をランダム表示してみた！

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

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

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

あぁ、うん。
載せたね。
・・・ちぃとばかし、インパクトに欠けてねぇッスかねぇ？
どんな雰囲気のイラストを描いているのかが伝わりやすいように、
もうちっとどうにかできねぇッスかねぇ・・・？
あ～確かにそうだね。
少し地味だし、イラストのテイストとか分かりにくいかも。

このお知らせ自体はウィジェットでも載せていて、
そっちの方はバナー画像も一緒なので、いい感じなんですけどねぇ。
ウィジェットで表示しているお知らせ
ただ・・・このサイズの画像をウェルカムメッセージエリアに出しちゃうと、
エリアが大きくなり過ぎてしまうと思うんですよねぇ・・・。
あ・・・それもそうッスね・・・；
あのエリアはなるべくこれ以上広げたくねぇッスね。

しかし、あのイラストはけっこう良いと思うんスよねぇ。
イマジファミリーの良さが出てやすし。
そうだねぇ・・・。
せっかくブログのトップページに出してるお知らせなんだし、
このイラストはできれば出したいけど・・・

あ、そうだ！

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

イマジファミリー３人それぞれのバナー画像を作って、ランダム表示させちゃえばいいんじゃない？
おお！！
そいつぁ名案ッス！！

横長のバナー画像なら、エリアもそこまで広がらねぇッスよね！
よしっ！さっそくやってみましょう！

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

それでは、さっそく実装してみましょう！
【手順１】バナー画像を作る
まずはバナー画像を用意しましょう！
今回は元のバナー画像を３つに切り分けるだけなんで簡単ッスね！
・・・あ、タイトルも入れときやすか！
そうだね。そうしよう。
よしっ！できたッスよ！
ふむ、これもけっこういい感じじゃねぇッスか！

イマジライフ別館（note）バナー（すあま）

イマジライフ別館（note）バナー（福夜）

イマジライフ別館（note）バナー（茶生）

おお～！いいねいいね！
表示させるのが楽しみになってきた♪

あと、ファイル名についてですが、
<任意の文字列>＋番号で付けるようにしましょう。
例えば、「test1.png」、「test2.png」といった具合ですね。
番号は連番で付けます。

作った画像は使用しているテーマディレクトリの下にimagesフォルダを作って格納します。
【手順２】バナー画像をランダム表示する
それでは、作ったバナー画像をトップページのウェルカムメッセージエリア上でランダム表示させてみましょう。
該当箇所の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)
このエントリーをはてなブックマークに追加