WordPressの個別ページに「Animsition（プラグイン）」を設定するには

前提・実現したいこと

WordPressを使用し、こちらのサイトを製作しています。
https://monodukurisearch.com/web_gacha/

都道府県名（カテゴリとして設定）のテキストリンクをクリックすると、そのカテゴリ内に含まれる記事のうち1つがランダムで選ばれ、表示されるプログラムを導入しています。

今回、こうしてランダムで選ばれた記事へ遷移する際に、アニメーションをつけたいと考えています。具体的には、このANIMSITIONというサービスの中のROTATE LARGEを適用したく思います。

こちらのページを参考に試行錯誤しているのですが、今のところまったく動作いたしません。行った作業は以下となります。

入力したコード

１．テーマエディターのheader.phpに

<head>
  <link rel="stylesheet" href="css/animsition.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="js/jquery.animsition.min.js"></script>
</head>

を埋め込む。

２．固定ページ下部の都道府県（Tableで作成）のHTMLを、

<div
  class="animsition"
  data-animsition-in-class="rotate-in-lg"
  data-animsition-in-duration="1000"
  data-animsition-out-class="rotate-out-lg"
  data-animsition-out-duration="800"
>
  ...
</div>

このdivタグで囲う。

３．同じ固定ページ内に、HTMLコードのボックスを１つ作り、

<script>
jQuery(document).ready(function() {
  jQuery(".animsition").animsition({
    inClass: 'rotate-in-lg',
    outClass: 'rotate-out-lg',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.animsition-link',
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
    loading: true,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});
</script>

このタグを埋め込む。

行ったのはこの３ステップです。

なんとなく間違えているのはステップの３つ目かなと感じているのですが、自身で判断が付きません。恐れ入りますが、誰かわかる方にアドバイスいただけますと幸いです。

環境

WordPress5.5.3

MacOS Catarina　10.15.5（19F101）
MacBook Air (Retina, 13-inch, 2020)
1.1 GHz クアッドコアIntel Core i5
8 GB 3733 MHz LPDDR4

行動規範の内容に同意します

回答1件

1ですがその場所にそれらのCSSとJSのファイルは入れましたか？

もし入れていなければ3でコンソールにエラー「animsitionがないぞ」と出ると思います。

エラーがなければこれ以上わかりませんが、もしエラーがあれば下のように変えてみてください。

自分でファイルを入れてなくても、https://cdnjs.cloudflare.comからファイルを拾ってくる方法です。

html
1<head>
2  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/css/animsition.css">
3  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
4  <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/js/animsition.min.js"></script>
5</head>

投稿2020/11/29 04:39

gorimaz

総合スコア26

SeiyaFuchigami

2020/11/30 02:25

gorimaz様アドバイスをいただきありがとうございます。 FTPサーバーよりそれぞれのデータをアップし、パスを正しく設定したつもりでおりましたが、ご連絡いただいたhttps://cdnjs.cloudflare.comよりファイルを拾ってくる方法で指定し直したところ、divで指定したTableが回転するのを確認いたしました。本当にありがとうございます！ただ、引き続きうまくいかない箇所が残っておりますので、こちらで合わせてご質問させていただければと思います。もしお分かりになるようであればアドバイスいただけますと幸いです。 ### 現状現在[こちらのページ](https://monodukurisearch.com/web_gacha/)の「都道府県名から選ぶ」はTable形式で記載しており、以下のように全体をdivで囲うかたちです。 ```<div class="animsition" data-animsition-in-class="rotate-in-lg" data-animsition-in-duration="1000" data-animsition-out-class="rotate-out-lg" data-animsition-out-duration="800" > ... </div>``` さらに、HTMLのボックスをつくって以下のjQueryを記載しています。 ```<script> jQuery(document).ready(function() { jQuery(".animsition").animsition({ inClass: 'rotate-in-lg', outClass: 'rotate-out-lg', inDuration: 1500, outDuration: 800, linkElement: '.animsition-link', // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])' loading: true, loadingParentElement: 'body', //animsition wrapper element loadingClass: 'animsition-loading', loadingInner: '', // e.g '<img src="loading.svg" />' timeout: false, timeoutCountdown: 5000, onLoadEvent: true, browser: [ 'animation-duration', '-webkit-animation-duration'], // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser. // The default setting is to disable the "animsition" in a browser that does not support "animation-duration". overlay : false, overlayClass : 'animsition-overlay-slide', overlayParentElement : 'body', transition: function(url){ window.location.href = url; } }); }); </script>``` 東京、神奈川などのテキストリンクをクリックすると、ランダムで選ばれた記事に遷移します。 ### 課題このコードのままですと、上述のページを開いた段階でTable部が回転してしまう上に、テキストリンクをクリックして遷移する際には回転しない状態です。 ### 求める機能当方の希望としては、（１）上述のページを開いた段階では通常通り表示され（２）リンクをクリックしたときにのみ、画面が回転するアニメーションが実行され、ランダムで設定したリンク先に遷移するというものです。現在もいろいろと調整を図っておりますが、うまくいかない状態です。たびたびで申し訳ありませんが、アドバイスをいただけますとありがたく思います。

SeiyaFuchigami

2020/11/30 03:00 編集

恐れ入ります、いろいろと試してみたところ、以下の手順で希望通りに動くことを確認いたしました。 1. Tableを以下で囲む <div class="animsition"></div> 2. テキストリンク部を以下に変更 <a href="javascript:onLinkClick(64)" class="animsition-link">東京</a> 3. 以下のjQueryをコメントアウト inClass: 'rotate-in-lg', inDuration: 1500, まだページ全体を回転させることができていないので、こちらに引き続きチャレンジしてみます。

行動規範の内容に同意します