ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

wptouch

スマホサイトをプラグインで作る「WPtouch Mobile Plugin」

スマホサイトをWordPressプラグインで作る

以前、CSSを追加する方法でスマホサイトの作り方をご紹介しましたが、
「そこまでデザインはこだわらないからスマホ対応サイトにしたい!」という方のために
プラグインでのスマホサイトの作り方をご紹介します。
※解説しているプラグインのバージョンは3.4.5です

スマホサイトを作れるプラグイン「WPtouch Mobile Plugin」

まずはWptouch Mobile Pluginのプラグイン本体をインストールします。
WordPress公式:http://wordpress.org/plugins/wptouch/

wptouch01

すると、サイドメニューの「設定」の下に「WPtouch」の項目が追加されています。

wptouch02

今の状態だと表記が全て英語でわかりづらいので
Core Setting」の中にある「Regionalization」項目を日本語に変更しましょう。

wptouch03

メニューが日本語になって見やすくなりました!

wptouch04

ちなみにまだ言語の設定しか変更していませんが、
スマホで表示した時に、トップページはすでにこんなデザインになっています。

wptouch05

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

wptouch06

メニューが常時表示されない分表示領域は広くなりますが、
デジタルに疎い人などはこのボタンを押すとメニュー表示されるのに気づかないかもしれませんね。

なのでちょっとプラグイン自体をカスタマイズしてあげます。
「/plugins/wptouch/themes/foundation/default」フォルダの中にある
「index.php」をTerapadなど高性能テキストエディタで開きます。

wptouch07

そして5行目くらいに注釈として
「右上の「≡」をクリックするとページ一覧が表示されます。」と追加してみます。
Pタグにクラスを指定しているので、同じフォルダの中にあるstyle.cssにスタイルを設定します。

wptouch08

スマホで確認するとこんなかんじに、
スライダーの下に注釈が表示されるようになりました。

wptouch09

これならデザインに詳しくない人でもぱっと見でアイコンを押すと
メニューが表示されるということが分かりますね!

ただプラグインでスマホ対応するだけではなく、
ユーザーにやさしいサイト作りを心がけましょう。

トップページに何も表示されない

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

その場合はスマホ表示の用のトップページとして、
コンテンツを置いた固定ページを1ページ作成し、
「コア設定」>「ランディングページ」に、スマホトップ用として作成した固定ページを
指定してあげることである程度対策することができます。

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

bsfvgs1s

201610/6

WordPressの記事・固定ページを親ごとに出力する。

投稿・カスタム投稿・固定ページのループ出力について WordPressではquery_postsやWP_Queryなどのループを使うとペー…

20160801185626

20168/1

WordPressのtitleタグのデザインを変更する

WordPressの見出しに工夫を加える WordPressは用意されたテーマを使うにしろ、独自テーマを使うにしろ、共通したページのレイア…

ページ上部へ戻る