wordpressに、jQueryのプラグインを実装する方法

公開日 2020/8/29 最終更新日 2021/8/15

wordpressに、jQueryのプラグインを実装する方法
1.プラグインのダウンロード
2.header.phpに読み込む
3.footer.phpにjsコード書く
まとめ

wordpressに、jQueryのプラグインを実装する方法

今回は、LetterFxというjQueryのプラグインをwordpressに実装したため、その方法を共有させていただきます。

1.プラグインのダウンロード

まずは、プラグインのダウンロードからです。

以下のリンクからgithubに飛んで、ダウンロードしてください。

LetterFx

ダウンロードができたら、ファイルを解凍して作業ファイルに移動させてください。

2.header.phpに読み込む

ダウンロードしたファイルを移動させたら、さっそくheader.phpに読み込みを行います。


<head>
  ・・・
  <?php wp_head(); ?>
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>
/letterfx-master/jquery-letterfx.min.css" />
  <script src="<?php echo get_template_directory_uri(); ?>/le
tterfx-master/tuxsudo.min.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/le
tterfx-master/jquery-letterfx.min.js"></script>
</head>
<body>
・・・

読み込むコードは、

1.LetterFxのcssファイル
2.tuxsudo.min.jsファイルとjquery-letterfx.min.jsファイルです。

注意点

・<?php wp_head(); ?>より下に、コードを書く。
・読み込む順番上記の通りにする。
・<?php echo get_template_directory_uri(); ?>は、wordpressの階層を自動で読み込んでくれるコードなので、これがないとエラーが出ます。

以上のことに気をつけましょう！

3.footer.phpにjsコード書く

続いては、jsコードを書いていきましょう！


 </footer>
  <script>
    jQuery(function() {
     jQuery(".grow").letterfx({
         "fx": "grow",
         "backwards": false,
         "timing": 150,
         "fx_duration": "350ms",
         "letter_end": "restore",
         "element_end": "restore"
        });
      });
   </script>
   <?php wp_footer(); ?>
  </body>
</html>

以上のようなコードになります。

挙動の確認は、以下のサイトが参考になりますのでぜひ確認してみてください。

テキストにエフェクトがつけられるプラグインまとめ

注意点

・<?php wp_footer(); ?>の上に書く。
・『$(function()・・・』ではなく『jQuery(function() ・・・』と書くように気をつけましょう。

補足：ここ重要です！
なぜ$ではなくjQueryなのかというと、wordpressでは、$を読み込むことが出来ないため、エラーが起きるからです。

まとめ

今回は、wordpressにjQueryのプラグインを実装する方法について解説しました。

まだ駆け出しのため、もっといい方法知ってるよ！という方は、ぜひtwitterのダイレクトメールで教えてください。

それでは、最後まで読んでいただきありがとうございました。

タグ

jQuery