ACF の WYSIWYG エディターの高さ調整

WordPress
記事内に広告が含まれています。

意外と日本語の情報がなかったので。ACF の WYSIWYG エディターの高さを調整する方法です。

参考 Set WYSIWYG Height – ACF Support
参考 How to set a custom height for WYSIWYG? – ACF Support

/**
* ACF WYSIWYG エディタの高さ変更
* see also:
* https://support.advancedcustomfields.com/forums/topic/set-wysiwyg-height/
* https://support.advancedcustomfields.com/forums/topic/how-to-set-a-custom-height-for-wysiwyg/
*/

// ACF WYSIWYG エディタの iframe の min-height を 0 にして textarea の高さを指定
function my_custom_css_acf_wysiwyg()
{
?>
<style>
.acf-field-abcdefghijklm .acf-editor-wrap iframe {
  width: 100%;
  min-height: 0;
  height: 100px;
}
.acf-field-abcdefghijklm .wp-editor-container textarea.wp-editor-area {
  height: 100px !important;
}
</style>
<?php
}
add_action('admin_head', 'my_custom_css_acf_wysiwyg');

// ACF WYSIWYG エディタのインライン CSS を削除
function my_acf_input_admin_footer()
{
?>
<script type="text/javascript">
(function($) {
  acf.add_action('wysiwyg_tinymce_init', function( ed, id, mceInit, $field ){
    $(".acf-field-abcdefghijklm .acf-editor-wrap iframe").removeAttr("style");
  });
  // 繰り返しフィールドを並べ替えた際に再設定されてしまうので削除
  acf.add_action('sortstop', function( $el ){
    $(".acf-field-6975f807a5f45 .acf-editor-wrap iframe").removeAttr("style");
  });
})(jQuery); 
</script>
<?php
}
add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

 

abcdefghijklm は ACF のフィールド ID で、特定フィールドのみ適用したい場合に付与。ACF の全 WYSIWYG エディターに適用したい場合は “-abcdefghijklm” を削除すればOK。

タイトルとURLをコピーしました