WordPressテーマをCSSテンプレートでカスタムメニューをいい感じにデザインする2018-09-25WordPressテーマをCSSテンプレートでカスタムメニューをいい感じにデザインするWordpressこんにちは、のすけです。今まで様々な投稿関係のテクニカルなことを紹介してきましたが、今回は一番わかりやすいデザインを触っていきたいと思います。デザインはCSSを弄って色々とやっていくわけですが、如何せん設定項目が多く、CSSも膨大な数を書かなくてはいけないためとても大変です。そこで巷ではCSSフレームワークというものが用意されています。有名な例では「Bootstrap」「Foundation」などがあります。今回は「Bootstrap」を導入する例を紹介したいと思います。バージョンは最新のBootstrap4を扱います。Bootstrap4はいわゆるよく利用されているBootstrap3の後継バージョンで、ついにフラットデザインになったものです。利用されすぎて「Bootstrap臭さ」と呼ばれるものがあったBootstrap3ですが、4になっていくらか軽減されていると思います。Bootstrapを読み込むヘッダーを作るナビゲーションメニューをつけるli要素とaタグにクラスを付けるためにfunctions.phpに追記まとめBootstrapを読み込む今回はheader.phpに書き込む手法でいきたいと思います。読み込み方法もCDNからデフォルトのBootstrapを読み込むもっとも簡単な方法を選びました。crossorigin="anonymous"></script>そのほか、独自のCSSの読み込み方法を利用して、functions.phpで読み込む方法は、こちらの記事で紹介しています。hollywis.hatenablog.comテーマフォルダ内にCSSやJSを置く方法もありますが、ルートフォルダ直下にassetsフォルダを作ってそこに配置していきます。ヘッダーを作るheader.phpを編集していきます。オリジナルで作った最小テーマである「anothersky」の分割バージョンを使っていきます。class="wrap">とてもシンプルなheader.phpです。本当に最低限の記述しかありません。ここにBootstrapを適用していきます。CSSフレームワークにはだいたいヘッダー用のデザインがあらかじめ用意されています。ナビゲーションメニューをつけるWordpressの管理画面から[外観]-[カスタマイズ]をクリックし、次に[メニュー]からmenuという名前でメニューを追加しておきます。ソースコードを見てみると次のような構成になっています。</div></div>containerのclassが「menu-memu-container」、menuのclassが「menu」です。対して、BootstrapのNavbarは次のような形を期待しています。大まかな構成は一緒ですが、クラス名などのズレがあります。</div></nav>そのため、次のようにheader.phpを書き換えていきます。class="wrap">まず、body要素下の最後の2行を残して全て内容を全て削除し、代わりにBootstrapのコードを入れ込みます。次に、Webサイトのタイトルに当たる部分にを埋め込みます。最後にメニューのdiv要素をWordpPressのメニューテンプレートであるwp_nav_menu()に置き換えてきます。その際に、クラスの名前が都合が悪いため次のように初期設定を書き換えます。navbar-collapse'li要素とaタグにクラスを付けるためにfunctions.phpに追記li要素にnav-itemをそして、現在表示しているページにはactiveを、さらにli要素下のaタグにもクラスを付ける必要があるのでfunctions.phpに以下のコードを記述する。$item_output);}active,nav-itemはnav_menu_css_classをフックして、任意のクラスを追加させている。nav-link'はwalker_nav_menu_start_elのフックで、正規表現で特定して追加させています。nav-linkの付け方はこちらを参考にさせていただきました。WEBUTUBUTUまとめ結構面倒ですね。BootstrapにはSass版もあり、そちらを使えばテーマの色を一括で変えるなどもできるのですが、それは次の機会にやってみたいと思います。今回はデフォルトのBootstrap4をCSSとJSファイルそのままで利用していきました。liタグにクラスを付ける方法に、管理画面の外観のカスタマイズで、メニューの項目にそれぞれCSSクラスを記述できるのですが、それだとメニューを追加するたびにいちいちクラスを追加しなくてはいけないため、その手法はやめました。BootstrapとWordPressの使用をすり合わせるためには、headerのテンプレートだけでなく、functions.phpもいじらなくてはいけないため、なかなか難儀な作業です。Tumblr広告を非表示にする関連記事2018-09-27WordPressのテーマにサムネイルをサポートさせるこんにちは、のすけです。自分でWordPressテーマを作ると必要な...2018-09-17カスタムフィールドを使いこなしてWordPressを「単なるブログ」から「使えるシステム」に進化させ...こんにちは、のすけです。(Bootstrapなど)こんにちは、のすけです。WordPressを弄っていると、独自のCSS...2018-09-07WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。こんにちは、今回はWordPressのアーカイブ機能カスタマイズして...2018-08-30WordPressループってなんぞや?コンテンツ表示に欠かせないお話こんにちは、のすけです。(2)リンクホックー!検索はてなブログをはじめよう!hollywisさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。