ちょっとやりたいことが幾つかあってそのためにウェブサイト用の言語を学んでおきたいなと思っている今日このごろ。
よく使われてそうな言語はhtml、css、javascript、それにphpって感じか。
ざっと見た感じ、htmlがウェブを作るので、cssがデザイン、javascriptで動かして、phpで便利化するって感じなのかしら。
wordpressはphpでってイメージが強いけど、結局全部使わないとまともな見た目と動作にはならないってことかな。ちょっとずつ全部勉強しながら必要なものを深く学ぶ感じで良さそう。
しかしjavascriptとphpでできることの差がよくわからないな。
wordpressの編集内で簡単に走らせようと思ったらjavascriptの方が良いのか。phpはfunction.phpを書き換えないといけなさそう。
ま、もちろん、そんな簡単にわかるわきゃないので、追々でいっか。
ワードプレス投稿内でhtmlで遊んでみる
まあとりあえずはワードプレス内で遊びながら学んでいこうということで……
テキストモードで打ち込んでそのまま動きそうなのはhtmlとjavascriptっぽいけどとりあえずhtmlで。
まずは……
htmlで入力ボックスの作製。ビジュアル編集ではなく、テキスト編集の方で……
<input type="text">
と書くだけ。
説明を入れたかったら……
<label>テスト入力：<input type="text" value="見えるかな？"></label>
という感じ。
もう少しそれっぽいのを作ると。
<p>
<label>数値1を入力してください：<input type="number" value=0 id="num1"></label>
</p>
<p>
<label>数値2を入力してください：<input type="number" value=0 id ="num2"></label><input type='button' value="get" id="getButton">
</p>
getはダミー。
そしたら、こんな感じで足し算でもしてみましょうか。
<form oninput="result.value = Number(A.value)+Number(B.value)";>
<input type="number" name="A" > +
<input type="number" name="B" > =
<output name="result">0</output>
</form>
ぬ……これだと動かないな。なぜだ。あ、テキストモードからビジュアルモードに戻ると、oninputのところが消えてしまうな……なぜだ。
色々追加。
<html>
<body>
<form oninput="result.value = Number(A.value)+Number(B.value)">
<input type="number" name="A" > +
<input type="number" name="B" > =
<output name="result">0</output>
</form>
</body>
</html>
こういうタグ付けは意味なさげ。やっぱり単純に<form>のところの記述が消えちゃうのが問題っぽい。
ていうかhtmlテストサイトで試すと普通に動くし……ってことはwordpressに書き込めない方の問題か。
<form>
<input type="number" name="A" > +
<input type="number" name="B" > =
<output name="result">0</output>
<input type="button" onclick="result.value = Number(A.value) + Number(B.value);" value="calc">
</form>
これもだめね。onclickの記述が消えてしまう。つまりoninputとかonclickが私の環境のwordpressで動いてないってことか。
結局のところhtmlのoninputとかonclickが通常設定では使えない模様
ここまで来て何個かそれっぽい説明をしてるstackoverflowを発見。
やはりoninputとかonclickが、使ってるテーマかwordpressかで止められている感じか。function.phpを書き換えればいけるってことのようだけど。
それからショートコードを使えばいけるかも……なんて記述もあったので、次はそれを試してみようかな。
んー……でもなんだか最終的に目的にしてるものを実装するには、この書き方だと難しい気がしてきたな。どうせhtml, javascript, php勉強するなら、自作サイトを立ち上げたほうが良い気がしてきた……
関連記事
1. ウェブサイト制作系お勉強のまとめ
D
