Sumirexxx

今日もiPhone片手に出かけます

超簡単☆WordPressスマホ最適化!Wptouchをやめて子テーマにしました

WordPress

Wptouchから子テーマ作る方に変えました。
この書き方で伝わるのかな?

子テーマはむずかしそう、って思ってましたが、、、。
いままでなんでできなかったのか不思議なほど簡単でした。

必要な作業は(超大まかに分ければ)2つです。

  • WordPressに、スマホとPC切り替えるプラグインをいれる
  • 親テーマと子テーマを分ける。

あくまでも大まかに分ければ、です。 ポイントはfunction.phpなのです。

順序としてはこれだけ。

もう少し細かく書くとこんな感じ

  1. function.phpに親テーマと子テーマを振り分けるよーと書く!(のちほど詳しく
  2. 元々あるPC表示しているテーマをフォルダごとコピーする。
  3. コピーしたフォルダを、子テーマと決定!名前をつける。
  4. プラグインをいれる
  5. 子テーマを自由にカスタマイズ☆

って感じです。 だいたい流れはつかめたでしょうか? では、早速実践!

親テーマをコピーする

子テーマというからには親テーマがあります。 親テーマは、いまPCで使ってるテーマです。

私のテーマ、名前がsampleなんですよねw 全然サンプルじゃないんですけど…。今更かえるのこわいからこのまま使っています。 このテーマとおなじ階層に、ひとつフォルダを作ります。

これが子テーマになります。 フォルダ名をつけます。

テーマコピー

これでとりあえず子テーマ完了!

function.phpをいじる!

function.php

function.phpに親テーマと子テーマを振り分けるよー!と書きます。

テーマ追加

この記述は自分で書いたんじゃないです!
こちらからまるまるいただいたものです。
この記事のおかげで子テーマ作ることができました。 ありがとうございます〜。

WordPressサイトのスマートホン対応は独自の子テーマ+振り分けプラグインでいくことにした | マイペースクリエイターの覚え書き

WordPressのプラグインを入れる(Multi Device Switcher)

Multi Device Switcherというプラグインを入れます。

ほかにも ・Any Mobile Theme Switcher
・WPtap Mobile Detector っていうプラグインでも良いみたい。
WPtap〜は、私の環境だけなのかわからないけど、文字化け全開でした。

何度か試してもだめだったのでこれを使うのはあきらめました…。

これでOK。 あとは、子テーマを思う存分いじります。
まずはhome画面をいじるとわかりやすいかも? sidebarを削るとか。
それでできたのがこんな感じのスマホ表示なのです。

home.php

index.php

いかがだったでしょうか?
細かい設定は自分のオリジナルになってくると思います。
その後私が変更したのは

  • 全体の文字の大きさ
  • Sidebarの記述をカット(また使いたくなったら親テーマからコピーしてくればOK)
  • Instagramの画像をカット(シンプルにしたくて)
  • RSSフィードを削除(Feedlyを入れたので問題ない!はず!)

というような感じです。
いまのところページ遷移もなくしてしまったので、これは復活しないとほかのページ見てもらえないw

ということで、大枠はすぐにできるはずなので試してみてください!
(でも、バックアップは必ず取ってください。作業は自己責任でお願いいたします。
何が起きるかわからないですから!備えあれば…です☆)

<