![見出し画像](https://assets.st-note.com/production/uploads/images/25562045/rectangle_large_type_2_c564ca339fad84f3563759ffe49c8dcb.jpg?width=1200)
これで解決!ClassicエディタからGutenbergに記事をインポートすると管理画面が真っ白になるバグ。
先日のリニューアル作業で予想外の状況になったので、解決法をメモしておきます。
下記がリニューアル前、リニューアル後の簡単な仕様となります。
_ リニューアル前
バージョン: WordPress 4.2.27
記事の管理: カスタム投稿
エディタ: Classicエディタ
_ リニューアル後
バージョン: WordPress 5.4.1
記事の管理: カスタム投稿
エディタ: Gutenberg
作業手順を簡単にまとめました。
1. ローカルにWordpress環境を構築
ローカルで作業するため、Wordpress環境を構築する必要があります。
環境構築にはLocal by Flywheelというアプリを使って環境を準備しました。
Local by Flywheelとは?
ローカルにWordpressを構築できるフリーのソフトウェアになります。
インストールして5分ほどで準備ができるので、おすすめです。
導入方法については下記のサイトを参考にしてください。
※ローカルに構築したWordpressは5.4.1(現時点では最新)
WordPressローカル環境を簡単に作る方法|【Local by Flywheel】
https://momonoisho.com/local-by-flywheel-install
2. 既存サイトのWordpressとローカルに構築したWordpressの記事を同じ状態にする
ローカルにWordpressの環境ができたので、記事をローカルに移行します。
一番簡単な方法としては、既存のWordpress管理画面から記事をエクスポート、ローカルのWordpress管理画面でインポート。
これが一番簡単かと。
ただ、この方法だと下記のデメリットがあります。
_ 記事IDが変わる
_ アイキャッチ画像が反映されない
今回は記事IDは変更したくなかったので、DBから直接エクスポートする方法で進めました。
1. 既存サーバーからDBからエクスポート
2. エクスポートしたデータをローカル環境にインポート
3. このままだとURLが既存サイトのままなので、URLの書き換え
https://既存サイト.com → https://ローカル.local
4. ローカルにも同じスラッグ名でカスタム投稿を作成
3. これで準備OK!と思ったら...
記事を確認するため、管理画面でカスタム投稿の記事一覧ページへ。
既存サイトと同じ状態になっていたので、これで準備OK。
とはならず...
記事一覧ページまでは良かったんですが。
記事編集画面へ行くと...ん?
画面が真っ白!
読み込みが遅い?
いや、読み込みは完了してるし。
しばらく待ちましたが、変化なし。
どの記事も同じ状態に。
検索すると、同じ状況になった方がいました。
→ 5.02でもGutenbergが使えない。
色々方法を試しましたが、どうにもならず...
いくつかの解決法の中にあった、「Classic Editor」を試してみました。
インストールして、クラシックエディタモードで記事編集画面にいくと...
開いた!
編集できる!Classic エディタだけど。
でも今回はGutenbergを使う必要があるので、これでは解決できていません。
4. そこで以前使ったことのあるプラグインをかませてみよかと。 ふと思いつきました。
そのプラグインは「Post Type Switcher」です。
記事の投稿タイプを変更することのできるプラグインです。
非常に便利なプラグインです。
手順としては2つのカスタム投稿を用意。
_ カスタム投稿A(記事はあるが、gutenbergでは開けない)
_ カスタム投稿B(新しく作成した投稿)
カスタム投稿Aにある記事を「Post Type Switcher」を使って、カスタム投稿Bに移行。
使い方については下記サイトを参考にしてください。
Post Type Switcher:投稿の編集画面等で投稿タイプを切り替えられる
https://www.hiskip.com/wp/plugin/post/12825.html
これだけです。
カスタム投稿Bの記事編集画面を開くと、
無事にgutenbergの状態で本文が反映されていました。
アイキャッチ画像も反映されています。
gutenbergのブロックは下記の状態で反映されていました。
_ ブロック: フォーマット > クラシック
5. まだまだこれからのgutenberg
gutenbergは非常に高機能なエディタです。
classicエディタからの移行に抵抗を感じる人は少なくないかもしれません。
けして難しいエディタではありません。
使い慣れれば非常に使いやすいエディタです。
まだ使っていない方はぜひ!