WordPress でも Bookmarklet を載せるための3つの方法 [WordPress Tips]

この記事を読むのに必要な時間は約 8 分です。

当サイトも WordPress を利用していますが、WordPress では通常ブックマークレットを載せられません。その解決策を3つご紹介したいと思います。ちなみに、管理人のおすすめは、方法3. です。

 

問題 : WordPress では Bookmarklet を載せられない

WordPress では、Bookmarklet をそのまま載せることができません。

Bookmarklet は、リンクの形式で、リンクの中身が javascript になっているものが通常ですが、Wordpress ですと、テキストモードで直接入力しても、保存した際に javascript が削除されてしまい、中身のないリンクとなってしまいます。

おそらく、セキュリティ的な理由などなのかなぁ?という感じですが、理由はちゃんと調べていません。

 

対応方法

「Wordpress で ブックマークレットを載せるための方法」と言えるか厳しいものもありますが、ご容赦下さい。

  • 方法1. 読者に、手動でブックマークを追加・編集してもらう。
  • 方法2. html ファイルにブックマークレットを記載しておき、html ファイルをリンク。
  • 方法3. ブックマークレット用 html を iframe で記事中に読み込む。

 

方法1. 読者に、手動でブックマークを追加・編集してもらう。

読者の方に、ブックマークを追加してもらい、編集でブックマークの URL をブックマークレットのコードに書き換えてもらいます。

確実な方法ではありますが、以下のメリット / デメリットがあります。

  • メリット
    • 投稿者は、html ファイルの作成、アップロード等の手間は不要となる。
    • 投稿者にとって、記事内で内容が完結するため、管理・メンテナンスは楽である。
  • デメリット
    • 読者にしてもらう操作が多くなってしまう
    • 読者がコードをコピペミスしてしまう可能性がある。
    • 投稿者は、上記の説明のため、丁寧なガイドが必要となる。

 

方法2. html ファイルにブックマークレットを記載しておき、html ファイルをリンク。

ブックマークレットを記載した html ファイルを用意し、コンテンツとしてアップロードしておき、記事では html ファイルへのリンクを記載する方法です。

  • メリット
    • 読者は、ブックマークを手動で編集等といった手間が不要である。
    • 投稿者は、ブックマークレット用の html ファイルのアクセス集計等を行うことができる。
  • デメリット
    • 読者は、リンク先に移動する手間が必要となる。
    • 読者は、記事とリンク先とで、見た目が異なることに戸惑いを覚える可能性がある。
    • 投稿者は、用意するhtml ファイルに、それなりに手動で書かないといけない。wordpress が自動生成してはくれないので。
      (ヘッダタグとか meta タグとか、アクセス解析用のコードとか)
    • 投稿者は、記事とは別に html ファイルの管理・メンテナンスが必要となる。

 

方法3. ブックマークレット用 html を iframe で記事中に読み込む。

ブックマークレット用の html を用意することは、方法2. とあまり変わりませんが、それを iframe タグを利用して、記事中に埋め込んでしまうことができます。こうすると、記事内に表示することができます。こちらの記事で実際に利用しています。

iframe タグとして、以下のように利用しています。ちゃんとカスタマイズすれば、もっとかっこよく載せられると思います。src 属性で読み込む html の URL を指定します。移転する場合に備えて、ドメインは外しています。

<iframe src="/wp-content/uploads/bookmarklet.html" style="width:100%; height:2em; border:1px; ">インラインフレームを利用しています。</iframe>

読み込む html には、本当に最低限の <a>~</a> しか記載していません。日本語を書く場合には、文字化けしないよう、文字コードの指定は必要だと思います。

 

  • メリット
    • 読者にとって、記事内で見る・ブックマークに追加することができるので、手間が最も少ない
    • 読者にとって、記事内に表示されるため、違和感が最も少ない
    • 投稿者にとって、最低限の html の作成で済むため、手間が最も少ない。
    • 投稿者にとって、使用方法の説明が少なく済む。
  • デメリット
    • 投稿者にとって、ブックマークレット用 html ファイルの個別のアクセス集計などはできない。
    • 投稿者にとって、記事とは別に html ファイルの管理・メンテナンスが必要となる。

 

ただし、未検証の注意事項ですが、iframe を利用したブックマークレット記事を書いていたところ、Wordpress がバグって、「下書き保存」「プレビュー」「公開」といった記事保存系のボタンが、時間がたつと押せなくなってしまう事象が発生しました。

記事編集画面を開いてすぐは、ボタンを押せるので、以下のように何とか回避して公開できました。はっきりいって、アホみたいに面倒です。

  1. 1つのウィンドウで記事を書き上げる。 (保存系ボタン押せなくなっている)
  2. エディタをテキスト表示し、全部コピーする。
  3. 投稿一覧など別なウィンドウで記事編集画面を開きなおす。
  4. 急いで、コピーした内容を貼り付ける。
  5. すぐに保存する。

iframe を利用していたせいなのか、記述に誤りがあるのか、何なのか原因が不明ですが、一応記載しておきます。

 

まとめ

WordPress で ブックマークレットを載せるための方法を、3つご紹介しました。

いずれの方法でも可能だと思いますが、管理人としては、方法3. をオススメ致します。

やはり、記事と一体となって見せられる方が、読者にとって見やすいからです。

後は、iframe 等を使いこなすことができれば、よりキレイに見せられると思うので、その辺り勉強したいと思います。いずれ、ですが…。

 

今回は以上です。


 

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です