Wordpressでjavascriptを使った時MEMO
こちらのノートは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; ">
コーヒー飲みます。ありがとうございます。