その他

WordPressの特定記事内でJavaScriptを用いるまでの手順[No60]

スポンサーリンク

元々はHTMLと外部JSファイルを用いていたページを、WordPress内でも実現させるために行ったことを備忘録として残しておきたいと思います。

no image
パスワードの暗号化・復号化ツール
処理はすべてクライアント側（ホームページに訪れた利用者側）で行われております。 自身のコンピュータにツールを作成する方法は下の関連記事で紹介しています。 １．パスワードの暗号化 パス ...

手順

１．外部JSファイル（外部JavaScriptファイル）を「WordPressのテーマフォルダ内のfunction.php」の階層以下に配置する。
　※ここではテーマフォルダ内の「js」フォルダ内に「testjs.js」を配置する。
　※外部ファイル内では<script></script>のscriptタグで囲まない。


function funname(){
	var var01 = ・・・;
	・・・
}

２．外部CSSファイルを「WordPressのテーマフォルダ内のfunction.php」の階層以下に配置する。
　※ここではテーマフォルダ内の「css」フォルダ内に「testcss.css」を配置する。


@charset "UTF-8";

タグ名 {
	・・・
}

３．子テーマのfunction.phpに以下を記載する。※function.phpは記述ミスすると不具合が発生する場合があるため、バックアップ必須。
　※get_template_directory_uriは親テーマで使用し、get_stylesheet_directory_uriは子テーマで使用する。


/*********************************
JS/CSSの読み込み
**********************************/
function my_enqueue_scriptstyle() {
	//指定固定スラッグでのみ表示
	if (is_page('記事のURLスラッグ')) {
		wp_enqueue_script('testjs', get_stylesheet_directory_uri() . '/js/testjs.js', array(), 'v1.0.0', true );
		
		wp_enqueue_style('testcss', get_stylesheet_directory_uri() . '/css/testcss.css', array(), 'v1.0.0', 'all' );
	}
}

add_action('wp_enqueue_scripts', 'my_enqueue_scriptstyle');

４．反映したら、正常に反映できたかどうか確認する。その記事を開いて、「ページのソースを表示」（Chrome使用）から、function.phpに記載したJS・CSSファイルが読み込まれているかどうかを確認する。Ctrl+Fキーで検索すると早く確認することができる。

５．指定した記事以外の記事では、function.phpに書いたJSファイル、CSSファイルを読み込んでいないことを確認する。

６．WordPressの記事編集画面で、HTMLエディタを利用してHTMLを記載する。INPUTタグ、BUTTONタグなどを記載する。※onclickも利用可能。

参考サイト

条件分岐については下記リンク先の記事が参考になるのでおすすめです。

条件分岐タグ - WordPress Codex 日本語版

雑記

昨日は敬老の日でしたね。

1947年に兵庫県多可郡野間谷村で始まった「としよりの日」という、お年寄りを敬い、その知恵を借りて村を作るために提唱された行事が現在の敬老の日のルーツと言われています。１つの村で生まれた「お年寄りを大切にしよう」という人々の心が全国に広まっていった結果、全国的に知られ、祝日とされたと思うと凄いことだなと思います。

現在の敬老の日は、お年寄りを敬い、長寿をお祝いする日として知られています。

まだまだコロナが収束するまで時間がかかってしまいそうですが、おじいさんやおばあさんに直接会いに行けなかったとしても、テレビ電話で顔を見ながら話したり、手紙やプレゼントを贈ったり、各ご家庭によってできることは様々あると思います。敬老の日当日は過ぎてしまいましたが、敬老の日やこの記事を読んだことなどを１つのきっかけとして、身近なお年寄りに優しくできる人が１人でも多くなったらいいなと思います。

最後までお付き合いいただきありがとうございます！

この情報が誰かの役にたてれば幸いです。

スポンサーリンク

-その他