[WordPress] 海外有料テーマEnfoldのAdvanced Layout Editorがロードされない問題と解決法

ことのはじまり

Enfoldという海外有料テーマを使用している既存のWordPressサイトを引き継ぎ、手を入れていた時のこと。

Enfoldには「Avia Layout Builder」というリッチなエディタが装備されており、そこを触っていたら、ふとした拍子にエディタがLoading画像くるくる状態のままになってしまったのです。

じゃあクラシックエディタに戻そうかと思っても、ボタンが押せない。つまり全然編集できない。
PC再起動しても、キャッシュとクッキー全消しでログインし直してもだめ。

…これはまずいやつなのでは…

現状把握

冷や汗をかきつつ、まずは現状把握。
この現象が起きるのは固定ページの編集画面だけ。カスタム投稿含む投稿ページは至って問題なし。

Chromeのデベロッパーツールでコンソールを確認すると、

Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'toArray'　

とか赤文字で言われてます。何それ。

類似事例を発見

Google先生に思いつく限りのワードを打ち込んで、色々試してはダメでお腹が痛くなりそうだった頃、ようやくそれっぽいものが見つかりました。助かった…

ずばりお膝元（このテーマ開発元）のフォーラムです。さすがです、頼りになります。
[ADVANCED LAYOUT EDITOR not working? Try this, worked for me.]
(https://kriesi.at/support/topic/advanced-layout-editor-not-working-try-this-worked-for-me/page/2/#post-730036)

I looked at the console and the error given was: “Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method ‘toArray'”.

この質問者さんも、固定ページはダメで投稿ページはOKって言ってるし、コンソールエラーの内容がまさに同じ！

そして彼は「エディタのボックスレイアウトを変えようとした時に壊れた（と思う）」って言ってるんだけど、よくよく思い返せば、何かをコピろうとしてドラッグした時にうまくできなくてちょっと動いちゃってた…かも。結果的にボックスを移動させたような挙動をしてしまってた。これだ、同じだ。

さて、それではどうすればいいかというと、一つ目の解決策としては「新しい管理者を作ってそれでログインすると正常に動くよ」

うーん、確かに。
でもなんかきちんと解決してなくて気持ち悪いな。

同じ質問者さんが

In the wordpress table “_usermeta” there exists a “meta_key” called “meta-box-order_page” for each “User_id”.

とも言ってます。よくわからないけど、「_usermeta」とか「meta-box-order_page」あたりがキーになりそうじゃないですか？

と思い、またGoogle先生にお尋ね。
そしてわかりました。

解決編

参考にさせて頂いたのはこちらの記事。ありがとうございました。
Advanced Custom Fields(ACF)でフィールドの表示位置が変更できない時の解決方法

つまり結論から言うと（おそらく）こういうことです。
「meta-box-order_page」が壊れていた と。
（投稿はmeta-box-order_postなので、そちらの編集画面は無事だったのでした）

ちなみにmeta-box-order_page/postとはなんぞや？と言うと、編集画面でボックスの位置を動かした時に、その位置情報をWordpress側で覚えておくためのものらしいです。
今回はこれが何かの拍子におかしくなってしまったのだろうということです。

修復作業

理由がわかればあとは修復するだけ。
meta-box-order_pageをリフレッシュします！

functions.phpの最後尾に以下を貼り付け。

function clear_meta_box_order(){
    // 通常の投稿ページの編集画面
    delete_user_meta( wp_get_current_user()->ID, 'meta-box-order_post' );
    // 固定ページの編集画面
    delete_user_meta( wp_get_current_user()->ID, 'meta-box-order_page' );
}
add_action( 'admin_init', 'clear_meta_box_order' );

これで、今ログインしているユーザーのボックス配置データをクリアにします。

恐る恐る固定ページの編集画面に戻ってみると…Advanced Layout Editorが復活してる！よかったー！！！

上記のコードを残したままだとボックスレイアウトが記憶されないので、それはイヤだなという場合は、表示が正常に戻ったら消しちゃえばOKです。

enfoldを使ってる方は少ないかもしれませんが、また自分がやらかす時のためにも書き残しておきます。