ワードプレス上でjavascriptとhtmlを使って計算をやらせる

 

前回の投稿ではhtmlで色々計算させようと思ったのだけど、htmlだけだと色々やるのはちょっと難しそうな雰囲気。

内部リンク: ショートコードでhtmlコード利用・練習編〜四則演算導入〜

そういうわけで、今回の投稿ではjavascriptとhtmlを組み合わせて、ワードプレス上でちょっとだけ複雑な計算をやらせることを目標としたい。

ショートコードでjavascript自体が普通に動くのは確認済み。

内部リンク: htmlとjavascriptでユーザーインプットに対して文字列を返す

なので、後はjavascriptでちょっと複雑な計算を走らせる方法を調べれば良いだけだな。

ワードプレス上でjavascriptにちょっと複雑な計算をやってもらう

ってわけでJavascriptは何があるのかなーってみてたら、Mathオブジェクトでだいたい揃ってる。

うん、やりたいことやるのにこれだけで問題なさそうだな。

おお、つまりjavascript動かすテンプレ準備しちゃえば、そこそこの計算させるウェブツール作ってくのは結構楽なんだな。

ってかあっさり解決しすぎちゃってこの投稿書くことがまったく無いなー。

sinはMath.sinで計算できるよ!

なんて書いてもなあ……ああ、radiansが組み込まれてないらしいので(Math.PI/180)かける必要があるよ!

んー、いまいち。

あー、有効数字の関係かsin360度が0にならないな。そんなときは計算したところで.toFixedで出力桁数調整して解決!

さて、少し文字数も増えたしこんなもんでいっか……とりあえず下の実行例は角度を突っ込んで、角度1のサインと角度2のコサインを足し算して出力するもの。

コードのスクショ:

sinとcosの足し算

あ、日本語、ていうか全角だとバグるなこれ。英語になおしまーす。

実行例:

 

sin-angle (degree):

cos-angle (degree):

calculate sin(A)+cos(B)

 

よーっし、後は作りたかったwebツールを別投稿でつくろう!

関連記事

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

D

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

 

多言語multisite設定で子テーマが使えないなと思ってたらアホなことしてた件

 

いや、なんでこのサイト子テーマ設定しても有効化されないのかなー、ってのは昔から長年の疑問だったのだ。

多言語用にマルチサイト化してるのが原因かなって思ってたんだけど、終ぞその理由がわかることはなく放置していたのだ。

今回ある投稿用にショートコードを導入したくてfunction.phpの編集をする必要があった。それでphpファイルいじるなら、やっぱり子テーマにしたいよなー、ってことで再び子テーマ化に取り組み始めたというわけ。

 

まずは子テーマの作り方の推奨設定が以前と変わっているようなので、CSSファイルなどの記述を新しいものに直した。

それを変えても私のサイトで子テーマが反映されない事実は変わらず。

結局のところ私の問題は子テーマの記述自体じゃないのか……と諦めずもう少しウェブ検索を続ける。

日本語サイトでイマイチ理由がわかる投稿がなかったので、英語サイトに飛んでプラプラ色々眺めていたところで、ふととんでもない記述を発見する……

”……サイトネットワーク管理でテーマを変えた後で、個別サイトの設定でテーマかえんとあきまへんでー……”

 

わかった!

理・由・は!

全体サイトの設定を子テーマに変えてたけど、各言語サイトのテーマ設定を個別に子テーマにしてなかったこと!!

子テーマに設定変更したつもりで変更してなかっただけでした!!

うおー、めっちゃアホなことしてたー!!!

 

日本語サイトの編集画面でもテーマを子テーマの方に変えたら無事動きましたよ……っていう投稿でした。

 

D

[2021年8月] wordpressでテーマのphp編集ができなくなってる件

久しぶりに使っているワードプレスのテーマのアップデートをして、ヘッダーやら何やらちょっとphpをいじる必要があった。

前回やったのがだいぶ前だったから、編集場所を探すところから始めないといけなかった。

ちなみに、編集場所は……

サイトネットワーク管理>>テーマ>>テーマエディター

だった。

致命的なエラーとその対策

さて、まずはヘッダーからいじるか……と始めようと思ったらいきなり以下のエラー文。

エラー文:

致命的なエラーをチェックするためにサイトと通信できないため、PHP の変更は取り消されました。SFTP を使うなど、他の手段で PHP ファイルの変更をアップロードする必要があります。

私の対策:

はい。大人しくSFTPでファイル編集しました。

エックスサーバー上での編集場所:

契約してるレンタルサーバーのエックスサーバーにログインして編集。

ログインしたメイン画面からファイル管理>>ファイルマネージャータブが開く

ウエブサイト名>>public_html>>wp-content>>themes>>テーマの名前

てな感じで各種phpファイルが見つかる。

直接編集もできるし書き換えのアップロードもできる。

ウェブに書いてあったけどやらなかったその他の対策:

ワードプレスのアップデート –> 既に最新

phpのアップデート –> 既に推奨バージョン

レンタルサーバー会社のWAFの問題 –> 余り知識は無いけど特にこれの問題はなさそうに見えた。

file.phpの編集  –> これでワードプレス上で編集できるようになるらしいけど、手間がftp編集するのと変わらない

 

という感じでした。まあそのうちワードプレスの方で編集できるようにアップデートされるんじゃないかな……と思うけれど、さてどうなることでしょう。

D