ワードプレスをスマホ対応させるプラグインは?WPtouchがお勧め!

どうもこんにちは。ユウです!

今回は、ワードプレスで作ったホームページを
スマホ対応させる為のプラグイン、
WPtouchの使い方や設定方法を説明していきます。

現在はサイトへアクセスする媒体の半分以上がスマホです。
スマホ対策は絶対必要なので、
WPtouchは早めに導入するようにしましょう!

WPtouchの使い方について!

 

賢威などのテンプレートは
スマホ表示に対応しているのですが、
リファインSNOWなどのテンプレートは、
スマホ表示に対応していません。

 

そのような場合は、
『WPtouch Mobile Plugin』を導入して、
スマホからでも見やすいサイトを作っていきましょう。

 

『WPtouch Mobile Plugin』を編集するには、
次の2つのフリーソフトが必要です。

FFFTP

http://www.forest.impress.co.jp/library/software/ffftp/

TeraPad

http://www.forest.impress.co.jp/library/software/terapad/

 

この2つのツールは今後も何かと役立ちますので、
早めにダウンロードしましょう。

 

では、使い方や設定方法を、
画像付きで説明していきます。

 

ダッシュボードの【WPtouch】から、
【Core Settings】をクリックします。

 

英語でわかりづらいと思うので、
まずは言語を日本語に選択して設定を保存しましょう。

 

ランディングページには
『デフォルト(WordPressと同様)』にチェックを入れて、
カスタムコードには
『Google Analyticsのトラッキングコード』を入力しましょう。
これでスマホからのアクセス解析も対応できるようになります。

 

入力が完了したら【変更を保存】をクリックしてください。

 

続いて『FFFTP』を起動して、【新規ホスト】をクリックします。

 

ホストの設定名は任意で決定するので、
トレンドブログ等わかりやすい名前にしましょう。

『ホスト名』『ユーザー名』『パスワード』は
wpXクラウドの管理画面から取得します。

 

wpXクラウドの管理画面にアクセスし、
【FTPアカウント設定】をクリックしてください。

 

ここで表示された、『FTPアカウント名』が『ユーザー名』、
『FTPホスト名』が『ホスト名』になっています。
コピーしたら【設定変更】をクリックしましょう。

 

【設定変更(確認)】をクリックしてください。

 

この時点でパスワードは自動的に育成されています。
【設定編集(確定)】をクリックしましょう。

 

この画面に表示されたものがパスワードになるので、
コピーして貼り付けたら作業は完了です。

再度FTPアカウント設定を行うと、
パスワードの変更も可能です。

 

『ホストの設定名』『ホスト名』
『ユーザー名』『パスワード』の
4つを入力すると、
ホスト一覧に加わります。

今回の場合は『トレンドブログ』選択して
【接続】をクリックしてください。

 

【プラグイン】をクリック。

 

【wptouch】をクリック。

 

【themes】をクリック。

 

【bauhaus】をクリック。

 

【default】をクリック。

 

その中にある『single.php』を編集するので、
ドラッグしてデスクトップへ移動させましょう。

 

続いて『TeraPad』を起動して、
コピーした『single.php』をその中に入れます。

 

【ファイル】から、【文字/改行コード指定保存】をクリック。

 

文字コード『SHIFT-JIS』を『UTF-8』に変更します。

 

変更が完了したら【OK】をクリック。

 

続いて31行目辺りにある
<?php wptouch_the_content(); ?>
というコードの下に、次のコードをコピペします。

<h3>最後までお読みいただきありがとうございます。</h3>
今回の情報が、少しでもお役に立てれば幸いです。<br>
いいね!やツイートして情報をシェアいただければ嬉しいです♪
<br><br>

<table VALIGN=”top”>
<tr>
<!– Twitter –>
<td VALIGN=”top”><a href=”https://twitter.com/share” class=”twitter-share-button” data-count=”vertical” data-via=”” data-url=”<?php the_permalink(); ?>” data-text=”<?php the_title(); ?>”>Tweet</a><script type=”text/javascript” src=”//platform.twitter.com/widgets.js”></script></td>

<!– Facebook –>
<td VALIGN=”top”><iframe src=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:73px; height:62px;” allowTransparency=”true”></iframe></td>

<!– Google+ –>
<td VALIGN=”top”><script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script><g:plusone size=”tall” href=”<?php the_permalink(); ?>”></g:plusone></td>

<!– はてなブックマーク –>
<td VALIGN=”top”><a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>” class=”hatena-bookmark-button” data-hatena-bookmark-title=”<?php the_title(); ?>|<?php bloginfo(‘name’); ?>” data-hatena-bookmark-layout=”vertical” title=”このエントリーをはてなブックマークに追加”><img src=”http://b.st-hatena.com/images/entry-button/button-only.gif” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”http://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script></td>
</tr>
</table>

<?php wp_related_posts(); ?>

 

コードに入力が完了したら、
【ファイル】から【上書き保存】をクリック。

 

再び『default』の中に戻します。

 

上書きするか確認画面が出てくるので、【OK】をクリック。
これで作業は完了です。

 

スマホでサイトを見た時に、
文字化けせずに上記のように表示されていればOKです。

 

まとめ!

現在はサイトがスマホ対応しているかどうかも、
Googleからの評価に繋がってきます。

WPtouchはスマホ対応には
絶対必須のプラグインとなっているので、
スマホ対応していないテンプレートを使用する場合は、
必ず導入するようにしましょう。

WPtouchで何かトラブルがあった場合は、
こちらの記事を参考にしてみてください!

WPtouchで日本語の文字化けが発生?原因や対処法について!

WPtouchでトップページが表示されない?原因と対処法を紹介!

ABOUTこの記事をかいた人

わいえふけー代表28歳。HP制作、Web集客、アフィリエイト、コンサルタント業務、セミナー主催、輸入ビジネスなどを、夫婦二人で行っている。『妻カナ』『愛犬マロン』『ハムスターだいふく』の2人と2匹暮らし。