WordPress

WPtouchの導入

投稿日:

ここ数年のスマートフォンブームにより、Webサイトもスマートフォン対応が増えてきています。WordPressは、プラグインを使えば、簡単にスマートフォンに対応させることができます。今回は、『WPtouch』を利用してスマートフォンに対応させてみたいと思います。

WPtouchのインストール

プラグインの『新規追加』を開き(マルチサイトを利用の方はネットワーク管理者でアクセスして下さい)、キーワードに『WPtouch』と入力し、『プラグインの検索』ボタンをクリックします。検索されたプラグインの中から『WPtouch』の『いますぐインストール』をクリックします。

表示の確認

『有効化(ネットワークで有効化)』をクリックします。DreamWeaverのDevice Centralで確認してみます。最初に『WPtouch』をインストール前の画面です(Device Centralのズームが20%ずつしか変更できませんので、正確な画面ではありませんが、概ねこのような表示になるはずです)。

次に、『WPtouch』をインストールしたサイトの画面を見てみます。Device Centralのズームを100%に戻し、ユーザーエージェントをカスタムに変更します。ユーザーエージェントの中に『iphone』の文字を追加します。再読込のボタンをクリックすれば、スマートフォン用のサイトが表示されます。この方法を使えば、iphoneやAndroidの実機がなくてもサイトの画面確認をすることができます。Device Centralは結構重宝に使っています。

設定を変更する

全てのスマートフォン用サイトがこの表示では味気ないので、トップページの設定を変更したいと思います。ダッシュボードの管理画面から『固定ページ』→『新規追加』を開き、スマートフォン用のトップページを作成します。

次に、『設定』→『WPtouch』を開き、『WPtouch Language』を『Japanese』に変更します。『WPtouch Home Page』のドロップダウンメニューから、先程保存した『スマフォサイトトップページ』を選択し、ずーと下にある『Save Options』ボタンをクリックします。

それでは、再びDevice Centralで確認してみます。先程作成した『スマフォサイトトップページ』が表示されました。

『WPtouch』の言語を日本語に変更したので、設定が分かり易くなったと思います。自分自身でいろいろ試してみて下さい。

WPtouchのテーマ

『WPtouch』のテーマファイルは、WordPressの通常のテーマファイルとは別の場所に格納されています。『wp-content/plugins/wptouch/themes』フォルダ内にあります。標準で利用されているテーマは『default』ですが、『core』というテーマも内部で利用されていますので、間違って消さないようにして下さい。

また、テーマをカスタマイズする場合、プラグインをバージョンアップした際に上書きされてします可能性がありますので、必ずバックアップは取っておくようにして下さい。

本日は以上です。

-WordPress
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.