WordPress | Advanced Custom Fields (Secure Custom Fields)のリッチエディタの高さを調整する方法

「Advanced Custom Fields（ACF）」として知られていたプラグインは、フォークされて「Secure Custom Fields」に改名されました。本記事では、Secure Custom Fieldsを用いてWordPressサイトのリッチエディタ（WYSIWYG）フィールドの高さを調整する方法をご紹介します。

利用環境

• Secure Custom Fields バージョン: 6.3.9
• WordPress バージョン: 6.6.2
• PHP バージョン: 8.1.29

リッチエディタの高さを変更する方法

以下のコードを functions.php ファイルに追加することで、Secure Custom Fieldsのリッチエディタの高さを変更できます。今回は、エディタの高さを600pxに設定する方法を例にしています。

/**
 * Secure Custom Fields リッチエディタ高さ調整
 */
function custom_scf_wysiwyg_all_height()
{
    ?>
    <script type="text/javascript">
        (function($) {
            $(document).ready(function(){
                // 全てのwp-editor-areaクラスのtextareaの高さを600pxに変更
                $('.wp-editor-area').css('height', '600px');
            });
        })(jQuery);
    </script>
    <?php
}
add_action('acf/input/admin_footer', 'custom_scf_wysiwyg_all_height');

コードの解説

• add_action('acf/input/admin_footer', 'custom_scf_wysiwyg_all_height');
  Secure Custom Fieldsのリッチエディタが表示される管理画面のフッターに、JavaScriptコードを追加しています。
• $('.wp-editor-area').css('height', '600px');
  jQueryを用いて、すべての wp-editor-area クラスに高さを600pxに設定しています。

カスタマイズのポイント

• 高さの調整: 600pxに設定した高さは、好みに応じて任意の値に変更できます。サイトデザインや用途に合わせて適切な高さを選択しましょう。
• 競合に注意: 他のプラグインやテーマが同様の wp-editor-area クラスにスタイル指定を行っている場合、スタイルの競合が発生する可能性があります。この場合、クラスに追加のセレクタやスタイルシートで独自の指定を行うと良いでしょう。

まとめ

Secure Custom Fieldsのリッチエディタ高さを調整することで、管理画面でのコンテンツ作成がより快適になります。このコードを追加することで、管理画面の表示が改善され、操作性も向上するでしょう。