snow_monkey_prepend_main

カスタマイズしたスタイルを編集画面にも反映する方法(SCSSテンプレ有り)

  • ブックマーク
  • -
    コピー
snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

My Snow Monkeyを活用してSnow Monkeyのスタイリン(見た目)をカスタマイズすることはよくあると思います。

仕組みは単純で、My Snow Monkey内にstyle.cssを用意し、それを読み込むだけで完了です。

style.cssでのスタイリングの準備はこちらから

自分だけのプロジェクトであれば、これでも問題ないのですが、お客さんを相手にウェブサイトを制作するお仕事の場合、これでは十分とは言えません。

WordPressのブロックエディタは、編集体験を向上させるために導入された一面もあり、その体験向上(UX向上)のためにも、編集画面でも実際の見た目で編集を可能にするべきでしょう。

ここでは、その方法をご紹介します。

編集画面用CSSファイルを読み込む

まずは、編集画面に利用するCSSファイルを読み込みましょう。

My Snow Monkeyに以下のようなコードを追記します。ご自身のプラグイン(My Snow MonkeyのままでもOK)やCSSファイル名に置き換えてください。

<?php
/**
 * import css file for editor
 */
add_action(
	'after_setup_theme',
	function() {
		add_editor_style( '/../../plugins/{your-plugin-name}/editor-style.css' );
	}
);

これで、編集画面にeditor-style.cssというCSSファイルが読み込まれるようになります。ファイル名は良しなに変更・解釈してくださいね。

フロント用と編集画面用のCSSファイルをそれぞれ作る

構造としてはこんな感じの流れになっています。Sass(SCSS記法)を利用しているので、まだ触ったことがないという方はこれを機にぜひチャレンジしてみてください。

手書き文字汚くてごめんなさいごめんなさいごめんなさい…

ざっくり説明しますね。

まず、フロント用と編集画面用に2つのCSSファイルが必要になります。

  • style.cssstyle.scssをコンパイルしたフロント用)
  • editor-style.csseditor-style.scssをコンパイルした編集画面用)

そして、それぞれに以下のパーシャルファイルを読み込みますが、読み込み方は後述しますので確認してくださいね。

  • _core-blocks.scss(標準ブロック用)
  • _under-is-root-container.scss.is-root-container直下の際のスタイル用)
//-----------------------------------------------------
// 順序のないリスト
//-----------------------------------------------------
ul {

}

//-----------------------------------------------------
// 順序のあるリスト
//-----------------------------------------------------n
ol {

}

//-----------------------------------------------------
// コード
//-----------------------------------------------------
.wp-block-code {
  code {

  }
}

//-----------------------------------------------------
// テーブル
//-----------------------------------------------------
.wp-block-table {
  table {
    thead {
      th {
        th {

        }
      }
    }
    tbody {
      tr {
        td {

        }
      }
    }
  }
}

//-----------------------------------------------------
// 画像
//-----------------------------------------------------
.wp-block-image {
  img {

  }
  & .is-style-round {

  }
}

//-----------------------------------------------------
// ギャラリー
//-----------------------------------------------------
.wp-block-gallery {
  & .column-2 {

  }
  & .column-3 {

  }
  & .column-4 {

  }
  & .is-clopped {

  }
  .blocks-gallery-grid {
    .block-gallery-item {
      figure {
        img {

        }
      }
    }
  }
}

//-----------------------------------------------------
// カバー
//-----------------------------------------------------
.wp-block-cover {
  &__inner-container {

  }
}

//-----------------------------------------------------
// メディアとテキスト
//-----------------------------------------------------
.wp-block-media-text {
  &__media { // 画像

  }
  &__content { // コンテンツ

  }
}

//-----------------------------------------------------
// ボタン
//-----------------------------------------------------
.wp-block-buttons {
  .wp-block-button { // 標準ボタン
    &__link {

    }
    & .is-style-outline { // アウトライン

    }
  }
}

//-----------------------------------------------------
// カラム
//-----------------------------------------------------
.wp-block-columns {
  .wp-block-column {

  }
}

//-----------------------------------------------------
// 区切り
//-----------------------------------------------------
.wp-block-separator {

}
_core-blocks.scssの中身はこちら
//======================================================================
// @link https://github.com/inc2734/snow-monkey/blob/master/src/css/core/mixin/_entry-content.scss
//======================================================================
> h2 + h3,
> h3 + h4,
> h4 + h5,
> h5 + h6 {

}

> h2 {

}

> h3 {

}

> table {

}

> ul,
> ol {
  > li {
    & + li {

    }
  }
}

> blockquote {

}
_under-is-root-container.scssの中身はこちら

このような内容になっています。

この部分はWordPressのDOMの変更が頻繁に行われるため、常に情報のアップデートが必要になります。おかしなところがあればご連絡ください。

そして、style.scssにはこのように全てを読み込みます。

.p-entry-content {
  @import "under-is-root-container-blocks";
  @import "core-blocks";
}

editor-style.scssにはこのようにis-root-containerでラップする形で_under-is-root-container.scssを読み込みます。

.is-root-container {
  @import "block-styles/under-is-root-container-blocks";
}

@import "block-styles/core-blocks";

このようにすることで、フロント用スタイルではis-root-containerの影響を回避できます。

また、編集画面用スタイルでは、テーマ側で提供されているis-root-container直下のスタイルを打ち消しながら編集画面のスタイリングを提供することができます。

これを言ってはおしまいなのですが、こんなことをしなくても個別に開発者ツールを使って最適なクラス名を抽出してCSSを書いていくことでカスタマイズは可能です。

ですが、Snow Monkeyカスタマイズ初心者の方は、もしかしたらis-root-containerの影響で引っかかる方もみえるかもしれませんので、記事にしてみました。

参考になれば幸いです。

「あれ?この情報、古くない?」と思ったらご連絡ください。 snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者

snow_monkey_append_main