WordPressでホームページを作るには

【1分コピペ】Word PressでJavaScriptのファイル読み込みさせるときの方法

投稿日:

Word PressでJavaScriptのファイルを読み込みさせたいときは制作改善しているとよくあります。その方法を解説します。

【1分コピペ】Word PressでJavaScriptのファイル読み込みさせるときの方法

  1. JavaScriptファイル作成
  2. JavaScriptファイルをFTPで格納
  3. 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',//ここにファイル格納のURL
array(),
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の個別講座をご覧ください。

WordPressでホームページを作るには

執筆者:

関連記事

お問合せを増やしたいフォームの制作の方法と考え方

【コピペ】お問合せを増やしたいフォームの制作の方法と考え方_前年比200%増の成果事例

お問合せを増やしたいときには、お問い合わせフォームの制作や改善が優先度の高い施策になります。ビジネスに活用するサイトでは集客から逆算したサイト作り意識しましょう。 今回はお問合せを増やすためのフォーム …

【解説】EC機能内製化の検討例と7.27%のコストカット試算事例

クライアント事例として、自サイトでEC機能(eコマース、つまりオンラインショップ)内製したいときのリニューアル検討についての調査と意思決定についての流れを解説します。 Web365とは Web365は …

検索上位へのSEO対策、画像にテキストは出来るだけいれないようにしよう

SEOを意識したサイト作りをする際に、画像とテキストは出来るだけ分けたほうがいいです。検索ロボットがテキストを認識して検索順位を決めるので、画像だと埋もれるからです。 今回は具体例と一般的な方法を解説 …

【完全網羅】WordPressの費用は?ホームページ作成運用の料金相場まとめ

【5分で読めます】 企業でコーポレートサイトとしてWordPressを採用する際、費用はいくらかかるのか?相場やサービス別など網羅的にまとめました。 この記事読了後は、WordPressでの費用感が理 …

自分のWEBサイトを自分自身で作りたい人のオーダーメイド個別講座、開講。

­カリキュラム オーダーメイド講座は、 あなたの課題感に合わせてカリキュラムをオーダーメイドで一緒に作成していき、あなたのサイトを完成・改善させていく講座です。 受講形式は、ご都合のよい日時を相談して …

【完全網羅】Word Pressの保守運用・セキュリティ59の対策一覧

Word Pressのセキュリティ対策の一覧と情報収集ソースを59ほどリストアップしました。自身のサイトのセキュリティ対策にご活用ください。   Web365とは Web365は、外部Web担当者とし …

webサイトの問合せを増やすためのサイト運用方法の解説

【資料配布】Webサイトの問合せを増やすための運用・改善方法の解説

【5分で読めます】 自身のビジネス用のWebサイトを作る上での最終的な目標は、2つ、 問い合わせを増や 購入を増やす がゴールではないでしょうか。 最終的なゴールの数字を増やす上でサイトを、下記の2つ …