Wordpressでjavascriptを使った時MEMO

2020年1月10日 09:41

こちらのノートはweb素人が勉強しながら備忘録として書いたもので、
できていない部分は未完と書いてありますが、あまり参考になるようなものではないかもしれません。

ご覧になる方はご理解のほどよろしくお願いします。

WordPressでJavaScriptを読み込むには、
HTMLの<head>タグ内に<script>タグを直接書き込むのではなく、
PHPを使います。

functions.phpにwp_enqueue_script()という関数を書きます。

以下のディレクトリにsample.jsを用意

サイト/app/public/wp-content/themes/テーマ名/js/sample.js
サイト/app/public/wp-content/themes/テーマ名/functions.php
に以下のコードを書き込むことでsample.jsを読み込めるようになります。

headerで読み込むと遅く感じるようなので、
footerで読み込むように選択しています。

function my_scripts_method() {
   wp_enqueue_script(
   'uranai',//スクリプトの識別名
   get_stylesheet_directory_uri().'/js/sample.js',//スクリプトのパス
   array( ),//依存スクリプト
   '1.0.0',//スクリプトのバージョン
    
 );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

私はkotei_pageと名付けた固定ページにだけ適用したかったので

if(is_page('スラッグ')){}でコードをつかって分岐させられるはず。
これ今のとこうまくいってません！なぜだろう？未完。

if( is_page( 'kotei_page' ))
{
function my_scripts_method() {
   wp_enqueue_script(
   'uranai',//スクリプトの識別名
   get_stylesheet_directory_uri().'/js/sample.js',//スクリプトのパス
   array( ),//依存スクリプト
   '1.0.0', //バージョン名
   true //スクリプトの読み込み位置（trueで/body前、falseで/head前）
 );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
}

カスタムHTMLというブロックを作って、そこにコードを書き込むことで自分で書いたhtmlのタグを書き込むことができます。

<div id="sample_id" width="400" height="300">
<img  img="" src="/img_chappie/chappie.jpg" width="200" height="100">
</div>

上のようなタグをカスタムHTMLにいれて、
id（ここではsample_id)を指定して、javascriptからいろいろいじれます。

ウィンドウを開いた時に実行したいなら
onload
以下のコードをsample.jsに書き込みます。

window.onload = function () {}//ウィンドウを開いた時に実行

ボタンをクリックしたときにsample.jsの中の関数
jikkou()を実行したいなら
onclick
カスタムHTMLに以下のタグを書き込みます。

<button onclick="jikkou()">ボタンに表示する文字</button>

例えばカスタムHTML内の01.jpg

<div id="sample_id" width="400" height="300">
<img  img="image" src="/画像フォルダ名/01.jpg" >
</div>

これを02.jpgに画像の差し替えをするなら
以下のコードをsample.js内に書いて
onclickとかonloadとかで実行する

var change_img = document.getElementById("sample_id");
   change_img.innerHTML = '<div id="sample_id"><img src="/画像のフォルダ/02.jpg" ></div>';

htmlから欲しいデータをjavascriptに読み込む

var data = document.getElementById("sample").value;//htmlからid sampleのデータを取得

html内でインプットする。idを指定すればjavascriptから先ほどのやり方でデータを取れる。

<input id="sample" type="number" value="0" style="text-align: right; ">

コーヒー飲みます。ありがとうございます。