jQueryプラグイン「Readmore.js」をWordpressに使いたい

WordpressでjQueryプラグイン「Readmore.js」を使いたいのですが、なかなか反映できません。

こちらの記事を参考にしてみました。
続きを読むリンクで要素の開く閉じるを簡単に組み込めるjQueryプラグイン「Readmore.js」

色々原因を探っているんですが、考えているのは

記述が間違っている

記事では、以下をHTNLの<head></head>の中に入れるよう書いてあります。


<script>
$(function () {
	$('article').readmore({
		speed: 1000,
		collapsedHeight: 100,
		moreLink: '<a href="#">続きを読む</a>',
		lessLink: '<a href="#">閉じる</a>'
	});
});
</script>

htmlにこのように記述していた時はReadmore.jsは動いてくれたのですが、Wordpress用にphpに変換したらReadmore.jsが反映されなくなってしまいました。

Wordpressの場合、どこにどのように記述したらいいのでしょうか？

検証ではこのようなエラーが出ています。

2.jsの読み込みに問題がある

以下のように読み込んでいます。

function my_styles() {
  wp_enqueue_script( 'readmore', get_template_directory_uri() . '/dist/readmore.js', array( 'jquery') , true );

  wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/animate.css', array() );
  wp_enqueue_script( 'script-name', get_template_directory_uri() . '/dist/wow.min.js', array( 'jquery' ),  true );

}


add_action( 'wp_enqueue_scripts', 'my_styles' );

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

回答1件

ベストアンサー

js
1jQuery(function($){ // ← Change
2    $('article').readmore({
3        speed: 1000,
4        collapsedHeight: 100,
5        moreLink: '<a href="#">続きを読む</a>',
6        lessLink: '<a href="#">閉じる</a>'
7    });
8});