My Snow monkeyでCSSが読み込めない

♥ 0

いいねをした人: 居ません

このトピックには6件の返信、3人の参加者があり、最後にmrcにより2年、 9ヶ月前に更新されました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)

投稿者

投稿
2022年2月6日 6:57 PM #98172

mrc
参加者

♥ 4

【お使いの 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’);
}

♥ 0

いいねをした人: 居ません

2022年2月6日 9:50 PM #98179

Olein_jp
参加者

♥ 565

ブラウザのコンソールにエラーが出ていませんか？そちらの情報も共有ください。

また、上の「my-snow-monkey.php に記述しているソースコード」が全てであれば、 MY_SNOW_MONKEY_URL などの定数が定められていない可能性があります。そちらもご確認ください。

一般的にここまで書かれていてファイルが読み込まれない場合、コンソールに404が出ているかと思います。

♥ 2

いいねをした人:

2022年2月6日 10:36 PM #98186

mrc
参加者

♥ 4

お返事をいただきありがとうございます。

ブラウザのコンソールを見てみたところ、

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
}
}

♥ 0

いいねをした人: 居ません

2022年2月6日 11:07 PM #98195

Olein_jp
参加者

♥ 565

コンソールにCSSファイルの404が出ていないということは、PHP的なエラーが出ている（ WP_DEBUG を true にして確認）か、CSSの記述が間違っていてスタイルがそもそも当たっていないかのどちらかのような気がします。

まずは、それらの可能性を探ってみてください。

また、おそらく Snow Monkey でデモサイトを作ってみるという何かしらのチュートリアルをご覧になりながら進められているようですが、そちらに掲載されているコードがそもそも間違っているという可能性もあるので、チュートリアル制作者さんにも質問してみても良いかと思います。

♥ 2

いいねをした人:

2022年2月7日 12:59 AM #98198

mrc
参加者

♥ 4

WP_DEBUG を true にしてPHPのエラーを確認しましたが特に表示されなかったので、恐らくCSSの記述が間違っている可能性が高いのかなと思い始めました・・・。
チュートリアルを書いてくださった方のサイトを見ながら作っておりましたので、そちらの制作者さんにも質問してみようと思います。
迅速なご対応ありがとうございました。

♥ 0

いいねをした人: 居ません

2022年2月7日 6:21 AM #98203

キタジマタカシ
参加者

♥ 2421

下記のトピックと同じ問題だと思うので下記も参照してください。確認すべき点などのやり取りがあります。

カスタマイズに関する質問

タグ: カスタマイズこのトピックには16件の返信、3人の参加者があり、最後にキタジマタカシにより…

snow-monkey.2inc.org

♥ 1

いいねをした人:

2022年2月8日 12:03 AM #98348

mrc
参加者

♥ 4

ありがとうございます。こちらのトピックも参考にさせて頂きます！
キタジマさん、オレインさん、ご親切にありがとうございました。

♥ 1

いいねをした人:
投稿者

投稿