Word PressでJavaScriptのファイルを読み込みさせたいときは制作改善しているとよくあります。その方法を解説します。
【1分コピペ】Word PressでJavaScriptのファイル読み込みさせるときの方法
- JavaScriptファイル作成
- JavaScriptファイルをFTPで格納
- functions.phpにコードコピペ
JavaScriptファイル作成
まず、実装したいJavaScriptファイルを作成しましょう。今回はjQuery（JavaScriptを簡単にしたライブラリ）で記述したコードをサンプルにします。
今回は、本文内の文字列の非表示やサイズ調整など、JavaScriptで微調整したいときのまとめファイルという例が下記ソースです。
(function($){
"use strict";
//下記クラス内の日程文字カット
$(".mtop60 > section > p:contains('2020/01/15 Wed')").css({
"display":"none"
});
//下記クラスの内情報の文字サイズ調整
$(".fl > p > span").contents().unwrap();
})(jQuery);
こちらを、本文編集のJavaScriptソースとして「edit_letter_body.js」と保存します。
JavaScriptファイルをFTPで格納
次に、自サイトの適切なJavaScriptファイルの保管フォルダに格納します。
サンプルは下記フォルダにアップロードしてます。
functions.phpにコードコピペ
次に先のJavaScriptファイルをサイトに読み込ませるコードをfunctions.php に記述します。下記コードをコピペし、適宜編集してください。functions.phpもFTPで保存したほうがよいです。
Word Pressのメニュー、外観からもいじれますが、上書き保存できなかったり、バグが発生したりするので、FTPからのほうが安全です。
function twpp_enqueue_scripts() {wp_enqueue_script( 'edit_letter_body',//ここにファイル名 get_template_directory_uri() . '/js/edit_letter_body.js',//ここにファイル格納のURLarray(),false,true);
}add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
読み込まれたファイルはサイトをChromeブラウザで表示したときに、裏側が見れる、デベロッパーツールなどで確認できます。
上記のように、読み込まれていますね。
以上です。ご活用ください。
Word PressでのJavaScriptやphpでのファイル挿入を知りたい方には下記もおすすめです。
【簡単】WordPressで独自のショートコードを作成し、本文に挿入する方法
Web担当者として月額サポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップ定額サポートしています
・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
どうぞWeb365の個別講座をご覧ください。
