【Snow Monkey】Webエンジニアの僕がオススメするカスタマイズ総まとめ(随時更新)

こんにちはフリーランスWebディレクター兼エンジニアののせっちです。

僕が実際に当ブログやWeb制作案件で使っているSnow Monkeyカスタマイズを全て公開します。

知見がドンドン溜まっている状態ですので、随時更新していきます!

この記事の使い方

  • 下記の目次または、追尾サイドバーの目次から気になるタイトルへジャンプ!
  • コピペで持って行ってOK
  • 詳しく知りたい場合は個別記事へ(ある場合)

前提として、子テーマまたはMy Snow Monkeyの設定が必要です。

この記事を読んだ方の感想(一部掲載)

トップページ最上部(ヘッダーと最初のコンテンツ間)の余白を消す

/* トップページ最上部のpadding除去 */
.p-section-front-page-content {
  padding-top: 0;
}

投稿一覧の著者を消す

/* authorを非表示 */
.c-entry-summary__content,
.c-meta__item--author {
  display: none;
}

メタ情報を左揃え

/* メタ情報を左揃え */
.c-entry-summary__meta {
  text-align: left;
}

tableタグでヘッダーセクションの色を変更

/* tableタグ thのカラーを指定 */
.wp-block-table thead th {
  background-color: #ffce49;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

ヨメレバ・カエレバのCSSを指定

下記の記事を参考にしましたm(_ _)m

セクション間の余白をゼロに

下記CSSを追加後、高度な設定 → 追加CSSに該当のクラス名を書くをセット

/* セクション間の余白をゼロにする */
.smb-section_pb0 {
  padding-bottom: 0;
}

ブロークングリットでスマホ時画像を上にする

下記CSSを追加後、高度な設定 → 追加CSSに該当のクラス名を書くをセット

/* ブロークングリット */
.smb-section-break-the-grid--right.broken-order .c-row__col:first-child,
.smb-section-break-the-grid--left.broken-order .c-row__col:first-child {
  order: 2;
}
.smb-section-break-the-grid--right.broken-order .c-row__col:last-child,
.smb-section-break-the-grid--left.broken-order .c-row__col:last-child {
  order: 1;
}

@media screen and (min-width: 64em) {
  /* ブロークングリット */
  .smb-section-break-the-grid--right.broken-order .c-row__col:first-child,
  .smb-section-break-the-grid--left.broken-order .c-row__col:first-child {
    order: 1;
  }
  .smb-section-break-the-grid--right.broken-order .c-row__col:last-child,
  .smb-section-break-the-grid--left.broken-order .c-row__col:last-child {
    order: 2;
  }
}

ブロークングリットでスマホ時画像を画面中央に配置

CSSを追加後、高度な設定 → 追加CSSに該当のクラス名を書くをセット

/* ブロークングリットの画像を画面中央に配置 */
.smb-section-break-the-grid--left.broken-order
  .smb-section-break-the-grid__figure {
  left: 0;
}
.smb-section-break-the-grid--right.broken-order
  .smb-section-break-the-grid__figure {
  right: 0;
}

@media screen and (min-width: 40em) {
  /*  ブロークングリットの画像配置 PC時は元の位置へ */
  .smb-section-break-the-grid--left.broken-order
    .smb-section-break-the-grid__figure {
    left: -1.86957rem;
  }
  .smb-section-break-the-grid--right.broken-order
    .smb-section-break-the-grid__figure {
    right: -1.86957rem;
  }
}

表(tableタグ)の左右の幅を固定する

CSSを追加後、高度な設定 → 追加CSSに該当のクラス名を書くをセット

/* tableタグ */
.tb-15 td:first-child {
  width: 15%;
}
.tb-15 td:last-child {
  width: 85%;
}

.tb-20 td:first-child {
  width: 20%;
}
.tb-20 td:last-child {
  width: 80%;
}

.tb-25 td:first-child {
  width: 25%;
}
.tb-25 td:last-child {
  width: 75%;
}

.tb-30 td:first-child {
  width: 30%;
}
.tb-30 td:last-child {
  width: 70%;
}

/* ヘッダーセクションあり */
.th-25 th:first-child {
  width: 25%;
}
.tb-25 th:last-child {
  width: 75%;
}

最初のH2上に自動で目次を入れる

 // 最初のH2の上に目次を自動追加
 add_filter(
	'snow_monkey_display_contents_outline',
	function( $display ) {
		if ( is_front_page() ) {
			return false;
		}
		
		if ( is_single() ) {
			return true;
		}

		/*
		// 固定ページにも目次を入れたい場合
		if ( is_page() ) {
			return true;
		}
		*/

		return false;
	}
);

h4以下を非表示に

/* h4以下を非表示 */
.c-entry__content .contents-outline ol ol ol {
  display: none;
}

固定ページをピックアップスライダーで表示する

下記のコードを追加後、固定ページのタグに『pickup』を追加

// 固定ページにタグを設定(pickupスライダー用)
function add_tag_to_page() {
	register_taxonomy_for_object_type('post_tag', 'page');
 }
 add_action('init', 'add_tag_to_page');

ピックアップスライダーの高さを指定する

@media screen and (min-width: 64em) {
  /* ピックアップスライダーの高さを指定 */
  .l-contents .wpaw-pickup-slider__item {
    height: 500px !important;
    min-height: 500px !important;
  }
}

ソースコードをシンタックスハイライト

Highlighting Code Blockをインストール

オススメ設定

  • コードブロックに言語名を表示する【オン】
  • コードブロックに行数を表示する【オン】
  • コードカラーリング(フロント・エディタともに)【Light】
  • フォントサイズ(PC・SPともに)【14px】
  • font-family【monospace, Menlo, Consolas, sans-serif;】

Googleアドセンスを固定ページで非表示にする

『Widget Logic』をインストール

『WPAW: Googleアドセンス』に下記を記述

!is_page()

固定ページ・投稿ページ・アーカイブページのタイトルをページヘッダーに表示する

固定ページ・投稿ページの場合

  • 固定ページを開く → カスタマイザー → デザイン → 固定ページ設定 → アイキャッチ画像を『ページヘッダーの上にタイトルを表示』
  • 投稿ページを開く → カスタマイザー → デザイン → 投稿ペー定 → アイキャッチ画像を『ページヘッダーの上にタイトルを表示』

アーカイブページの場合

  • 設定 → 表示設定 → ホームページの表示 → 投稿ページを任意の固定ページに設定
  • 固定ページにアイキャッチ画像を設定
  • functions.phpにコードを追加(下記)
  • CSSにコードを追加(下記)
// アーカイブページでページヘッダーにタイトルを表示
add_filter(
	'snow_monkey_is_output_page_header_title',
	function( $output ) {
		if ( is_home() ) {
			return true;
		}
		return $output;
	}
);
/* アーカイブページのタイトルを消す */
.blog .c-entry__title {
  display: none;
}

カスタム投稿タイプの場合

  • functions.phpにコードを追加(下記)
  • CSSにコードを追加(下記)
// カスタム投稿タイプの任意のアーカイブページにページヘッダー画像を表示
add_filter(
	'snow_monkey_pre_page_header_image_url',
	function( $url ) {
		// カスタム投稿アーカイブのときだけ
		if ( is_post_type_archive( array('// カスタム投稿タイプのslug')) ) {
			return '// 設定したい画像のURL';
		}

		return $url;
	}
);
// カスタム投稿タイプの任意のアーカイブページのページヘッダーにタイトルを表示
add_filter(
  'snow_monkey_is_output_page_header_title',
  function( $output ) {
    if ( is_post_type_archive(('カスタム投稿のslug') ) {
      return true;
    }
    return $output;
  }
);
/* カスタム投稿タイプが'faqの場合' */
.post-type-archive-faq .c-entry__title{
 display: none;
}

プロフィールボックス(この記事を書いた人)を消す

  • 投稿ページを開く
  • カスタマイザー → デザイン → 投稿ページ設定 → 『記事にプロフィールボックスを表示する』のチェックを外す

Google fontsを使う

  • functions.phpにコードを追加(下記)
  • CSSにコードを追加(下記)
// Google fontsの読み込み
add_action( 'wp_head', function() {
 ?>
  // Open Sansの場合
 <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
 <?php
});
/* Open Sansの場合 */
.l-body{
 font-family: 'Open Sans', sans-serif;
}

スライダーの画像をPC・SPで切り替える

  • PC用画像(横長)・SP用画像(縦長)を用意する
  • Snow Monkey Blocksでスライダーを選択肢、PC用ブロック・SP用ブロックを分けて作成する
  • PC用スライダーブロックにはSnow Monkey Editorで、表示設定(ウィンドウサイズ)から『スマートフォンサイズで非表示』を選択
  • SP用スライダーブロックは『タブレットサイズで非表示』『PCサイズで非表示』を選択

記事タイトル下の文章を記事冒頭の抜粋からMeta descriptionに変更

functions.phpに下記を記述

add_filter(
	'the_excerpt',
	function( $description ) {
		$meta_description = get_post_meta( get_the_ID(), 'wp-seo-meta-description', true );
		return $meta_description
			? $meta_description
			: $description;
	}
);

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
- WordPressが得意!
- 初心者向けGulp教材は購入者100部以上!