その他

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

投稿日:2020年9月22日 更新日:

スポンサーリンク

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

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

手順

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


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

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


@charset "UTF-8";

タグ名 {
	・・・
}

3.子テーマの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');

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

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

6.WordPressの記事編集画面でHTMLエディタを利用してHTMLを記載。INPUTタグ、BUTTONタグなどを記載。onclickも利用可能でした。

参考サイト

条件分岐について

https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0

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

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

スポンサーリンク

タグ

-その他

© 2021 BookALittle