jsファイルの配置について

  • 解決済 9-taro

    (@9-taro)


    3年、 11ヶ月前

    お世話になります。初心者の者です。

    以下のページを参考に、swiperのスライダーを配置を試みています。
    その中で、jsファイルを配置する場所がわからなく、スライダーが動作しません。

    https://yumegori.com/background_fade20190212

    ヘッダーに以下のリンクをペーストします。
    <link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css”/>
    <script src=”//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js”></script>

    説明の中で、init.js（記述通り）を作り、テーマの中→「assets」→「js」フォルダに入れるのでしょうか？
    それともテーマ外の階層の「wp-admin」→「js」フォルダに入れるのでしょうか？
    どちらに入れても、パーミッション「644」で動作しないのですが、フォルダや階層が間違っていますでしょうか？
    ご教示いただければ、助かります。

    以下のコードをfunction.phpに記述しました。

    function twpp_enqueue_scripts() {
    wp_enqueue_script(
    ‘main-script’,
    get_template_directory_uri() . ‘/js/init.js’
    );
    }

    add_action( ‘wp_enqueue_scripts’, ‘twpp_enqueue_scripts’ );

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

    (@moyo55)

    3年、 11ヶ月前

    jsもcssも訪問者がアクセス可能な場所に設置して読み込みます。
    一般的なのは子テーマに設置する方法です。

    子テーマにjsという名前のフォルダを作りinit.jsを置く場合
    ヘッダに直接記述してjsを読み込むのであれば記述は…
    <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/init.js"></script>

    functions.phpに記述して読み込むのであれば…

    function twpp_enqueue_scripts() {
	wp_enqueue_script('main-script', get_stylesheet_directory_uri() . '/js/init.js');
}
add_action( 'wp_enqueue_scripts','twpp_enqueue_scripts' );

    となります。

    get_stylesheet_directory_uri()は子テーマのURIを取得する記述で
    get_template_directory_uri()は親テーマのURIを取得する記述です。
    もしホーム直下に置いた場合は esc_url( home_url( ” )) を使います。

    トピック投稿者 9-taro

    (@9-taro)

    3年、 11ヶ月前

    moyo55様

    非常にわかりやすいご説明をありがとうございます！
    子テーマでも、親テーマでもどちらでも構わないのですね。
    とても勉強になりました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「jsファイルの配置について」には新たに返信することはできません。