ブログのテーマをSnow MonkeyからUnitoneにリニューアルしました

2022/08/18

Web

ブログのテーマをSnow Monkeyからunitoneにリニューアルしました。

unitoneとは

unitoneは、WordPressテーマ「Snow Monkey」を開発している株式会社モンキーレンチが新たに開発したフルサイトエディター対応のテーマ。

WordPress テーマ unitone – 美しいタイポグラフィと、フルサイト編集・Every Layout による自由なレイアウト

unitone.2inc.org

有料のサブスクリプション登録をすると色々とできることが増えて使い勝手も良くなりそうなんだけど、自分のほぼカスタマイズ無しブログでは無料版でも余裕でカバーできそうなので、お試しでSnow Monkeyから乗り換えてみました。

あとやっぱり開発者であるキタジマさんの設計思想といいますか、考えは非常に共感できるものなので、とても使ってみたくなりました。

WordPress フルサイト編集対応のブロックテーマ unitone について – WordPress テーマ unitone

unitone.2inc.org

フルサイトエディター（FSE）の使い方

従来のWordPressサイトの作り方だと、1からフルでサイトテーマを書き上げていくか、元になるテーマを親にして子テーマでカスタマイズしていくかが主になると思うんだけど、それに慣れているとFSEはちょっと面食らいます。

まず以下のような「テンプレートパーツ」で何をページに組み込んでいくかを操作します。

例えば投稿ページであれば「個別投稿のコンテンツ」を開いて、以下のようにアイキャッチヘッダーとか記事部分の上下に何を置くかをブロックで組んでいく。パンくずとかタグとか。ノーコードでできちゃう。

あとはCSSをゴリゴリ書いていく感じかな。

ブロックを組むコツとしては、必ず上下左右のpaddingを設定できる「ガター」、「スタック」、「コンテナー」等のレイアウトブロックの中に組み込む、というところかな。そのまんまだとpaddingが無いので、余白ヘボヘボになります。余白大事。

unitoneのカスタマイズ

このブログでは大したCSSは書いてないですが、プラグインでカスタマイズ用CSSを読み込みするようにします。これはSnow Monkeyの真似です笑

まずSnow Monkeyで作ったプラグイン「My Snow Monkey」をダウンロードして、フォルダ名を適当にリネーム。「My Unitone」とでもしましょうか。

次にMy Snow Monkeyの中にある「my-snow-monkey.php」を「my-uni-tone.php」とリネームします。
my-uni-tone.phpの中のコードで、「snow-monkey」とか「MY_SNOW_MONKEY」と書かれているところを、unitoneやmy-uni-toneに書き換えます。あとは好きなCSSやJSを読み込む関数を書けばいい。
以下のような感じになっています。

/**
 * Unitone 以外のテーマを利用している場合は有効化してもカスタマイズが反映されないようにする
 */
$theme = wp_get_theme( get_template() );
if ( 'unitone' !== $theme->template && 'unitone/resources' !== $theme->template ) {
	return;
}

/**
 * Directory url of this plugin
 *
 * @var string
 */
define( 'MY_UNI_TONE_URL', untrailingslashit( plugin_dir_url( __FILE__ ) ) );

/**
 * Directory path of this plugin
 *
 * @var string
 */
define( 'MY_UNI_TONE_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) );

// 実際のページ用の CSS 読み込み
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'my-uni-tone',
			untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/style.css',
			/*[ Framework\Helper::get_main_style_handle() ],*/
			filemtime( plugin_dir_path( __FILE__ ) )
		);
	}
);

// エディター用の CSS 読み込み
add_action(
	'after_setup_theme',
	function() {
		add_editor_style( '/../../plugins/my-uni-tone/style.css' );
	}
);

[ Framework\Helper::get_main_style_handle() ], と書かれている行は、そのままだとfatal errorでサイト全体が落ちてしまうので、まるっとコメントアウトしています。
コメントアウトすることで何か不具合があるのかは不明ですが、現状では問題無く使えています。

以上でカスタマイズ用のCSSを読み込んでくれるようになります。

このブログのCSSは、アイキャッチ画像に薄く半透明カバーをかけて記事タイトルのテキストを読みやすくしています。
これもSnow Monkeyからまんま流用で、unitoneのclassに書き換えているだけ。

.eyecatch-cover:before {
	content: '';
	display: block;
	background-color: rgba(0, 0, 0, .4);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index:1;
}

.content-title {
	z-index:2;
}

【2023年6月21日追記】「個別投稿のコンテンツ（ページヘッダー（アイキャッチ画像））」のテンプレートに入ると、「オーバーレイの不透明度」という項目がありアイキャッチ画像に半透明のマスクがかけられるようになっています。上記スタイルでもFSEからでもお好みでどうぞ。

あとは関連記事プラグイン「Yet Another Related Posts Plugin」とカエレバのCSSもそのまま流用して、できあがり。