wordpressにショートコードでhtmlコードを導入してみよう

 

前回の投稿でワードプレスのテキストモードではonclick、oninputなどの機能が通常設定のままでは使えないことがわかった。

内部リンク:ウェブサイトの言語周りについてお勉強を始めよう in Finland!

ウェブサーチで見つけた一つの解決策はショートコードの機能を使う方法。今回の投稿ではショートコードでhtmlを走らせることを目的とする。

wordpressのショートコードの使い方

公式ページは以下のリンク。Developerの方のリンクを貼っとくけど、codexの方にもある。

外部リンク:WordPress API Shortcode

編集する必要があるのはfunction.php。ってやっぱりwordpressで何かしようと思うとfunction.phpをいじる必要が出てくる模様。

function add_text() {
$code = 'this is shortcode test for showing text';
return $code;
}
add_shortcode('addt','add_text');

function.phpに書き加えたのはとりあえずこんな感じ。

んでaddtを[]で囲むとショートコードが使えることになる。

アウトプットは以下のような感じ。

this is shortcode test for showing text

よくできました、ちゃんちゃん……っておしまいにしたいところだけど、もう少し続く。

ショートコードならばhtmlのoninputやonclickは動く仕様

さて、本題はこちら。

html直接打ち込むとテーマ設定か何かに蹴られて使えなかったoninputをワードプレスブログで動かしたい。

oninputのコードから作ったショートコードはこちら。

+ = 0

おお、動いたっ!

onclickはどうだろうか?

onclickのコードから作ったショートコードはこちら。

+ = 0

こっちも動いたっ!

ってことで無事ワードプレスのブログ内でユーザーインプットを受けて、ちょっと処理して出力するってことができました。

で、なんでコードを貼らないんだってことなんだけど……整形済みテキストでコードを近くに貼るとなぜかショートコードの方が動かなくなる変なバグがある。

というわけで一応スクショをここに貼っておくけれど、htmlコードをコピーしたかったら内部リンク:ウェブサイトの言語周りについてお勉強を始めよう in Finland!)を見て欲しい。いやコピーするほどのものじゃないけどさ。

しかし、これ毎回sftpでhtml直編集しないといけないってのがかなり面倒くさいな。ワードプレス内でテーマのphp編集できなくなってるのも解決するべきだろうか……

関連記事

1. ウェブサイト制作系お勉強のまとめ

D

 

ウェブサイトの言語周りについてお勉強を始めよう in Finland!

 

ちょっとやりたいことが幾つかあってそのためにウェブサイト用の言語を学んでおきたいなと思っている今日このごろ。

よく使われてそうな言語は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