- このトピックには8件の返信、3人の参加者があり、最後に
により3年、 9ヶ月前に更新されました。
-
投稿
-
トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。
【お使いの Snow Monkey のバージョン】最新
【お使いのブラウザ】Chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）===
jQeuryを記述したいです。
このフォーラムで色々調べてみましたが、あまりわからず、
my-sonw-monkey/my-sonw-monkey.phpに直接 jQuery 書いている状態です。以下、現状
my-sonw-monkey.phpadd_action( 'wp_footer', function() { ?> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!-- <script type="text/javascript" src="/wp-content/plugins/my-snow-monkey/assets/app.js"></script> --> <script> //jQueryで実行する内容 $(document).ready(function () { ここに記述している。 }); </script> <?php } );ただ、これだとパフォーマンスがかなり悪い気がして、管理もしにくいので、もっといい方法があれば教えていただきたいと思い、質問しました。
理想は以下のように、cssとjsをaseetフォルダに格納し、
my-snow-monkey.phpで読み込みたいと考えております。my-snow-monkey 丨ー my-sonw-monkey.php 丨ー aseet 丨ー style.css 丨ー app.jsよろしくお願いいたします。
いいねをした人: 居ませんmy-sonw-monkey.phpに以下のコードを追記してみてください。
/** * 定数を宣言 */ define( 'MSM_PLUGIN_URL', plugins_url( '', __FILE__ ) ); // このプラグインのURL define( 'MSM_PLUGIN_PATH', plugin_dir_path( __FILE__ ) ); // このプラグインのパス /** * 外部JS・CSSの読み込み */ add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' ); function msm_enqueue_style_script() { wp_enqueue_style( 'msm_style', MSM_PLUGIN_URL . '/aseet/style.css' ); wp_enqueue_script( 'msm_scripts', MSM_PLUGIN_URL . '/aseet/app.js' ); }いいねをした人: 居ません@Rocket Martue さんありがとうございます！
新しめの My Snow Monkey だと定数を用意してあるので、それを使うと良いと思います。
–
MY_SNOW_MONKEY_URL… My Snow Monkey の URL
–MY_SNOW_MONKEY_PATH… My Snow Monkey のフルパス@shuya さん
jQuery は自分で読み込まなくても WordPress がもともと持っているので、それを使うのが安全です。また、CSS や JavaScript の読み込みは Rocket Martue さんが書いてくださった
wp_enqueue_style()、wp_enqueue_script()を使うのが推奨です。これらの関数は依存関係を指定できるので、ここでjQueryを指定すると WordPress が勝手に読み込んでくれます。ということで、ちょっと Rocket Martue さんのコードに追記してみました。
add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' ); function msm_enqueue_style_script() { wp_enqueue_style( 'msm_style', MY_SNOW_MONKEY_URL . '/aseet/style.css', [], filemtime( MY_SNOW_MONKEY_PATH . '/aseet/style.css' ) ); wp_enqueue_script( 'msm_scripts', MY_SNOW_MONKEY_URL . '/aseet/app.js', [ 'jquery' ], filemtime( MY_SNOW_MONKEY_PATH . '/aseet/app.js' ), true ); }そして、
app.jsに記述する jQuery の実行コードは、$からではなくjQueryから記述する必要があるのでそこは注意してください。(function($) { // この中では $ が使えます。 })(jQuery);あるいは
jQuery(function($){ // この中では $ が使えます。 });いいねをした人: 居ません– MY_SNOW_MONKEY_URL … My Snow Monkey の URL
– MY_SNOW_MONKEY_PATH … My Snow Monkey のフルパス定数が用意されてるんですね。さすがです！
filemtime( MY_SNOW_MONKEY_PATH . '/aseet/style.css' )
filemtime( MY_SNOW_MONKEY_PATH . '/aseet/app.js' ),
は、ファイルの更新日時をファイルバージョンとして出力するあれですね。
ブラウザのキャッシュを気にしなくてよくなるので、これは記述しておくのがよさそう。いいねをした人: 居ません北島様、RocketMature様、ご対応いただきありがとうございます。
下記のようなエラーが出てしまい、実装できませんでした。
定数が定義されていませんという旨だと思うのですが、原因がわかりません。
snow-monkeyは最新で、my-snow-monkeyは7/10にダウンロードしたものです。ーーーーーーーエラー内容ーーーーーーーー
Warning: Use of undefined constant MY_SNOW_MONKEY_URL - assumed 'MY_SNOW_MONKEY_URL' (this will throw an Error in a future version of PHP) in /home/ndupdate/comingin-rainbow.com/public_html/wp-content/plugins/my-snow-monkey/my-snow-monkey.php on line 25 Warning: Use of undefined constant MY_SNOW_MONKEY_PATH - assumed 'MY_SNOW_MONKEY_PATH' (this will throw an Error in a future version of PHP) in /home/ndupdate/comingin-rainbow.com/public_html/wp-content/plugins/my-snow-monkey/my-snow-monkey.php on line 27 Warning: filemtime(): stat failed for MY_SNOW_MONKEY_PATH/aseet/style.css in /home/ndupdate/comingin-rainbow.com/public_html/wp-content/plugins/my-snow-monkey/my-snow-monkey.php on line 27ーーーーーーー/エラー内容ーーーーーーーー
ーーーーーーーmy-snow-monkey.phpーーーーーーーー
<?php /** * Plugin name: My Snow Monkey * Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。 * Version: 0.1.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; } add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' ); function msm_enqueue_style_script() { wp_enqueue_style( 'msm_style', MY_SNOW_MONKEY_URL . '/aseet/style.css', [], filemtime( MY_SNOW_MONKEY_PATH . '/aseet/style.css' ) ); wp_enqueue_script( 'msm_scripts', MY_SNOW_MONKEY_URL . '/aseet/app.js', [ 'jquery' ], filemtime( MY_SNOW_MONKEY_PATH . '/aseet/app.js' ), true ); }ーーーーーーー/my-snow-monkey.phpーーーーーーーー
何度も申し訳ございませんが、ご回答いただけますと幸いです。
お願いします。いいねをした人: 居ません@shuya さん @inc2734 さん
定数が定義されている最新版の My Snow Monkey は、GitHubにあるVersion: 0.2.0 で、マイアカウントからダウンロードできるのは、Version: 0.1.1 のままになっているようです。@shuya さん
Version: 0.1.1 には、定数が定義されていないためエラーが出ます。
add_action( ‘wp_enqueue_scripts’, ‘msm_enqueue_style_script’ );の前に以下のコードを追記してください。/** * 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__ ) ) );いいねをした人: 居ません
- トピック「jQueryを追記したいです。」には新しい返信をつけることはできません。