この記事を読むのに必要な時間は約 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つのウィンドウで記事を書き上げる。 (保存系ボタン押せなくなっている)
- エディタをテキスト表示し、全部コピーする。
- 投稿一覧など別なウィンドウで記事編集画面を開きなおす。
- 急いで、コピーした内容を貼り付ける。
- すぐに保存する。
iframe を利用していたせいなのか、記述に誤りがあるのか、何なのか原因が不明ですが、一応記載しておきます。
まとめ
WordPress で ブックマークレットを載せるための方法を、3つご紹介しました。
いずれの方法でも可能だと思いますが、管理人としては、方法3. をオススメ致します。
やはり、記事と一体となって見せられる方が、読者にとって見やすいからです。
後は、iframe 等を使いこなすことができれば、よりキレイに見せられると思うので、その辺り勉強したいと思います。いずれ、ですが…。
今回は以上です。