web-dev-qa-db-ja.com

Functions.phpファイルを使ってフッターにJavaScriptをエンキューするにはどうすればよいですか？

さて、私はfunctions.phpファイルを介してWordPressのヘッダにスタイルシートやJavaScriptを正しくエンキューする方法に精通しています。

最近私は困惑している状況に出くわしたが。私のWordPressサイトでこのスクリプトを設定したいです。 customize-Twitter-1.1 。

まず、私のフッターにTwitterのJavaScriptを埋め込む必要があります。これは、次のコードです。

<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
    if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
    js.src="//platform.Twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","Twitter-wjs");
</script>

それから、このJavaScriptをフッターに埋め込む必要があります。

<script src="customize-Twitter-1.1.min.js" type="text/javascript"></script>

大事なことを言い忘れましたが、私もこのコードを埋め込む必要があります...

<script>
 var options = {
    "url": "/my-styles.css"
 };
 CustomizeTwitterWidget(options);
</script>

これまでのところ、私がfunctions.phpファイルに追加したコードは、次のようになります。

wp_register_script( 'Twitter-customize', get_template_directory_uri() . '/js/customize-Twitter-1.1.min.js', array(), '1.0', true );

wp_enqueue_script( 'Twitter-customize' );

そのコードはJavaScriptファイルの1つを正しくエンキューしています。他のものを追加する方法が不明であり、それに加えてそれらをフッターにも追加しています。

どんな入力でも大歓迎です、ありがとう！

wp-enqueue-scriptfooterscripts
1
DigitalSky

まず、これらのインラインコードを使って静的jsファイルを作成します。

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
    if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
    js.src="//platform.Twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","Twitter-wjs");

 var options = {
    "url": "/my-styles.css"
 };
 CustomizeTwitterWidget(options);

それから、フッターに、既にエンキューしたTwitter-customizeスクリプトの依存としてエンキューします。

function my_footer_enqueue() {

    wp_register_script( 'Twitter-customize', get_template_directory_uri() . '/js/customize-Twitter-1.1.min.js', array(), '1.0', true );
    wp_enqueue_script( 'Twitter-customize' );
    wp_enqueue_script( 'Twitter-customize-custom', get_template_directory_uri() . '/js/Twitter-customize-custom.min.js', array('Twitter-customize'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_footer_enqueue' );

それで全部です。清潔で簡単な方法。

0
Abhik

以下のコードはフッターにスクリプトを追加するために使用することができますしかし、これはWordPressで推奨される方法ではないことをここで言及する必要があります。

add_action( 'wp_footer', 'custom_footer_script', 100 );
function custom_footer_script(){
  ?>
  <script>
  // your script
  </script>
  <?php
}

代替方法：

カスタムコードを追加してWPの方法でキューに入れる別のスクリプトファイルを作成してみたことがありますか？

2
Nilambar
add_action( 'wp_enqueue_scripts', 'load_scripts ');

function load_scripts() {

    if ( !is_admin() ) {

        wp_enqueue_script( 'jquery' );

        wp_register_script( 'Twitter-customize', get_bloginfo( 'template_directory' ) .'/js/customize-Twitter-1.1.min.js', array( 'jquery' ), '1.0', true );
        wp_enqueue_script( 'Twitter-customize' );

    }
}
0
Gazi