【WordPress】クラシックエディターの記事を簡単にブロックエディターに変換したい【リライト】

2021-10-15

WordPressのブロックエディターに慣れ親しもうと挑戦するシリーズ、今回はクラシックエディターのリライト問題をできるだけ簡単に解決する方法です。

今回の目的は?

クラシックエディターで書いた記事を リライトしたい場合。


記事の内容が単純な構造なら、何も考えずブロックエディターに変換すれば良いでしょうけれど、


・<Table>を駆使したり、
・凝ったCSSで 装飾している場合、


ブロックエディターに変換することで、

表示がバグったらどうしよう?

と怖くて、リライトできない状況‥ありませんか?

『万が一の変換バグ』のために、記事を複製するにはプラグインが必要です。でも私はそのためにプラグインを入れるのが面倒くさい🥲

そこで今回、できるだけアタマを疲れさせず
・クラシックエディターからブロックエディターに変換
・コードも綺麗にする方法
‥できるだけ早くリライト作業に取りかかりたい方のため、備忘録として記したいと思います。

ゴリ押しの手っ取り早い方法です。WordPressのルール上、正しいかどうか保証しかねますので、試される場合は自己責任にてお願いいたします

目的の記事を開く

step
1
コードエディタに切り替える

目的の記事を開いて【 Ctrl + Shift + Alt + M 】でコードエディタに切り替える

step
2
全文をコピーする

【 Ctrl + A 】で 全文を選択して【 Ctrl + C 】でコピーする(全文コピーする)

コードをメモ帳に置いておく(保存)

step
3
メモ帳にコードを貼る

PCで お手持ちの📝メモ帳ソフトを開き、
【 Ctrl + V 】で コード全文を丸ごと貼り付ける

気力がある方は、このメモ帳の内容を丸ごと保存しておくと安心。保存形式はUTF-8を選択すること(文字化けしちゃう)➡詳細が気になる方ははこちらをご覧ください‥文字コードはUTF-8? UTF-8N?|Studio947

下書き用の記事で作業する

step
4
下書用の記事で切出し作業

❶ 下書き作業として、新規記事を作成する(完成したら削除してください)

❷ 下書き用の記事に【カスタムHTML】ブロックを挿入する

❸ メモ帳から『見出し単位』でコードを切り出して、【カスタムHTML】 内にペーストする(その際にはドコまで作業したのか?混乱しないように気をつけて)

この方法が気に入らなかったら、👇違うやり方もあります(私はコチラ派)

このやり方もアリ

メモ帳とのやり取りが面倒くさいなら(私は面倒です)、Wordpress内で完結させることもできます。やり方は以下をご覧ください

❶ 下書き作業用の記事に【カスタムHTML➀】を挿入したら、ソコに『コード全文』を入れる

❷ そのブロックの下に新規で 【カスタムHTML②】を挿入 して、コード全文の『2番目のブロックから下の全文』を切り出して、 【カスタムHTML❷】 に全文挿入する

❸ さらにその下に 【カスタムHTML③】 を新規に挿入して、 コード全文の『3番目のブロックから下の全文』を切り出して、 【カスタムHTML③】 に全文挿入する

➡ 順番に 【カスタムHTML】 ブロックを作成し、中身を貼り付けてカットして、徐々に下に下がっていく‥を繰り返して完成を目指すワケです

step
5
プレビューで確認する

【カスタムHTML】へのコードの貼り付けが終わったら、余計なタグなどを削除して、コードを整える。

記事を保存してから【プレビュー】>【新しいタブでプレビュー】で記事の表示状態を確認する。

表示に問題が無いなら、コードエディタにしてコード全文をコピーする

完成

step
6
本番記事に貼付け、ブロックエディターに変換

❶ リライトしたい本体の記事をひらく

❷ コードエディタモードの状態で、コード全文を削除する

注意⚠ 必ず、コード全文のバックアップがある状態で作業してください

❸ テスト作業用の全文コードを貼り付ける

❹ コードエディタを終了し、ブロックエディターに戻る。

最後にプレビューを確認して、問題が無いようなら終了です

‥ということで、今回は以上です。
過去の記事で、ミョーに表示に時間がかかる記事があります。ブロックエディターに変換しなくてはならないのかな? 時間の浪費がすさまじいです‥😂

【WordPress】HTMLブロックに画像を貼ってスタイルを適用する【ブロックエディター】

WordPressのブロックエディターを使用しているうえで、覚えておきたいワザ(?)を 自分のために備忘録します。 もくじ1 やりたいこと2 画像を貼る3 HTMLで編集する4 HTMLブロックに変換 ...

続きを見る

こちらの記事もどうぞ