この記事を書いた人

WordPressテーマ「Snow Monkey」をカスタマイズしよう!&不具合改善Tips(初心者向け

 

つい最近からWordPressテーマに「Snow Monkey」を使わせてもらっています。
デザインがシンプルでステキなのですが、構造がやや特殊らしくカスタマイズの際にお目当てのファイルが見つからない、といいますか記述する場所が分からない。

私はとりあえずアドビのTypekitを仕込みたかったので、header.phpを探しました。
で、合わせて色々と変更したいところも出てきたし、今後も出てくるかと思うので、この記事をベースにカスタマイズの知見をつらつら書き々々、更新々々していこうと思います。

初心者向けとか書いてますけど、私が初心者というか雰囲気WordPressいじりマンなので、これを読んでるみなさんと大体同じ立ち位置です。

header

headerの場所は以下です。(たぶん

 

template > layout > header > header.php

Typekitをいれるときは、一番上にコピペしてきたコードを入れましょう。
(余談だけどTypekitは日本語で使うときは、上級者向けの非同期表示用コードを使いましょう。)

フォントを変えたい

bodyを指定して、追加CSSで記述しましょう。

 

これをpとかliとかのclassを指定してやると、本文とか関係ないところまで均一で同じフォント指定になっちゃいます。

困りますのでやめましょう。

 

Twitterカードが表示されない

Snow monkeyとSEOプラグイン(yoast SEOなど)の両方のTwitterカード機能がオンになっていないか確認しましょう。
オンの場合はどちらか一方オフに。
Snow monkeyでのTwitterカード機能の操作は、公式のマニュアルを参考にします。

私はSEOプラグインの機能をオンにし、Snow monkeyの機能はオフにしました。

あとは↓で、Twitterカード確認をしましょう。

 

記事が更新されない

snow monkeyのせいじゃないですけど、記事の更新を押しても少し前の下書きが表示されて困りました。
挙動的にキャッシュ系プラグインが悪さをしてそうだったので、WP Fastest Casheを停止したところ良くなった…ような気がします。

 

メニュー表示が崩れる

実際のスクショを取れなかったので画像がありませんが、サイトのロゴだったりお知らせバーなどをいじっていると上部に設置したグローバルメニューの表示が崩れる場合がありました。
具体的には、十分スペースがあるのにPC表示でグローバルメニューのテキストが改行されるなどです。

これが上手くいっている状態。不要な改行などが発生していません。

 

その場合、まずサイトロゴが適正な大きさになっているかを確認します。
推奨は320×160ピクセルです。

その上で、
カスタマイズ > メニュー > メニューの位置 すべての位置を表示
からグローバルメニューを メニュー から ――選択―― に一度切り替え、再度 メニュー を選択することで、リフレッシュされます。

 

お知らせバーの色をカスタマイズしたい

 

公式のマニュアルでは、お知らせバーの色を変える方法として、

.p-infobar__inner {
  background-color: #f00;
  color: #fff;
}

と紹介していますが、これだとホバーしたときなどに指定色が変わってしまうので、私は

a.p-infobar__inner, .p-infobar a.p-infobar__inner:active, .p-infobar a.p-infobar__inner:focus, .p-infobar a.p-infobar__inner:hover {
 background-color: #122466;
 color: #fff;
}
.p-infobar a.p-infobar__inner:hover {
	 background-color: #111111;
 color: #fff;
}

 

としました。

.p-infobar a.p-infobar__inner:hover がマウスカーソルが上にきた際のカラーの指定classになると思います。
その他にどんな状態があるか分かりませんが(focusってhoverとなにがちがうんだ)、ホバー時以外は同じ色でよかったので、お知らせバーに関するclassのバッググラウンドカラーとテキストカラーは一括で#122466と#fffで指定しました。
※(ホバー時以外の状態を示すclass:a.p-infobar__inner, .p-infobar a.p-infobar__inner:active, .p-infobar a.p-infobar__inner:focus, .p-infobar a.p-infobar__inner:hoverとか)

カラーコードは好きなのに変えてください。

 


 

随時追加予定。

 

この記事を書いた人

イズミ リム

伊澄 理夢 / イズミ リム / IZUMI Rhime
2017年3月からブロックチェーンに興味を持って以来、デザインの面から、"NEM"を通じて技術の普及に貢献できる道を探しています。
児童文学と純文学、哲学と現代思想、仏教と禅、黒い服と民族衣装が好きなINTROVERT(内向型)です。
大学ではデザインを学ぶ。