プラグインを使わずにオリジナルテーマをスマホ対応させました！

WordPress

こんにちは！Takuya.B（@TB_IQ）です。

先週の研究会が終わってからも、秋の天文学会の申込み作業や先行研究の論文読んだりで全く休みをとれていませんでした。昨日もデータの解析作業や学部生のレポートの採点の仕事とせっせと作業に取り組んでいました。

とりあえず、大学関連（主に研究）の作業が一段落したので、久々にブログのデザインをいじってみたのでお話します！

Contents

1 プラグインを頼るのを辞めたかった
- 1.1 デメリット1:ショートコードが反映されない
- 1.2 デメリット2: javascriptが反映されない
2 いざ、作業開始！しかし…
3 そして、それっぽく完成！
4 まとめ

プラグインを頼るのを辞めたかった

これまで暇を見つけてはちょこちょことブログのデザインを触ってはいたんですが、スマホ対応（レスポンシブデザイン）だけはずっと逃げていました。

スマホから閲覧して頂いている読者の方のことを考えて、早くコーディングせねば…と考えていたんですが、CSSでメディアクエリだのビューポイントだのガチャガチャするのが本当に面倒くさかったんです。めんどくさいことは心底嫌いです。

なので、WPtouch Mobile Plugin(以下、wptouch)というプラグインをこれまで導入していました。プラグインを導入するだけでスマホ対応するんで、かなり便利です。

【関連】公式サイト

レスポンシブデザインをコーディングする手間が省けるというメリットがありますが、一方でデメリットもあります。

デメリット1:ショートコードが反映されない

記事中に表示しているAdSense広告や関連記事リンクはショートコードを用いて表示させているのですが、wptouchではこれが反映されませんでした。関連記事リンクくらいならまだ良いのですが、Adsense広告が表示されないのはさすがに問題です。

しかし、これはショートコードを設定するコードをfunction.phpに記述せずに自作プラグインに記述・インストールすることで解決します。

デメリット2: javascriptが反映されない

詳しくはまた別の記事で述べますが、先日『Mathjax』というホームページ上に数式を表示させるためのjavascriptライブラリを導入してみました。しかし、PCブラウザ上では問題なく表示される数式もwptouchでは反映されませんでした。

何だかwptouchに頼ってレスポンシブデザインのコーディングの手間が省けたのは良いのですが、こうやって問題が発生すると何かと面倒くさいです。今後、同様の問題が発生しない保証はどこにも無いので、wptouchに頼るのを辞めて自分でコーディングしようと腹を括ったというわけです…。

いざ、作業開始！しかし…

まず、PCビューでは2カラムな所をfloatを解除してスマホでは1カラムで表示するようにしました。これはさほど難しくありません。

問題はメインメニューをトグルメニューに切り替える方法でした。調べてみると、これはレスポンシブデザインにする際の難所らしい…。CSSだけで実装する方法もありますが、今回はjQueryを導入して実装することにしました。

しかし、『Wordpress, jQuery』でググってみるとわかりますが、WordpressにjQueryを導入するのは初心者のつまづきポイントみたいで、実際に私もここで苦戦しました。Wordpress本体がjQueryを持っているため、自前のjQueryを導入しようとするとコンフリクトを起こしてしまうとか何とか…。

結論として、私はWordpress本体のjQueryを使うことにし、function.phpに以下を記述しました。

function hoge() {
    wp_enqueue_script('myscript', get_template_directory_uri().'/hogehoge.js', array('jquery'), false, false);
}
add_action('wp_enqueue_scripts', 'hoge');

これでjsファイルを動かすことが出来るようになりました。ちなみにスマホメニューをタップしたときの挙動を制御するjsファイルの中身は以下のようにしました。

jQuery(window).on('load resize', function(){
    var w = jQuery(window).width();
    var x = 500;
    if (w <= x) {
        jQuery("#nav-open").on("click", function () {
            jQuery(".nav").slideToggle();
        });
    }
});

WordPress本体のjQueryでは"＄"が使えないので、＄→jQueryにしています。それにしても、jQueryのコードってわかりやすいですね。jQuery初心者の私でも簡単に理解することができました（少なくとも↑のコードは）。