- このトピックには6件の返信、3人の参加者があり、最後に
により2年、 2ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】最新
【お使いの Snow Monkey Blocks のバージョン】バージョン 14.0.1
【お使いの Snow Monkey Editor のバージョン】バージョン 7.0.0
【お使いのブラウザ】Chrome
【当該サイトのURL】https://work01.mj-test.com/### 実現したいこと
My Snow monkeyでCSSを読み込みたい
### 発生している問題
デモサイトを作るため手順に沿ってMy Snow Monkeyにコードを記述しながら制作しているのですが、CSSが読み込めません。
### 試したこと
ディレクトリ の位置を変えてみたり、名前を変えてみたり、My Snow MonkeyでCSSを読み込むためのコードをいくつか試してみたりしました。
初歩的な質問で申し訳ないのですが、解決方法にたどり着けなかったのでご教授頂けますと幸いです。
よろしくお願い致します。style.scssとstyle.cssのファイルは、
plugins > my-snow-monkey > styles
というフォルダの中にあります。plugins > my-snow-monkey > styles > style.css
plugins > my-snow-monkey > styles > style.css.map
plugins > my-snow-monkey > styles > style.scss
my-snow-monkey.phpは、
plugins > my-snow-monkey > my-snow-monkey.php
にあります。
my-snow-monkey.phpに記述しているコードはこちらです。
/**
* 外部JS・CSSの読み込み
*/
add_action(‘wp_enqueue_scripts’, ‘msm_enqueue_style_script’);
function msm_enqueue_style_script()
{/* ここにswiper.css */
/* swiper.css読み込み */
wp_enqueue_style(
‘swiper_css’,
‘https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css’
);/* css読み込み */
wp_enqueue_style(
‘msm_style’,
MY_SNOW_MONKEY_URL . ‘/styles/style.css’,
[],
filemtime(MY_SNOW_MONKEY_PATH . ‘/styles/style.css’)
);/* ここにswiper.js */
/* swiper.js読み込み */
wp_enqueue_script(
‘swiper_js’,
‘https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js’
);/* js読み込み */
wp_enqueue_script(
‘msm_scripts’,
MY_SNOW_MONKEY_URL . ‘/scripts/main.js’,
[‘jquery’],
filemtime(MY_SNOW_MONKEY_PATH . ‘/scripts/main.js’),
true
);
}/* エディター用のCSS読み込み */
add_action(
‘after_setup_theme’,
function () {
add_editor_style(‘/../../plugins/my-snow-monkey/styles/style.css’);
}いいねをした人: 居ませんブラウザのコンソールにエラーが出ていませんか？そちらの情報も共有ください。
また、上の「
my-snow-monkey.phpに記述しているソースコード」が全てであれば、MY_SNOW_MONKEY_URLなどの定数が定められていない可能性があります。そちらもご確認ください。一般的にここまで書かれていてファイルが読み込まれない場合、コンソールに404が出ているかと思います。
いいねをした人:お返事をいただきありがとうございます。
ブラウザのコンソールを見てみたところ、
JQMIGRATE: Migrate is installed, version 3.3.2 jquery-migrate.min.js?ver=3.3.2
と表示されておりました。
また、現在my-snow-monkey.phpに記述している全てのコードはこちらです↓
MY_SNOW_MONKEY_URL の定数とは、この中の
define(‘MY_SNOW_MONKEY_URL’, untrailingslashit(plugin_dir_url(__FILE__)));
の部分でしょうか？<?php
/**
* Plugin name: My Snow Monkey
* Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。
* Version: 0.2.1
*
* @package my-snow-monkey
* @author inc2734
* @license GPL-2.0+
*//**
* Snow Monkey 以外のテーマを利用している場合は有効化してもカスタマイズが反映されないようにする
*/
$theme = wp_get_theme(get_template());
if (‘snow-monkey’ !== $theme->template && ‘snow-monkey/resources’ !== $theme->template) {
return;
}/**
* Directory url of this plugin
*
* @var string
*/
define(‘MY_SNOW_MONKEY_URL’, untrailingslashit(plugin_dir_url(__FILE__)));/**
* Directory path of this plugin
*
* @var string
*/
define(‘MY_SNOW_MONKEY_PATH’, untrailingslashit(plugin_dir_path(__FILE__)));/**
* functions.phpに貼り付けるコード
* ここから下のコードをmy-snow-monkeyのfunctions.phpにコピペして下さい。
*//**
* 外部JS・CSSの読み込み
*/
add_action(‘wp_enqueue_scripts’, ‘msm_enqueue_style_script’);
function msm_enqueue_style_script()
{/* ここにswiper.css */
/* swiper.css読み込み */
wp_enqueue_style(
‘swiper_css’,
‘https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css’
);/* css読み込み */
wp_enqueue_style(
‘msm_style’,
MY_SNOW_MONKEY_URL . ‘/styles/style.css’,
[],
filemtime(MY_SNOW_MONKEY_PATH . ‘/styles/style.css’)
);/* ここにswiper.js */
/* swiper.js読み込み */
wp_enqueue_script(
‘swiper_js’,
‘https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js’
);/* js読み込み */
wp_enqueue_script(
‘msm_scripts’,
MY_SNOW_MONKEY_URL . ‘/scripts/main.js’,
[‘jquery’],
filemtime(MY_SNOW_MONKEY_PATH . ‘/scripts/main.js’),
true
);
}/* エディター用のCSS読み込み */
add_action(
‘after_setup_theme’,
function () {
add_editor_style(‘/../../plugins/my-snow-monkey/styles/style.css’);
}
);/* メインコンテンツの上部にHTMLの挿入 */
add_action(
‘snow_monkey_prepend_main’,
function () {
/* if文でフロントページのみに適応 */
if (is_front_page()) {
?><div class=”hero”>
<div class=”swiper-container”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”>
<div class=”hero__title”>
<h2><span>住宅のプロが提案する新しい価値と新しい住宅</span><span>あなただけの住宅を私たちは創造します</span></h2>
</div>
<div class=”hero__btn”><span>会社案内</span></div>
</div>
<div class=”swiper-slide”>
<div class=”hero__title”>
<h2><span>住宅のプロが提案する新しい価値と新しい住宅</span><span>あなただけの住宅を私たちは創造します</span></h2>
</div>
<div class=”hero__btn”><span>実績紹介</span></div>
</div>
<div class=”swiper-slide”>
<div class=”hero__title”>
<h2><span>住宅のプロが提案する新しい価値と新しい住宅</span><span>あなただけの住宅を私たちは創造します</span></h2>
</div>
<div class=”hero__btn”><span>事業案内</span></div>
</div>
</div>
</div>
</div><?php
}
}いいねをした人: 居ませんコンソールにCSSファイルの404が出ていないということは、PHP的なエラーが出ている（
WP_DEBUGをtrueにして確認）か、CSSの記述が間違っていてスタイルがそもそも当たっていないかのどちらかのような気がします。まずは、それらの可能性を探ってみてください。
また、おそらく Snow Monkey でデモサイトを作ってみるという何かしらのチュートリアルをご覧になりながら進められているようですが、そちらに掲載されているコードがそもそも間違っているという可能性もあるので、チュートリアル制作者さんにも質問してみても良いかと思います。
いいねをした人:WP_DEBUG を true にしてPHPのエラーを確認しましたが特に表示されなかったので、恐らくCSSの記述が間違っている可能性が高いのかなと思い始めました・・・。
チュートリアルを書いてくださった方のサイトを見ながら作っておりましたので、そちらの制作者さんにも質問してみようと思います。
迅速なご対応ありがとうございました。いいねをした人: 居ません
- トピック「My Snow monkeyでCSSが読み込めない」には新しい返信をつけることはできません。