更新:2017年12月25日/ろあんぬ(WEB)

【解消済】WPプラグイン「Intuitive Custom Post Order」一覧並び替えの際に行幅が狭くなる問題の対応策

2019.3.13追記
この記事が開発者様の目にとまったようで、なんと修正アップデートをしてくださいました!というわけでこの記事の症状はすでに解消済ですので、症状が出てる方はプラグインのアップデートをしてください!
下記の記述をfunctions.phpにしていた方は、アップデートしたら削除してください。
どうぞよろしくお願いいたします。

お仕事で「Intuitive Custom Post Order」というWPプラグインを使用しなければならない案件があり導入したのですが、一覧の画面でドラッグ&ドロップしようとすると、記事一覧の行幅が半分になりレイアウト崩れが起きる不具合に遭遇してしまいました。

恐らくWPバージョンの相性の問題なのかもしれませんが、似たような悩みを抱えているスレは発見出来たものの、解決策についてはレスが無いまま閉じられてしまっていて解決方法がわからずじまい。

試しにこのサイトにも同プラグインを導入してみましたが、やはり同じ不具合が発生してしまいました。

こうなったら自分で調べるしかないなーとコンソールとにらめっこしながら原因を探りました。

解決策

結論から述べますと、下記のソースをfunctions.phpへ記述することで解決しました。

<?php
function custom_admin_style() {
<style>.ui-sortable-placeholder {display:none;}</style>
}
add_action( 'admin_head', 'custom_admin_style' );
?>

原因

記事のドラッグを行った際、動かそうとしている行のソースが裏で「visibility:hidden」というstyleで隠されており、これがtableのスタイルの「table-layout:fixed」に影響を与えているようでした。

「visibility:hidden」は「要素はそこにあるけど見えない状態」にするstyleであり、「要素がそこにある」判定になっているせいでtableのレイアウトに干渉しているという感じですね。

なので、管理画面にこのソースに対して「display:none」を適用することで「見えないし、要素自体もそこにない」判定を与え、レイアウト崩れを解消しました。

もしかしたら幅を0にするやり方の方がスマートかもしれないですが、今のところdisplay:noneで影響なさそうなのでこれで少し様子見します。

バージョンアップで解消されるかもしれないので、直ったら上記ソースはfunctions.phpから削除してしまいましょう。

現場からは以上です!

 

この記事を書いた人

ろあんぬ

サイトの制作担当。主にアビスリウム・WEB制作関連の記事を書いています。最近はデジモンリアライズにハマっているのでそちらの記事もボチボチ。ほぼブログの更新つぶやきになってるけど一応Twitterもやってます。話しかけてもらえたら反応します!(@roanne_mohulog)

スポンサーリンク

関連記事

Comments コメントを書く

  1. hijiri より:

    Intuitive Custom Post Orderプラグインの開発者です。
    こちらの記事を参考にさせていただきv3.1.2にバージョンアップさせていただきました。
    ありがとうございました。

    • ろあんぬ より:

      >hijiri様
      わー!!hijiri様、こんな記事を見てくださった上にアプデまでしてくださり、本当に感謝いたします!!
      いつもプラグイン大変ありがたく使用させていただいておりますm(__)m
      こちらこそ、ありがとうございました!

コメントを書く

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

PageTop