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(
		 'my-snow-monkey',
		 MY_SNOW_MONKEY_URL . '/style.css',
		 [ Framework\Helper::get_main_style_handle() ],
		 filemtime( MY_SNOW_MONKEY_PATH . '/style.css' )
		);
	}
);

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

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

body {
  background-color: red;
}

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

外注先をお探しの方へ

当サイトを制作・管理しているオレインデザインを、WordPressを利用したウェブサイト制作の開発外部リソースに利用しませんか?
お気軽にお問い合わせください。

運営へのご連絡はこちらから snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

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

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

snow_monkey_append_main