WordPress便利プラグイン!スライドショーを作ってみる(メイン画像編)


アフィリエイトで稼ぐためのブログは、独自ドメイン+レンタルサーバ+WordPressという組み合わせが、今では一般的ですよね。


WordPressは拡張機能である「プラグイン」をインストールすることで、自分好みのブログに簡単にカスタマイズできるのが一つの魅力でもあります。


実は、メルマガの読者から、「スライドショーを作るにはどうしたらいいですか?」という問い合わせがあったので、いろいろ調べてみた結果、プラグインを使えばできることがわかりました。


今回の記事では、華やかなブログでよく使われる「スライドショー」を作ることができるプラグインを紹介したいと思います。

ブログを華やかにするスライドショー

特に物販系のサイトによく見られますが、トップページにドカンと表示されているイメージ画像が、次から次と切り替わっていくWebページを見たことないですか?


あれは画像を切り替えるスライドショーという機能で実現されているんですね。


WordPressでは、「Meta Slider」というプラグインを使えばスライドショーを簡単に作ることができます。


今回は、↓のように、トップページに表示される「メイン画像」を切り替えるスライドショーの作り方について解説していきます。



テンプレートは、賢威7のBeauty版(Gold)を例にしています。

以下の手順では、PHPのソースとCSSを修正します。
修正を間違えた場合、最悪WordPressが動作しない可能性もあるため、事前に必ずバックアップを取るようにお願いします。(自己責任でよろしくです)



では、すすめます。

スライド画像の準備

まずは、スライドにするための画像が必要になるので、任意の枚数の画像を用意します。


スライド画像は、無料素材の写真を提供するサイトなどから、ダウンロードすればいいです。


僕の記事でも、無料素材のサイトを紹介しているので、参考にどうぞ。
ブログで使える良質な無料素材サイトの紹介(写真、イラストなど)


注意点として、

スライドの画像は全て同一サイズにすること。


また、Beauty版でスライドの画像をコンテンツとピッタリ同じ幅にするのであれば、横が1,200ピクセルの画像を用意してください。

おそらく他のテンプレートも同じ幅だと思われますが、実際に使う時は確認が必要です。

画像の高さは任意でいいですが、あまり大きいものだと肝心のコンテンツが見えなくなるので、ほどほどに。


ここで紹介するスライドの画像は1,200ピクセル×500ピクセルとしています。

スライドショープラグイン(Meta Slider)のインストール

スライドショーが作れるプラグイン「Meta Slider」をインストールします。


WordPressの管理画面のメニューより、「プラグイン」→「新規追加」を選択。
プラグイン新規追加


キーワードに「Meta Slider」を入力して、検索。
プラインの検索


「今すぐインストール」をクリック。
プラインをインストール


「有効化」をクリック。
プラグインを有効化


管理画面のメニューより、「Meta Slider」→「Meta Slider」を選択。
プラグイン設定メニュー選択

スライドショーの作成

わかりづらいですが、左側の緑の矢印部分にマウスを置くと手の形になるので、そこでクリックします。
新規スライドショー作成


「スライドを追加」をクリック。
スライド追加


用意したスライドの画像を、赤枠部分にドラッグ&ドロップでアップロード。
スライド画像のアップロード


「スライダーに追加」をクリック。
スライダーに追加


スライドの画像が名前の順番通りにならない場合があるので、そういう場合は移動したい画像をドロッグすると簡単に順番を並べ替えられます。
スライド画像の移動

また、スライド画像それぞれに、クリックされた時にジャンプするURLを指定することもできます。

画像ごとに違う記事にジャンプさせたい場合はかなり便利。



画像の幅、高さを入力して、「保存してプレビュー」をクリックすると、スライドショーのプレビューが始まります。
スライド画像のプレビュー


プレビュー画面です。スライド画面で上から並べた順番でスライドしていきます。
スライド画像のプレビュー

プレビューを止める時には、ESCキーを押すか、プレビュー画面の右下にある小さい×ボタンをクリックしてください。


これでスライドの設定は完了ですが、トップページのメイン部分にスライドショーを表示させるためには、PHPソースの修正が必要になります。

スライドショーがトップページのメイン部分に表示されるように設定する

PHPに貼り付けるスライドショーのコードをまず取得します。


右下の「使い方」にある「テンプレートに含める」タブを選択し、その中に表示されているPHPのコードをコピー。

このコードはメモ帳にでも貼り付けておいてください。
スライドコードをコピー


管理画面のメニューより、「外観」→「テーマの編集」を選択。
テーマの編集


修正するPHPソースを選択します。

右側の「メインインデックスのテンプレート(index.php)」を選択。
PHPソースの選択


the_breadcrumbsの文字列を目印に、
<!–▲パン屑ナビ–>の次の行に、コピーしたスライドショーのコードを貼り付けます。(赤枠部分)
スライドーショーコードの貼り付け


これでトップページのメインの部分に、スライドショーが表示されるはずです。



ここまでで一応完成なんですが、下の画像を見るとわかるように、スライド画像の上に結構スキマができています。

逆にスライド画像の下にはまったくスキマがないため、このままでは見た目がよくありません。
ひとまず完成したスライドショー


このままでもいい人は作業はここで完了ですが、スキマのアンバランスをなんとかしたい人は更に、PHPソースと、CSSはの修正が必要です。

スライド画像のスキマのアンバランスを解消する

再度、同じPHPソース(index.php)を修正します。

さきほど追加したスライドショーのコードを挟むように、赤枠部分のタグコードを追加してください。

<div style="margin-bottom:2em;">
</div>

PHPソースの修正


次に、cssを修正します。

右下にある、スタイルのbase.cssを選択。
base.cssを選択


Ctrl+Fキーでsite-header-contsという文字列を検索し、以下のようにpaddingの30pxを0pxに修正します。
パディング修正前 → パディング修正後


これでようやく完成です。
お疲れさまでした。

『完成版スライドショー』※グローバルメニューを付け足しています。
完成したスライドショー

※完成版にはスライド画像の上下に均等なスキマを設定していますが、CSSを更に修正することで、このスキマを0にすることもできないことはありません。ただし、その修正により他のレイアウトが崩れる可能性があるため、今回は均等なスキマとなる修正を施しています。




今回、賢威のテンプレートを例に解説しましたが、他のテンプレートでも基本的には同じ方法でメイン画像のスライドショーを作ることができるずです。


ただし、PHP、CSSはテンプレートごとに異なるため、テンプレートにあった修正方法を探ることになります。

スライドショーは記事や固定ページにも追加できる

スライドショーは、この記事でも追加しているように、記事や固定ページの中にも追加できます。

この場合は、投稿画面に以下のスライドショー用のショートコードボタンが表示されるので、これを押すだけす。
スライドショーショートコードボタン

デフォルト以外で使えるスライドショー

Meta Sliderでは、画像の切り替わり方にはいろんなバリエーションが用意されているようですが、いくつか動作確認したところ、動作しないものがほとんどでした。

その中で、デフォルトのフェード以外で使えそうなものがあったので、2つほど紹介します。


2つほど他のスライドを紹介していたんですが、いろいろ動作確認していると、デフォルトの「Flex Slider」以外は使わない方がいいようです。

スライドの動作がどうにも不安定になります。(挙動が怪しい)


よって、紹介するのやめます。すみません。

スライドショーでブログを華やかに

スライドショーはトップページのメイン部分に表示されるものなので、嫌でも目につきます。

ブログの中でアピールしたいコンテンツなどがあれば、スライド画像にリンクを貼ったりして、訪問者を上手に誘導してみてはどうでしょうか。


スライドショーを使うことで、少なくとも訪問者の目をひくことはできると思いますよ。


興味がある方は、挑戦してみくてください。

「WordPress便利プラグイン!スライドショーを作ってみる(ロゴ画像編)」

にほんブログ村 小遣いブログ アフィリエイトへよろしければポチお願いします。


メルマガプレミアム講座始めました
お名前 (必須)

メールアドレス(必須)