2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Advanced Custom Fields で突然フィールドが表示されなくなった

Last updated at Posted at 2019-06-19

##なにがあったのか
なにもしてないのに Advanced Custom Fields が壊れた
Advanced Custom Fields(以降 ACF) を使ってカスタムフィールドの設定をしていたところ、特に前触れもなくフィールドの入力欄が消えて編集できなくなった。

##20190619 追記
以下では wp-admin/load-styles.php が悪者みたいな書き方になってしまっていたけれど、よくよくソースを読んでいると、そもそも ACF の入力項目のなかでフィールドにだけ開閉部分が用意されていないのが問題だった。
で、フィールドにだけ開閉部分が存在しない原因が以下。

acf-field-group.css?ver=5.8.1
#acf-field-group-fields>.handlediv,
#acf-field-group-fields>.hndle {
    display: none;
}

これによってフィールドについては開閉部分が非表示になっている。
にも関わらず .closed によって子要素が非表示になるスタイルは依然として適用されているため、.closed がついたままになり、トグルが不可能になってしまっているということだった。罠はあらゆるところに潜んでいる

ということで修正としては functions.php に以下のコードを追加がベターのようです。

functions.php
add_action('admin_head', function () {
    echo '<style>
    #acf-field-group-fields>.handlediv,
    #acf-field-group-fields>.hndle {
        display: block !important;
    }
  </style>';
});

###以下は古い内容です
##解決
functions.php に以下のコードを追加する。

add_action('admin_head', function () {
  echo '<style>
    .js .closed .inside {
      display: block !important;
    }
  </style>';
});

##原因
ACF では入力欄を折りたたむことができ、そのとき要素に対して .closed が付与される。またこの要素には子要素として .inside というのがいる。

で、その .closed (の中の .inside) のスタイルが何処かからやってきた.js .closed .inside を含んだセレクタによって display: none とされていたのが原因だった。

なので、とりあえずの処置としてはその余計なスタイル指定を上書きして display: block にしてやれば表示されるようになる。

そして問題の「何処かからやってきた」セレクタのソースを見ると……
wp-admin/load-styles.php

wordpress の洗礼はまだまだ続くようだ。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?