WordPress(ワードプレス)でSwipeboxを利用する方法

WordPress(ワードプレス)でSwipeboxを利用する方法

サンプル

画像(キャプションあり)

ギャラリー

投稿に導入する方法

投稿ごとに導入する場合には「カスタムHTML」を利用してください

まず、Swipeboxのライブラリを読み込みます。

なお、Swipeboxの導入方法については以下の記事をご覧ください。

CSSファイルインクルード

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.4.4/css/swipebox.min.css">

jQuery読み込み

必要に応じて、jQueryのライブラリを読み込んでください。

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>

JSファイルインクルード

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.4.4/js/jquery.swipebox.min.js"></script>

Javascriptコード追加

最後にJavascriptのコードを追加します。

この処理の仕様は以下の通りです。

  1. Figureタグの直下にあるImgオブジェクトを対象とする
  2. Imgオブジェクトをアンカータグ(<a>)でラップし、href属性にイメージのURIを設定する
  3. 同時にアンカータグ(<a>)にクラス『swipebox』を設定し、初期化処理のセレクタとする
  4. また複数の写真を紐づけるために、属性「rel」に値『swipebox-gallery』を設定する
  5. あわせて、Figureタグと紐づく、figcaptionをキャプション文字列とし、アンカータグ(<a>)のtitleにキャプションを設定する
  6. ギャラリーを想定し、Figcaptionに文字列が設定されていない場合には、Figureタグ上位のFigureタグを検索し、それに紐づくFigcaptionをキャプション文字列とする
  7. 最後にCSSクラス「swipebox」をターゲットにswipeboxを初期化する
function setSwipebox() {
   var elements = document.querySelectorAll("figure img");
   var len = elements.length;
   for (var i=0; i <len; i++ ) {
      var elm = elements[i];
      /* アンカー設定 */
      setAnchor(elm);
   }
   /* Swipebox初期化 */
   initializeSwipebox();
}
function setAnchor(elm) {
   var anchor = document.createElement("A");
   var fig = elm.parentElement;
   var caption = "";
   var imgSrc = elm.getAttribute('src');
   /* キャプション取得 */
    figCap = getCaption(fig);
   if ( figCap != undefined ) {
      caption = figCap.textContent;
   }
   if ( caption == "" ) {
      var parelentEem = fig.parentElement;
      for ( var i=0; i < 3; i++ ) {
         if ( parelentEem == undefined ) break;
         var tagName = parelentEem.tagName;
         if ( tagName != undefined ) {
            if ( tagName.toUpperCase() == "FIGURE" ) {
               /* ギャラリーの場合のキャプションを再取得を試みる */
               var subFigcap = getCaption(parelentEem);
               if ( subFigcap != undefined ) caption = subFigcap.textContent;
               break;
            }
         }
         parelentEem = parelentEem.parentElement;
      }
   }
   /* キャプション設定 */
   anchor.setAttribute('title',caption);

   /* URL設定*/
   anchor.setAttribute('href',imgSrc);
   /*クラスを設定し、セレクタで利用する */
   anchor.className = 'swipebox';
   /* ギャラリーの紐づけ */
   anchor.setAttribute('rel','swipebox-gallery');

   /* アンカーにイメージを設定 */
   anchor.appendChild(elm);

   /* Figureにアンカーを再設定 */
   if ( figCap == undefined ) {
      fig.appendChild(anchor);
   } else {
      fig.insertBefore(anchor,figCap);
   }
}
function getCaption(fig) {
   var figCap = null;
   /* キャプション取得 */
   if (fig.hasChildNodes()) {
      var children = fig.childNodes;
      for (var i = 0; i < children.length; i++) {
         var child = children[i];
         var tagName = child.tagName
         if ( tagName != undefined ) {
            if ( tagName.toUpperCase() == "FIGCAPTION" ) {
               /* キャプションの場合 */
               figCap = child
               break;
            }
         }
      }
   }
   return figCap;
}
function initializeSwipebox() {
   /* swipebox初期化 */
   $( '.swipebox' ).swipebox();
}
/* loadイベント */
window.onload = function() {
   /* ギャラリー設定処理実行 */
   setSwipebox();
}
JSファイルを提供してみました

上のJavascriptコードが少し長いので、それと同じJSファイルを以下に用意してみましたのでそれを読み込んでもいいと思います。

<script src="https://www.single-life.tokyo/js/swipeboxForWordPress.js"></script>

すべてのソースを読み込むには?

最後に、上記ソースを読み込むと以下のようなコードを「カスタムHTML」で追加してください。

追加するカスタムHTML

サイト全体に導入方法

ウィジェットに追加

ウェジェットにフッター項目があるようでしたら、そこにカスタムHTMLで上記Javascriptを追加してください。

ウィジェット

フッターに「カスタムHTML」でCSSファイルおよびJSファイルを読み込んでください。

テーマを直接編集

「テーマファイルエディタ」から選択しているテーマのソースを直接編集することができます。

そこで「footer.php」を直接編集できますので、そこのscriptタグを追加してください。

footer.php直接編集

ご参考

関連ページ