Pickupニュース

WordPressに他サイトの文章を引用する方法
WordPress

WordPressに他サイトの文章を引用する方法

ショートコードとブックマークレットで簡単に
他サイトから文章を引用する際には<blockquote>タグを使用し、サイト名とURLリンクを記載するのがルールです。しかし、毎回コードを書くのは面倒なので、これをショートコードとブックマークレットを使って少しでも簡便に使えるようにしてみます。

ショートコードの設定

引用ショートコード

titleurlを引数に、contentを引用文章として<blockquote>タグで囲むショートコードを記述します。
引用ショートコードの設定
[blockquote url=”{引用先サイトURL}” title=”{引用先タイトル}”]{引用文章} [/blockquote]

PHPの記述

PHPCopy
function site_blockquote($atts, $content = null){ extract(shortcode_atts(array( 'url' => '', 'title' => '' ), $atts)); return '<blockquote cite="'.$url.'">'.$content.'<a href="'.$url.'" class="blockquote-source">'.$title.'</a></blockquote>'; } add_shortcode('blockquote', 'site_blockquote');

ブックマークレットの設定

ブックマークレットはこちらのサイトを参考にして、ショートコード用にカスタマイズさせて頂きました。
引用元<blockquote></blockquote>タグを自動生成するブックマークレット選択したテキスト部分のみ | WordPressデビュー津々浦々

引用ブックマークレット

下記コードをブックマーク(お気に入り)にドラッグ&ドロップして登録して下さい。

これで、サイト中のテキストを選択して、ブックマークボタンをクリックすれば、画面上部に引用ショートコードが表示されますので、コピーしてご利用下さい。

ブックマークレットのJavaScript

一応、JavaScriptのコードも掲載しておきます。
JavaScriptCopy
javascript:(function()%7B!function(e)%7Bfunction%20t(e)%7Breturn(e%2B%22%22).replace(%2F%26%2Fg%2C%22%26amp%3B%22).replace(%2F%3C%2Fg%2C%22%26lt%3B%22).replace(%2F%3E%2Fg%2C%22%26gt%3B%22).replace(%2F%22%2Fg%2C%22%26quot%3B%22)%7Dvar%20r%2Co%2Cn%3D%22%22%2Bt(window.getSelection())%3Bn%26%26(e.body.insertBefore(r%3De.createElement(%22textarea%22)%2Ce.body.firstChild)%2Cr.value%3D%27%5Bblockquote%20url%3D%22%27%2Blocation.href%2B%27%22%20title%3D%22%27%2Be.title%2B%27%22%5D%27%2Bn%2B%27%5B%2Fblockquote%5D%27%2Cr.style.width%3D%22100%25%22%2Cr.style.resize%3D%22vertical%22%2Cr.focus()%2Cr.select())%2Ce.getElementById(%22credit%22)%7C%7C(o%3De.createElement(%22p%22)%2Co.id%3D%22credit%22%2Co.style.textAlign%3D%22center%22%2Co.innerHTML%3D'%3Chr%3E%3Ca%20href%3D%22%2F%2Fgoo.gl%2FFHjRhk%22%20target%3D%22_blank%22%3Eb.0218.jp%3C%2Fa%3E'%2Ce.body.appendChild(o))%7D(document)%7D)()

デモ

See the Pen blockquote by JaSTIN (@JaSTIN) on CodePen.24295

おススメのChrome拡張

ブックマークレットを右クリックメニューから実行出来るChrome拡張機能「SpellBook」をおススメします。

リンク先のCHROME に追加をクリックしてChromeに追加します。

Webサイト

おまけ

引用先のリンクタイトルにファビコンを追加してみます。

PHPの修正

PHPCopy
function site_blockquote($atts, $content = null){ extract(shortcode_atts(array( 'url' => '', 'title' => '' ), $atts)); $icon = '<img class="favicon" src="http://www.google.com/s2/favicons?domain='.$url.'">'; return '<blockquote cite="'.$url.'">'.$content.'<a href="'.$url.'" class="blockquote-source">'.$icon.$title.'</a></blockquote>'; } add_shortcode('blockquote', 'site_blockquote');

デモ

See the Pen blockquote+icon by JaSTIN (@JaSTIN) on CodePen.24295

コメントを残す

記事ランキング