WordPressテーマ「Snow Monkey」カスタマイズTIPS

当サイト（Naifix）は、WordPress テーマ「Snow Monkey」を使用しています。

テーマの構成・デザイン自体が優れているのでそれほど大掛かりなカスタマイズはしていませんが、少しでもオリジナリティを出すために変更した点を備忘録として残しておきます。

カスタマイズのコンセプトは「Snow Monkey の利点を活かして極力シンプルに作るブログ」です。

Snow Monkey カスタマイズにあたって

カスタマイズ方法の入手先

Snow Monkey のカスタマイズ関連情報は、個人ブログ向けに制作された人気テーマに比べるとかなり少ないと思います。

レビュー記事でも書いているとおり、WordPress にある程度精通している制作者向けのテーマだから、というのが理由のひとつでしょう。

しかし、Snow Monkey はサポートフォーラムが充実しており、たいていの情報はそこに集まっています。フォーラムを見れば解決することが多いので、あちこち検索して探すよりわかりやすいかもしれません。

どうしてもわからないことは、フォーラムで聞けば、制作者であるキタジマさんご本人や有志の方々が回答してくれます。

回答もそうですけど、機能追加の要望へのレスポンスなどもとても早いので、そこは本当にすごいなと感心するばかりです。テーマもプラグインも、アップデート頻度はかなり多いですからね。

テーマカスタマイズで気をつけたいところ

Snow Monkey にかぎった話ではありませんが、カスタマイズする上で気をつけるべき点がひとつだけあります。

何でもかんでも CSS でやってはダメ

Twitter などで「駆け出しエンジニア」的な方が発信している TIPS をたまに見ると、CSS で簡単に消すものがけっこう多いんですよね。display:none とか font-size:0 とか。

CSS で消したところで HTML は出力されたままなので、下手すると「隠しテキスト」と検索エンジンに認識されるかもしれません。

一時的な対応や、検索に関係のない範囲への対応であればよいと思います。でもどこで何が影響するかわかりませんから、できるだけ HTML を出力しないよう調整するのがベストです。

Snow Monkey カスタマイズ例

実際に当サイトでカスタマイズした箇所をご紹介します。Snow Monkey をブログで使うさいのご参考になれば幸いです。

使用しているプラグインは以下の記事をご覧ください。

フォント関連

全体のフォントとアンカーテキストは CSS で変更しています。

body {
    color: #202124;
    font-family: "Helvetica", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

a {
    color: #1a73e8;
    text-decoration: underline dashed 1px;
    text-underline-offset: 0.25em;
}

記事タイトル・見出しはこんな感じです。

.c-entry__title {
    font-size: 1.25rem;
}

@media screen and (min-width: 64em) {
.c-entry__title {
    font-size: 1.8rem;
}
}

.p-entry-content > h2 {
    background-color: #f7f7f7;
    border-left: none;
    padding: 1.5rem;
}

.p-entry-content > h3 {
    font-size: 1.25rem;
    border-bottom: 2px solid #efeeea;
    padding: .5em .1em;
    position: relative;
}

.p-entry-content > h3:after {
    position: absolute;
    bottom: -2px;
    left: 0;
    z-index: 2;
    content: '';
    width: 20%;
    height: 2px;
    background-color: #1c273e;
}

フォントや目立つ要素（タイトル・見出し）をカスタマイズするだけでかなり印象が変わりますので、他サイトと差別化したいときはまずフォントを調整してみるのがよいと思います。

行間・要素間の余白調整は、読みやすさにも影響してくる部分です。

SNS シェアボタン

SNS シェアボタンは左サイドにフロート（固定）させておきたくて、プラグインをいくつか試しました。

でも、どうしても動作が重くなってしまうんですよね。

単純に CSS で調整すればいいんだと思いついて、Snow Monkey のシェアボタン機能をそのまま使うことで解決しました（記事下のシェアボタンを左サイドに固定）。

/* Share */
@media screen and (min-width: 769px) {

.wp-share-buttons {
    position: fixed;
    left: 4px;
    top: 40vh;
    margin: 0 !important;
    z-index: 9999;
}

.wp-share-buttons__list {
    margin: 0;
}

.wp-share-buttons__item {
    display: block;
    margin: 0;
}

.wp-share-button--icon .wp-share-button__button {
    height: 45px;
    width: 45px;
    border-radius: 0;
}

.wp-share-button__icon>svg {
    height: 20px;
    width: 20px;
}

}

2 カラムでヘッダーメニューおよびサイドバー目次を追従（固定）させているなら、SNS ボタンも固定するとちょっと邪魔になるかもしれません。

1 カラムなら記事下にサブコンテンツが集まりやすくなるので、できるだけ記事下をスッキリさせるためにフロートさせるのは有効な手段かと思います。

今のところはシェア数に大きな変化はないですけどね…。

上部プログレスバー

海外サイトで固定ヘッダー部分にプログレスバーを表示しているのをよく見かけるようになったので、真似して入れてみました。

プラグイン「Reading Progress Bar」で実装しています。

これは完全に自己満足です。滞在時間が伸びたとかプラスの影響はありませんし、何かしらの数値が悪化したというマイナスの影響もとくにありません。

ヘッダー部分に動きがあって目をひくので、サイトによってはヘッダーメニューのクリック率に多少の影響が出ることもあるかと思います。

記事下の「関連記事」表記を変更

記事下の関連記事は Snow Monkey の機能をそのまま使っています。見出しを「関連記事」から「Recommend」に変更しました。合わせてデザインも少し変えてあります。

こちらはフォーラムの事例をそのまま使っています。

add_filter(
	'snow_monkey_template_part_render',
	function( $html, $slug ) {
		if ( 'template-parts/content/related-posts' === $slug ) {
			return preg_replace(
				'|<span>.*?関連記事|ms',
				'<span>Recommend',
				$html
			);
		}
		return $html;
	},
	10,
	2
);

本文内の見出しはカスタマイズしているのに、関連記事やウィジェットの見出しはデフォルトのままになっているサイトをよく見かけます。

「あ、Snow Monkey だ」と一発でわかる部分かもしれません。

オリジナリティにこだわるなら、カスタマイズしておきたいですね。

「公開日」を「更新日」に変更

各記事のメタ情報（タイトル下）にある日付は、カスタマイザーで更新日のみの表示としています。

これだと関連記事やアーカイブなどの記事一覧では公開日のままなので、更新日を表示するよう変更しました。

こちらもフォーラムの掲載事例そのままです。

add_filter(
	'snow_monkey_template_part_render_template-parts/loop/entry-summary/meta/meta',
	function( $html ) {
		if ( get_the_time( 'Ymd' ) >= get_the_modified_time( 'Ymd' ) ) {
			return $html;
		}

		ob_start();
		?>
		<li class="c-meta__item c-meta__item--modified">
			<i class="fas fa-sync-alt" aria-hidden="true"></i>
				<?php
				$date_format = get_option( 'date_format' );
				the_modified_time( $date_format );
				?>
		</li>
		<?php
		$modified = ob_get_clean();
		return preg_replace(
			'|(<li class="c-meta__item c-meta__item--published">.*?</li>)|ms',
			$modified,
			$html
		);
	}
);

公開日・更新日ともに表示しておくより、更新日のみの表示のほうが、検索結果スニペットの日付も更新されやすい気がします。

ニュース系記事でなければ読者に古い日付を見せるメリットはとくにないので、頻繁にリライトしているなら更新日のみでよいかなと思います。

投稿者の表示を削除

基本的に一人で記事を書いているため、記事下のメタ情報・記事一覧に含まれる投稿者情報は削除しました。

前述のとおり CSS で非表示にするのはできるだけ避けたいので、HTML を出力しないようにしています。

// post meta author delete
add_action(
	'snow_monkey_entry_meta_items',
	function() {
		remove_action( 'snow_monkey_entry_meta_items', 'snow_monkey_entry_meta_items_author', 30 );
	},
	9
);

// archive author delete
add_filter(
	'snow_monkey_template_part_render_template-parts/loop/entry-summary/meta/meta',
	function( $html, $name, $vars ) {
			return preg_replace(
				'|<li class="c-meta__item c-meta__item--author">.*?</li>|ms',
				'',
				$html
			);
		return $html;
	},
	10,
	3
);

CTA を固定ページで作成

ページ下部の CTA は、固定ページで作成したものをフックで出力しています。

このカスタマイズ方法は、公式サイトのカスタマイズ記事とフォーラムの掲載事例で詳しく解説されています。

CSS カスタマイズのみしかやったことがなければちょっと難しいかもしれませんが、仕組みがわかると幅が広がって楽しいですよ。

Snow Monkey のフック箇所は「HAPPY SNOW MONKEY」さんを見れば一発です（ものすごく便利！）。

まとめ

Snow Monkey は、個人的なブログよりコーポレートサイトなどで使われるケースのほうが多いかもしれません。でも普通のブログで使うのもまったく問題ないですし、制作の勉強がてら情報を発信していきたいなら最適なテーマだと思います。

どのようなサイトでもコンテンツが最重要ですが、カスタマイズしながら自分の城を築き上げていくのも楽しみ方のひとつですよね。

楽しく継続していくのが一番なので、自分なりの楽しみ方を見つけていきましょう。

それでは、また。