WordPressスマホ対応プラグインWPtouch Mobile Pluginカスタマイズ方法

はじめに

ワードプレスのプラグイン「WPtouch Mobile Plugin」をインストールして有効化してスマホで見てみます。

右上の「≡」アイコンをクリックすると、右側に固定ページのメニュー一覧が表示されています。

しかし、デジタルに疎い人などはこのボタンを押すとメニュー表示されるのに気づかないかもしれません。

なので「≡」はメニュー一覧が表示されるんですよーということをわかりやすくしてあげたほうが親切ですよね。今回はそのカスタマイズ方法について解説していきます。

 

 

WPtouch Mobile Pluginプラグインをカスタマイズする

「/plugins/wptouch/themes/foundation/default」フォルダの中にある
「index.php」をメモ帳やテキストエディタやテラパッドやmiなど高性能テキストエディタで開きます。

 

そして5行目くらいに注釈として
「右上の「≡」をクリックするとページ一覧が表示されます。」と追加します。

書きのコードをコピペで貼ってもできます。

<p class="touch-attention">右上の「≡」をクリックするとページ一覧が表示されます。</p>

 

Pタグにクラスを指定しているので、同じフォルダの中にある「style.css」にスタイルを設定します。

p.touch-attention{
text-align: center;
font-size: 70%
}

 

これならデザインに詳しくない人でもぱっと見でアイコンを押す場所がわかりメニューを表示させることができます。

※投稿記事をほとんど作成せず、固定ページのみで作成したようなサイトだとトップページに何も表示されないということがあるようです。

※プラグインの更新などがあると、最初の状態に戻ってしまい表示されなくなりますので、プラグインの更新の際は表示されているかチェックされることをおススメします。

]]>