2015年4月から、サイトをスマートフォン等の閲覧がしやすくするための評価
「モバイルフレンドリーアップデート」が導入され、多くのネットユーザーがこのスマホ対応に追われ、モバイル端末でもわかりやすく閲覧できるようサイトを改造したハズです。

しかしながら、スマホ対応の画面は従来のPCサイトに比べると情報量が乏しく
なかなか思うようなサイトが作れないと悩んでいる人も多いか?と思います。

そんな人のために、WordPressサイトの簡単に出来るスマホサイトの改造方法を解説します。

スマホサイト
 

 

 

 

 

 

 

スマホ対応のためWptouch Mobile Pluginを導入したけど・・・

WordPressサイトの場合、モバイルフレンドリー対応を行う場合

最も手軽で簡単な方法がWptouch Mobile Pluginというプラグインを導入することです。
参考記事:【モバイルフレンドリー最適化に必須WordPressプラグイン導入方法】

 

しかしながら、このプラグインを導入してもPCサイトと同じうようなコンテンツ表示にはならず
いまひとつ物足りないモノになってしまいます。



 

100%、PC画面と同じにならなくても、
スマホ画面でも最低限表示させたいコンテンツはあるか?と思います。

そこで、ここではスマホ画面に表示させたいコンテンツを挿入するカスタマイズ方法を解説します。

 

スマホサイト・トップ画面のカスタマイズ

Wptouch Mobile Pluginを導入後、以下の作業を行います。

 

まずは、FFFTPを起動します。


まだFFFTPをインストールしていない場合は以下を参考にして導入して下さい。
参考記事:【FFFTPの導入と設定方法】

 

FFFTPを起動したら、自分のサイトに接続しフォルダを
「public_html」⇒「wp-content」⇒「plugins」⇒「wap-touch」⇒「themes」⇒
「foundation」⇒「default」の順に開いて行きます。

 

ここまで開いたら下図のように「index.php」をドラッグ&ドロップして外に出します。


 

外に出した「index.php」を今度はTerapadなども高性能テキストエディタで開きます。
Terapadのダウンロードはコチラ:【TeraPad・ダウンロードサイト(無料)】
 


 

「index.php」をテキストエディタで開くことでソースを編集することが出来るようになります。

 

ソースを開いたら、最初の4~5行目あたりに新しくコンテンツを追加します。


 

ここでは、以下のようなタグを追加してみます。


 

このように追加したタグを書き込み保存し、
以下のように再び「index.php」をドラッグ&ドロップして上書き保存して元に戻します。


 

上書き保存してFFFTPを終了すれば、
以下のようにスマートフォンサイトのトップ画面がカスタマイズされます。


 

スマホサイト・記事画面のカスタマイズ

今度は記事中に追加タグを入れてみます。
先ほどと同じようにFFFTPを起動し、「public_html」⇒「wp-content」⇒「plugins」⇒
「wap-touch」⇒「themes」⇒「bauhaus」⇒「default」と順に開き
「single.php」を外に出し、修正をして行きます。


 

「single.php」でも以下の部分に新しくタグを挿入します。


 

タグを追加し「single.php」を保存すれば、以下のように記事の部分もカスタマイズ出来ます。


 

以上でスマートフォン・サイトのカスタマイズは完了です。
カスタマイズする内容は、アドセンス広告を挿入したりコメントを付けたりと様々ですが
PCサイトからすると、どうしても情報量が少なくなってしまうため
コンンテンツ量を増やすためにも、ゴチャゴチャならない程度にカスタマイズをしてみて下さい。

 

Wptouch Mobile Pluginのバージョン・アップに注意

今回カスタマイズ方法を解説したのはWPtouch Mobile Plugin 3.7.7です。
基本的には、今回ご紹介した内容とあまり変わることはないと思いますが
バージョンが異なる場合は、タグの追加の場所が違ってくる事がありますのでご注意ください。

 

以上、モバイル・フレンドリー対応のひとつとしてスマートフォン・サイトのカスタマイズ方法を解説しました。
少しわかりにくかったかも知れませんが、集客にも役立ちますので是非活用してみて下さい。