Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ!プラグインの雛形をダウンロードできるようにしました

子テーマの問題点

一般的に、テーマの設定では対応できないカスタマイズについては、子テーマを用意し、コードを書いてカスタマイズすることになります。ただ、この子テーマ、個人的にはいろいろ問題があるなと思っています。

例えば子テーマを使わず Snow Monkey そのまま使ってたとしたら、子テーマをつくって切り替えますよね。ただ、ウィジェットの設定とか、カスタマイザーの設定ってテーマに紐づいているので、テーマを切り替えるとリセットされちゃうんですよね。

あと、子テーマをつくるとテンプレートの上書きを気軽にやってしまう問題もあります。v4.4 から v5 にアップデートしてサイトが真っ白になった、などのトラブルがあった方はほぼほぼこのテンプレートの上書きが原因だったはずです。テンプレートの上書きは意図せず古いコードを残したままにしてしまうので、無くなった関数などがかかれているとサイト真っ白状態になっちゃうんですよね。

とはいえ、どうしてもテンプレートの上書きをしたい場合は普通のテーマだと子テーマをつくるしかないのですが、Snow Monkey はv5でテンプレート読み込み周りに全部フックを仕込んだので、v5 からはプラグイン領域から全てのカスタマイズが可能になりました。

そういうことで、Snow Monkey のカスタマイズコードは子テーマの functions.php ではなくて「プラグイン」に書くようにしたほうがベターなんじゃないかなと。「プラグイン?難しそう…」と思う方が大半なのではないかと思うのですが、作り方自体は子テーマとほぼかわらない(むしろ若干簡単はなず)ですし、プラグインなのでテーマのように切り替えじゃなくて無効化/有効化になるので、何かあったときにオフにするのも簡単です。

カスタマイズ用プラグインの雛形、My Snow Monkey のダウンロード

カスタマイズ用プラグインの雛形をマイアカウントページからダウンロードできるようにしました。まず、下記からログインしてください。

ログインできたら、ダウンロードページを開き、my-snow-monkey.zip をダウンロードしてください。

My Snow Monkey プラグインのアップロード

ダウンロードできたら、とりあえずサーバーにアップしてみましょう。管理画面からアップロードすることもできますが、FTP ツールを使うのがおすすめです。

FTP ツールを使う方法は、お使いのレンタルサーバーのサポートページなどに書かれていると思いますので探してみてください。

エックスサーバーさんの場合

アップロードできたら、プラグインページから、有効化できるか試してみてください。

カスタマイズしてみる

アップロードと有効化ができることが確認できたら、試しにコードを追加してカスタマイズしてみましょう。

お手元の my-snow-monkey.zip を解凍し、my-snow-monkey.php を開いてみてください。最初から何行かコードが書いてあると思いますが、それは消さずに、最後の行からコードを追加するようにしてください

試しに、下記のコードを追加してみましょう。

add_action(
	'snow_monkey_prepend_body',
	function() {
		?>
		<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
			<div class="c-page-effect__item">
				<div class="c-circle-spinner"></div>
			</div>
		</div>
		<?php
	}
);

my-snow-monkey.php にコードを追加できたら、このファイルを FTP ツールなどでサーバーにアップロードして反映してみてください。成功するとあなたのサイトにローディング画面が表示されるようになるはずです。

カスタマイズを無効化したいときはコードを消して再アップロードするか、プラグイン画面で My Snow Monkey を無効化すれば OK です。

My Snow Monkey に CSS ファイルを配置する

Snow Monkey を CSS でカスタマイズしたい場合、子テーマをつくって子テーマの style.css に CSS を追加するのではなく、カスタマイザーの追加 CSS に CSS を追加することを推奨しています。子テーマをつくる手間がないのでお手軽なのと、実際のページだけでなくエディターにも CSS が反映されるためです。

ただ、CSS の量が多いとどうしても煩雑になってきてしまいます。そういう場合は My Snow Monkey に style.css をつくってみてください。

my-snow-monkey/style.css となるようにファイルを作成した後に、my-snow-monkey.php に下記のコードを追加してみてください。この状態で style.css に CSS を追加すれば、実際のページにもエディターにも CSS が反映されます。

// 実際のページ用の CSS 読み込み
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'my-snow-monkey',
			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-snow-monkey/style.css' );
	}
);

サポートについて

今、サポートフォーラムでカスタマイズの質問を頂いたときに、PHP コードの追加が必要なカスタマイズについては子テーマの functions.php にコードを追加してみてくださいと案内しています。ただ、子テーマのつくりが個々人で違ったり、そもそも子テーマを使ってなくて切り変えるとカスタマイザーでの設定が飛んでウワーとか、環境によって異なる問題がでてくるので、今後は基本的にはこの My Snow Monkey プラグインを使用する前提でご案内をするようにしたいと考えています。

ということで、とりあえず一度試してみていただければと思います!不明な点はサポートフォーラムやオンラインコミュニティにお気軽にどうぞ。

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!