検索MENUWeb制作、デザイン、VRを中心に日々学んだ知識を配信中。Moneky』の子テーマを使ったカスタマイズ方法を実例を交えて紹介します。目次カスタマイズでハマってませんか?ヘッダーをコーポレートサイト風にカスタマイズ(2018年4月25日追記)CSSだけでも同じことが出来そう。Monkey』を使っています。他のテーマにない!WordPressテーマ『SnowMonkey』購入者限定のコミュニティの魅力この記事では、このブログでも使っているWordPressテーマ「SnowMonkey」の他のテーマにはない魅力の1つ、「購入者限定コミュニティ」について紹介します。一応、子テーマを使っているものの一切、カスタマイズせずに使えています。仕事の案件で使おうとすると、お客さんからの要望で、カスタマイザーでは調整できない部分も出てきました。子テーマを使ったカスタマイズで対応することにしました。Monkey』と言うテーマは、開発者のキタジマさんが紹介してる通り、ちょっと独特な構造をしています。アドベントカレンダー4日目の記事です。「自分でやって見ないとピンと来なかった」というのが正直なところでした。自分の備忘録も兼ねて、この記事を書いています。手探りなので、「ここ間違ってるよ」とか「もっとこうした方がいいよ」とかあれば、Twitterの方にでも、優しく教えていただけると助かります。事例の紹介して行きます。ヘッダーをコーポレートサイト風にカスタマイズ今回、カスタマイズしたのは、ヘッダー部分です。パターンからヘッダーが、選べます。下記画像のような、グローバルナビの背景に色をつけたコーポレーションサイト風のヘッダーを作って行きます。上/カスタム前、下/カスタム後(2018年4月25日追記)CSSだけでも同じことが出来そう。キタジマさんが、公式ページでスキンの説明の際に、CSSだけで同じことをできる方法を書いてくれていました。デザインスキン機能が利用できます。普通のテーマだと、header.phpを子テーマにコピーして来てカスタマイズするのですが、SnowMonkeyの場合、そもそも直下の階層に、header.phpがありません。今回のカスタマイズで使うファイルは、/template-parts/2row-header.phpと/templates/layout/header/2row.phpの2つです。ディレクトリ構造で書き表すと赤字の所にあります。:この構造の詳細は、キタジマさんの下記の参考にしてください。アドベントカレンダー4日目の記事です。Snow...snow-monkey.2inc.orgそれぞれのファイルが入っているディレクトリーについて、簡単に説明すると、/template-parts=ページネーションとかロゴとか記事一覧とかの小さい部品(コンポーネント)が入っている。/templates=さらにその中で、レイアウト用のディレクトリ(/layout)と見た目(ビュー)用のディレクトリに分かれている。/layoutの中に/headerの各パターンのレイアウトファイルが入っている。/template-parts/2row-header.phpのカスタマイズでは、早速カスタマイズして行きます。標準の「2行」パターンのヘッダーの場合、1つの.c-cotaninerの中に、ロゴ部分とグローバルナビ部分が入っているため、グローバルナビの背景を全幅で伸ばせません。ロゴ部で一旦、.c-containerを閉じ、グローバルナビ部のリスト部分を新たに.c-containerで囲みます。これで、ロゴ部分とグローバルナビ部分が分離できました。あとは、グローバルナビの背景に全幅で色をつけるために、クラス名(.p-global-nav-bg)を追加しておきます。?>:/templates/layout/header/2row.phpのカスタマイズこちらは、固定ヘッダーになった時のグローバルナビ部の背景色を変えるために、さっきと共通のクラス名(.p-global-nav-bg)を追加しておきます。子テーマのCSSファイルに書いてもいいのですが、今回は、カスタマイザーの「追加CSS」に記述しました。グローバルナビ部の背景色(#1b66cb)を指定し、文字色、ホバー時の状態などを調整して行きます。Monkey』のヘッダー部をコーポレートサイト風にカスタマイズする方法を紹介しました。今回の内容を含んだ子テーマをGitHubにも上げておいたので、良かったら参考にして見てください。GitHub.github.com(ベースの子テーマは、@Olein_jpさんの子テーマを使わせてもらいました。ありがとうございます。)今回のように、子テーマでヘッダー部の上書きしても、<head>部などをまるまる上書きする必要もないので、カスタマイズの影響範囲を最小限に抑えることができます。テーマのアップデートをしてもトラブルが発生しにくくなっています。カスタマイズしてみて、改めてよく出来たテーマだなぁと感じました。Monkeyどんな味付けにも染まる。プログラミング、ブログ、VRにハマってます。DTPとWebは実務経験なしから仕事を獲得し、3人の子育てにも参加しつつ、在宅でバタバタな生活してます。Web、VR、フリーランスの生活を中心に発信します。