意外と日本語の情報がなかったので。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。
