- このトピックには11件の返信、2人の参加者があり、最後に
により3年、 6ヶ月前に更新されました。
12件の投稿を表示中 - 1 - 12件目 (全12件中)
-
投稿
-
【お使いの Snow Monkey のバージョン】
【Snow Monkeyバージョン】 15.9.5 の子テーマを使用
【お使いの Snow Monkey Blocks のバージョン】 バージョン 12.5.1
【お使いの Snow Monkey Editor のバージョン】 バージョン 6.1.0
【お使いのブラウザ】 Google Chrome
【当該サイトのURL】 ローカル環境### 実現したいこと
下層ページにもjsファイルの内容を反映したい。
### 発生している問題
MySnowMonkeyで作っている
main.jsファイルがトップページでは、反映されているが、下層ページには反映されない。SnowMonkeyテーマの子テーマを使用しています。
デベロッパーツールではmain.jsのパスが表示されてます。
MySnowMonkey内のjsファイルのパスが間違っているんでしょうか？
それとも、他に方法があるんでしょうか？MySnowMonkeyプラグインの内容
// jsファイル読み込み function my_add_files() { // 読み込み中止 - WordPress jquery.js wp_deregister_script('jquery'); // jQuery CDN 読み込み wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', "", "1.11.1", false ); // bxSlider 読み込み wp_enqueue_script('bxslider-script', plugin_dir_url( __FILE__ ) . './js/jquery.bxslider.min.js', array('jquery'), '1.0.0', true ); // main.js 読み込み wp_enqueue_script('smart-script', plugin_dir_url( __FILE__ ) . 'js/main.js', array('bxslider-script'), '5.8.1', true ); } add_action('wp_enqueue_scripts', 'my_add_files');### 試したこと
テーマを子テーマにしたことで、パスが変わったのかと思い、テーマをSnowMonkeyに戻しても反映されなかったです。
子テーマにmain.jsを移して、子テーマのfunctions.phpで読み込みコードを記入しても読み込まないです。wp_enqueue_script( 'smart-script', get_stylesheet_directory_uri() . 'js/main.js', array(), '', true );すいませんが、よろしくお願いします！
Who liked: No user「反映されない」とは具体的にどのような事象なのでしょうか？ トピックのタイトルでは「ファイルがトップページは読み込んでいるが、下層ページが読み込まない」とありますが、JS ファイル自体が読み込まれないということですか？ それともファイルは読み込まれているけど実行された様子がないということでしょうか？
Who liked:ご返信いただきましてありがとうございます！
言葉足らずで申し訳ございませんでした。
Jsファイルは読み込まれてるんですが、実行された気配が無いです。
トップページは読み込まれて、実行されてます。
例えば、jsで、footerタグにクラスを付加してるのですが、下層ページには反映されてないです。
swiper.jsのライブラリが、トップページでは使えるが、下層ページでは使えないなどです。
すいませんが、よろしくお願いします。
Who liked: No user正しく読み込まれているのならば書いているコードの問題になるので、コードを見ないとなんともわからないです。ページを見せてもらうか、書いている js を共有してもらうことはできますか？
Who liked: No userありがとうございます！
了解しました！MySnowMonkeyプラグイン内のコードです。
<?php /** * Plugin name: My Snow Monkey * Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。 * Version: 0.2.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; } /** * 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__ ) ) ); // head内書き込み add_action( 'wp_head', function() { ?> <!-- abobefont読み込み --> <script> (function(d) { var config = { kitId: 'tir0lxt', scriptTimeout: 3000, async: true }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document); </script> <!-- Font Awesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> <!-- Swiper.js --> <link rel="stylesheet" href="//unpkg.com/swiper@7/swiper-bundle.min.css" /> <script src="//unpkg.com/swiper@7/swiper-bundle.min.js" defor></script> <script> // アバウトスライダー $(document).ready(function(){ $('.slider').bxSlider({ pagerType: 'short', pagerShortSeparator: '／', nextText: '→', prevText: '←', nextSelector: '.slider-next', prevSelector: '.slider-prev' }); }); $(document).ready(function(){ $('.slider002').bxSlider({ pagerType: 'short', pagerShortSeparator: '／', nextText: '→', prevText: '←', nextSelector: '.slider-next002', prevSelector: '.slider-prev002' }); }); $(document).ready(function(){ $('.slider003').bxSlider({ pagerType: 'short', pagerShortSeparator: '／', nextText: '→', prevText: '←', nextSelector: '.slider-next003', prevSelector: '.slider-prev003' }); }); // 事業紹介スライドstopless $(function () { $(".zigyou-slider").slick({ autoplay: true, autoplaySpeed: 0, speed: 8000, cssEase: "linear", slidesToShow: 3, swipe: false, arrows: false, pauseOnFocus: false, pauseOnHover: false, }); }); $(function () { $(".zigyou-slider001") .on("init", function (event, slick) { $(this).parent().append( '<div class="slick-counter"><span class="count-current"></span> / <span class="count-total"></span></div>' ); $(".count-current").text(slick.currentSlide + 1); $(".count-total").text(slick.slideCount); }) .slick({ slidesToShow: 1, slidesToScroll: 1, autoplay: false, autoplaySpeed: 7000, arrows: true, prevArrow: '<p>←</p>', nextArrow: '<p>→</p>', dots: true, dotsClass: 'slider-dots', swipe: true, draggable: false, responsive: true, minSlides: 1, maxSlides: 1, // centerPadding: '22%', responsive: [ { breakpoint: 768, settings: { centerPadding: '8%', } } ] }) .on("beforeChange", function (event, slick, currentSlide, nextSlide) { $(".count-current").text(nextSlide + 1); }); }); </script> <?php } ); // パンくずリスト表示 add_shortcode( 'my_breadcrumbs', function() { ob_start(); \Framework\Helper::get_template_part( 'template-parts/common/breadcrumbs' ); return ob_get_clean(); } ); // topview.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'topview-css', MY_SNOW_MONKEY_URL . '/css/topview.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/topview.css' ) ); } ); // toppage-main1.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'toppage-main1-css', MY_SNOW_MONKEY_URL . '/css/toppage-main1.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/toppage-main1.css' ) ); } ); // slider.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'slider-css', MY_SNOW_MONKEY_URL . '/css/slider.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/slider.css' ) ); } ); // toppage-main2.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'toppage-main2-css', MY_SNOW_MONKEY_URL . '/css/toppage-main2.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/toppage-main2.css' ) ); } ); // footer.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'footer-css', MY_SNOW_MONKEY_URL . '/css/footer.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/footer.css' ) ); } ); // about.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'about-css', MY_SNOW_MONKEY_URL . '/css/about.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/about.css' ) ); } ); // zigyou.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'zigyou-css', MY_SNOW_MONKEY_URL . '/css/zigyou.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/zigyou.css' ) ); } ); // jquery.bxslider.min.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'jquery-bxslider-min-css', MY_SNOW_MONKEY_URL . '/css/jquery.bxslider.min.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/jquery.bxslider.min.css' ) ); } ); // slick.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'slick-css', MY_SNOW_MONKEY_URL . '/css/slick.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/slick.css' ) ); } ); // slick-theme.cssの読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'slick-theme-css', MY_SNOW_MONKEY_URL . '/css/slick-theme.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/css/slick-theme.css' ) ); } ); // swiper.cssの読み込み // add_action( // 'wp_enqueue_scripts', // function() { // wp_enqueue_style( // 'swiper-css', // MY_SNOW_MONKEY_URL . '/css/swiper.css', // [ Framework\Helper::get_main_style_handle() ], // filemtime( MY_SNOW_MONKEY_PATH . '/css/swiper.css' ) // ); // } // ); // jsファイル読み込み function my_add_files() { // jquery.inview.min.jsファイルの読み込み // wp_enqueue_script('inview-script', plugin_dir_url( __FILE__ ) . 'js/jquery.inview.min.js', array('jquery'), '1.0.0', true ); // JSファイル 読み込み - プラグイン ディレクトリから // wp_enqueue_script('swiper-script', plugin_dir_url( __FILE__ ) . './js/swiper.min.js', array(), '1.0.0', true ); // 読み込み中止 - WordPress jquery.js wp_deregister_script('jquery'); // jQuery CDN 読み込み wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', "", "1.11.1", false ); // bxSlider 読み込み wp_enqueue_script('bxslider-script', plugin_dir_url( __FILE__ ) . './js/jquery.bxslider.min.js', array('jquery'), '1.0.0', true ); // slick.min.js 読み込み wp_enqueue_script('slick-script', plugin_dir_url( __FILE__ ) . './js/slick.min.js', array('bxslider-script'), '', true ); // main.js 読み込み wp_enqueue_script('smart-script', plugin_dir_url( __FILE__ ) . 'js/main.js', array('slick-script'), '5.8.1', true ); } add_action('wp_enqueue_scripts', 'my_add_files');Mysnowmonkey終わり
main.jsファイル内のコードです。
'use strict'; { // 要素を追加 const SnowMonkeyPost = document.querySelector('.snow-monkey-posts'); const postContent = document.createElement('p'); const newContent = document.createTextNode('NEWS'); postContent.appendChild(newContent); postContent.classList.add('post-ttl'); const entryLi = document.querySelector('c-entries'); SnowMonkeyPost.insertBefore(postContent, entryLi); // 要素を削除して、追加 const postBox = document.querySelector('.c-entry-summary__body'); const h3Element = document.querySelector('.c-entry-summary__header'); const postmeta = document.querySelector('.c-entry-summary__meta'); postBox.insertBefore(postmeta, h3Element); // footerにクラスを付加 const footer = document.querySelector('.l-footer'); footer.classList.add('footer-section'); // swiper.js利用 const swiper = new Swiper('.post-slider', { // Optional parameters freeMode: true, centeredSlides: true, spaceBetween: 25, loop: true, slidesPerView: 1, speed: 3000, autoplay: { delay: 3000, }, }) // トップページswiper.js const top_Slider = new Swiper('.top-slider', { // Optional parameters freeMode: true, // centeredSlides: true, spaceBetween: 0, slidesPerView: 1, speed: 500, // If we need pagination pagination: { el: '.swiper-pagination', type: 'fraction', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) }main.jsファイル終わり
これで足りますでしょか？
すいませんが、よろしくお願いします！Who liked: No userすいません、後のmain.jsファイルをコードでくくるのを忘れてました。
'use strict'; { // 要素を追加 const SnowMonkeyPost = document.querySelector('.snow-monkey-posts'); const postContent = document.createElement('p'); const newContent = document.createTextNode('NEWS'); postContent.appendChild(newContent); postContent.classList.add('post-ttl'); const entryLi = document.querySelector('c-entries'); SnowMonkeyPost.insertBefore(postContent, entryLi); // 要素を削除して、追加 const postBox = document.querySelector('.c-entry-summary__body'); const h3Element = document.querySelector('.c-entry-summary__header'); const postmeta = document.querySelector('.c-entry-summary__meta'); postBox.insertBefore(postmeta, h3Element); // footerにクラスを付加 const footer = document.querySelector('.l-footer'); footer.classList.add('footer-section'); // swiper.js利用 const swiper = new Swiper('.post-slider', { // Optional parameters freeMode: true, centeredSlides: true, spaceBetween: 25, loop: true, slidesPerView: 1, speed: 3000, autoplay: { delay: 3000, }, }) // トップページswiper.js const top_Slider = new Swiper('.top-slider', { // Optional parameters freeMode: true, // centeredSlides: true, spaceBetween: 0, slidesPerView: 1, speed: 500, // If we need pagination pagination: { el: '.swiper-pagination', type: 'fraction', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) }よろしくお願いします！
Who liked: No user//unpkg.com/swiper@7/swiper-bundle.min.jsとそれに続く script がwp_headで読み込まれていて依存関係が指定されていないので、それは一つ怪しそうですね。下層ページではデベロッパーツールのコンソールになにか JavaScript のエラーがでていませんか？
あと、本題からはそれますが、コアの jQuery を外して CDN の jQuery を読み込んでいますが、これはやめたほうが良いです。Snow Monkey に限らず、他のテーマもプラグインも WordPress コアも、コアの jQuery で正しく動く前提でつくられているので、CDN の jQuery だとバージョンや設定が変わっていて正しく動かなくなる可能性が高くなります。
Who liked: No userお疲れさまです！
コンソールで、main.jsで初めの方に書いてある、「要素の追加」で、TypeErorrが出ていて、後の方のJavaScriptのコードが読み込まれて無かったみたいです。
main.jsのコードをswiper.jsを最初に持ってきたところ、下層ページでもswiper.jsの動作が確認できました。
簡単なミスで申し訳ございません。swiper.jsのCDNはHeadタグの中でも正常に動作しております。
JqueryのscriptはWordPress用のJqueryに戻しました。
今回は迅速に対応してくださって誠にありがとうございました！1つ質問ですが、
swiper.jsの代わりに、slideというJqueryのライブラリを使用していたのですが、WordPress用のJqueryに戻すと動作しなくなりました。
そういう場合は、Jqueryを今回のように、切り替えたほうが良いのでしょうか？Who liked: No userけれど、main.jsファイルのエラーで読み込めなかったのなら、トップページも読み込めないはずですが、他にも原因があったのでしょうか？
main.jsの中身を入れ替えただけで実行できたのは、謎ですね。
Who liked: No user1つ質問ですが、
swiper.jsの代わりに、slideというJqueryのライブラリを使用していたのですが、WordPress用のJqueryに戻すと動作しなくなりました。
そういう場合は、Jqueryを今回のように、切り替えたほうが良いのでしょうか？僕は切り替えないほうが良いと思います。スライダーと、他のプラグイン・テーマ・コアの動作を天秤にかけることになるので、僕ならコアの jQuery でも正しく動くように調整するか、正しく動くライブラリを探します。
けれど、main.jsファイルのエラーで読み込めなかったのなら、トップページも読み込めないはずですが、他にも原因があったのでしょうか？
エラーメッセージを見て、1つ1つデバッグしてみないとなんともわからないですね…。
Who liked: No user
12件の投稿を表示中 - 1 - 12件目 (全12件中)
- トピック「My Snow Monkeyで作っているjsファイルがトップページは読み込んでいるが、下層ページが読み込まない。」には新しい返信をつけることはできません。