タグ: wordpress

 

前回の投稿でワードプレスのテキストモードでは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