WP Thumbnail Linkbox Shortcodeの特長

* ブックマークレットにより、リンク先のURL、タイトルをワンクリックで取得し、ショートコードで出力します。
* リンク先のサムネイルも自動的に表示できます。

こんなリンクを生成できます

このように、サムネイル付きのリンクを作成できます。

インストール

WordPressの管理画面「プラグイン」->「新規追加」で、「WP Thumbnail Linkbox Shortcode」を検索し、インストールして、プラグインを有効にしてください。

ブックマークレットの登録

このプラグインでは、ブックマークレットを使ってショートコードを作成します。プラグインインストール後には、ブラウザのブックマークバーに、このブックマークレットを登録してください。

WordPressの管理画面「設定」->「WP Thumbnail Linkbox」で、設定画面が開きます。

設定画面内「使い方」の欄に「WP Thumbnail Linkbox Shortcode」というリンクがあります。これがブックマークレットです。このブックマークレットをお使いのブラウザのブックマークバーにドラッグ&ドロップして登録します。

登録が完了すると、「WP Thumbnail Linkbox Shortcode」という名前のブックマークレットが、ブラウザのブックマークバーに表示されます。

ショートコードについては、後述します。

基本的な使い方

ここではWordPressのページ(http://wordpress.org)のリンクを作成する手順を紹介します。

まず、WordPressの記事作成ページとは別のタブ、または別ウインドウで、作成したいリンク先のページ(http://wordpress.org)を開きます。

次に、そのページを表示した状態で、先程のブックマークレットを実行(クリック)します。

ブックマークレットを実行すると、ダイアログボックス内にショートコードが生成されます。

これをコピーしてWordPressの記事内にペーストします。今回はこのようなショートコードが生成されました。↓↓

[link href="https://wordpress.org/" title="Blog Tool, Publishing Platform, and CMS — WordPress"]

ペーストした場所にリンクが作成されます。↓がサンプルです。

基本的な使い方は以上です。以下、設定方法などをまとめます。

設定画面で設定する

設定画面で行った設定は、作成したリンク全てに適用されます。

WordPressの管理画面「設定」->「WP Thumbnail Linkbox」で、設定画面が開きます。

スタイルシートについて

生成されるリンク用のスタイルシートが読み込まれていますので、そのまま使うことができますが、スタイルを自分でカスタマイズしたい場合は「デフォルトのCSSを使わない」にチェックを入れてください。デフォルトのCSSが無効になりますので、ご自分のスタイルシートにてカスタマイズすることができます。

リンクのターゲット属性について

「ターゲット属性の値」では、aタグに付与する「target=””」の値を設定できます。「_blank」を選んだ場合は、aタグに「target=”_blank”」が付与されます。また、ここで設定したターゲットは、全てのリンクに反映されます。

また、ショートコードのターゲットで値を渡すこともできます。この時、最初のアンダースコアは不要です。

例)

[link href="○○" title="○○" target="blank"]

また、設定ページで「_blank」を選んでいて、個別にターゲットをなしにしたい場合は以下のようにtarget=”none”を指定します。

[link href="○○" title="○○" target="none"]

取得するサムネイルのサイズについて

当プラグインでは、リンク先のページのサムネイルを自動生成します。この時取得するサムネイルのサイズを設定で変更できます。

サムネイルの横幅

「取得するサムネイルの横幅(px)(正の整数)」に、取得するサムネイルの横幅を入力します。入力がない場合はデフォルト値80が適用されます。

サムネイルの高さ

高さについては、横幅の比率で設定します。「横幅の比率(正の整数または小数)」に、縦幅に対する横幅の比率を入力します。

例1)

横幅が80の時「2」を入力した場合、縦幅に対して横幅の比率が2となり、取得する画像サイズは「80×40」となります。

例2)

横幅が80の時「0.5」を入力した場合、縦幅に対して横幅の比率が0.5となり、取得する画像サイズは「80×160」となります。

数値変えてもサムネイルサイズが変わらないんですけどー

紛らわしくて恐縮ですが、ここで設定できるサイズとは、あくまで「(自動で)取得するサムネイルのサイズ」となります。表示サイズではありません。;

表示サイズは、デフォルトのCSSによって横幅80pxに設定されています。表示サイズを変更するには、スタイルシートも編集する必要があります。ご了承ください。

補足

環境によっては、取得サイズが自動的に2倍になることがあります。僕の環境、

MacBook Pro (Retina, 13-inch, Early 2015)、Safari10.0.2では、取得サイズが自動的に2倍になります。

ショートコードによる設定

ショートコードでもいくつかの設定をすることができます。ショートコードによる設定は、設定画面の設定値より優先されます。

ショートコードで使える変数

href 文字列 リンク先のURL。ブックマークレットによって自動的に生成されます。
title 文字列 リンクのタイトル。ブックマークレットによって自動的に生成されます
show_domain bool(0 or 1) リンクに、リンク先のドメインを表示するかどうか。非表示にする場合は 0を渡します。
target 文字列 リンクのターゲット属性の値。アンダースコアは不要。(例: blank)
width 数値(自然数) 取得するサムネイルの横幅。前述のとおり、「表示サイズ」ではなく「取得する画像のサイズ」です。
ratio 数値(0以上の整数または小数) 取得するサムネイルの、縦幅に対する横幅の比率。

ショートコードのカスタマイズ例

[link href="https://wordpress.org/" title="Blog Tool, Publishing Platform, and CMS — WordPress" show_domain="0" target="blank" width="100" ratio="1.618"]

  • リンク先: https://wordpress.org
  • リンクのタイトル: Blog Tool, Publishing Platform, and CMS — WordPress
  • リンク先のドメイン: 表示しない
  • ターゲット属性の値: _blank
  • 取得するサムネイルの横幅(px): 100px
  • 取得するサムネイルの、縦幅に対する横幅の比率: 1.618倍