snow_monkey_prepend_main

My Snow MonkeyからCSSファイルを追加してスタイリングする方法

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

Snow Monkeyのカスタマイズの基本は、CSSによるスタイリングではないでしょうか?

こちらでは、My Snow Monkeyに用意をしたstyle.cssをSnow Monkeyに反映させる方法をご紹介します。

ソースコード

とはいっても、このソースコードをMy Snow Monkey内のmy-snow-monkey.phpに追加するだけです。

<?php
/**
 * import CSS file
 */
add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'hsm-styles',
			untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/style.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( plugin_dir_path( __FILE__ ) )
		);
	}
);

ソースコード内のhsm-stylesという部分ですが、これはハンドルネームになるので、お好きな名前に変更してもらう方が良いでしょう。(hsm = happy snow monkey です)

これでstyle.cssが反映されていると思いますので、

body {
  background-color: red;
}

こんな感じの見た目でわかりやすいコードを書いてみて、実際に読み込まれているか、反映されているか試してみると良いでしょう。

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

HAPPY SNOW MONKEYの管理人情報

久野 晃司

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

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

snow_monkey_append_main