ココログ→WordPress移行奮戦記（第三回）
- 2019.12.30
- ココログ→WordPress
・・・続き
前記事「ココログ→WordPress移行奮戦記（第二回）」の続きです。
-
- WordPress（rokube.org）環境の構築
- ココログからのデータEXPORT(記事&コメント)
- EXPORTデータ(記事&コメント)の編集
- ココログからの画像データダウンロードとrokube.orgへのアップロード
- ルートラボからのGPSデータのダウンロードとrokube.orgへのアップロード
- ココログ絵文字データのダウンロードとrokube.orgへのアップロード
- EXPORTデータ(記事&コメント)の編集のwordpressへのインポート
- 旧Blogに移転記事の掲載
- 微調整
上記手順の”3.EXPORTデータ(記事＆コメント)の編集”の詳細です。
3.3.ルートマップ記述部の変更
ココログでのルートマップは、ルートラボ表示の為にWebページ(XXXXXXXX_route.html)を作成し、そのページを各記事からリンクしている。
WordPressでは、この記述をルートマップの表示/非表示ボタンを持つ方式に置き換える。
3.3.1.ルートマップの表示/非表示切替
WordPressでのルートマップの表示/非表示切替は、CSSを用いた方式をとる。
この為、Add Custom CSSにて、Title”show / hide HTML with click”なるCSSを追加。
格納場所： https://rokube.org/wp-content/uploads/custom-css-js/1099.css
<style type=”text/css”>
.hidden_box {
margin: 10px 0;
padding: 0;
text-align: center;
}
.hidden_box label {
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
margin: 0 auto;
padding: 10px;
min-width: 50%;
}
.hidden_box label:hover {
background: #f5f5f5;
}
.hidden_box label:after {
content: “を表示”; /* 閉じている状態のときにラベルの後ろに続く文字 */
}
.hidden_box input {
display: none;
}
.hidden_box .hidden_show {
height: 0;
overflow: hidden;
opacity: 0;
padding: 0;
text-align: left;
transition: 0.5s;
}
.hidden_box input:checked + label:after {
content: “を非表示”; /* 開いている状態のときにラベルの後ろに続く文字 */
}
.hidden_box input:checked ~ .hidden_show {
height: auto;
opacity: 1;
padding: 10px 0;
}
HTMLとしては下記を記載する。
①<div class=”hidden_box”><input id=”labelX” type=”checkbox”> <!– Xを任意の数字に変更 –>
②<label for=”labelX”>ルートマップ</label> <!– Xを上記と同じ数字に変更 –>
③<div class=”hidden_show”>
④<center>
⑤[\osm_map_v3 map_center=”36.6956, 136.7228″ zoom=”8″ width=”90%” height=”400″ file_list=”../../../../wp-content/uploads/gpx_data/YYYYMMDD_route.gpx” file_color_list=”#0000ff” control=”scaleline” map_border=”thin solid blue” file_title=”YYYYMMDD_route.gpx”]
⑥</center>
⑦</div></div>
※①②”labelX”については通常は”label1″を使用
※⑤”YYYYMMDD_route.gpx”はgpxデータ。”../../../../wp-content/uploads/gpx_data/”に格納しておく事。
※⑤※”osm_map_v3 map_center”左の”\”は実際には取り除いてあります。
3.3.2.ルートマップ
ルートマップの表示には、wordpressのプラグインOSM(OpenStreetMap)を利用する。
OSM呼び出しは上記⑤に記載する通り。
[\osm_map_v3 map_center=”36.6956, 136.7228″ zoom=”8″ width=”90%” height=”400″ file_list=”../../../../wp-content/uploads/gpx_data/YYYYMMDD_route.gpx” file_color_list=”#0000ff” control=”scaleline” map_border=”thin solid blue” file_title=”YYYYMMDD_route.gpx”]
(a)map_center=”36.6956, 136.7228″ MAP中心座標（緯度、経度）
(b)zoom=”8″ 拡大レベル
本プラグインでは、本来、(a)(b)のパラメータは、GUIを操作しMAP毎に設定する仕様だが、本ブログにおいては固定のパラメータを使用する。
3.3.3.編集方法
ルートマップに関わるエクスポートデータの書き換えは以下の通り。
[変更前]
<p>[E:shine]<a style=”color: #8a8a8a; line-height: 19px; font-family: ‘MS PGothic’, ‘Hiragino Kaku Gothic Pro W3’, osaka, sans-serif; font-size: small; text-decoration-line: none;” href=http://rokurokurokube.cocolog-nifty.com/blog/YYYYMMDD_route.html><span>今回のルート図はここをクリックして下さい</span></a>[E:shine]</p>
※標準的に上記記述だがココログからエクスポートしたデータには微妙に異なる場合も存在する。その場合、置換前に事前に上記パターンに修正しておく必要がある。
[変更後]
①<div class=”hidden_box”><input id=”label1″ type=”checkbox”> <!– Xを任意の数字に変更 –>
②<label for=”label1″>ルートマップ</label> <!– Xを上記と同じ数字に変更 –>
③<div class=”hidden_show”>
④<center>
⑤[\osm_map_v3 map_center=”36.6956, 136.7228″ zoom=”8″ width=”90%” height=”400″ file_list=”../../../../wp-content/uploads/gpx_data/YYYYMMDD_route.gpx” file_color_list=”#0000ff” control=”scaleline” map_border=”thin solid blue” file_title=”YYYYMMDD_route.gpx”]
⑥</center>
⑦</div></div>
※①~⑦表示/非表示ボタンにより、OSMの地図を制御する。
※本ブロックが２か所以上必要な場合、①…input id=”label1″…、と②…label for=”label1″…の数字部を他の数字に置き換える
※⑤gpxデータは、wp-content/uploads/gpx_data/に格納する
※⑤”osm_map_v3 map_center”左の”\”は実際には取り除いてあります。
従って、サクラエディタでの置換は以下の通り。
置換前 <p>\[E:shine\].*/(.*_route)\.html.*\[E:shine\]</p>
置換後 <div class=”hidden_box”><input id=”label1″ type=”checkbox”> <!– Xを任意の数字に変更 –><label for=”label1″>ルートマップ</label> <!– Xを上記と同じ数字に変更 –><div class=”hidden_show”><center>[\osm_map_v3 map_center=”36.6956, 136.7228″ zoom=”8″ width=”90%” height=”400″ file_list=”../../../../wp-content/uploads/gpx_data/$1.gpx” file_color_list=”#0000ff” control=”scaleline” map_border=”thin solid blue” file_title=”$1.gpx”]</center></div></div>
3.4.ココログ絵文字のリンク先変更
EXPORTデータ(記事&コメント)では、絵文字データは[E:xxxxxx]と記述されている。”xxxxxx”に”.gif”を加えることで、emoticons内のgifファイルとなる。
従って、サクラエディタでの置換は以下の通り。
置換前 \[E:([a-z0-9\]]+)\]
置換後 <img src=”../../../../wp-content/uploads/emoticons/$1.gif”>
3.5.置換マクロ例
以上の置換マクロをまとめると、①”ほっと、バイク！”の場合、
ReplaceAll(‘http://rokurokube.cocolog-nifty.com/.shared/image.html\?/photos/’, ‘../../../../wp-content/uploads/hot_bike1/.shared/image.html/photos/’, 28);
ReplaceAll(‘http://rokurokube.cocolog-nifty.com/blog/images/’, ‘../../../../wp-content/uploads/hot_bike1/blog/images/’, 28);
ReplaceAll(‘http://rokurokube.cocolog-nifty.com/photos/uncategorized/’, ‘../../../../wp-content/uploads/hot_bike1/photos/uncategorized/’, 28);
ReplaceAll(‘URL: http://rokurokube.cocolog-nifty.com/blog/’, ‘URL: https://rokube.org/’, 28);
ReplaceAll(‘<p>\[E:shine\].*/(.*_route)\.html.*\[E:shine\]</p>’, ‘<div class=”hidden_box”><input id=”label1″ type=”checkbox”> <!– Xを任意の数字に変更 –><label for=”label1″>ルートマップ</label> <!– Xを上記と同じ数字に変更 –><div class=”hidden_show”><center>[\osm_map_v3 map_center=”36.6956, 136.7228″ zoom=”8″ width=”90%” height=”400″ file_list=”../../../../wp-content/uploads/gpx_data/$1.gpx” file_color_list=”#0000ff” control=”scaleline” map_border=”thin solid blue” file_title=”export_2019-10-22.gpx”]</center></div></div>’, 28);
ReplaceAll(‘\[E:([a-z0-9\]]+)\]’, ‘<img src=”../../../../wp-content/uploads/emoticons/$1.gif”>’, 28);
ReDraw(0); // 再描画
②”ほっと、バイク！！”の場合、
ReplaceAll(‘http://rokurokurokube.cocolog-nifty.com/blog/Open-Live-Writer/’, ‘../../../../wp-content/uploads/hot_bike2/blog/Open-Live-Writer/’, 28);
ReplaceAll(‘http://rokurokurokube.cocolog-nifty.com/blog/images/’, ‘../../../../wp-content/uploads/hot_bike2/blog/images/’, 28);
ReplaceAll(‘http://rokurokurokube.cocolog-nifty.com/photos/uncategorized/’, ‘../../../../wp-content/uploads/hot_bike2/photos/uncategorized/’, 28);
ReplaceAll(‘https://rokurokurokube.cocolog-nifty.com/photos/uncategorized/’, ‘../../../../wp-content/uploads/hot_bike2/photos/uncategorized/’, 28);
ReplaceAll(‘http://rokurokurokube.cocolog-nifty.com/.shared/image.html\?/photos/uncategorized/’, ‘../../../../wp-content/uploads/hot_bike2/.shared/image.html/photos/uncategorized/’, 28);
ReplaceAll(‘URL: http://rokurokurokube.cocolog-nifty.com/blog/’, ‘URL: https://rokube.org/’, 28);
ReplaceAll(‘<p>\[E:shine\].*/(.*_route)\.html.*\[E:shine\]</p>’, ‘<div class=”hidden_box”><input id=”label1″ type=”checkbox”> <!– Xを任意の数字に変更 –><label for=”label1″>ルートマップ</label> <!– Xを上記と同じ数字に変更 –><div class=”hidden_show”><center>[\osm_map_v3 map_center=”36.6956, 136.7228″ zoom=”8″ width=”90%” height=”400″ file_list=”../../../../wp-content/uploads/gpx_data/$1.gpx” file_color_list=”#0000ff” control=”scaleline” map_border=”thin solid blue” file_title=”export_2019-10-22.gpx”]</center></div></div>’, 28);
ReplaceAll(‘\[E:([a-z0-9\]]+)\]’, ‘<img src=”../../../../wp-content/uploads/emoticons/$1.gif”>’, 28);
ReDraw(0); // 再描画
続く・・・
にほんブログ村
ポチッと押してね
-
前の記事
ココログ→WordPress移行奮戦記（第二回） 2019.12.29
-
次の記事
ココログ→WordPress移行奮戦記（第四回） 2019.12.30