質問編集履歴

「試したこと」にコードを記載し、タイトル変更と説明を変更

2020/03/23 09:29

投稿

mario_parallel

スコア5

test CHANGED Viewed

	@@ -1 +1 @@
1	- Pjaxを採用したオリジナルWordPressテーマによるサイト制作中、ZoomSlider.jsの画面がブラウザバックで表示されなくなるのを回避したい。
1	+ Pjaxを採用したオリジナルWordPressテーマによるサイト制作中、ZoomSlider.jsの画面がブラウザバックや他ページからのリンククリックで表示されなくなるのを回避したい。

test CHANGED Viewed

@@ -4,7 +4,7 @@
 初めて質問させていただきます。
-取引先様が作成した、Pjaxを採用し表示速度を速めたWordPressオリジナルテーマがあります。
+取引先様が作成した、Pjax(Barba.js)を採用し表示速度を速めたWordPressオリジナルテーマがあります。
 私はそのテーマを使ったWebサイトの修正を行っています。
@@ -16,7 +16,7 @@
-しかしながら、「ページ内のリンクを踏んで別ページに遷移した後、ブラウザバックでTOPページに戻る」という動作を行うと、スライダー画像が表示されない事象が発生しております。
+しかしながら、「ページ内のリンクを踏んで別ページに遷移した後、ブラウザバックでTOPページに戻る」「他ページからTOPページへのリンクを踏んで遷移する」という動作を行うと、スライダー画像が表示されない事象が発生しております。
 スライダー用のHTML内に記述した、<div class="inner-content"></div>（画像の上にテキストなどを表示させる際の記述）の情報は表示されており、ショートコードは実行されているものと思われます。
@@ -24,7 +24,7 @@
-恐らくPjaxでページ遷移を処理していることから、ブラウザバックで妙な挙動をしているものと思われます。
+恐らくPjaxでページ遷移を処理していることから、ブラウザバックや表示の際に妙な挙動をしているものと思われます。
 Pjaxという概念に疎く、このような状況は初めてです。
@@ -446,9 +446,25 @@
 ・Pjaxを実行するにあたって読み込まれている他バージョンのjQueryとコンフリクトしないための記述を行う。
-・画面のロードを行った際に、ショートコードの周辺のみリロードさせるようなJavaScript/jQueryの記述ができないか模索。（うまくいかず）
+・TOPページに遷移し画面のロードを行った際に（「.is-open」というclassが出現）、ショートコードの周辺のみリロードさせるようなJavaScript/jQueryの記述ができないか模索。（うまくいかず）
+```PHP
+<?php if ( is_home() || is_front_page() ) : ?>
+      <script type="text/javascript">
+        if($(document).on('load','#main_contents') && $('#main_contents').hasClass('.is-open')) {
+          $('.zoomSlide_div').location.reload(true);　//ここの部分が効かず
+        }
+      </script>
+<?php endif; ?>
+```

必要部分をマスクした一部のソースコードを記載いたしました。

2020/03/23 09:29

投稿

mario_parallel

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -46,14 +46,398 @@
+```jQery
+/* ===================================================
+  // Barba setting
+  ==================================================== */
+  Barba.Pjax.Dom.wrapperId = 'ch';
+  Barba.Pjax.Dom.containerClass = 'c-ch';
+  Barba.Pjax.init();
+  Barba.Prefetch.init(); //dispatcher settings
+  Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck;
+  Barba.Pjax.preventCheck = function(evt, element) {
+    if(element){
+      if (!element.getAttribute('href')) {
+        return false;
+      }
+      // �O�������N��target="_blank"��
+      var site_url = location.protocol + '//' + location.host;
+      if (!element.href.startsWith(site_url)) {
+        element.setAttribute('target','_blank');
+        return false;
+      }
+      // �A���J�[�����N�ł��蓯��y�[�W�łȂ����barba��L����
+      var url = location.protocol + '//' + location.host + location.pathname;
+      var extract_hash = element.href.replace(/#.*$/,"");
+      if (element.href.startsWith(location.protocol + '//' + location.host)) {
+        if (element.href.indexOf('#') > -1 && extract_hash != url ){
+          return true;
+        }
+      }
+      // �g���q���Y������ꍇ��target="_blank"��
+      if (/.(xlsx?|docx?|pptx?|pdf|jpe?g|png|gif|svg)/.test(element.href.toLowerCase())) {
+        element.setAttribute('target','_blank');
+        return false;
+      }
+      // �Y���N���X�ɑ����Ă����Barba�????���
+      var ignoreClasses = ['ab-item','nagare-no-barba'];
+      for (var i = 0; i < ignoreClasses.length; i++) {
+        if (element.classList.contains(ignoreClasses[i])) {
+          return false;
+        }
+      }
+      if (!Barba.Pjax.originalPreventCheck(evt, element)) {
+        return false;
+      }
+      return true;
+    }
+  };
+  Barba.Dispatcher.on('newPageReady', function (currentStatus, oldStatus, container, newPageRawHTML) {
+    //header rewrite
+    if (Barba.HistoryManager.history.length === 1) {
+      return;
+    }
+    var head = document.head;
+    var newPageRawHead = newPageRawHTML.match(/<head[^>]*>([\s\S.]*)</head>/i)[0];
+    var newPageHead = document.createElement('head');
+    newPageHead.innerHTML = newPageRawHead;
+    var removeHeadTags = ["meta[name='description']", "meta[property^='og']", "meta[name^='twitter']", "meta[itemprop]", "link[itemprop]", "link[rel='prev']", "link[rel='next']", "link[rel='canonical']"].join(',');
+    var headTags = head.querySelectorAll(removeHeadTags);
+    for (var i = 0; i < headTags.length; i++) {
+      head.removeChild(headTags[i]);
+    }
+    var newHeadTags = newPageHead.querySelectorAll(removeHeadTags);
+    for (var _i = 0; _i < newHeadTags.length; _i++) {
+      head.appendChild(newHeadTags[_i]);
+    }
+    var newPageRawLogo1 = newPageRawHTML.match(/<div id="logo"[^>]*>([\s\S.]*?)</div>/i)[1];
+    $("#logo").html(newPageRawLogo1);
+    let gam_opt_divs = ['div-gpt-ad-1572933303259-0', 'div-gpt-ad-1572933415196-0', 'div-gpt-ad-1572933511534-0']; //����������Ă������K�pID���Z�b�g���܂��B
+    requestAnimationFrame(function () {
+      googletag.cmd.push(function () {
+        googletag.pubads().refresh(gptAdSlots); //�L���̍X�V
+        for(var opt_div in gam_opt_divs){
+          googletag.display(opt_div);  //�L���̍ĕ\��
+        }
+      });
+    });
+  }); //unique settings
+  // call clearAllGAMSlots in linkClicked event
+  Barba.Dispatcher.on('linkClicked', function (el) {
+    if (!window.googletag) {
+      requestAnimationFrame(function () {
+        googletag.cmd.push(function () {
+           googletag.pubads().clear();
+        });
+      });
+    }
+  });
+  var ChangeDammyRight = $('.changedammy-right');
+  var ChangeAnimation = $('.change-animation');
+  var switchInAnimation = function switchInAnimation(callback) {
+    ChangeAnimation.addClass('is-open');
+    if (ChangeAnimation.hasClass('is-close')) {
+      ChangeAnimation.removeClass('is-close');
+    }
+    if (callback) {
+      callback();
+    }
+  };
+  var switchOutAnimation = function switchOutAnimation(callback) {
+    ChangeAnimation.addClass('is-close');
+    $('html').addClass('is-close');
+    if (ChangeAnimation.hasClass('is-open')) {
+      ChangeAnimation.removeClass('is-open');
+    }
+    if (callback) {
+      callback();
+    }
+  };
+  var PageTransition = Barba.BaseTransition.extend({
+    start: function start() {
+      Promise.all([
+        this.newContainerLoading,
+        this.fadeOut()
+      ]).then(this.fadeIn.bind(this));
+    },
+    fadeOut: function fadeOut() {
+      switchOutAnimation();
+      return $(this.oldContainer).animate({
+        opacity: 0
+      }).promise();
+    },
+    fadeIn: function fadeIn() {
+      var _this = this;
+      var $el = $(this.newContainer);
+      window.scrollTo(0, 0);
+      $(this.oldContainer).hide();
+      $el.css({
+        visibility: 'visible',
+        opacity: 0
+      });
+      switchInAnimation();
+      $el.animate({
+        opacity: 1
+      }, 400, function () {
+        _this.done();
+      });
+    }
+  }); //barba transition
+  Barba.Pjax.getTransition = function () {
+    return PageTransition;
+  };
+  $(".change-animation").on('animationend webkitAnimationEnd',function(){
+    if ($('html').hasClass('is-close')) {
+      $('html').removeClass('is-close');
+    }
+  });
+  //上記はPjaxを適用させるにあたって導入している「Barba.JS」の設定の記述のようです。
+　//こちらをご覧になって何かおわかりになりますでしょうか？
 ```
+```PHP
+function zoomSlide_func(){
+  ob_start(); ?>
+  <div id="demo-1" data-zs-src='[
+    "<?php echo get_stylesheet_directory_uri() ?>/images/top_slide-1.jpg", "<?php echo get_stylesheet_directory_uri() ?>/images/top_slide-2.jpg", "<?php echo get_stylesheet_directory_uri() ?>/images/top_slide-3.jpg", "<?php echo get_stylesheet_directory_uri() ?>/images/top_slide-4.jpg", "<?php echo get_stylesheet_directory_uri() ?>/images/top_slide-5.jpg"]' data-zs-speed="5000" data-zs-bullets="false" data-zs-overlay="false" data-zs-autoplay="true">
+    <div class="inner-content">
+      <p class="/* 　 */">/* スライダーの上の文章　*/</p>
+    </div>
+  </div>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+  <script src="　　　/* modernizr-custom.js を読み込み　*/　　　"></script>
+  <script src="　　　/* jquery.zoomslider.min.js を読み込み*/　　　"></script>
+  <?php
+  return ob_get_clean();
+}
+add_shortcode('zoomSlide', 'zoomSlide_func');
+?>
+//functions.phpに記載の、ショートコードを作成するPHPコード
+// 「[zoomSlide]」をWordPresのビジュアルエディターに貼り付け、以下の画像のようにブラウザ上で反映
 ```
+![TOPページのHTMLのスクリーンショット](e219210712112abe636c8c98aaca85f4.jpeg)
 ### 試したこと