自宅WindowsPCローカルにWordPressをインストールしている。
「はてなブログ」からWordPressへの移行の検証をしている。
※ ↓は、本対策を行う前のインポート手順。
どうにか、やりたいことは出来たが、課題としてアイキャッチ画像の問題がある。
「はてなブログ」のアイキャッチ画像を、簡単にはWordPressに取り込めない。いくつかのツールを組み合わせるなどして出来たが、WordPressではアイキャッチ画像に登録するためには「メディアライブラリ」へ登録する必要がある。プラグイン「Bulk Media Register」を使えば可能なのだが、処理時間が膨大にかかる。
アイキャッチ画像の使用目的は、「記事一覧」と「ブログカード」に画像（写真）を表示すること。
メディアライブラリを使わずに実現するため、対策として、以下のことを実施。
以下、外観テーマは「Iconic One」を使用している前提。
【対策１：メディアライブラリを使わないための方策】
■ 記事一覧
１．WordPressでは、アイキャッチ画像を登録せずに、記事内の一番目の画像をアイキャッチ画像として「記事一覧」に表示するようにする。
上記記事を参考に、以下の対策を行なう。
「\wp-content\themes\iconic-one\functions.php」に「catch_that_image()」を追加。
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
// 記事内で画像がなかった時のための画像を指定（ディレクトリ先や画像名称は任意）
$first_img = esc_url(get_template_directory_uri()) . "/images/common/noImage.png";
}
return $first_img;
}
「\wp-content\themes\iconic-one\content.php」に以下を入れる。
<h2 class="entry-title"> <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'iconic-one' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"> <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('thumbnail'); ?> <?php else : ?> <img src="<?php echo catch_that_image(); ?>" alt="" /> <?php endif ; ?> <?php the_title(); ?></a> </h2>
■ ブログカード
ブログカードは、以下の記事に書いているショートコードを使用している。
このショートコードでは、ブログカードに入れる画像を個別に指定できる。
[nmblogcard url="url" image_url="画像url"]
これを利用する。
【対策２：エクスポートファイルの加工方法】
対策１を利用するために、はてなブログのエクスポートファイルを加工する。
■ 記事一覧
はてなブログエクスポートファイルの記事先頭にダミーの画像を入れる。これによって、WordPressでは、アイキャッチ画像登録なしに、「記事一覧」でこの画像が使われる。
はてなブログのアイキャッチ画像は、エクスポートファイル内では、「IMAGE:」で定義されている。これを読みとって、「BODY:」の先頭に"display:none;"の<img>タグで画像を入れる。
IMAGE: /wordpress/wp-content/uploads/hatena/20180331_20180331162629.jpg
↓↓↓
BODY: <img src="/wordpress/wp-content/uploads/hatena/20180331_20180331162629.jpg" style="display:none;">
■ ブログカード
はてなブログエクスポートファイルのショートコード部分に「画像URL」を追加する。
はてなブログエクスポートファイルは、以下の2つの処理実施後のファイルをインプットとして使う。
- エクスポートファイル ⇒ 画像リンクをWordPressローカルに変える。
- エクスポートファイル ⇒ ローカルリンクのブログカードをショートコードに変更。
※ 詳細は以下の記事を参照。
<p>[nmblogcard url="/wordpress/2018/02/24/2018-02-24-200206/"]</p>
↓↓↓
<p>[nmblogcard url="/wordpress/2018/02/24/2018-02-24-200206/" image_url="/wordpress/wp-content/uploads/hatena/20180225_20180225174000.jpg"]</p>
【エクスポートファイル加工スクリプト作成】
■ 記事URLとアイキャッチ画像のCSVファイルを作成。
（eyecatch-insert.jseで使用する。）
上記ブログカード対応をするために、記事URLとアイキャッチ画像URL対応のCSVファイルを作成する。
はてなブログエクスポートファイルの「BASENAME:」、「IMAGE:」を読み取って、記事URLとアイキャッチ画像のCSVファイルを作成する。
AUTHOR: ..... TITLE: ..... BASENAME: 2022/08/13/124011 ..... ..... IMAGE: https://cdn-ak.f.st-hatena.com/images/fotolife/a/art2nd/20220813/20220813123456.jpg
↓↓↓
≪hatena.eyecatch.csv≫
（記事URL）,（画像URL） wordpress/2022/08/13/2022-08-13-124011,20220813_20220813123456.jpg wordpress/2022/08/12/2022-08-12-160116,20220807_20220807132140.png wordpress/2022/08/12/2022-08-12-153111,20220812_20220812153057.jpg ..... .....
≪eyecatch-csv.jse≫
var adTypeText = 2;
var adSaveCreateOverWrite = 2;
var adReadAll = -1;
var sr = new ActiveXObject("ADODB.Stream");
sr.Type = adTypeText;
sr.charset = "utf-8";
sr.Open();
sr.LoadFromFile("2ndart.hatenablog.com.export.txt");
var str = sr.ReadText(adReadAll);
sr.Close();
var sw = new ActiveXObject("ADODB.Stream");
sw.type = adTypeText;
sw.charset = "utf-8";
sw.Open();
var body = false;
var bodyend = true;
var out = "";
var line_ary = str.split(/\n/);
for (var i=0; i<line_ary.length; i++) {
if (!body) {
if (line_ary[i].substring(0,10) == 'BASENAME: ') {
var base = line_ary[i].slice(10);
var spt = base .split('/');
var str = spt[0] + '/' + spt[1] + '/' + spt[2] + '/' + spt[0] + '-' + spt[1] + '-' + spt[2] + '-' + spt[3];
out = out + 'wordpress/' + str + ",";
}
if (line_ary[i].substring(0,7) == 'IMAGE: ') {
var image = line_ary[i].slice(7);
var spt = image.split('/');
out = out + spt[7] + '_' + spt[8] + "\n";
}
}
if (line_ary[i].substring(0,5) == 'BODY:') {
body = true;
bodyend = false;
}
if (line_ary[i] == '-----') {
bodyend = true;
body = false;
}
}
sw.WriteText(out);
sw.SaveToFile("hatena.eyecatch.csv",adSaveCreateOverWrite);
sw.Close();
■ はてなブログエクスポートファイルを加工するJScript。
以下の2つの処理を行った後のエクスポートファイルをインプットにする。
- エクスポートファイル ⇒ 画像リンクをWordPressローカルに変える。
- エクスポートファイル ⇒ローカルリンクのブログカードをショートコードに変更。
「記事一覧」と「ブログカード」の対策を行うJScript。
≪eyecatch-insert.jse≫
※ エクスポートファイルをドラッグ＆ドロップで読み込む場合、他のインプットファイル（CSVファイル：hatena.eyecatch.csv）も絶対パスにしないとエラーになる。
var args = WScript.Arguments; // ドラッグ＆ドロップしたパス情報を取得 var inputFile = args(0); // はてなブログ エクスポート・ファイル（2，3処理済み）（絶対パス） var csvFile = "hatena.eyecatch.csv"; var fso = new ActiveXObject("Scripting.FileSystemObject"); var path = fso.getParentFolderName(WScript.ScriptFullName); // カレントディレクトリ（絶対パス） var csvFile = path + "\\" + csvFile; // csvFile：絶対パスに変換 var adTypeText = 2; var adSaveCreateOverWrite = 2; // 上書き var adReadAll = -1; // 全行 // --------------------------------- var sr1 = new ActiveXObject("ADODB.Stream"); sr1.Type = adTypeText; sr1.charset = "utf-8"; sr1.Open(); sr1.LoadFromFile(csvFile); var csvstr = sr1.ReadText(adReadAll); sr1.Close(); var csvlines = csvstr.split(/\r?\n/); var eyecatch = []; for (var i=0; i<csvlines.length; i++) { eyecatch[i] = csvlines[i].split(","); } // --------------------------------- var sr2 = new ActiveXObject("ADODB.Stream"); sr2.Type = adTypeText; sr2.charset = "utf-8"; sr2.Open(); sr2.LoadFromFile(inputFile); var str = sr2.ReadText(adReadAll); sr2.Close(); var stw = new ActiveXObject("ADODB.Stream"); stw.type = adTypeText; stw.charset = "utf-8"; stw.Open(); var out = ""; var lines = str.split(/\r?\n/); var outsw = false; var image = ""; for (var i=0; i<lines.length; i++) { outsw = false; if (lines[i].substring(0,7) == 'IMAGE: ') { image = lines[i].slice(7); } if (lines[i].substring(0,5) == 'BODY:') { if (image != "") { out = out + 'BODY:' + "\n" + '<img src="' + image + '" style="display:none;">' + "\n"; outsw = true; image = ""; } } if (lines[i].indexOf('<p>[nmblogcard url="/wordpress/') == 0) { url = lines[i].substr(21).slice(0,-7); if (imgfile = array2find(url, eyecatch)) { out = out + lines[i].slice(0,-5) + ' image_url="/wordpress/wp-content/uploads/hatena/' + imgfile + '"]</p>' + "\n"; outsw = true; } } if (!outsw) { out = out + lines[i] + "\n"; } } stw.WriteText(out); stw.SaveToFile(inputFile.slice(0,-4) + "-eyecatch.txt", adSaveCreateOverWrite); stw.Close(); function array2find(str, ary) { for (var i=0; i<ary.length; i++) { if (str == ary[i][0]) { return ary[i][1]; } } return false; }
このスクリプトで加工したエクスポートファイルをWordPressでインポートすることで、メディアライブラリを使わずに。はてなブログのアイキャッチ画像をメディアライブラリを使わずに記事一覧とブログカードに反映させる事ができる。
