読者です 読者をやめる 読者になる 読者になる

デュ~クメモ

しょ~もないことから、もしかしたら役に立つことまで、そこはかとなく書いていきます。

ブログカードを挿入するショートコード

f:id:dukecave:20161022161350p:plain

(2016.06.09作成~)

はてなブログでURLを貼り付けると、見やすい「カード形式」で表示できる。
WordPressでも最近は実装されているようだが、私のWordPressバージョンは「3.4.1」である…
※以前バージョンアップを試みたが、改造しすぎていたため、表示が変になり元に戻した。

なので、ショートコードをつくってみる。

参考サイト:
[WordPress] ブログカードをプラグインなしで実装する方法 - Unity開発&備忘録
https://archive.is/mLw6V

上記サイトでは「はてなブログを経由してカード表示するブックマークレット」を紹介している。

まあ、はてなブログのサービスが停止したら無効になるが、とりあえずこの方法を試すのが手っ取り早い。

こんな感じのコードが生成される

<p><iframe style="width:100%;height:155px;max-width:500px;margin:0 0 20px 0;display:block;" title="タイトル" src="http://hatenablog.com/embed?url=対象のURL" width="300" height="150" frameborder="0" scrolling="no"></iframe></p>

だが、通常のリンクはいいのだが、対象が「はてなブログのURL」の場合、サムネイル画像が無かったり、不具合が生じる。

対象がはてなブログのURLの場合は

<p><iframe class="embed-card embed-blogcard" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" title="タイトル" src="はてなブログのURL" frameborder="0" scrolling="no"></iframe></p>

はてなブログのURLの内、「entry」→「embed」にする必要有り。

また、挿入した部分がWordPressビジュアル編集モードでは「真っ黄色」に表示されてしまい、コードの中身がよ~わからん。

なので、ショートコード化してみる。

/* ブログカードを挿入するショートコード */
/* 使い方:[blogcard link=〇〇(必須) title=〇〇(任意)] */
function blogcard_short($atts) {
extract(shortcode_atts(array(
'link' => '',
'title' => '',
), $atts));
if (strstr($link,'hatenablog.com')) { // はてなブログURLの場合
$link = str_replace("entry", "embed", $link); //「entry」→「embed」に置換
$html = '<p><iframe class="embed-card embed-blogcard" style="display: block; width: 100%; height: 190px; ';
$html.= 'max-width: 500px; margin: 10px 0px;" title="'.$title.'" src="';
$html.= $link.'" frameborder="0" scrolling="no"></iframe></p>';
}
else { // はてなブログでない場合
$html = '<p><iframe width="300" height="150" style="width: 100%; height: 155px; max-width: 500px; ';
$html.= 'margin: 0 0 20px 0; display: block;" title="'.$title.'" src="http://hatenablog.com/embed?url=';
$html.= $link.'" scrolling="no" frameborder="0"></iframe></p>';
}
return $html;

}
add_shortcode('blogcard','blogcard_short');

これで
[blogcard link=〇〇]
と記述するだけで、ブログカードを挿入できるようになった。

【おしまい】
親記事:
WordPress設定メモ