ボタンクリックで指定アドレスを開くWordPressショートコードを作成したい

Question

前提・実現したいこと

WordPress環境下でショートコードを用い
HTMLで配置したボタンをクリックしたら
エディットボックスに書かれているアドレスをブラウザの別タブで開きたいです。

－－－－HTMLでの表示イメージここから

－－－－HTMLでの表示イメージここまで

後述した、ソースコードを実装しましたが期待通りの動作になりませんでした。
（同じタブで、現在表示しているページがリロードされるだけでした）
不備や問題点があればご教示ください。

発生している問題・エラーメッセージ

特にエラーコードは出力されませんが
該当ソースコードの実装をして、ボタンをクリックしても指定アドレスを開くことができませんでした

該当のソースコード

■HTML

<form name="searchRoot"> <label><input type="text" name="adrs" value=""></label> <button onClick="window.open([test arg01=searchRoot.adrs.value];, '_blank')">開くボタン</button><br> </form> ※HTMLでエディットボックス、ボタンを配置し、ショートコードの呼び出しを実現したい部分

■PHP(WordPressの子テーマのfunctions.phpに記述)
function test($atts) {
echo $atts[0];
}
※ショートコード呼び出しで設定された引数を出力する
add_shortcode('test', 'test');

試したこと

前述のソースを実装し、ボタンをクリックする

補足情報（FW/ツールのバージョンなど）

WordPress：5.8
PHP：7.4.2

Answer 1

ご返答ありがとうございます。

まず、デベロッパーツールで確認した際のコードについてですが、[test arg01=searchRoot.adrs.value]がそのまま残っていますので、ショートコードが変換されていない状態です。
これはセキュリティー等のため特定のhtmlタグや、属性内ではショートコードを変換しないようになっているためです。
解決策は後述します。

htmlの記載場所については「カスタムHTML」ブロックということで正しくjsも動いているようです。
onclickが動かないというのはクラシックエディターで考えておりましたため、忘れてください。
またphpファイル内でもないので<?php do_shortcode('[xxxxx]'); ?>の話も忘れてください。

<code>機能については言葉足らずですみません、teratailへの投稿の際の話です。
<code>機能を使うことでコードの色付けとインデントが反映されるので見やすくなります。

下記の部分を反映いただけば直るのではないかと思います。
1.ショートコードの作成はreturnを使う
2.ショートコードの変換を許可する処理を追加
3.htmlのセミコロンを取る

//functions.php内

function test($atts) {
	// echo $atts['arg01'];
	return $atts['arg01'];//1.echoではなくreturnにする
}
add_shortcode('test', 'test');

//2.追加 <button>のonclick属性内でのショートコード変換を許可する
function my_wp_kses_allowed_html( $tags, $context ) {
	$tags['button']['onclick'] = true;
	return $tags;
}
add_filter( 'wp_kses_allowed_html', 'my_wp_kses_allowed_html', 10, 2 );

//3.ショートコード直後の;(セミコロン)を削除
<form name="searchRoot">
<label><input type="text" name="adrs" value=""></label>
<button onClick="window.open([test arg01=searchRoot.adrs.value], '_blank')">開くボタン</button><br>
</form>

Comments

[eco]

webgotoさん

ご回答ありがとうございます。

コメントいただいた内容で、目的を達成することができました。
wp_kses_allowed_html関数、code機能など知らなかった情報が多くあり
色々と参考になり大変助かりました。

以上です、よろしくお願いいたします。

Answer 2

問題解決のためにブラウザのデベロッパーツールを使用して、ボタン要素のソース部分が想定の形式になっているか確認されることをおすすめします。
デベロッパーツールの表示方法はブラウザにより多少異なりますが、要素上で右クリックしてメニューの「検証（調査?）」押すと表示されると思います。

現時点でわかる事としては、test関数の引数の使い方がおかしいと思います。

function test($atts) {
// echo $atts[0];誤り
echo $atts['arg01'];
}

また、このHTMLコードはどこで使用されているのでしょうか。
wordpressの投稿エディター内ではボタンのonclickは使えない気がしますし、
phpファイル内ならショートコードの使用に<?php do_shortcode('[xxxxx]'); ?>が必要かと思います。

あとコードを記載される時は、<code>機能を使うようにされたほうが良いと思います。

Comments

[eco]

webgotoさん

ご回答ありがとうございます。
すみません、説明が不十分でしたので
コメントいただいた内容に対して回答させていただきます

＞現時点でわかる事としては、test関数の引数の使い方がおかしいと思います。
指摘いただいた内容を修正のうえ、以下の内容を確認いたしました

＞問題解決のためにブラウザのデベロッパーツールを使用して、
＞ボタン要素のソース部分が想定の形式になっているか確認されることをおすすめします。
＞デベロッパーツールの表示方法はブラウザにより多少異なりますが、
＞要素上で右クリックしてメニューの「検証（調査?）」押すと表示されると思います。
ブラウザはedgeを使用しています
開発者ツールでエディットボックスとボタンを展開してみたところ以下のようになっていたので
－－－
<form name="searchRoot">
<label><input type="text" name="adrs" value="http://www.yahoo.co.jp"></label>
<button onclick="window.open([test arg01=searchRoot.adrs.value];, '_blank')">開くボタン</button><br>
</form>
－－－
期待通りにはなっていました。

ただ、以下の処理の
<label><input type="text" name="adrs" value=""></label>
<button onclick="window.open([test arg01=searchRoot.adrs.value];, '_blank')">開くボタン</button>

ボタンを押したときに実行されることを想定している
window.open([test arg01=searchRoot.adrs.value];, '_blank')
の以下だけを抜き出して実行したところ
[test arg01=searchRoot.adrs.value];

結果は
editボックスにhttp://www.yahoo.co.jpとした状態でも
searchRoot.adrs.valueが出力されていたため
ショートコードへの引数受け渡しがうまくいっていないように見えました

このポイントでなにか情報があればご教示ください

＞また、このHTMLコードはどこで使用されているのでしょうか。
HTMLのコードはWordpressの投稿エディタの「カスタムHTML」に記述しています

＞wordpressの投稿エディター内ではボタンのonclickは使えない気がしますし、
目的とする機能は、以下の機能を組み合わせたものであるため
（１）ボタンを押したら、ブラウザの別タブで指定のアドレスを開く
（２）ショートコードを実行する
個別の動作確認を行っています

（１）は以下のコードは想定通り動作したのでonclickは「カスタムHTML」ないでは使えると考えています。
－－－－
<form>
<button type="“button”" onclick="window.open('http://www.yahoo.co.jp', '_blank'); return false;">検索</button>
</form>
－－－－

（２）については、以下の指摘に関連しますが
＞phpファイル内ならショートコードの使用に<?php do_shortcode('[xxxxx]'); ?>が必要かと思いま

■functions.phpに以下の関数を追加し

<?php

function test() {
return "http://www.yahoo.co.jp";
}
add_shortcode('test', 'test');

?>

■「カスタムHTML」にショートコード呼び出しを記述
[test]

これで投稿をブラウザで開いた際に
http://www.yahoo.co.jpが表示されることまでを確認しております。

＞あとコードを記載される時は、<code>機能を使うようにされたほうが良いと思います。
これはHTMLの<code>タグのことでしょうか
今回は、できればですがショートコードで機能を実現したいので
ショートコードの対応を考えさせてください