ココログ→WordPress移行奮戦記(第三回)

ココログ→WordPress移行奮戦記(第三回)
・・・続き

前記事「ココログ→WordPress移行奮戦記(第二回)」の続きです。

    1. WordPress(rokube.org)環境の構築
    2. ココログからのデータEXPORT(記事&コメント)
    3. EXPORTデータ(記事&コメント)の編集
    4. ココログからの画像データダウンロードとrokube.orgへのアップロード
    5. ルートラボからのGPSデータのダウンロードとrokube.orgへのアップロード
    6. ココログ絵文字データのダウンロードとrokube.orgへのアップロード
    7. EXPORTデータ(記事&コメント)の編集のwordpressへのインポート
    8. 旧Blogに移転記事の掲載
    9. 微調整

上記手順の”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の地図を制御する。
         ※本ブロックが2か所以上必要な場合、①…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);    // 再描画

続く・・・

にほんブログ村 バイクブログへ
にほんブログ村ポチッと押してね