WordPress スライドショー

デザイン五輪書

Meta Sliderを導入して、WordPressにスライドショーを組み込む

読了までの目安時間:約 18分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

Meta Sliderを導入して、WordPressにスライドショーを組み込む

前置き

プラグインは便利ですが・・・

WordPressテーマであるTHE WORLDは、最初から様々な機能が付属されていて、プラグインを新たに入れる事なく、サイトを運営する事が可能です。

プラグインは、WordPressの大きな魅力の一つです。
ですが、プラグインを沢山導入し過ぎると、WordPressで作ったサイトの表示速度がどんどん遅くなってしまいます。
サイトの表示に何秒もかかってしまうようですと、折角訪れて下さった方も、痺れを切らして、ブラウザを閉じてしまうでしょう。

更に、プラグインの中には、裏で隠れてプラグイン製造元へ被リンクをバンバン送り出す、スパム紛いの仕掛けを施しているものだってあります。
この点に関しては、別記事にてご紹介致します。

結局は、プラグインは必要以上のものは入れないと言う事が大原則なのです。
そう言う意味で、元から様々な機能が付属されているTHE WORLDは画期的なWordPressテーマと言えるでしょう。

そのような高性能なTHE WORLDではありますが、更に高性能にする為に、導入しておくと良いプラグインもあります。
これから、1つずつ記事にして紹介して参りたいと思います。

▲もくじへ戻る

迫力のあるスライドショー!

今回ご紹介するのは、WordPressの好きな場所にスライドショーを導入する事のできるプラグインです。

スライドショーとは、静止画を自動で次々と見せて行く事で、サイトの閲覧者に視覚的にアピールする事のできるものです。
アニメーションGIFでも同様の事はできますが、こちらはGIF画像ですので、画質に問題があります。
スライドショーの場合は好きな拡張子の画像を組み込めるので、高画質で迫力のある画像を使用する事も可能なのです。
このようなスライドショーが自分のサイトにあったら格好良いとは思いませんか?

 
でも、FLASHなどの専門的な知識がないと難しいんじゃないの?

・・・実は、以前の私もそう思っていて、ヘッダーにスライドショーが設置してあるサイトを見る度に劣等感を感じていました。
それだけ、スライドショーの有無がサイトの見栄えを変えるのです。
スライドショーが貼ってあるだけでも、「デキる人」が演出でき、ウェブデザイナーとしての説得力に差が出て来るかもしれません。

▲もくじへ戻る

スライドショーの設置は難しい?

結論から入りますが、スライドショーの設置は呆気に取られるほど簡単です。
WordPressの場合、Meta Sliderと言うプラグインを導入して、画像を設定するだけです。
あとは、HTMLの基礎知識程度あれば、難なくスライドショーを設置する事は可能でしょう。

このような簡単なものを設置するだけで、人から見れば凄いと言うハッタリを醸し出す事ができるのですから、設置しない手はないですよね?
ただ、このままだと少しだけ問題がありますので、一ヵ所だけソースコードに手を加える必要があります。
自力で対策を行うとなるとかなり厄介ですが、この記事の通りに設定を行えば良いだけですので、挑戦してみて下さい。

▲もくじへ戻る

Meta Sliderプラグインの導入方法

Meta Sliderとは?

Meta Sliderとは、4種類のスライドショーを使用する事ができるプラグインです。
細かい設定が可能で、複数のスライドショーを保存できると言う点も、このプラグインの特徴です。

Meta Sliderには無料版と有料版とがあります。
私自身は無料版しか使用した事がありませんが、それでも、不自由なく使用する事ができています。

Meta Sliderには4種類のスライドショーがありますが、それぞれで見た目が異なったり、設定できるスライドのめくれ方(Effect)に違いがあります。
また、使用デバイス(PC、タブレット、スマートフォンなど)の画面サイズに自動で対応するレスポンシブデザインになっているものと、なっていないものとがあります。

▲もくじへ戻る

Meta Sliderプラグインのインストール

それでは早速、作業に入りたいと思います。
あなたのWordPressの管理画面を開いて下さい。

メニューの中の「プラグイン」の中から、「新規追加」をクリックします。

プラグインの新規追加

「プラグインのインストール」のページにある検索窓の中に、「Meta Slider」と入力し、「プラグインの検索」をクリックします。

プラグインの検索

表示された検索結果の中から、Meta Slider下部の「いますぐインストール」をクリックします。

いますぐインストール

Meta Sliderのインストールが完了しましたら、「プラグインを有効化」をクリックします。

プラグインを有効化

▲もくじへ戻る

Meta Sliderの設定

Meta Sliderプラグインの基本設定

Meta Sliderが有効化されると、WordPressのサイドバーメニュー内に、「Meta Slider Lite」と言うメニューが追加されます。
ここから、スライドショーの設定を行います。

Meta Slider Lite

Meta Sliderの設定画面が開いたら、「New Slider」横の「+」をクリックします。
これで、新しいスライドショーが追加されます。

スライドショーの追加

そして、横の「Add Slide」をクリックする事で、画像ファイルの選択画面が開きます。
画像を選択すると、スライドが1枚追加されます。

スライドの追加

スライドが追加されると、「Slides」の一覧に追加されたスライドが表示されます。

「General」タブの下の記入欄には、スライド下部に表示される文字を入力します。

スライドショーに表示される文字

その下の記入欄には、スライドが表示された際にクリックすると飛ぶリンク先を記入します。
一例ですが、スライドショーに表示される商品をアフィリエイトすると言う目的で使用する場合、アフィリエイトリンク(メルマガ用URL)をここに貼ります。

スライドのリンク設定

「SEO」タブをクリックすると、スライドに対応させる「alt属性」と「title属性」を設定できます。

スライドの属性の設定

「alt属性」は、画像の内容を把握できないクローラーに対し、その画像が何であるかを説明する為に設定します。
昔ほどではないにしろ、検索結果にも反映しますし、画像検索用にも使用されます。
また、視覚障害者向けのブラウザの音声読み上げ機能では、画像は「alt属性」に書かれている文字を読み上げます。

「title属性」はグローバル属性と呼ばれ、画像だけではなく、全ての要素で使用可能な属性です。
画像に使用する場合は画像のタイトルや著作権情報を記入し、リンクに使用する場合はリンク先のタイトルや説明を記入します。
また、画像にマウスカーソルを当ててしばらく動かさずにいると、「title属性」に記述した文字がツールチップとして表示されます。

▲もくじへ戻る

Meta Sliderプラグインの詳細設定

Meta Sliderの詳細設定は、画面右側で行います。
「Settings」の下に表示されている4つのボタンは、スライドショーの種類を設定できます。
全部で4種類ありますので、それぞれ試してみて下さい。

その下の部分の「Width」はスライドショーの横幅、「Height」はスライドショーの高さを設定します。

スライドショーの詳細設定

その下にある「Effect」で、スライドが切り替わる時の見え方を変更する事ができます。
先に書いたように、使用するスライドショーの種類によって、使用可能な「Effect」が異なります。

それ以外の部分で、スライドのスピードなどの様々な設定を変える事が可能ですが、基本的には変える必要はありません。
変える場合でも、英語ですので、何となく意味は分かるかと思います。

個人的に一箇所設定を変えるとすれば、スライドの表示順番を不規則に再生する「Random」にチェックを入れるくらいです。

スライドのランダム再生

設定が終わったら、画面右上の「Save」ボタンをクリックして、設定を保存します。

Meta Sliderの設定を保存

▲もくじへ戻る

スライドショーを設置する方法

記事以外の場所に設置する場合

スライドショーの設置方法は、記事の中に設置する場合と、記事以外の場所に設置する場合とで違います。
と言うのも、初期状態のWordPressだと、記事の中ではPHPが使用できないからです。

まずは、記事以外の場所にスライドショーを設置する場合のPHPコードを表示させてみましょう。

Meta Sliderの詳細設定を行った画面を下に下げてみて下さい。
「Usage」と表示されている部分があると思います。
その中の「Template Include」タブをクリックします。

Template Include

表示されているPHPコードをコピーして、スライドショーを表示したい部分に貼り付けます。

PHPコードをコピー

貼り付ける部分は、WordPressのサイドバーメニューの中の「外観」の中の「テーマ編集」の中から選びます。

テーマ編集

▲もくじへ戻る

記事の中に設置する場合

記事の中にスライドショーを設置する場合は、ショートコードと言われるものを利用します。
「Usage」の中の「Shortcode」タブをクリックし、表示されたショートコードをコピーして、記事の中に貼り付けます。

ショートコード

記事の中にスライドショーを設置する場合、もう一つ方法があります。
記事の投稿画面の中に「Add slider」と言うアイコンが追加されていますので、それをクリックします。

記事の中にスライドショーを追加

すると、スライドショーの名前を選択する画面が表示されますので、該当名をクリックします。
すると、記事内にショートコードが生成されます。

▲もくじへ戻る

Meta Sliderからのリンクパワー漏れを防ぐ

Meta Sliderがあなたのサイトの評価を落とす・・・かも!?

上記の内容さえ把握していれば、Meta Sliderは使用できます。
・・・ですが、初期状態ではちょっと問題点があります。

もし、このままの状態でMeta Sliderを使い続けると、リンク付きスライドの枚数が増えるに連れ、どんどんあなたのサイトの評価が外部のサイトに流失して行ってしまう可能性があるのです。

▲もくじへ戻る

リンクを貼ると言う行為の意味

外部サイトにリンクを貼ると言う行為は、単に、読者を外部サイトへ誘導すると言う効果だけではありません。
SEO的には、リンク先のページの内容を推薦する・・・と言った意味合いを持っています。

つまり、沢山のサイトからリンクを受けたページは、それだけ価値のあるページだと言う事になります。
それが、Googleの検索結果の順位に大きな影響を与えています。

それだけならば特に気にする事もないでしょうが、意識せずにリンクを外部へ向けて貼りまくっていると、いくつか不都合な点が出て来るのです。

一例ですが、ページ内のリンクの数に応じて、送られるリンクの評価価値が分散すると言われています。
本当の意味で評価リンクを送りたいサイトがあったとしても、既にMeta Sliderで沢山の外部サイトへのリンクが飛ばされていた場合、あなたからの評価リンクはあまり効果的でなくなるのです。
25個外部サイトへのリンクが貼ってあるページからのリンクよりも、全く外部サイトへのリンクが貼られていないページからリンクをもらった方がありがたい訳です。

また、外部サイトへリンクを貼る事で、リンク元のページの価値を相手サイトに提供しているとも言われています。
つまり、外部サイトを推薦する度に、元のページの評価が若干減り、Googleの検索結果に悪影響を与えると言うのです。

SEOの本によく書かれている事ですが、1ページ内に貼るリンク数は、最大でも100個までに抑える必要があるそうです。
100個と言わず、1個でも無駄なリンクは抑えるに越した事はありません。

▲もくじへ戻る

rel="nofollow"とは?

そこで、送るリンクにrel属性を使って、リンク先のページは評価しませんと言う意志をクローラーに伝える必要があります。
記述は「rel="nofollow"」です。
この「rel="nofollow"」はGoogle独自の属性ですので、他の検索サイトの検索結果には反映しません。

<a href="リンク先のURL"; rel="nofollow">アンカーテキスト</a>

自分のサイトにクローラーが巡回して来た際に、「rel="nofollow"」が付いているリンク先にはクローラーが巡回しません。

「rel="nofollow"」を使用する場面ですが、アフィリエイトをする際のリンクや、使用テーマ制作元へのリンク、プラグインが裏で送っているスパムリンクなどに使用すると良いです。

逆に、相互リンクをする際に「rel="nofollow"」を付けてリンクを貼るのはマナー違反です。
「rel="nofollow"」を付けると言う事は、リンクを貼らないのと同じですから・・・。

▲もくじへ戻る

Meta Sliderに「rel="nofollow"」を設定

では、実際に「Meta Slider」に「rel="nofollow"」を設定しましょう。

WordPressのサイドバーメニューから「プラグイン」を選択し、その中の「インストール済みプラグイン」をクリックします。

インストール済みプラグイン

表示されたプラグイン一覧の中から、Meta Sliderの下にある「編集」をクリックします。

Meta Sliderの編集

表示された「プラグイン編集」ページ右側の「プラグインファイル」の中から、「ml-slider/inc/metaslider.widget.class.php」を選択します。

プラグインファイル

表示されたページ右側の「プラグインファイル」の中から、「ml-slider/inc/slide/metaslide.class.php」を選択します。

プラグインファイルから編集ファイルを選択

キーボードの「Ctrl」と「F」を同時に入力します。
表示されたブラウザの検索窓の中に、「<a」を入力し、「Enter」を入力します。

ブラウザの検索窓を利用

ソースコード内のリンクタグ部分が強調表示されます。
この部分に「rel="nofollow"」を適応する訳ですが、以下をご覧下さい。

$html = "<a rel="nofollow"";

「"(ダブルクォーテーション)」を何度も記述している訳で、このままだと、「"<a rel="」と「""」だとブラウザが勘違いを起こしてしまいます。
そこで、「rel="nofollow"」ではなく、「rel='nofollow'」と記述します。

つまり、「"」の代わりに「'(シングルクォーテーション)」を使用します。
「'」は、「""」の中に「""」を記述する必要がある際に、代用として使用する事が許可されているのです。

$html = "<a rel='nofollow'";

記述後、「ファイルを更新」をクリックします。
これで、Meta Sliderで設定したリンク先には「rel="nofollow"」が適応されます。

▲もくじへ戻る

注意点

今回設定した「nofollow」ですが、Meta Sliderプラグインの更新がある度に外されてしまいます。
その度に、自分で修正し直す必要があります。

また、同ページ内に同じショートコードを使ってスライドショーを呼び出すと、二つ目のスライドショーが表示されなくなるバグが発生します。
ご注意下さい。

▲もくじへ戻る

完成

完成例
Unlimited Affiliate THE WORLD

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :   

ホームページ作成 WordPress   コメント:0

この記事に関連する記事一覧

TOPへ戻る