WordPressテーマ作り


2011年ごろの話。なんかいい仕事できないかなぁと考えていた時。「Wordpressの需要ってどうなの?」「これテーマのカスタマイズできてサイトのメンテナンスできたらどうなの?」と言う着想があり、テーマ作りをちょっと触った事があります。簡単にポンポ〜んてできて、メンテも含めてら月20サイトくらいできるかなぁとか考えていたんですが、まぁそれも今は昔。いい所に目を付けていたとは思いますが、よくよく考えたらかなり自転車になってたかも。当時は汎用性とか管理画面での機能とか全然考えないでゴリゴリプログラム書いてたんですが、改めてどうやって作ったら良いかなんてことも考えつつ勉強を始める事にしました。とりあえず入門系を片っ端から試してみたんですが、これが間違い。いろんなのを参考にしながら、見よう見まねで作っていくんですが、思った通りには行かず、デフォルトで用意されているテーマのPHPやjavascriptのコーディングばかり気にしながらやってた訳。
ですが明らかな間違いに気づく事に。
「Wordpressじゃなくてまずは自分のHTMLとCSSの知識が問題じゃないのか!どんな感じにしたいとか明確にしてないのにどんなテーマにしようなんて所詮無理じゃないの」
いや、全くその通りで、カッコよさそうな動きとかを再現するためにプログラムを色々弄ってたんですが、結局のところ何を作るとかはホント曖昧でプログラム見ながら「どこまで掘り下げればいいんだよ」と嘆いていた訳です。結果として改めて自分がどんな感じのものを作るのかと言う点に立ち戻り、そこから再スターする事にしました。
以下、自分で要件を立てる。

  • レイアウトは至ってシンプル。ヘッダ、フッタ、メインは2カラム。
  • レスポンシブ。
  • デザインはW3.CSSを使う。
  • メニュー、ウィジェット、ヘッダイメージはWPの管理画面で設定できるようにする。


現時点までの完成品はこちら
最終的に全ての要件は満たせなかったのですが、まぁこれでやりたい事は明確になったのでいざ実装。
W3.CSSを使いたかったのですが、メニューで使用するナビゲーションが特殊でWPだと色々面倒な部分もあったのでbootstrap4に変更。
ヘッダのイメージは当初は固定。
bootstrapのグリッドシステムで2カラムとレスポンシブ対応はだいぶ楽になりました。
続いてメニュー部。ここはフックだけだと面倒なのでWalker_Nav_Menuを継承したクラスを追加して対応。
(start_elとstart_lvlをオーバライド)
あと特別に何かしたものはメニューがスクロールして一番上にきたらに固定できるようにしています。
(twentyseventyほどカッコよくないですが。。。)
あとは特に何かしたって事はないですが、cssはホント未だわからない事が多いです。
HTMLの仕様も私が始めた頃と変わってきているし、勉強はキリないですね。

また次回以降できればコードも含めて説明できればと考えています。