single.phpでscriptタグを読み込むためのプラグイン作成について

  • 解決済 echizenya

    (@echizenya)


    6年、 4ヶ月前

    いつもお世話になっております。
    下記の質問についてご存知の方がいらっしゃいましたら、ご教示を願います。

    —

    【質問の主旨】

    テーマファイルであるsingle.phpの中で任意のscriptコードを読み込むためのプラグインを作成したいと考えています。
    その場合、プラグインのディレクトリにおいて

    function hoge_scripts() {
	wp_enqueue_script( 'hoge_scripts', plugins_url('/js/fuga.js'));
}
add_action( 'wp_enqueue_scripts', 'hoge_scripts' );

    として、プラグインを有効化すれば、single.phpの中で任意のscriptコードは読み込まれるのでしょうか？

    【質問の補足】

    1.
    具体的には下記のGitHubコードにおいてプラグインを作成しています。
    このプラグインの機能は、有効化後に記事投稿画面で[paypaldiv]というショートコードをはると、
    PayPalのExpressチェックアウトボタンが表示されることを想定しています。
    ですが現状のところショートコードを貼ってもPayPalボタンは表示されません。

    https://github.com/echizenyayota/paypal_plugin/tree/plugin_20180502/wp-content/plugins/paypal_expresscheckout

    2.
    プラグインや関数を使わずにPayPal ExpressCheckoutボタンを表示させるために
    スクリプトコードなどを直接書き込んだGitHubのコードはこちらです。

    https://github.com/echizenyayota/paypal_plugin/tree/write_direct_20180425/wp-content/themes/twentyseventeen

    こちらのコードでは投稿した記事には全てPayPalのボタンが表示されます。
    自分が作成したいプラグインは、このような状態を目指しています。

    3.
    この質問は、プラグインの中で独自に定義した関数をadd_shortcodeで読み込む方法を教えてくださいという質問の関連質問です。

    問題解決に向けてスレッドを作成していると、途中で

    This post has been held for moderation by our automated system and will be manually reviewed by a moderator.

    という文言が表示され、書き込みが止まってしまいました。なので改めて類似の質問をいたしました。

    —

    以上、よろしくお願い申し上げます。

    ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    6年、 4ヶ月前

    こんにちは

    expresscheckout.js は checkout.js に依存しているみたいなので、checkout.js より後に読み込まれるようにしないといけないと思います。
    wp_head フックではなく、wp_enqueue_scripts フックでエンキューするのがいいかと思います。

    function paypal_scripts() {
	wp_enqueue_script( 'paypal-checkout', 'https://www.paypalobjects.com/api/checkout.js' );
	wp_enqueue_script( 'paypal-expresscheckout', plugin_dir_url( __FILE__ ) . '/js/expresscheckout.js', array( 'paypal-checkout' ) );
}
add_action( 'wp_enqueue_scripts', 'paypal_scripts' );
    トピック投稿者 echizenya

    (@echizenya)

    6年、 4ヶ月前

    @ishitaka さん
    いつもコメントありがとうございます。
    いただきましたコメントについて下記の2点をご回答申し上げます。

    1. JavaScriptファイルとライブラリの依存関係について

    expresscheckout.js は checkout.js に依存しているみたいなので、checkout.js より後に読み込まれるようにしないといけないと思います。

    教えていただいたコードをコピペして、投稿記事に[paypaldiv]のショートコードを貼ると、PayPalボタンが表示されるようになりました。

    Codexを確認すると「JQueryに依存するテーマのスクリプトをリンクする」という見出しとその概要が英文で説明されています。今回の質問はこの例文に準拠するように思います。

    https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script#Link_a_Theme_Script_Which_Depends_on_jQuery

    ただ例文を見ただけでは、paypal_scripts関数内で
    “wp_enqueue_script( ‘paypal-checkout’, ‘https://www.paypalobjects.com/api/checkout.js’ );”
    を最初に記述する発想は思い浮かびませんでした。ishitakaさんのアドバイスが非常に助かりました。

    2. PayPalボタンの表示ファイルについて

    教えていただいたコードに基づいて修正を加えたプラグインは下記のGitHubで公開しています。
    ただこのコードでは、サイトのトップページでも個別記事のページでもPayPalボタンが表示されます。

    https://github.com/echizenyayota/paypal_plugin/blob/plugin_20180507/wp-content/plugins/paypal_expresscheckout

    ただよく考えると、サイトのトップページでPayPalボタンが表示されることについては、PayPalボタンが表示されないことに比べて、より軽微なことのように思います。

    どうしてもトップページでPayPalボタンが表示されることに不都合を感じた場合、別途対策を考えるようにします。
    従って今回のトピックは解決済みとします。

    今後ともどうぞよろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「single.phpでscriptタグを読み込むためのプラグイン作成について」には新たに返信することはできません。