WordPress のプラグイン Advanced Custom Fields のフィールドタイプのテキストエリアを8行以下に縮める方法を紹介します。
例えば、管理画面の縦幅を縮めたい時に便利な方法です。
フィールドタイプのテキストエリアを8行以下に縮める方法
Advanced Custom Fields は様々なフィールドタイプのカスタムフィールドが作成できる便利なプラグイン。
様々なフィールドタイプが作成できるだけに管理画面も縦長になりがち、特にテキストエリアがタテ積みになってしまうと更新もし辛くなってしまいますよね。
テキストエリアには表示行数の指定がるんですが、無料版では表示行数を8行以下にすることができません。
そこで今回は、CSSを調整してテキストエリアの行数を8行以下に縮めてみたいと思います。
8行以下にできない原因
そもそもテキストエリアの行数が8行以下にできない原因は、プラグインのCSSの指定にあります。
次のコードは、プラグインのテキストエリアのCSSの指定内容です。
.acf_postbox .field textarea {
resize: vertical;
min-height: 150px;
}
例えばこれを次のように変えてみます。
.acf_postbox .field textarea {
resize: vertical;
min-height: auto ;
}
テキストエリアの高さ指定の最小値を min-height: 150px; を min-height: auto; にしてしまえば問題解決なんですが、プラグインのCSSはアップデートのタイミングで設定が元に戻ってしまう可能性があります。
アップデートの度に同じ修正をするのは面倒なので、今回は管理画面に上書き用のCSSを読み込んで対応することにします。
解決方法！ 上書き用の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行以下に縮める方法を紹介しました。
有料の ACF PRO の場合は CSS をいじことなく行数を設定できます。お金に余裕がある場合は迷わずプロ版を購入しましょう。