WordPress プラグイン ACF のテキストエリアを8行未満にする方法

WordPress のプラグイン Advanced Custom Fields の、管理画面内で表示されるフィールドタイプのテキストエリアを8行未満にする方法を紹介します。

テキストエリアを8行未満にする方法

WordPress のプラグイン Advanced Custom Fields は、様々なフィールドタイプのカスタムフィールドが作成できる便利なプラグインです。様々なフィールドタイプが作成できるだけに、管理画面内で表示されるフィールドのマージンなども気になってくるところ。
その中でもフィールドタイプの一つテキストエリアは、行数の指定がある割には8行未満にできないので、今回はCSSを調整して、テキストエリアの行数を8行未満にする方法を紹介します。

テキストエリアの行数が8行未満にできない理由は、デフォルトのCSSの指定にあります。
次のコードは、テキストエリアのデフォルトのCSSの指定です。


.acf_postbox .field textarea {
resize: vertical;
min-height: 150px;
}

領域の高さの最小値を指定している min-height: 150px; を auto にすれば問題解決なんですが、プラグインのCSSを修正すると、アップデートのタイミングで設定が元に戻ってしまうので、今回は管理画面に上書き用のCSSを読み込んで対応することにします。
次のコードを functions.php に追加します。


/* 【管理画面】管理画面カスタマイズ用CSSを読込 */
function admin_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/admin.css">';
}
add_action('admin_head', 'admin_css');

コードを追加すると、管理画面内に独自のCSSファイルを読み込めるようになります。今回は、テーマファイル内に admin.cssを読み込む設定です。ファイル名やディレクトリは案件に応じて自由に変更してください。
次は、読み込んだCSSファイルに次のコードを追加します。


.acf_postbox .field textarea {
min-height: auto !important;
}

領域の高さの最小値を auto にすることで、テキストエリアの行数を8行未満にすることができるようになります。

まとめ

WordPress のプラグイン Advanced Custom Fields の、管理画面内で表示されるフィールドタイプのテキストエリアを8行未満にする方法を紹介しました。

スポンサーリンク

私が続けて読みたい関連記事