この記事の所要時間: 856

wordpressおすすめwordpressおすすめのプラグイン今回は4番目の紹介となる。

wordpressのプラグインの中でも今回は、serverの負荷を軽減し表示スピードを上げてくれるプラグインと、画像をポップアップ表示してくれるプラグイン、そしてモバイル(携帯やスマホ)で表示してくれるプラグインをご紹介させていだく。

wordpressは柔軟性があるメリットに対し、デメリットの1つとして表示速度の問題がある。
wordpressはPHPで動いていて、MT(ムーバブルタイプ)の静的ページと比べ、ユーザーの要求に応じ動的ページを生成していくため、どうしてもserverへの負荷が高くなり表示速度が落ちがちとなる。それに加えプラグインを入れることで更に負荷が高くなってくるわけだ。

–スポンサーリンク–

サイトの表示スピードについて

サイトの表示速度は確かに重要だといえる。なので速度アップには様々なプラグインも出ているし、プラグインを使わない方法も数多く紹介されている。

表示スピードの大切さと速度の測定サイトの紹介については、このサイトを参考にされたい。

0.1秒の遅れが、1%の売上に影響する!? ページ表示速度の影響力と改善法まとめ

Amazonでは、読み込み時間が0.1秒減るごとに、売上が1%増加!?
上記の調査データから、いくつか興味深いデータを抜粋したい。
 ◆amazon.com:読み込み時間が0.1秒減ると、売上が1%増加(Amazon公表 2006年)
 ◆ページ読み込み時間が1秒増えると、コンバージョン数が7%減少
 ◆ページ読み込み時間が1秒増えると、PVが11%減少
 ◆ページ読み込み時間が1秒増えると、ユーザーの満足度が16%減少

参考文献(引用元):SUNMEDIA

これに加え、表示速度が快適だと検索エンジンのクロールもより多くのページを周れるようになり、それに伴いページのインデックスも増えるといわれている。
裏を返せば、重い(表示スピードが遅い)ページは、クローラーが途中で他へ行ってしまう確率も上がってしまうといえるだろう。

とはいえ、速度表示アップは、あくまでも収益に繋げるための1つの施策であって、速度アップに時間を取られずぎても本末転倒になりかねない。
※特にAmazonは自社のクラウド型serverを宣伝したい狙いも伺える。

ともあれ、ここでは簡単に施策できて、なおかつ効果がある程度期待できるプラグインを紹介していこうと思う。
まず、キャッシュ(Cache)関連のプラグインで、代表的なものでは、

  • DB Cache Reloaded Fix
  • W3 Total Cache+MO Cache or WP File Cache+MO Cache
  • Quick Cache…etc
  • プラグイン以外でやる方法も様々ある。
    例えば、CDNで外部サーバーを呼び出し負荷を分散させる方法など。
    ※sixcoreではshhが使えないのでプラグインでCDN(Dropbox CDN・Amazon S3 for WordPress)が手軽にできる。

    ところが、あまり多く施工しすぎてしまうと、サーバーの負荷が高まってしまい、かえって表示速度が遅くなってしまう、というジレンマが生じてしまいかねない。
    ※特にマルチサイトでアクセス数が増えると、不具合のダメージが大きくなってしまう。

    それでもプログラムの専門家なら解消していけるのかもしれない。
    ただ、このサイトは初心者~中級者向けをイメージしているので、簡単でシンプルにできる方法をご紹介したい。

    なので、基本的にはCache関係はサーバーのサービスに任せることにする。(詳細は別記事にて記載していく)
    ここでは1つだけプラグインの紹介をしていく。

    –スポンサーリンク–

    wordpressおすすめの表示速度を改善してくれるプラグイン

    それでは【Head Cleaner】をご紹介しておこう。

    HeadCleaner
    【Head Cleaner】を検索後インストールし有効化。

    HeadCleaner2
    各サイトに合わせチェックを入れる必要がある。なぜなら、型崩れを起こしてうから。
    画像でのチェック項目は、テンプレートのDigipressに合わせ、6箇所にチェックを入れるようにしている。
    ※Digipressの場合、cssのキャッシュなどにチェックを入れると型崩れが起きてしまう。

    <head>部で有効な~というところには、プラグインを入れていくと増えていることがあるので、必要があれば随時チェックを入れていく。

    –スポンサーリンク–

    画像をポップアップして表示してくれるプラグイン

    wordpressで何も設定していない状態だと、画像をクリックすると違うページで表示される。
    それを同じ画面でポップアップで表示してくれるプラグイン。

    まず日本語化したい場合は、こちらのサイトから入手できる。
    ダウンロード後解凍すれば【jquery-colorbox-ja.mo】と【jquery-colorbox-ja.po】が入っているので、その2つのファイルをpluginフォルダ内の【/jquery-colorbox/localization/】の中にアップロードすればok。管理画面が日本語になっているはずだ。

    jQueryColorbox1
    【jQuery Colorbox】を検索しインストール後、有効化。

    jQueryColorbox2
    jQueryColorbox3
    スマートフォンに対応させるためのチェック項目。

    --スポンサーリンク--

    jQueryColorbox4
    上部の3つの内1つをにチェックを入れると有効化され、赤い帯が消える。(1番上が推奨)

    jQueryColorbox5
    訪問者がわざわざ【☓】を探して閉じなくてもいいようにするには、チェックを入れておく。

    プラグイン同士の競合で不具合が出なければ、上記の設定でポップアップ表示を出来るようになるはずだ。

    –スポンサーリンク–

    wordpressのセキュリティ

    wordperssのセキュリティをアップさせるためのプラグインを1つ入れておくといいだろう。
    SecureWordPress
    【Secure WordPress】を検索しインストール後、有効化。
    基本、有効化してそのままでもok。何か変更したければ、サイドメニューの【設定】にある【Secure WP】で設定できる。

    –スポンサーリンク–

    携帯(モバイル)で表示させるプラグイン

    携帯(モバイル)では、今やスマートフォンwが主流となっている。
    とはいえ、まだガラケーからのアクセスも少なくはない。
    なので、ここではどちらからアクセスされても表示させることが出来るプラグインと設定方法を紹介していく。

    携帯(モバイル)のガラケーでの表示させることが出来るプラグイン

    まずは、携帯(モバイル)のガラケーで表示させることが出来るプラグインから。
    wordpressでモバイルといえば鉄板ともいえる【Ktai Style】
    KtaiStyle1
    プラグインの検索より【Ktai Style】をインストール後、有効化。

    KtaiStyle2
    サイドメニューの下側にある【携帯表示】のテーマを選択。

    KtaiStyle3

    下にスクロールすると、【電話キャリア別テーマ】があるので、【iPhone,Android用】だけ(Ktai Styleを使わない)を選択。
    ※これはデフォルトで既に設定されているかもしれない。
    他はそのままで【変更を保存】をクリック。※テーマはサイトに合わせお好きなものを選択。

    テーマでは、テンプレートのDigePressでも用意されており、広告も自由に入れられる。
    ※こちらの解説は、後ほど付け加えることにする。

    スマートフォンで表示させることが出来るプラグイン

    こちらも定番ともいえるプラグインとなる。【WPtouch】
    ただ、スマートフォン表示の場合、この他にもいくつかプラグインがある。取り敢えずはWPtouchで大丈夫だろう。

    WPtouch2
    プラグインの検索より【WPtouch】をインストール後、有効化。

    WPtouch3
    サイドメニューの【設定】より【WPtouch】を選択。
    まずは、【General Seting】の【WPtouch Language】より【Japanes】を選択後、最下部の【save】をクリック。
    これで、日本語化される。

    WPtouch4
    【詳細オプション】の中で画像の項目にチェックを入れる。

    WPtouch5
    【Goole Adsence】にidを入れる。※pub-の部分を含むidを入力。

    その下の【Stats&カスタムコード】の枠にGoogleAnalyicsの『トラッキングコード』を入力。
    【保存】をクリック。
    ※アクセス解析に関しては別途記載。

    携帯(モバイル)での表示をPCのブラウザで確認する方法

    スマートフォンやタブレットでの表示を最適化させることを、レスポンシブWebデザインという。
    この場合に、わざわざスマホやタブレットを使って確認しながら修正などをするのは、とても面倒だと思う。

    この方法を使えばわざわざ携帯で確認する必要がなくなるだろう。
    これはブラウザのfirefoxのアドオン。
    →firefoxのブラウザより【FireMobileSimulator】をダウンロード。

    使い方は、firefoxのメニューから【FireMobileSimulator】の中から、観たい携帯(モバイル)の機器を選択するだけ。
    もし希望の機器がなかった場合は、【最新端末リストから端末を追加】より様々な機器を追加できる。

    その後、観たいページを更新すれば選択した携帯(モバイル)表示になる。
    ※解元に戻したい場合、【FireMobileSimulator】→【端末選択解除】をすれば元のPC表示に戻る。

    もう1つスマートフォンやタブレットの表示を、簡単に確認できる便利なやり方。

    こちらのサイトでできる。
    http://designmodo.com/responsive-test/

    1. 上部に調べたいURLを入力
    2. 右上で表示したいデバイスを選択(ここではiPhone5)
    3. 左半分の画面にiPhone5での画面が表示される

    スクロールして全体も見れるので便利。
    designmodoでレスポンシブWebデザインを確認

    これで簡単にスマートフォンやガラケーでの表示を確認できるようになる。とはいえ、Adsense広告の確認などは、できれば持っている携帯で直接確認したほうがいいかもしれない。

    著者情報

    山田招憲
    Wordpressを使ったSEOからの集客を含むアクセスアップサポートを行っています
    (検証サイト3000サイト以上)
    詳しいプロフィールはメルマガ内で…