Hướng dẫn kích hoạt khung soạn thảo đầy đủ cho WordPress

Từ những phiên bản WordPress gần đây (mới nhất tính tới bây giờ là 4.7.3) có nhiều công cụ của trình soạn thảo đã bị ẩn đi. Và một trong số đó là căn lề 2 bên (Justify), chọn size và font chữ … Trong bài này chúng ta chỉ cần thêm 1 đoạn code thôi là đã có thể hiện những công cụ đó ra rồi.

Để kích hoạt được khung soạn thảo đầy đủ như trên hình bạn chỉ cần copy đoạn code sau vào file functions.php của theme bạn đang sử dụng nhé

if ( ! function_exists( 'devvn_ilc_mce_buttons' ) ) {
    function devvn_ilc_mce_buttons($buttons){
        array_push($buttons,
             "alignjustify",
             "subscript",
             "superscript"
        );
        return $buttons;
    }
    add_filter("mce_buttons", "devvn_ilc_mce_buttons");
}
if ( ! function_exists( 'devvn_ilc_mce_buttons_2' ) ) {
    function devvn_ilc_mce_buttons_2($buttons){
        array_push($buttons,
             "backcolor",
             "anchor",
             "fontselect",
             "fontsizeselect",
             "cleanup"
        );
        return $buttons;
    }
    add_filter("mce_buttons_2", "devvn_ilc_mce_buttons_2");
}
// Customize mce editor font sizes
if ( ! function_exists( 'devvn_mce_text_sizes' ) ) {
   function devvn_mce_text_sizes( $initArray ){
      $initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 17px 18px 19px 20px 21px 24px 28px 32px 36px";
      return $initArray;
   }
   add_filter( 'tiny_mce_before_init', 'devvn_mce_text_sizes' );
}

Trong đoạn code trên mình có chia đều các button ra làm 2 dòng để nhìn được đẹp hơn. Các bạn hoàn toàn có thể thêm hoặc bớt các công cụ cũng như sắp xếp nó ở các dòng khác nhau. Các vị trí bao gồm: mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4. Như trong đoạn code trên mình có dùng mce_buttons và mce_buttons_2

Mặc định chọn size là pt. Mình có thêm đoạn code để chuyển về px. Bạn hoàn toàn có thể xóa nó đi nếu muốn để đơn vị là pt hoặc có thể thêm bớt các size nhé

Bạn không muốn code? Bạn thích dùng plugin? Bạn hãy dùng plugin TinyMCE Advanced nhé  

https://wordpress.org/plugins/tinymce-advanced/ 

Chúc các bạn thành công^^

Share on Google Plus

About Vietnguyen

Blog tổng hợp các kiến thức về website và marketing online. Chia sẻ là niềm vui ! Tôi làm được bạn cũng làm được. Nothing im possible