WordPress: たった3分でサイトをスマホ対応にするプラグイン「WPtouch」を導入・カスタマイズしてみた。






sumahotaiouwptouch

たった3分でサイトをスマホ対応にするプラグイン「WPtouch」を導入・カスタマイズしてみた。元々PCビューだけ気にしてデザインしていたので、スマホビューのデザインとかめんどい…CSS書き直したりレスポンシブにするのもめんどいという事で放置してきたんですが。アクセスが増えスマホで見てるユーザーも多かったので「WPtouch」という簡単にスマホで閲覧時のみスマホ用デザインを適用してくれる便利なプラグインがあったので紹介します。ちなみにPro版もあり、Free版と比べると細かい設定ができるようになってますが、今回はFree版を導入・カスタマイズしていきます。

  • インストール

    wptouchhinstall
    プラグイン → 新規追加 から”WPtouch”と検索すると上記のプラグインが出てくると思うのでインストールしてください。プラグインを有効にするのもお忘れなく。

    設定 – とりあえず日本語化!

    Core Settis

    上記のようにデフォルトではAuto-Detectになっており、言語が日本語ではないと思います。

    コア設定 — WordPress

    日本語を選択すると見やすいですよ! 英語環境だとCore Settingsの上部辺りにあると思います。言語を日本語に変更してSaveします。変更を保存で日本語になります。

    設定 – 記事タイトル下のアイキャッチ画像を非表示に

    samuneiruwptouch

    デフォルトのままだと無駄にアイキャッチ画像がタイトル下に表示されます。見づらいし場所を取るので非表示にしちゃいましょう。

    テーマ設定 ‹ GINAZINE(ギナジン) — WordPress

    テーマ設定 → 一般 の上部辺りでサムネイルの設定ができます。ブログリストのみを選択します。その後、変更を保存。

    設定 – トップのスライダーを非表示に

    wptouchsukkiri

    どんどん非表示にしていきましょう!次はトップページ上に表示されるスライダーです。あってもいいかなぁと思ったりもしましたが、非表示にしたほうがスッキリします。

    テーマ設定 ‹ GINAZINE(ギナジン) — WordPress (1)

    テーマ設定 → 一般 の一番下に機能スライダーとあるのでチェックを外します。その後、変更を保存。

    設定 – カラー・ロゴ・フォント

    テーマ設定 ‹ GINAZINE(ギナジン) — WordPress (2)

    テーマ設定 → ブランド設定 の上部辺りでテーマカラーとサイトロゴを変更できます。お好きなカラー・ロゴを選択して変更を保存。ロゴは背景透明(png)が良いですよ。

    wpfont

    テーマ設定 → ブランド設定 の中央辺りでフォントを変更できます。フォントはブラウザフォントを含めた8つしかありません・・・

    設定 – ブックマークアイコン

    テーマ設定 ‹ GINAZINE(ギナジン) — WordPress (3)

    ブックマークした時に表示されるアイコンですね。Android・iOSの設定ができるみたいです。テーマ設定 → ブックマークアイコン から設定できます。Androidは96px*96pxで、iOSは180px*180px

    設定 – PHPやCSS

    FFFTPなどで接続し”wp-content/plugins/wptouch/themes/bauhaus/default/”にアクセスするとsingle.phpやstyle.cssがあるので、WordPressのプラグイン編集では表示されないが一応、いじることが可能です。

    Pro版じゃないと設定できないアドセンス貼りなどはphpにアドセンスコードを貼り付けると表示できると思います。というかPro版にしなくてもPHPやCSSがわかる方なら全部オリジナルにできるので、興味がある方は触ってみては。


    コメントしてね!