今回はワードプレスで画像や広告などをランダム表示させる方法についてご紹介します。
サイトに訪れた時に毎回同じ様な画像が表示されると、見てる方としても飽きてしまいませんか？もし「ランダム毎回表示内容が変わる」という事ができるのであれば、それはぜひ取り入れたい機能です。
広告を載せている場合であっても、いくつかの広告をランダムで表示できる様にした方が効果的な事もあります。毎回同じ広告は本当にうっとおしいですからね^^;
実は、非常に簡単にランダム表示させる事ができるので、紹介していきますね。
- ランダムで画像や広告などを表示させたい
- ワードプレスプラグインの「Ads by datafeedr.com」の使い方を知りたい
- サイトの一部分の表示内容を毎回変更して、飽きないサイトを作りたい
コンテンツ
画像をランダム表示させる方法
画像をランダム表示させる場合には、PHPソースを直接いじる方法とプラグインを使う方法があります。
特別難しい処理ではないので、PHPのソースをいじるのもそんなに大変ではありません。ただ、メンテナンスが非常に簡単なのはプラグインを使う方法です。
※色々な処理を実装したいという場合は、PHPのソースをいじる方法を取り入れれば良いと思います。ただ、プラグインを使う方法で基本的には十分です。
ワードプレスのプラグインを使うのが簡単・便利！
「Ads by datafeedr.com」というプラグインを使うと簡単にランダムで画像や広告などを表示してくれます。
※ソースを直接いじる方法もあるとお伝えしましたが、後からPHPのソースを直接いじる方法に切り替える事もできます。特別なこだわりがなければ、基本的にプラグインで十分です。
「Ads by datafeedr.com」の場合、カスタム投稿（後で説明します）に画像や広告などを登録していき、その中でカテゴリ分けを行います。そのカテゴリ毎にランダムで広告表示するというものになります。
プラグインを使用する場合は、記事の中にショートコードを埋め込んで使用します。記事中でショートコードを記載すると、各画像の中から一つをランダムで表示しれてくれる様になります。
※ワードプレスのテンプレートなどに組み込んでしまいたい場合は、ショートコードではなく、PHPを直接編集する方法もあります。
プラグイン「Ads by datafeedr.com」を使ってみる！
「Ads by datafeedr.com」を使う手順を見ていきましょう。
１．プラグイン「Ads by datafeedr.com」をダウンロード
まずは、「Ads by datafeedr.com」をダウンロードします。
手順は、「ダッシュボード」⇒「プラグイン」⇒「新規追加」と進みます。
検索欄がでますので、「キーワード」の部分に「Ads by datafeedr.com」と入力します。
■「Ads by datafeedr.com」の検索結果
これは既にダウンロード済みの状態での検索結果ですが、まだダウンロードしていない状態であれば、「今すぐダウンロード」というボタンが表示されます。そのボタンをクリックするとダウンロードが開始します。
ダウンロードが完了したら有効化をして下さい。
これで使用準備は完了しました。
２．Adsの投稿
新しいAdの追加
ダッシュボードに「Ads」が追加されていると思います。「Ads」の中の「Add New Ad」をクリックします。
■ダッシュボードのAds
そうすると、「Add New Ad」のカスタム投稿画面が開きます。
■「Add New Ad」のカスタム投稿画面
このカスタム投稿画面にランダムで表示させたい画像・文言などを追記していきます。
使い方は簡単で、
- タイトル（便宜的な名前でＯＫ・公開されない）
- 内容（ランダム表示する内容・公開される）
を記述すればOKです。
※ここに記載する内容はワードプレスの記事画面のテキストモードと同じになりますので、タグなども含めて記述する必要があります。
Groupの設定も可能
ちなみに、画面右のGroupの部分でグループ分けも行う事ができます。これでランダムに表示する際のカテゴリ分類を管理する事ができる訳です。Groupを活用すると、
- Group1⇒記事上部のみに表示
- Group2⇒サイドバーのみに表示
なんて事もできる様になります。
場所や記事によって表示する内容を変更したい場合はここでグループ分けしておきましょう。
公開すれば設定完了
記述が完了したら、公開ボタンを押します。このAdsのページは一般投稿のページと見た目はほぼ同じですが、公開ボタンを押してもページ投稿される訳ではありません。
ここで言う公開は、ランダムで表示する画像・テキストの一つとして登録しましたよ。という事を示しています。ランダムで5つの画像を表示させたいと思ったら、「Add New Ad」を5つ作成する事になります。
再度「Add New ad」をクリックすれば、さらに次の画像等の追加設定ができる様になります。
３．Adsの設定
ダッシュボードの「設定」部分から「Ads」が選択できると思います。
この「Ads」を選択しましょう。
そうすると以下の様な画面が表示されます。
■Ads設定画面
ここでは画面上下でそれぞれ以下が設定できます。
・画面上の部分：基本設定
・画面下の部分：ショートコード、PHPコードのジェネレータ
それぞれを簡単に解説します。
画面上の部分：基本設定
上のチェックボックス部分はワードプレス内のテキストのウィジェットでも、Adsに登録した内容を表示しますよ。という意味です。
下のチェックボックス部分は管理者としてワードプレスにログインしている時の回数も考慮してランダム表示しますよ。という意味です。
これは好みに応じてチェックをすればＯＫですが、基本的には上のチェックボックスだけ入れておくとベターです。
■基本設定部分
画面下の部分：ショートコード、PHPコードのジェネレータ
ここでは、実際にランダムで画像等を表示する際のショートコード、もしくはPHPコードを生成する事ができます。
それぞれのラジオボタンにチェックをすると自動でコードが生成されます。
いずれかの方法で記事内にコードを記述します。
- 記事の中やウィジェットの中で使用したいのであればショートコードを生成して、それを貼りつければＯＫ。
- PHPファイル自体で広告設定をしたいのであれば、PHPコードを生成して、必要な箇所にそれを貼りつければＯＫ。
■ショートコード、PHPコードのジェネレータ部分
パラメータの指定
ちなみに、ShortcodeかPHPのいずれかを選択すると実際のコードが表示されます。
|
1 |
[dfads params='groups=17&limit=1'] |
コードの中に「groups=-1」という記述がされる事がありますが、これがパラメータの１つでALL Ads（全グループ）を対象としますよ。という意味になります。
特定のグループを対象とした場合には「groups=XX」のXX部分に数値が設定されます。この数値が各グループと紐づく事になります。
また、limitは表示数となります。ここを設定しないとグループの中に入っているコンテンツ全てが表示されてしまう事があるので、個数（基本はたぶん1）を設定しましょう。
■注意点
「テキストモード」ではなくて「ビジュアルモード」でShortcodeを貼りつけてしまうと、正常に動かない事があります。
この時テキストモードで該当のShortcodeを見てみると何やらタグに囲まれている事が分かると思います。これは自動で付与されるタグの様で、ショートコードの処理に影響を与えてしまいます。
なので基本的にはテキストモードでShortcodeを貼りつけると良いと思います。ただ、「一度テキストモードで開くとレイアウトなどが崩れてしまう恐れがある」といった理由でテキストモードで開きたくないというケースもあると思います。
その時は以下の手順でShortcodeを貼りつけると良いです。
- ワーク様の下書き記事（以下ワーク様記事）を作成する
- ワーク様記事にテキストモードでShortcodeを貼りつける
- ワーク様記事にてビジュアルモードで表示
- ビジュアルモードで表示されているショートコードをコピー
- 本来ショートコードを設定したい記事に貼り付ける。
おまけ
Adsを使用する上で必要最低限の機能を紹介しましたが、項目一つ一つについて細かく説明をされているサイトも見つけましたので、紹介をしておきます。
本記事で紹介した内容で、基本的な事はできると思いますが、もっと細かい設定をしたいという場合は参考になります。
４．カスタマイズで可能性を広げる
ここから先は、さらにカスタマイズをする際のお話です。
ランダムで画像を表示する機能は完成。次は、（一部を除いた）多数の記事の上下でランダムで画像を表示させたいと思う事があると思います。実際、私はそう思いました。
その場合は、
・ランダム表示機能⇒今回紹介したAds「Ads by datafeedr.com」
・記事の上下表示⇒PHPのソースを改修、もしくは別の専用プラグインを使う
という形で実現する事ができます。
PHPのソースをバリバリいじれる人はランダム表示機能もPHPで書いてしまうのかもしれませんが、個人的にはメンテが大変だと思います。
※記事の上下表示でプラグインを使用する場合はAdsとの相性によっては実現できないものもあります。いくつか試してみると良いです。
まとめ
今回はワードプレス上で、画像や広告などをランダムで表示する方法についてご紹介をしました。
画像が変わる事で、サイト閲覧をする際にも飽きずに見て入られると思いますので、ユーザビリティを考えた上で、ぜひ取り入れてみてほしい機能です。
今後、サイトに求められるクオリティはどんどん高くなると思いますので、少しでもサイトのクオリティを高められる機能は活用すべきです。
