jQueryを追記したいです。

0
いいねをした人: 居ません
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #54304
    shuya
    閲覧者
    1

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】最新
    【お使いのブラウザ】Chrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    jQeuryを記述したいです。

    このフォーラムで色々調べてみましたが、あまりわからず、

    my-sonw-monkey/my-sonw-monkey.php に直接 jQuery 書いている状態です。

    以下、現状 my-sonw-monkey.php

    add_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

    よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #54319
    まーちゅう
    参加者
    367

    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' );
    }
    2
    いいねをした人: 居ません
    #54323
    アバター画像キタジマ タカシ
    参加者
    2371

    @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($){
     // この中では $ が使えます。
    });
    2
    いいねをした人: 居ません
    #54336
    まーちゅう
    参加者
    367

    – 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' ),
    は、ファイルの更新日時をファイルバージョンとして出力するあれですね。
    ブラウザのキャッシュを気にしなくてよくなるので、これは記述しておくのがよさそう。

    1
    いいねをした人: 居ません
    #54414
    shuya
    閲覧者
    1

    北島様、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ーーーーーーーー

    何度も申し訳ございませんが、ご回答いただけますと幸いです。
    お願いします。

    0
    いいねをした人: 居ません
    #54420
    まーちゅう
    参加者
    367

    @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__ ) ) );
    1
    いいねをした人: 居ません
    #54428
    アバター画像キタジマ タカシ
    参加者
    2371

    すみませーん! 今 v0.1.1 から v0.2.0 に差し替えました!

    1
    いいねをした人: 居ません
    #54530
    shuya
    閲覧者
    1

    ありがとうございます! 実装できました。

    0
    いいねをした人: 居ません
    #54534
    アバター画像キタジマ タカシ
    参加者
    2371

    良かったです!解決済みということで閉じます。

    0
    いいねをした人: 居ません
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • トピック「jQueryを追記したいです。」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。