こちらの記事ではWordpressで「Blogger Importer Extended」を使用した移行記事に修正が必要でした。インポーターを使用した後にWordpressで記事がどのように表示され、どんな対応をしたか解説してますのでみなさんの参考になれれば幸いです。

この記事でわかること 
 ・ クラシックエディタからブロックエディタへの置き換え方
 ・ 画像、動画の置き換え方
 ・ 記事作成者(ユーザー)の統合

Blogger Importer Extended後にWordpressで修正したこと

インポート自体はしっかりとできました。移行した記事もこのままでも読めないことはないですが、目次がなかったりと修正したかったのは3つ。

上の画像ですと、目次に反映されていないですが、見出しにはなっています。さらに、画像も小さいです。

修正したかった3点
 ①目次がうまく表示されない
 ② 画像、動画サイズの変更
 ③記事作成者(ユーザー)が新しくできてしまう

ひだみ

この3つについて順に解説していきます

移行に使用したBlogger Importer Extendedについてはこちらの記事をご覧ください。

① クラシックエディタからブロックエディタへ変換

1つ目は「記事の目次がうまく出ない」と言うところです。原因を調べると、記事エディタがクラシックなのかな?というところでそこから試しに修正することに。
まず、Wordpressの記事作成は”クラシック”と”ブロック”の2種類の作成エディタがあります。

移行した記事のスクリーンショット、クラシックの表示がでている
クラッシックエディタだと修正ですとか、リライトとかが面倒です

エディタについて

クラシックからブロックへ移行していてクラシックエディタでの作成はサポートがなくなるみたいです。

クラシックエディタ

テキスト入力が基本で、記事のレイアウト作成にコードなど知識が必要になることも。24年末、または必要なくなるとサポートが終了予定

ブロックエディタ

WordPress5.0から登場したエディタ。用意されたブロックを使うことで記事のレイアウトが容易になる。現在の標準エディタ

エディタ変換手順

ブロックの方が使い勝手も良さそうでしたので全記事をブロックに変換する作業を行いました。
ここから手順を紹介します。

STEP1
変換後のレイアウトを確認する

自動で元々の記事をブロックに分けてくれるのですが、うまくできてない部分もあったりします。

変換後にHTMLコードブロックになってしまったところのスクリーンショット
一部HTMLの記述になってしまいました。表示される分に問題はないのですが…
STEP2
移行した記事の編集画面を開きます
クラシックモードの表示がある記事編集画面のスクリーンショット
クラシックと書いてある部分をクリックします
STEP3
ブロックへ変換をクリック
ブロックへ変換のメニューを表示しているスクリーンショット
クリックすると自動で変換してくれます
STEP4
手作業にて修正

全体のうち2ヶ所が「カスタムHTML」になってしまっています。
こうなると”見出し”になっている部分が目次に表示されなかったりするので修正していきます

STEP5
HTMLコードの中身を部分ごとにコピペ
HTMLコードないの記述をブロックにコピペしているところのスクリーンショット
プレビューに切り替えると画像などが表示されます。

プレビューで表示してテキスト部分を新しいブロックにコピペします。
この時、見出し、段落ごとにブロックを分けておいたほうがいいです

部分ごとにコピペしていく、地道な作業です。

注意点!
・画像はコピペできないので、同じ画像を新しい画像ブロックにアップロードしましょう。
・念のためHTMLのブロックはプレビューで確認するまで残しておきましょう。

STEP6
全体のプレビューを確認

修正が終わったら、記事のプレビューにて文章、レイアウトなど確認しましょう。問題ないことを確認してHTMLのブロックを削除します。なお、記事を変換することで目次も表示されました

クラシックエディタのプレービュースクリーンショット。目次がない。
ブロックエディタ変換後のプレビュースクリーンショット。目次が表示された。

クラシックエディタからブロックエディタへの変換はこのような流れで行いました。

②画像と動画の差し替え

先ほどの記事の変換を行なっている時に気付いたのですが、画像と動画が小さい!ので、こちらも同じ画像と差し替えていくことにしました。さらに画像の周りにうっすらと線が入ってる…

移行後の記事例スクリーンショット。埋め込みユーチューブが小さい
埋め込み動画もどーんと大きく表示したいですね
ワードプレスの記事編集画面にあるブロック一覧のスクリーンショット
移行後の記事例スクリーンショット。画像が小さい

画像はドキュメント概観ではテーブルブロックになっているので”表”になってます。だから、まわりにうっすらと罫線のようなものがあるのね。

画像のソースコードのスクリーンショット
さらに画像のURLがGoogleのままなっています。

手順としましては新しく画像ブロックを作成して同じ画像をアップロードします。こちらも写真が多い記事だと地味に大変でした。

ブロック選択中のスクリーンショット
ブロックの追加より画像ブロックを選択して
画像ブロックの画像をアップロードする選択画面スクリーンショット
同じ画像をアップロードします

動画もYouTube埋め込み用ブロックにリンクを設定して、再配置しました。

インポート直後のプレービュー画面スクリーンショット。埋め込み動画のサイズが小さい。
修正後のプレビュー画面スクリーンショット。埋め込み動画が幅いっぱいに表示されている。

めご

altタグも再入力しなきゃで画像差し替えは結構大変だったね

③ユーザーの統合

Importerで記事を移行すると新たにユーザーが割り当てられるので、これから使うユーザーに統合しました。

STEP1
まず、Wordpress管理画面よりユーザー一覧を選択する
設定のユーザー画面、移行した記事は数字だけのユーザーが割り当てられる
数字だけ(Blogger ID)のユーザーが追加されていますので、削除を選択。
STEP2
ユーザーを統合する
削除をクリックすると統合するか、消去するか選択できます。消去しないようにしましょう

じゅうべえ

こちらはサクッと完了することができました笑

今回のまとめ:地道な作業…

Blogger Importer Extendedを使用した後に、今回行った修正したことをまとめますと

  • 目次の表示うまくできない→ブロックに置き換え、コピペなどして記事全体をブロックに置き換え
  • 画像、動画のサイズ→画像はいまの契約サーバーにアップロード、altタグを追加修正、動画(YouTube)はブロック作成して再リンク
  • ユーザーが新規作成→ユーザーの統合をする

以上の3つの対応について、ワタシが行ったことを紹介させてもらいました。それなりに時間はかかりましたが、色々と調べながら移行することができました。

じゅうべえ

20記事程度だからそこまで時間かからなかったけど、結構大変

めご

他にも、ブログカードとかリンクの修正もコツコツやりましょう!

次回はWordpressプラグイン、使用しているテーマ「XWRITE」などについても紹介していこうと思います!

Blogger Importer Extendedをこれから使う方の参考になれたら嬉しいです

ひだみ

最後まで読んでいただきありがとうございます!

\エックスサーバー契約はこちらから/
\こちらも参考になります!/