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

当サイト(Reinx)で使用している WordPress テーマ「Snow Monkey」のカスタマイズ事例を紹介する。

WordPress の知識がなければ難しい面もあるが、実際のコードを掲載しているので、同じようにカスタマイズしたい場合はコピーして使ってほしい。

ブログで使うことを前提に、シンプルなアレンジにしている。

ブログ運営に役立つヒントを定期的にお届けします。購読者のみ閲覧できる限定コンテンツも無料配信中。

Snow Monkey カスタマイズ

Snow Monkey カスタマイズはプラグインで行うのが基本だ。テーマの機能を活かすためにも、子テーマは使わずにカスタマイズしよう。

全体のフォントを変更

全体のフォントは以下のとおり CSS で変更している。

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

リンクカラーは以下のとおり。

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

配色は Google 検索セントラルと同じにしているが、よりリンクとわかりやすいよう下線も加えた。

記事タイトル下に meta description を表示

投稿のタイトル下に meta description を表示するよう変更している。

  • カスタマイザーで「ページヘッダーの上にタイトルを表示」を指定
  • meta description 表示欄を設定(Rank Math SEO で出力)
  • スマホで見たときにおさまるよう CSS で調整
Snow Monkey 投稿ヘッダー(タイトル下)に meta description を表示

meta description は Snow Monkey の機能ではなく、プラグイン「Rank Math SEO」で出力している。以下のとおり add_filterrank_math_description を読み込んだ。

// タイトル下に meta description を表示
add_filter(
	'snow_monkey_template_part_render_template-parts/common/page-header',
	function( $html ) {
		if ( is_single() ) {
			$meta_description = get_post_meta( get_the_ID(), 'rank_math_description', true );
			if ( ! empty( $meta_description ) ) {
				$html = str_replace(
					'</h1>',
					'</h1><div class="reinx-header-desc">' . $meta_description . '</div>',
					$html
				);
			}
		}
		return $html;
	}
);

CSS では、ヘッダー背景にアイキャッチ画像が表示されるため、タイトルが見えるよう暗めに調整。

また、meta description を追加した分の高さを確保するため、clamp で指定されている推奨値をスマホのときだけ 100% に変更した。

/* ヘッダー全体を暗くする */
.c-page-header::before {
    content: '';
    display: block;
    background-color: rgba(0, 0, 0, .8);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.c-page-header__content {
    position: relative;
    z-index: 1;
}

/* meta description 表示 */
.reinx-header-desc {
    margin: 1.5em 0;
    font-size: .9em;
    background-color: rgba(255, 255, 255, .2);
    padding: 1em;
    max-width: var(--wp--custom--slim-width);
}

/* 日付・カテゴリー上部の margin 調整 */
.c-page-header__meta {
    margin-top: var(--_margin-0);
}

/* スマホで表示崩れしないよう調整 */
@media screen and (max-width: 600px) {
    .c-page-header[data-has-image=true] {
        height: clamp(300px,100%,500px);
    }
}

記事内の見出しデザインを変更

見出しはそれほど大きく変えていないが、少しアクセントをつけるために <h2> にセクションナンバーを追加している。

見出しの横にSection番号を追加

表示幅が狭いときは、見出しの上に配置される。

スリムサイズで Snow Monkey 見出しセクション番号位置を変更

CSS は以下のとおり。Section ナンバーは counter-resetcounter-increment で自動的にナンバリングされる。

/* カウンターリセット */
.single-post .p-entry-content {
    counter-reset: h2-counter 0;
}

/* 自動ナンバリング */
.single-post .p-entry-content > h2::before {
    counter-increment: h2-counter 1;
    content: "Section " counter(h2-counter);
    color: #a2a2a2;
    display: block;
    font-family: Verdana;
    font-size: .6em;
}

/* 表示幅が広いときは位置を変更 */
@media screen and (min-width: 1280px) {
    .single-post .p-entry-content > h2::before {
        position: absolute;
        left: -6.5em;
        font-size: .85em;
        font-family: cursive;
        font-style: italic;
        font-weight: normal;
        color: #b9b9b9;
    }
}

投稿下部の関連記事デザインを変更

関連記事のデザインは以下のとおり変更している。

  • カスタマイザーで関連記事レイアウト「シンプル」を指定
  • メタ情報をすべて削除
  • 抜粋に meta description を反映(Rank Math SEO で設定)
  • CSS でデザインを変更
Snow Monkey 関連記事エリア

見出しの表記変更・メタ情報の削除は、以下のとおり add_filter を使った。CSS でメタ情報を削除するのが手っ取り早いが、display:none の多用は SEO で好ましくないので出力自体しないようにしている。

抜粋は Rank Math SEO で出力している meta description に置換。

// 「関連記事」の表記を変更
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
);

// メタ情報を削除
add_filter(
    'snow_monkey_template_part_render_template-parts/loop/entry-summary/meta/meta',
    function( $meta ) {
        if ( is_single() ) {
            return '';
        }
        return $meta;
    }
);

// アイキャッチ上のラベルを削除
add_filter(
    'snow_monkey_template_part_render_template-parts/loop/entry-summary/term/term',
    function( $meta ) {
        if ( is_single() ) {
            return '';
        }
        return $meta;
    }
);

// Rank Math の meta description を反映
add_filter(
	'the_excerpt',
	function( $description ) {
		$meta_description = get_post_meta( get_the_ID(), 'rank_math_description', true );
		return $meta_description
			? $meta_description
			: $description;
	}
);

見出し・レイアウト変更の CSS は以下のとおり。

/* 関連記事 見出し部分 */
.c-entry-aside__title {
    display: block;
    font-size: 2rem;
    color: #424242;
    text-align: center;
}

.c-entry-aside__title:before,
.c-entry-aside__title:after {
    content: none;
}

.c-entry-aside__title span {
    display: block;
}

.c-entry-aside__title span:first-letter {
    color: #5a79ff;
}


/* 関連記事レイアウト PC用 */
@media (min-width: 1024px) {
    .single .c-entry__footer {
        max-width: 1280px;
    }

    .single .c-entries--simple {
        display: flex;
        flex-wrap: wrap;
        border: none;
        justify-content: space-between;
    }

    .single .c-entries--simple .c-entries__item {
        border: none;
        flex-basis: 48%;
    }

    .single .c-entries--simple .c-entry-summary__figure {
        margin-right: 1em;
    }
    
    .single .c-entries--simple .c-entry-summary__figure {
        width: 33%;
    }
}

投稿・一覧の投稿者名を削除

一人で運営しているため、投稿タイトル下や記事一覧部分から投稿者名を削除している。SEO の影響を考えて、CSS で非表示にするのではなく出力しないようにした。

// 投稿タイトル下の投稿者を削除
add_action(
	'snow_monkey_entry_meta_items',
	function() {
		remove_action( 'snow_monkey_entry_meta_items', 'snow_monkey_entry_meta_items_author', 30 );
	},
	9
);

// 記事一覧の投稿者を削除
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
);

カスタム投稿一覧ページに固定ページを適用

ブログ用語集」をカスタム投稿タイプで作成しているが、そのままだとトップには一覧が表示されるだけになってしまうので、固定ページを適用するよう変更した。

ブログ用語集トップページ

Snow Monkey には関係しないが、備忘録として残しておく。同じ方法で、カテゴリーページに固定ページを適用するカスタマイズもできる。

function my_pre_get_posts( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return $query;
    }
    // 投稿タイプを限定
    $post_type = $query->get( 'post_type' );
    if ( ! in_array( $post_type, array( 'glossary' ) ) ) {
        return $query;
    }
    // 同名スラッグの固定ページを適用
    global $wp;
    if ( get_page_by_path( $wp->request ) ) {
        $query->parse_query( "pagename={$wp->request}" );
    }
    return $query;
}
add_filter( 'pre_get_posts', 'my_pre_get_posts' );

FAQ ブロックの Question を h3 に変更

Snow Monkey Blocks の FAQ ブロックは、質問・回答部分に <div> が使われている。

目次に質問部分を表示するため、preg_replace<h3> に置換した。

// FAQ を h3 に変更
function change_faq_div_to_h3( $content ) {
    $content = preg_replace('/<div class="smb-faq__item__question__body">(.+?)<\/div>/is', '<h3 class="smb-faq__item__question__body">$1</h3>', $content);
    return $content;
}
add_filter( 'the_content', 'change_faq_div_to_h3' );

デザイン調整が必要となるが、テーマ・プラグインを問わず使えると思う。

投稿下部 CTA を再利用ブロック+フックで表示

投稿下部の CTA は、再利用ブロックを使っている。

  • Reusable Blocks Extended で再利用ブロックを作成・管理
  • アクションフック snow_monkey_append_entry_content に出力
Reinx 投稿下部の CTA を再利用ブロックで表示

コードは以下のとおり。get_post 部分の ID は、再利用ブロックページに表示されている(プラグインを使用している場合)。

add_action(
	'snow_monkey_append_entry_content',
	function() {
		if ( is_singular( 'post' ) ) {
			echo apply_filters( 'the_content', get_post( 1234 )->post_content );
		}
	}
);

Snow Monkey カスタマイズ参考ページ

Snow Monkey のカスタマイズは、以下のページが参考になる。

Snow Monkey レビュー記事で書いているように、他のテーマと比べるとブログ初心者向けの「基本的な操作」や「カスタマイズ」情報は少ない。

Web 制作に取り組みたい人・WordPress 脱初心者を目指す人には最適なテーマだと思うので、試行錯誤しながらカスタマイズにチャレンジしてみよう。

Reinx 記事執筆:瀬尾 真

Web 業界歴 20 年の知見と経験をもとに、初心者でも楽しくブログ運営に取り組んでいただけるよう、WordPress や SEO のノウハウを提供しています。Twitter では最新ニュース・小技集を配信中。

メールマガジン
限定情報を無料配信中

  • 「初心者向けキーワード選定法」ほか、登録直後に読める限定情報を無料プレゼント
  • 有料コンテンツを抽選で無料プレゼント
  • ブログ関連のニュースを定期配信(SEO・WordPress)