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制作+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までご相談ください。

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

執筆者:

関連記事

【チュートリアル】Googleフォームで在庫確認のカスタマーサービスをつくる一例

【チュートリアル】Googleフォームで在庫確認のカスタマーサービスをつくる一例

表題、【チュートリアル】Googleフォームで在庫確認のカスタマーサービスをつくる一例の解説です。 具体的には、下記のツールをつかいます。 Googleフォーム Googleスプレッドシート Goog …

【秒速解決】WordPressの管理画面が真っ白の対処法_サーバー【ロリポップ】

Word Pressのログイン画面だったり、管理画面が真っ白になってお手上げ、という事象があります。管理しているサイトで発生したので、対処解決方法を解説します。 Web365とは Web365は、外部 …

【提案事例】実店舗ローカルビジネスのWebサイトとSNSの設計一案

【5分で読めます】 実店舗オープン準備中の方より、Web作成の予算があまりかけられない、できれば無料ツール活用、日々の更新はSNS、中期的にはECを自サイトで展開したいというご相談。 実店舗だとこの要 …

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

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

【解説】WordPressサイトが自動更新でログインできないときの対応一例(WPとEC系プラグインの競合エラー)

WordPressサイトの各バージョンが自動更新され、気づいたらエラーでサイトが見れない、ログインできないときはありませか? 今回は、WordPressのバージョンアップによるエラー対応の方法について …

【簡単】商材ページ、13のポイントを意識して簡単につくる方法

クライアントサイトで、実際にコンテンツ作成するときに、重要なページ商材ページがあります。 どんな構成で作成すると良いのか? 商材自体の訴求ポイントの項目と、Webコンテンツとしての構成面と合わせて、1 …

fontAwesomeが表示されない対処方法はフォントファミリーに設定すること

このサイトなのですが、fontAwesomeという、外部サイトの情報から矢印やメール電話などアイコンを表示してくれるCSSを連携しています。 初期設定やバージョン更新でよくあるのですが、そのアイコンが …