HOME >ツール>WordPress>オリジナルテンプレートを作成中。

オリジナルテンプレートを作成中。

 ( post : 2016.02.22 )

WordPressのテンプレートがどうなっているのか、自分である程度把握したかったのでオリジナルテンプレートを作りました。と言ってもまだ最低限の状態なので、これから少しずつ改善していく予定です。

テープレート作成で役だったもの

CSSの設計について

CSSの設計手法は色々ありますがFLOCSSの手法が緑の本を読んで、分かりやすかったので今回使用しています。

CSSフレームワークについて

レスポンシブ対応するのにCSSフレームワークを利用することも考えたのですが、WordPressのテンプレート作成に集中したかったので今回はリセットCSS「sanitize.css」のみ利用しました。

見送ったCSSフレームワーク

最初は下記のようなシンプルなCSSフレームワークを検討していました。

Pure

Pure

A set of small, responsive CSS modules that you can use in every web project.

WordPressのテンプレートタグについて

テンプレートに必要な各取得タグについては下記のサイトが分かりやすくまとまっておりとても助かりました。

グローバルメニューについて

ドロワーメニュー(ハンバーガーメニュー)はメニュー項目がたくさん並べられる一方で、メニューを開くまで内容が分からない、あるいはメニューを開くのに必ず一手間かかるといった話もあり賛否両論でした。そこをうまく消化したかったのですが今回はまだ記事のカテゴリ項目が固まっておらず実現できず。なのでひとまず簡単にドロワーメニューを導入できるdrawer.jsを利用しています。

drawer.jsが最初は動かなかった!

drawer.jsですが、MAMPのテスト環境(ローカル)では動作していたのですが、本番ではうまく動きませんでした。調べてみたところWordPressでjQueryを利用する場合はちょっとした作業が必要だったのですね。下記の記事の「WordPress 版 jQuery はそのままでは $ が使えない」を参考に修正すると無事に機能することができました。

私のMAMP環境だとWordPress専用のjQueryが出力されておらず、静的サイトと同じような作り方でjQueryのライブラリを読み込んで使っていました。なのでMAMP環境化では通常の記述で動いていたというわけですね。

サムネイル付外部リンクについて

リンク部分のhtmlを変更したくなった場合、過去の記事も全て変更する必要があるため、下記のfunction.phpに記述する方法であれば一括で修正できるのでとても助かりました。

作ってみての感想

本番にアップロードしてjQueryが動かなかったときは頭が真っ白になりました。幸いにもすぐに解決方法が見つかって良かったです。自分も参考にさせていただいたサイトのように、誰かの役に立てるようなページを作っていきたいですね。