Advanced Custom Fields(ACF)でフィールドの表示位置が変更できない時の解決方法
WordPressでカスタムフィールドを簡単に作成して管理できるプラグインといえば、Advanced Custom Fields（アドバンスド カスタムフィールズ）じゃないでしょうか。個人的にはWordPressの標準機能にして欲しいくらいです。
そんな私のお気に入りのAdvanced Custom Fieldsですが、以前からカスタムフィールドの表示位置が思い通りに動かせなくなる事が、たま～にありました。その都度「あれ？バグかな？」なんて思って、適当にやり過ごしてきたのですが、ちょっと今回はそうもいかず、ちゃんと直してみました。
同じ状況の方がいましたら、簡単に直せますのでやってみて下さい。
～ 目次 ～
位置を変更しても反映されない
Advanced Custom Fieldsには、オプションに「位置」という項目があり、作成したカスタムフィールドの表示位置を変更できるようになっています。
この記事を書いている時点（2018-07-21）では
- High（after title）
- Normal（after content）
- Side
以上の3種類から選べます。（環境によって、日本語に翻訳されているかもしれません。）
上から、記事タイトルの下・記事本文の下・サイドバー表示ですね。
しかし、変更しても位置が変わらない。
たしか、カスタムフィールドの作成を始めた頃は、しっかりと変更できたはず・・・
ですが、何回試しても一向に変わらない。私の場合は２つに分けて作ったカスタムフィールドが、デフォルトのエディターの上下に分かれてしまいました・・・。
せっかくお客さんが使いやすいように作ってるのに「残念…」では済まない状況です。
原因はWordPress
原因はAdvanced Custom FieldsというよりWordPressの方でした。
投稿画面のボックスの配置はドラッグ&ドロップで自由に変更できますよね。この情報を、ユーザーごとに仕分けしてデータベースに記録しているんですね。だから、前に移動したボックスの位置が記憶されていて、使いやすいわけです。でも、今回はこのデータが干渉して、変更ができなくなっています。
カスタムフィールドを作成し始めた頃はこのデータが無かったので、意図通りに変更可能でした。
しかし、ちょこちょこボックスの配置を変えたりしたので、そのデータが干渉して、位置変更が上手く動かなくなっています。
投稿画面のボックスレイアウトが記録されている場所
「カスタムフィールドの位置さえ変更できりゃいいんだよ！」という方は読み飛ばして下さい。
どこに記録されているかというと、wp_usermetaテーブルに保存されていました。
user_idカラムとmeta_keyカラムを組み合わせて、ユーザーごとにボックスの配置を変更した情報が記録されています。
meta_keyの値が下の3タイプの行が、ACFの位置変更を邪魔しています。
- meta-box-order_post（投稿ページ）
- meta-box-order_page（固定ページ）
- meta-box-order_〇〇（カスタム投稿タイプ）
※３はカスタム投稿タイプを作成して使用している場合です。〇〇にはカスタム投稿タイプのスラッグが入ります。
これらは、全部あるわけではないようです。ボックスをドラッグしたりして配置を変更すると作成されます。
つまり、user_idが「1」のユーザーが見た投稿ページでのボックス配置は、user_idカラムの値が「1」でmeta_keyカラムの値が「meta-box-order_post」の行のmeta_valueカラムに記録されています。
フィールド位置の変更が正常に反映されるようにする方法
さて、実際にACFのカスタムフィールドが、オプションで設定した場所に表示されるようにする方法です。
以下のコードをコピーして、現在使用しているテーマのfunctions.phpに貼り付けて更新しましょう。
これで現在ログインしているユーザーの「固定ページ」と「通常投稿ページ」の編集画面のボックス配置データが消去され、カスタムフィールドの表示位置がちゃんと反映されるようになります。
|
1 2 3 4 5 6 7 |
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' ); |
カスタム投稿タイプを使用している場合
カスタム投稿タイプの投稿画面の場合は、下のコードをfunction内（波カッコ内の中）に追加しましょう。
『YOUR_CPT_SLUG』の部分は、カスタム投稿タイプのスラッグに置き換えて下さい。
|
1 |
delete_user_meta( wp_get_current_user()->ID, 'meta-box-order_YOUR_CPT_SLUG' ); |
例：スラッグがproductの場合
|
1 |
delete_user_meta( wp_get_current_user()->ID, 'meta-box-order_product' ); |
指定のユーザーのボックス配置データだけクリアする場合
コードの各行の以下の部分を、ユーザーのユーザーIDに変更してください。
|
1 |
wp_get_current_user()->ID |
例：ユーザーIDが16の場合
|
1 2 3 4 5 6 7 |
function clear_meta_box_order(){ // ↓通常の投稿ページの編集画面 delete_user_meta( 16, 'meta-box-order_post' ); // ↓固定ページの編集画面 delete_user_meta( 16, 'meta-box-order_page' ); } add_action( 'admin_init', 'clear_meta_box_order' ); |
最後に
ちゃんと思い通りの位置にカスタムフィールドが表示されるようになったでしょうか？
このコードは、継続的にボックスの配置の記録をリセットしてしまいますので、カスタムフィールドの位置が、Advanced Custom Fieldsで設定した通りになる事を確認したら消しておきましょう。
参考サイト
Advanced Custom Fieldsの公式フォーラムの以下のページが参考になりました。
https://support.advancedcustomfields.com/forums/topic/position-high-after-title-not-working/
[…] 参考 Advanced Custom Fields(ACF)でフィールドの表示位置が変更できない時の解決方法WEB TIPS […]