Bài viết này chia sẻ đến ae cách mở rộng không gian soạn thảo Classic Editor. Mình cay cú cái cách bố trí mặc định (classic editor) của WordPress lâu rồi, nó quá gò bó. Nếu mắt kém, muốn zoom lên cho dễ nhìn thì bạn chỉ có 40% không gian soạn thảo, rất là bí bách. Còn Block Editor thì không thật sự tối ưu cho người viết blog thuần tuý, nó thiên hướng tối ưu cho dựng trang hơn.
Đây là vấn đề mà trong hơn 15 năm qua người dùng WordPress (hệ Classic Editor) có lẽ đã không thấy thoải mái. Đặ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, bạn thấy nó rất gọn gàng, khai thác tối đa không gian hiển thị của thiết bị (tablet, laptop).
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).
hay đó trình soạn này đẹp
Uầy, lâu ngày quá ngừ ae, nay nhiều trò mới mẻ lắm !
Quá hay bác!
Kk, độc lạ bác he ^^
hay quá, cám ơn ad đã chia sẻ
Hehe, vầy là bác vẫn còn dùng Classic Editor nè ^^
Em dùng cái trình soạn thảo mới nó hay bị lag. Nên em không thích.
Chuẩn bài rồi nè, trình soạn thảo block nó vẫn chưa thật sự tối ưu về hiệu suất, hay bị lag hoặc lỗi vặt.
Qúa đỉnh của chóp
Toàn trò mới mẻ ko e he ^^
sếp qua bên em chơi