質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

jQuery プラグイン「readmore.jp」をWordpressで反映させるには

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 477

score 8

プラグイン「readmore.jp」をWordpressで反映させようとしています。

以下のサイトを参考にしてみたのですが、理解不足で一向に反映ができません。

WordPressでURL(パス)を取得する場合はget_template_directory_uriよりget_theme_file_uriが便利

上記サイトで

wp_enqueue_script( 'glatch-scripts', get_theme_file_uri( '/assets/js/bundle.js' ), array(), false, true ); 


とあるのは、「function.php」に書くということでしょうか?
これ以外書かなくても、ここでいう「bundle.js」が反映されるということでしょうか?


こちらのサイトも参考にしてみましたが

JavaScriptを読み込む[wp_enqueue_script][wp_enqueue_scripts]

しかし、function.phpに以下を記載するとサイトにエラー表記が出てきてしまいます。

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri().'/js/custom_script.js',
        array( 'jquery' ),
        '1.0'
    );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

こちらも参考に見よう見まねで
テーマにJavaScript(jsファイル)を正しい方法で読み込む
function.phpに以下のように記載してみたのですがエラーになりました。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )

function twpp_enqueue_scripts() {
  wp_enqueue_script( 
    'main-script', 
    get_template_directory_uri() . '/js/main.js' 
  );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );

どこにどう記載するとプラグイン「readmore.jp」をWordpressで反映させることができるのでしょうかm(__)m

追記

ファイルのパスを追加しました!

ファイルパスも色々試しているんですが、検証してもjsフォルダがなかなか現れてくれません;;

 function twpp_enqueue_scripts() {
   wp_enqueue_script( 'goto-js', get_theme_file_uri( './wp-content/themes/sotugyo_site/js/readmore.js' ), array(), false, true );

      }
 function twpp_enqueue_scripts() {
   wp_enqueue_script( 'goto-js', get_theme_file_uri( '/js/readmore.js' ), array(), false, true );

      }


イメージ説明
検証画面
↑jsフォルダが現れず...

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • CHERRY

    2020/05/22 12:51

    どのようなエラーメッセージが出ているのかを質問に記載していただけないでしょうか?。

    キャンセル

  • CHERRY

    2020/05/22 12:56 編集

    > プラグイン「readmore.jp」

    また、WordPress の話題で単にプラグインと記載すると WordPress のプラグインと判断されると思いますので、異なる場合は、何のプラグインと明示してください。プラグイン名も正確に正しい名前を記載してください。


    おそらく、jQuery プラグインの Readmore.js でしょうか?

    キャンセル

  • web_hoshi

    2020/05/22 12:58 編集

    ありがとうございます!

    上記の「テーマにJavaScript(jsファイル)を正しい方法で読み込む」を参考にfunction.phpに

    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )

    function twpp_enqueue_scripts() {
    wp_enqueue_script(
    'main-script',
    get_template_directory_uri() . '/js/main.js'
    );
    }

    add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );

    ============
    と記載しましたら以下のエラーメッセージが出てきました。


    Parse error: syntax error, unexpected 'function' (T_FUNCTION) in /Users/miya/Local Sites/daytry/app/public/wp-content/themes/sotugyo_site/functions.php on line 49

    キャンセル

  • web_hoshi

    2020/05/22 12:59

    >おそらく、jQuery プラグインの Readmore.js でしょうか?
    はい!jQuery プラグインの Readmore.jsです!失礼しました><

    キャンセル

回答 1

0

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )

function twpp_enqueue_scripts() {
wp_enqueue_script( 
'main-script', 
get_template_directory_uri() . '/js/main.js' 
);
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );

を記載したということですが、wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ) の部分は不要ではないでしょうか。

この行の最後にセミコロンがないため、次の行とつながってエラーになります。

上記の1行を削除するとどうなりますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/22 13:46

    セミコロンがないのがエラー原因だったんですね..!

    function twpp_enqueue_scripts() {
    wp_enqueue_script(
    'main-script',
    get_template_directory_uri() . '/js/readmore.js'
    );
    }

    add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );


    のみで記載したらエラーは消えました!ありがとうございます!
    しかし、readmore.jsはサイトには反映されませんでした・・・
    普通はこれでreadmoreのようなjsは反映されるのでしょうか?

    キャンセル

  • 2020/05/22 15:12

    JavaScript ファイルのパスは正しいですか?

    Web ブラウザで表示されるソースコードをデベロッパーツールで、確認してみてください。

    キャンセル

  • 2020/05/22 15:47

    JavaScript ファイルのパスが正しくないかどうか、色々試してみたのですが
    未だjsフォルダにたどり着けずにおります。
    ファイルパスの情報を追記してみましたm(__)m

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る