Meta Sliderでアフィリエイト商材やメルマガ募集をスライドショー

Meta Sliderでアフィリエイト商材やメルマガ募集をスライドショー

アフィリエイトサイトではデザイン性よりもアフィリエイト商材への導線が優先され、購買意欲を削ぐようなユーザーインターフェースはあまり好まれません。

導線の支障になるという発想からロゴ画像や静的なトップ画像ですら敬遠される傾向にあり、投稿記事でも一切の画像を排除しているサイトも珍しくありません。
WordPressを使っているにもかかわらずアイキャッチ画像すら使わない徹底ぶりです。

テキストだけが無機質に並ぶ退屈なコンテンツよりも、私見ではありますが、情報は適度に画像を交えた方がユーザーの理解度が深まるのではないかと度々思うことがあります。
視覚効果が伴うことでユーザー体験が高まるはずです。

そこで今回は、初心者でも簡単にスライドショーを設置することができるWordPressプラグイン「Meta Slider」をご紹介します。

いくつかのオプションを選択して設置したい投稿欄にショートコードをコピペすだけでスライドショーが出来上がります。

Meta Sliderのインストール

Meta Sliderのインストール
WordPress管理画面から「プラグイン」→「新規追加」を選択し、検索窓から「Meta Slider」を検索してください。
表示されたMeta Sliderの「いますぐインストール」ボタンを押します。

「このプラグインをインストールしてもいいですか?」というダイアログボックスがポップアップしますので、「OK」ボタンを押します。
Meta Slider有効化

次に「プラグインを有効化」をクリックしてインストールを完了します。

サーバによっては、サーバ上に自動的にインストールできない場合もあります。その時はWordPressプラグインサイトからパソコンに一端ダウンロードしてから、FTPでプラグインの保管先(/wp-content/plugins)にアップロードしてください。

Meta Sliderの設定方法

インストール完了後、管理画面に「Meta Slider」メニューができます。
Meta Slider」メニュー
「+」ボタンを押して、新規のスライドショーを作成します。
次に「スライドを追加」ボタンが表示されますので、クリックします。
スライドを追加

スライドに設定する画像は同一サイズのものを予め用意しておきます。
その画像ファイルをアップロードし、「スライダーに追加」ボタンをクリックします。

テキスト、アドレスの設定
追加した各スライド画像に情報を追加します。

一般タブ「キャプション」
スライド画像下部に表示されます。
商品などのキャッチコピーを記入します。
一般タブ「URL」
スライド画像をクリックした際のリンクアドレスを指定します。
別ウィンドウでブラウザを開きたいときは、「新規ウィンドウ」ボタンにチェックを入れます。
SEOタブ「画像タイトルテキスト」
画像にマウスを当てた時の吹き出し文字を設定します。
SEOタブ「画像の代替文字列」
画像非表示時の代替文字なので、「画像タイトルテキスト」と同じでいいと思います。

次にスライドショーのスタイルを設定します。

オプション設定
Flex Slider
レスポンシブ対応のフレックススライダーを指定します。
スライドの幅。
高さ
スライドの高さ。
効果
無料版では「フェード」のみ選択可能です。
テーマ
標準。
矢印
スライド画像前後のナビゲーションの表示有無を指定します。
ナビゲーション
スライド画像の下に丸印で表示されるナビゲーションの表示有無を指定します。「点」を有効にすると、現在何枚目のスライド画像か表示されているかが分かります。
保存
これまでの設定を保存します。
使い方
ショートコードを設置したい箇所にコピペします。

「高度な設定」では「引き伸ばす」の「100%幅で表示」にチェックを入れます。万が一、画像サイズがバラバラでも横幅は統一されます。
それ以外の項目は、デフォルトのままでも特に問題ありませんが、各項目にマウスを乗せると説明が表示されますのでご確認ください。

Meta Sliderの設置方法

上図の使い方欄にあるショートコードをWordPress投稿欄にコピペします。

テンプレートに含めるスライドショーをトップ画像などと入れ替えたいときは「テンプレートに含める」タブをクリックします。

ご利用のテーマ内にスライドショーを適用するため、「テンプレートに含める」タブ内のphpコードを該当箇所に記入します。

動作サンプル

動作サンプル
動作サンプルはこちらからご覧いただけます。




記事内に貼り付けたり、トップ画像の代わりにアフィリエイト商材やメルマガ募集コンテンツに誘導するスライドショーを配置するなど、あなたのブログに合った効果的な使い方をお試しください。

シェアする

コメントを残す

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


*