CLOSEHOME>プログラミング>WordPress>プラグインを使わずにオリジナルテーマをスマホ対応させました!プラグインを使わずにオリジナルテーマをスマホ対応させました!2017.6.18TwitterFacebookはてブB!Google+pocketFeedlyこんにちは!Takuya.B(@TB_IQ)です。先週の研究会が終わってからも、秋の天文学会の申込み作業や先行研究の論文読んだりで全く休みをとれていませんでした。昨日もデータの解析作業や学部生のレポートの採点の仕事とせっせと作業に取り組んでいました。まとめプラグインを頼るのを辞めたかったこれまで暇を見つけてはちょこちょことブログのデザインを触ってはいたんですが、スマホ対応(レスポンシブデザイン)だけはずっと逃げていました。スマホから閲覧して頂いている読者の方のことを考えて、早くコーディングせねば...と考えていたんですが、CSSでメディアクエリだのビューポイントだのガチャガチャするのが本当に面倒くさかったんです。めんどくさいことは心底嫌いです。Plugin(以下、wptouch)というプラグインをこれまで導入していました。プラグインを導入するだけでスマホ対応するんで、かなり便利です。公式サイトレスポンシブデザインをコーディングする手間が省けるというメリットがありますが、一方でデメリットもあります。デメリット1:ショートコードが反映されない記事中に表示しているAdSense広告や関連記事リンクはショートコードを用いて表示させているのですが、wptouchではこれが反映されませんでした。関連記事リンクくらいならまだ良いのですが、Adsense広告が表示されないのはさすがに問題です。これはショートコードを設定するコードをfunction.phpに記述せずに自作プラグインに記述・インストールすることで解決します。javascriptが反映されない詳しくはまた別の記事で述べますが、先日『Mathjax』というホームページ上に数式を表示させるためのjavascriptライブラリを導入してみました。PCブラウザ上では問題なく表示される数式もwptouchでは反映されませんでした。何だかwptouchに頼ってレスポンシブデザインのコーディングの手間が省けたのは良いのですが、こうやって問題が発生すると何かと面倒くさいです。今後、同様の問題が発生しない保証はどこにも無いので、wptouchに頼るのを辞めて自分でコーディングしようと腹を括ったというわけです...。いざ、作業開始!しかし...まず、PCビューでは2カラムな所をfloatを解除してスマホでは1カラムで表示するようにしました。これはさほど難しくありません。問題はメインメニューをトグルメニューに切り替える方法でした。調べてみると、これはレスポンシブデザインにする際の難所らしい...。CSSだけで実装する方法もありますが、今回はjQueryを導入して実装することにしました。jQuery』でググってみるとわかりますが、WordpressにjQueryを導入するのは初心者のつまづきポイントみたいで、実際に私もここで苦戦しました。Wordpress本体がjQueryを持っているため、自前のjQueryを導入しようとするとコンフリクトを起こしてしまうとか何とか...。結論として、私はWordpress本体のjQueryを使うことにし、function.phpに以下を記述しました。'hoge');これでjsファイルを動かすことが出来るようになりました。ちなみにスマホメニューをタップしたときの挙動を制御するjsファイルの中身は以下のようにしました。}});WordPress本体のjQueryでは"$"が使えないので、$→jQueryにしています。それにしても、jQueryのコードってわかりやすいですね。jQuery初心者の私でも簡単に理解することができました(少なくとも↑のコードは)。それっぽく完成!完成したトップページがこちらです。ヘッダー部はブログタイトルとメニューのみのシンプルな構造にしました。MENUと表示されている部分をタップするとメニューが表示されます。サブメニュー(PC版メニューでマウスを乗せると表示されるアレ)は非表示にしています。これで一応、オリジナルテーマをスマホ対応させることができました!現在把握しているだけで修正箇所はまだまだ沢山ありますが、スキマ時間を見つけて地道に修正していきます!道のりは長いぞ...。スポンサーリンクまとめ久しぶりにhtml、css、phpを触ってみましたが、意外と覚えているものですね笑しかし、wordpressのjQuery実装は本当に骨が折れました...。meTakuya.B大学院博士課程まで進学して宇宙系の研究に取り組むも中退。現在は本業iOSエンジニアとして勤務する傍ら、副業として個人ブロガー向けのWordPressカスタマイズサービスに取り組んでいる。Postsたとえ3日坊主でも辞めない2020.1.52020年あけましておめでとうございます。