WordPressでブックマークレットのアンカーリンクが消失する件

とある記事をWordPressで書いている最中に、ブックマークレットを記事本文に盛り込む必要があったのです。

なので、テキストモードにしてhref属性にJavaScript 入力してビジュアルエディタに戻ったのですが、なぜかリンクとして機能していない…

えっ、なんで？

ちょっとfunctions.phpを編集しなければならない案件だったので、回避方法を紹介します。

functions.phpのカスタマイズ

回避方法は単純です。

簡単にいうと、ブックマークレットを記述する用のショートコードを用意してしまえばいいのです。

以下のコードを使用中テーマ・子テーマのfunctions.phpに追加してください。

function crr_sc_ankerlink($atts,$content=null) {
    extract(shortcode_atts(array(
        'text' => "",
    ), $atts));
  $html=htmlspecialchars($content, ENT_NOQUOTES, 'UTF-8');
  $content=html_entity_decode($content);
  
  $content=trim($content);
  $content=trim($content,'</p>');
  $content=trim($content);
  $content=trim($content,'<p>');
  $content=trim($content);
  $content=trim($content,'</p>');
  
  $serach=array('‘','’','′');
  
  $content=str_replace($serach,'\'',$content);
  return "<a href=\"{$content}\">{$text}</a>";
}
add_shortcode('a', 'crr_sc_ankerlink');

これでブックマークレット用のショートコードが完成します。

ショートコード名は「a」1文字ですが、1文字ショートコードを使用するテーマやプラグインを見たことがないので被ってしまうことはないでしょう。

ブックマークレットを記述する際は以下のように入力します。

[a text="ブック"]
javascript:alert('ブックマークレットだよ'); 
[/a]

使い方は簡単で、ショートコードのtext属性に、リンクテキストを。そして、ブックマークレットのプログラムをショートコードで囲みます。

これだけで勝手にプログラム部分が消されないブックマークレットのリンクを貼り付けることができます。

エディタのビジュアルモードで上記のショートコードを追加できるので、わざわざテキストモードに切り替える必要がありません。

勝手に挿入されてしまうpタグ対策も施している(結構ゴリ押しですが)ので、見やすくするために改行を入れても大丈夫ですよ。