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制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方
どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）
まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。
