昨日、どのサイトからでも「はてなブログカード」を利用する方法を紹介しました。
この方法を利用すれば、ブラウザの拡張から上記のような綺麗なブログカードタグをクリック一発で作成することができます。
ただ、これでも面倒くさいという方のために、WordpressエディターにURLを入力するだけで、ブログカードを表示させる方法も考えてみました。
今回は、そのWordpressカスタマイズ方法を紹介します。
目次
主な手順
カスタマイズといっても大したことはなく、以下の2手順を行うだけです。
- functions.phpに関数の貼り付け
- style.cssにスタイルを貼り付ける
2ヶ所コピペするだけなので、それほど難しくないと思います。
カスタマイズ方法
ではカスタマイズ方法です。
functions.phpの編集
親テーマでも子テーマでも良いので、以下のコードをfunctions.phpに追記してください。
//本文中のURLをはてなブログカードタグに変更する
function url_to_hatena_blog_card($the_content) {
if ( is_singular() ) {//投稿ページもしくは固定ページのとき
//1行にURLのみが期待されている行（URL）を全て$mに取得
$res = preg_match_all('/^(<p>)?(<a.+?>)?https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(<\/p>)?(<br ? \/>)?$/im', $the_content,$m);
//マッチしたURL一つ一つをループしてカードを作成
foreach ($m[0] as $match) {
$url = strip_tags($match);//URL
// //サイトの内部リンクは処理しない場合（Simplicity対策）
// preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $r );//自サイトのドメイン取得
// if ( strpos( $url, $r[1] ) ) {
// continue ;
// }
//取得した情報からブログカードのHTMLタグを作成
$tag = '<iframe class="hatenablogcard" src="https://hatenablog-parts.com/embed?url='.$url.'" frameborder="0" scrolling="no"></iframe>';
//本文中のURLをブログカードタグで置換
$the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1);
}
}
return $the_content;//置換後のコンテンツを返す
}
add_filter('the_content','url_to_hatena_blog_card');//本文表示をフック以下のコメント部分は、内部リンクをはてなブログカードにしたくない場合は、コメントアウトしてください。
// //サイトの内部リンクは処理しない場合（Simplicity対策）
// preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $r );//自サイトのドメイン取得
// if ( strpos( $url, $r[1] ) ) {
// continue ;
// }この関数を記入すると、例えば、Wordpressテキストエディターに以下のように入力すると、こういったURL書式だけブログカードに入れ替えます。
https://nelog.jp/hatenablogcard <a href="https://nelog.jp/wordpress-blog-card">https://nelog.jp/wordpress-blog-card</a> <p>http://www.pakutaso.com/</p> />
テキストエディターで以下のように入力して投稿すると、
この時点では、以下のように表示されます。
あとはこれにスタイルを設定してやるだけです。
style.cssの編集
style.cssには以下のように追記します。（スタイルはサイトに合わせて変更してください。）
.hatenablogcard{
clear:both;
width:100%;
height:155px;
margin:10px 0;
max-width:680px;
}ブラウザをリロードすると、このように表示されるようになりました。
実際に表示させてみると、以下のような感じになります。
まとめ
こんな感じで、小さな手間で綺麗なブログカードを表示させることができます。
入力も、Wordpressエディターなどに、URLをそのまま貼り付けるだけです。かなり簡単になったのではないかと思います。
ただし、この方法には以下の注意点があります。
- はてなのサービスを利用しているので今後ははてな次第
- 参照元（リファー）がはてなになる
- 一旦使い出してしばらくして、使用をやめるとブログカードだった部分が、ただのテキストURL（もしくはURLリンク）になる
詳しくは以下の注意点に書いています。
参考 はてなブログカードのような美しい外部リンクをクリック一発で作成する方法
上記のような、注意点はあるものの、カードは綺麗ですし、利用も簡単なので、ブラウザ拡張を使用した方法よりは、記事を書くのがかなり楽になります。
このように、メリット・デメリットのある方法ですが、メリットが上回る場合は、ブログの編集時間が多少は短縮できるかもしれません。
内部リンクも外部リンク同様に表示させたいのですが、コードを貼り付けてもうまく行きません。どうすればいいのでしょうか？
// //サイトの内部リンクは処理しない場合（Simplicity対策）
// preg_match( ‘/https?:\/\/(.+?)\//i’, admin_url(), $r );//自サイトのドメイン取得
// if ( strpos( $url, $r[1] ) ) {
// continue ;
// }
上記をコメントアウトしていると「サイトタイトル」「サイトURL」だけのリンクカードが表示されます。
上記のコメントアウトを外すとリンクカードそのものが表示されずURLだけになります。
使っているテーマはtwentyfifteenです。