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

Question

前提・実現したいこと

初めて質問させていただきます。
取引先様が作成した、Pjax(Barba.js)を採用し表示速度を速めたWordPressオリジナルテーマがあります。
私はそのテーマを使ったWebサイトの修正を行っています。

修正の内容としては、「今は静止画のTOPページキービジュアルを、zoomslider.js（https://github.com/mingyeungs/jquery-zoomslider/）にてスライダーに変更する」というものです。
取引先様の指示にあった、「ZoomSlider用のHTMLコードをfunctions.php内に記述してショートコードを作成し、そのショートコードをWordPressビジュアルエディター内に記載する」という手法で取り組み、一応画面として問題なく表示はされる状態まで持っていきました。

しかしながら、「ページ内のリンクを踏んで別ページに遷移した後、ブラウザバックでTOPページに戻る」「他ページからTOPページへのリンクを踏んで遷移する」という動作を行うと、スライダー画像が表示されない事象が発生しております。
スライダー用のHTML内に記述した、<div class="inner-content"></div>（画像の上にテキストなどを表示させる際の記述）の情報は表示されており、ショートコードは実行されているものと思われます。
画像のみ表示されない状況です。

恐らくPjaxでページ遷移を処理していることから、ブラウザバックや表示の際に妙な挙動をしているものと思われます。
Pjaxという概念に疎く、このような状況は初めてです。
お知恵を賜りたく存じます。

発生している問題・エラーメッセージ

画面遷移にPjaxを使用するWordPressテーマを適用させたサイトにて、zoomslider.jsの画像がブラウザバックで表示されなくなる。

該当のソースコード

/* ===================================================
  // 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」の設定の記述のようです。
　//こちらをご覧になって何かおわかりになりますでしょうか？

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のビジュアルエディターに貼り付け、以下の画像のようにブラウザ上で反映

試したこと

・ZoomSlider表示に必要な「jQuery(1.11.1)のリンク」「modernizr-custom.js」「jquery.zoomslider.min.js」をfunctions.php内のショートコード作成ファンクションの中に記載。
・Pjaxを実行するにあたって読み込まれている他バージョンのjQueryとコンフリクトしないための記述を行う。
・TOPページに遷移し画面のロードを行った際に（「.is-open」というclassが出現）、ショートコードの周辺のみリロードさせるようなJavaScript/jQueryの記述ができないか模索。（うまくいかず）

<?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; ?>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
WordPressバージョン 5.3.2–ja

Comments

[CHERRY]

状況を再現できる最小限のソースコードを提示することは可能でしょうか？

[mario_parallel]

こんばんは。書き込みをありがとうございます。
取引先様によると、オリジナルテーマの情報を明かすのは避けてほしいとのことでした。
何かを記載したいのですが、テーマ内に読み込まれているJavaScriptなどが膨大で、何をどうまとめれば良いのか見当がつかず申し訳ありません。
ですが、何か状況を判断いただけるような材料を記載いたしますので、少々お待ちいただけましたら幸いです。
よろしくお願いいたします。