ショートコードのlocation.hrefが動作しない

Question

###前提・実現したいこと
お世話になります。wordpressで特定のwebページを開くボタンをショートコードで作成したいと考えています。

###発生している問題・エラーメッセージ
Wordpressでショートコードをfunctions.phpに追記し、特定のページを開くボタンを作成したいと考えています。

ショートコードを記事に挿入すると「googleはこちら」ボタンは表示されますが、クリックしても反応がありません。初歩的な質問で大変心苦しいのですが、ご教示願います。

###該当のソースコード

function googlepage() {
    return '<input type="button" value="googleはこちら"
	onclick="location.href="http://google.com""
style="margin-left:15px;">';
}
 
add_shortcode('google', 'googlepage');

Comments

[退会済みユーザー]

なぜ、アンカータグではなく、location.href を使用するのでしょうか？全体像が見えないので、もう少し詳しくお願いいたします。ショートコードをどこで、どのタイミングで使用するのかなども。

[tcmkzak]

ショートコードをWordpressの記事本文中に挿入し、ボタンをクリックすると外部サイトに飛ぶようにしたいと考えていました。本文中に直に書くと、wordpressの投稿画面のビジュアルエディタとテキストエディタを切り替えた際に、onclickのコードが消えてしまうためです。

他の回答者様のおかげで解決いたしました。ご質問ありがとうございました。

Answer 1

onclick="location.href="http://google.com""となっていますが、二重引用符同士が重なっているのでうまく行きません。

onclick="location.href=\'http://google.com\'"とすれば、うまく動くはずです（外側のPHP→HTML属性→JavaScriptと3段階になっているので、引用符2種類だとまかないきれません）。

…もっとも、状況によっては<a>タグにスタイルをかけてボタンのように見せかける、という方がいいかもしれません。

Comments

[tcmkzak]

maisumakun様、非常にわかりやすくご説明いただきましてありがとうございました。ベストアンサーとさせていただきました。今後ともよろしく御願いいたします。

Answer 2

"で囲んだ文字列の中で"を使うなら円マークでエスケープしてやる必要があります。
しかし、そもそも'で囲んだ文字列であるため、いろいろとエスケープするのに面倒です。
なので、以下のように、buttonが実行するonclickを更に別メソッドに分離してやるほうが楽だと思います。

function gotogoogle() {
	location.href="http://google.com";
}
function googlepage() {
    return '<input type="button" value="googleはこちら" onclick="gotogoogle()" style="margin-left:15px;">';
}

Comments

[tcmkzak]

masaya_ohashi様、ご回答ありがとうございました。勉強になります。