Bài viết này dành để lưu lại tính năng mở rộng không gian soạn thảo Classic Editor. Đây là tính năng mà mình vừa mới nghịch được, quá hay và hữu ích luôn. Nếu bạn là một người thường làm việc với combo soạn thảo Classic Editor + chia 2 cửa sổ làm việc thì phương án này y bài.
Đây là vấn đề mà trong hơn 15 năm qua người dùng WordPress có lẽ đã không thấy thoải mái, thậm chí là rất bí bách khi viết bài trong chế độ Classic Editor. Đặt biệt là khi thực hiện trên các thiết bị có màn hình nhỏ như máy tính bảng hoặc khi chia cửa sổ làm việc. Ảnh bên dưới là ví dụ về một bên đang chế độ viết bài, một bên tra cứu thông tin/ hướng dẫn.
Giải pháp của mình là tạo một nút nhấn đặt phía trên của thanh công cụ, cùng hàng với các tab chế độ soạn thảo trực quan/ chế độ HTML. Khi bạn muốn thu gọn những thứ không cần thiết thì nhấp vào nút Ẩn Toolbar >> nó sẽ ẩn đi những phần tử mình đã đặt sẵn, khi nào cần hiện thì bấm lại nút đó. Kết quả là được khung soạn thảo cực tinh gọn như ảnh chụp màn hình phía trên. Nếu không có tính năng này thì bạn chỉ có chưa được 1/2 diện tích soạn thảo.
Để lắp nút ẩn hiện thanh Toolbar này thì bạn copy đoạn code bên dưới và chèn vào phía cùng trong file Functions.php của theme/ child theme đang dùng. Ưu tiên áp dụng cho web dùng theme GeneratePress và plugin Advanced Editor Tools. Blog Hocban.vn đang dùng combo này, mình test thấy oke rồi và đang xài mỗi ngày. Các web dùng combo khác mình chưa có test, bạn test thử xem sao ^^
//Tối ưu không gian soạn thảo Advanced Editor Tools
function custom_toolbar_css_toggle_button_final_v24($hook) {
if ( ! in_array($hook, array('post.php', 'post-new.php')) ) {
return;
}
wp_enqueue_style( 'dashicons' );
$custom_css = <<<CSS
.toolbar-hidden #content{padding-top:25px!important;}
.toolbar-hidden .mce-edit-area iframe#content_ifr{padding-top:25px!important;}
html.wp-toolbar.toolbar-hidden{padding-top:0!important;}
body.toolbar-hidden{margin-top:0!important;padding-top:0!important;top:0!important;}
body.toolbar-hidden #wpadminbar{opacity:0!important;height:0!important;overflow:hidden!important;position:absolute!important;pointer-events:none!important;z-index:-1!important;}
body.toolbar-hidden #wpcontent{padding-top:0!important;margin-top:-20px!important;}
.toolbar-hidden .wp-editor-wrap{margin-top:-2em!important;}
.toolbar-hidden #wp-content-editor-tools{margin-top:-1.2em!important;}
.toolbar-hidden .mce-flow-layout{margin-top:-1.2em!important;}
@media screen and (max-width: 1024px) {
.toolbar-hidden .mce-flow-layout{margin-top:0px!important;}
}
#wp-content-editor-tools{position:relative;min-height:40px;display:flex;align-items:center;justify-content:flex-end;}
#wp-content-editor-tools .wp-editor-tabs{margin-right:auto;}
#custom_css_toggle_btn{background:#f0f0f0;color:#32373c;border:1px solid #c3c4c7;padding:4px 8px;font-size:14px;cursor:pointer;border-radius:4px;line-height:1.5;transition:background .15s ease;box-shadow:none;outline:none;margin-left:10px;}
#custom_css_toggle_btn:hover{background-color:#e0e0e0;border-color:#7e8993;}
#custom_css_toggle_btn .dashicons{vertical-align:middle;font-size:16px;margin-left:5px;width:16px;height:16px;}
.toolbar-hidden #wp-content-editor-container .mce-toolbar-grp,
.toolbar-hidden .wp-heading-inline,
.toolbar-hidden a.page-title-action,
.toolbar-hidden #titlediv{display:none!important;}
CSS;
wp_add_inline_style('wp-admin', $custom_css);
$custom_js = <<<JS
(function(\$) {
var openIcon = '<span class="dashicons dashicons-arrow-up-alt2"></span>';
var closedIcon = '<span class="dashicons dashicons-arrow-down-alt2"></span>';
var initialButtonHTML = '<button type="button" id="custom_css_toggle_btn" aria-expanded="true">Ẩn Toolbar ' + openIcon + '</button>';
function setupToolbarToggle() {
var \$targetArea = \$('#wp-content-editor-tools');
var \$adminBody = \$('body');
var \$html = \$('html');
if (\$targetArea.length > 0 && \$('#custom_css_toggle_btn').length === 0) {
\$targetArea.append(initialButtonHTML);
}
\$('#custom_css_toggle_btn').off('click').on('click', function() {
var \$button = \$(this);
\$adminBody.toggleClass('toolbar-hidden');
\$html.toggleClass('toolbar-hidden');
if (\$adminBody.hasClass('toolbar-hidden')) {
\$button.html('Hiện Toolbar ' + closedIcon);
\$button.attr('aria-expanded', 'false');
} else {
\$button.html('Ẩn Toolbar ' + openIcon);
\$button.attr('aria-expanded', 'true');
}
});
}
\$(document).ready(function() {
setupToolbarToggle();
});
\$(document).on('tinymce-editor-init', function() {
setupToolbarToggle();
});
})(jQuery);
JS;
wp_enqueue_script('jquery');
wp_add_inline_script('jquery', $custom_js, 'after');
}
add_action('admin_enqueue_scripts', 'custom_toolbar_css_toggle_button_final_v24');Ngoài ra, nếu bạn chưa tiện áp dụng thủ thuật này thì có thể thực hiện bằng cách nhấn nút thu gọn thanh công cụ bên trái của trang quản trị. Nó cũng giúp tăng không gian soạn thảo lên kha khá. Đồng thời bật chế độ toàn màn hình cho trình duyệt luôn cho vùng soạn thảo được cao lên xíu nữa (chiều rộng không đổi đâu).
