【はてなブログからWordPress引っ越し】ブログカード編

はてなブログからWordPressに移行するときに、ブログカードをどうするか？です。多くの場合、そのままでも表示されるようなのですが、表示されないケースなどは「はてなブログ」の仕様に詳しくないのでわかりません。

それはともかく、そのまま「はてなの機能」を使うのはWordpressに引っ越しする意味が半減すると思うので何とかしましょうという内容です。

引っ越し後にうまく表示されないケース

はてなブログカードなのですが、どうも「はてなブログ」と「外部ブログ」では参照の仕方が少し違うようなのです。

記事URLが上記の例だと、はてなブログだと判断されるとパターン１で参照。外部ブログだとパターン２で参照という具合に違うようなのです。

で、自身の記事をブログカードで表示していて、自身が独自ドメインそのままで、はてなブログから外部ブログに引っ越しすると表示されないケースがでるのでは？と思います。

はてなブログはあまり触らないので、間違った理解をしてる可能性はありますが・・。

方針

はてなブログ

<iframe class="embed-card embed-blogcard" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" title="ブログに写真や動画を貼り付ける「リンク挿入」機能を使いやすくしました　URLをペーストするだけでコンテンツを埋め込めます - はてなブログ開発ブログ" src="http://staff.hatenablog.com/embed/2014/08/14/184000" frameborder="0" scrolling="no"></iframe>
<cite class="hatena-citation"><a href="http://staff.hatenablog.com/entry/2014/08/14/184000">staff.hatenablog.com</a>

変換後

[blogcard url="http://staff.hatenablog.com/entry/2014/08/14/184000"]　

・Pz-LinkCard — WordPress Plugins

こういう風に変換してWordpressのプラグイン「Pz-LinkCard」を使って表示するようにします。

※ブログカード挿入時に標準でつくciteタグを消してる場合は、この方法では無理です。参照先の記事のURLを確実にわかるのはここしかないです。

その１：エクスポートファイルを変換する方法

<?php
    $in_file_name="hateblo.jp.export.txt"; //入力ファイル名
    $out_file_name="hateblo.jp.export-new.txt"; //出力ファイル名

    $content = file_get_contents($in_file_name);

    $output = preg_replace('/<iframe class="embed-card embed-blogcard".*?<\/iframe>.*?<cite class="hatena-citation"><a href="(.*?)">(.*?)<\/a><\/cite>/is', '[blogcard url="${1}"]', $content);

    file_put_contents($out_file_name,$output);
    echo "完了";

上記を、conv-hatena.phpで保存します。

引っ越しするときにエキスポートしたファイルの中身を書き換えてしまう路線での対応です。Wordpressのプラグイン「Pz-LinkCard」をつかうという前提になりますが、確実な方法論だと思います。

エクスポートファイル：hateblo.jp.export.txtをconv-hatena.phpと同じところに設置して、ブラウザからconv-hatena.phpを呼び出せば、変換後のファイルがhateblo.jp.export-new.txtとして出力されます。

その２：Wordpressのテーマファイルで吸収する

すでにWordpressに記事を移行してしまったという場合の対応方法です。

Wordpressのテーマファイルの「functions.php」に以下を追記することで対応します。

function hatena_card($content) {
    $output = preg_replace('/<iframe class="embed-card embed-blogcard".*?<\/iframe>.*?<cite class="hatena-citation"><a href="(.*?)">(.*?)<\/a><\/cite>/is', '[blogcard url="${1}"]', $content);

    return $output;
}
add_filter("the_content","hatena_card",9);

これで、Wordpressのプラグイン「Pz-LinkCard」で表示されるようになります。ただし、記事の中身を毎回正規表現で変換することになるのでWordpressに負荷がかかるかとは思います。

Pz-LinkCard

標準のスタイル（CSS）は、はてなのブログカードと雰囲気が違うので似せたい人は、CSSを変更すればOKだと思います。Googleで検索すれば、いろいろ出てくると思います。

Pz-LinkCardの設定画面でも、CSSを触らずともいろいろ変更は可能なので、そのあたりで調整しても良いかも。