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の階層を自動で読み込んでくれるコードなので、これがないとエラーが出ます。
以上のことに気をつけましょう！
続いては、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のダイレクトメールで教えてください。
それでは、最後まで読んでいただきありがとうございました。
