Khung soạn thảo BBcode Editor cho WordPress (Không dùng Plugin)

Mặc định phần bình luận của WordPress khá đơn giản, thường thì chúng ta chỉ cần đưa text vào thôi, nhưng để cho người dùng thuận tiện hơn thì chúng ta cần làm thêm thanh Toolbar để tiện sử dụng. Nếu dùng bộ soạn thảo đầy đủ thì quá nhiều, không cần thiết, thậm chí nếu làm không tốt còn tiềm ẩn nhiều nguy cơ. Bài viết này mình sẽ hướng dẫn các bạn thêm 1 bộ soạn thảo đơn giản là BBcode Editor (nó thường thấy trên các diễn đàn)

Demo BBcode Editor cho WordPress

Demo BBcode Editor cho WordPress

 

Vì sao lại dùng BBcode editor ?

Nó phù hợp với mục đích của mình, khi ở khung soạn thảo mình chỉ muốn người dùng chèn thêm link, in đậm, in nghiêng và đặc biệt là nhúng được ảnh vào phần bình luận. Bởi vậy BBcode cho phần comment với mình là đủ.

Các plugin trên mạng hiện tại thì không sử đụng được khi nó đã lên bảng 4.x. Có 1 plugin trả phí là Mega BBCODE Editor có giá 13 USD.

Tích hợp BBcode editor cho comment – bình luận WordPress

Bước 1: Bạn tải: taeditor_v1_4

Bước 2: Tiếp đến giải nén ra thư mục chứa theme của bạn: wp-content/themes/your theme/

(Bạn sẽ tải thêm thư mục editor lên trên website)

Bước 3: Tại thư mục chưa theme của bạn, bạn tìm file comments.php

Tiếp đến tìm nội dung

<?php comment_form(); ?>

Bạn xóa nó đi và thay thế bằng đoạn sau:

<?php comment_form( array(
'comment_field' => '<p class="comment-form-comment"><label for="comment">'._x( 'Comment', 'noun' ).'</label>
<script type="text/javascript" src="'.get_bloginfo('template_directory').'/editor/ed.js"></script>
<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/editor/styles.css" />
<script>edToolbar(\'comment\');</script>
<textarea id="comment" name="comment" cols="45" rows="12" aria-required="true"></textarea></p>',
) ); ?>

Bước 4: Bình thường vậy là xong, nhưng do mình tích hợp vào WordPress nó sẽ bị lỗi mấy cái icon của bbcode editor do nó không thể xác định được đường dẫn, cách đơn giản thì ta làm như say.

Mở và sửa file: editor/ed.js

Chú ý đoạn:


    document.write(“<img class=\”button\” src=\”/images/bold.gif\” name=\”btnBold\” title=\”In đậm\” onClick=\”doAddTags(‘<strong>’,'</strong>’,'” + obj + “‘)\”>”);


Bạn thay /images/bold.gif\ bằng đường dẫn chính xác

VD:

http://nguyencaotu.com/wp-content/themes/mytheme/editor/images/bold.gif

Vậy là xong, đến đây thì bạn đã có thể có cho mình một bộ bbcode editor đơn giản nhưng đủ dùng. Và mình cũng khỏi phải mua với giá 13 USD vì nó không thực sự cần thiết.

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

Tìm trên công cụ tìm kiếm:

  • bb code cho wp
  • bbcode cho worldpress

Nhận thêm bí quyết mới

Đăng ký nhận bản tin qua email, bạn sẽ không bao giờ bỏ lỡ những chia sẻ tuyệt vời từ Tú Cao.

Leave a Reply

Thư điện tử của bạn sẽ không được hiện thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký để nhận
Tuyệt chiêu Marketing

Khi nào có bí quyết mới, bạn luôn là người biết đầu tiên.