クイック編集画面に項目を追加したら表示が崩れる場合の対処例(メモ)

公開日:2024(令和6)年12月18日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPressでカスタムタクソノミーを追加したり、カスタムフィールドの値などを表示させて編集可能にしたりすると、クイック編集画面がひどい状態になりませんか?

これはそもそもクイック編集の画面自体が3列設定になっていて、カスタムタクソノミーは分類内(カテゴリー・タグの一部)に追加され、その他の追加項目はテンプレートの選択などの領域内に追加されるためで、これらの3列がなんとなく?幅指定されているのが原因のようです。

いろいろと調べてみましたが、これを簡単に2列にするような関数はなく、後から列数の構造を変えるようにjQueryを追加したりすることが必要なようでしたが、以下の方法で簡易的に解消できましたのでメモとして公開しておきます。

管理画面側に適用されるスタイルシートに以下を追加すると2列になり、それなりな見た目になります。

/* クイック編集画面を2列にする */
#wpbody-content .quick-edit-row-post .inline-edit-col-left {
    width: 100%;
}

#wpbody-content .inline-edit-row-post .inline-edit-col-center {
    width: 40%;
}

#wpbody-content .quick-edit-row-post .inline-edit-col-right {
    width: 60%;
}

一度有効化しているテーマのstyle.cssへ追加して表示が変わったかを試してみてください。

スタイルの適用には通常キャッシュのクリアが必要なので、クイック編集画面を表示させた状態で「Ctrl」+「F5」を押して表示が変わるかを試してください

もしも何も変化がない場合には、そのファイルが管理画面側に反映されていない環境なのかも知れませんので、上記コードの代わりに、有効化しているテーマのfunctions.phpへ以下のコードを追加して再度試してみてください。

function pwcn_admin_quick_edit_style(){
?>
<style>
/* クイック編集画面を2列にする */
#wpbody-content .quick-edit-row-post .inline-edit-col-left {
    width: 100%;
}

#wpbody-content .inline-edit-row-post .inline-edit-col-center {
    width: 40%;
}

#wpbody-content .quick-edit-row-post .inline-edit-col-right {
    width: 60%;
}
</style>
<?php
}
add_action('admin_head','pwcn_admin_quick_edit_style');



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)
ブロックテーマでサイトの背景画像を設定する5つの方法