Hướng dẫn tạo Widget trong WordPress dễ dàng

Đăng ký tài khoản kiếm tiền với tiếp thị liên kết tại ACCESSTRADE, MasOffer, Lazada Việt Nam

Hôm nay mình xin chia sẻ, hướng dẫn tạo Widget trong WordPress một cách dễ dàng cùng các bạn, giúp bạn có thể tự mình tạo Widget cho Theme WordPress bạn đang phát triển.

Vậy Widget là gì ?
Như chúng ta đã biết thì trong các ứng dụng máy tính, hệ điều hành, phần mềm thì Widget là thành phần mềm dẻo về mặt hiển thị thông tin cụ thể nào đó ? Sau quá trình tìm hiểu mình xin chia sẻ đến các bạn để bạn tiếp cận và hình dung về cách tạo Widget trong WordPress một cách dễ dàng nhất có thể.

Widget là một  thành phần code linh hoạt có thể dễ dàng cài đặt và thực thi ở bất kỳ vị trí nào trên một ứng dụng. Bạn có thể hiểu nó cũng tương tự như plugin và extension, hay đúng hơn là PluginExtension thường sẽ hỗ trợ các Widget kèm theo. Bạn có thể hiểu về cơ bản như vậy cho nó suôn sẻ đã ^^.

Widget trong WordPress là gì  ?
Widget trong WordPress là các thành phần hỗ trợ quản trị viên website/ blog dễ dàng quản lý, thay đổi việc thể hiện các thành phần hiển thị trên website/ blog của họ chỉ bằng thao tác KÉO và THẢ (khách hàng yêu quý của tôi hay của bạn thích điều này ^^) vào vị trí nào trên web hỗ trợ Widget, hoặc các slidebar mà không phải can thiệp đến CODE của giao diện. Các Widget chuẩn thường có khả năng hiển thị hoàn toàn tương thích với vị trí nó được đặt.

Tạo Widget trong WordPress như thế nào ?
Trong WordPress thì Widget thường là các khối thành phần độc lập chứa trong thư mục:
wp-includes/default-widgets.php của WordPress, trong này là nơi chứa các Widget mặc định mà WordPress hỗ trợ sẵn.
includes/name-widgets.php của thư mục Theme cụ thể nào có hỗ trợ Widget, theo mình bạn cũng nên đặt tập tin Widget của mình vào thư mục includes trong Theme của bạn. Đối với tên của tập tin bạn có thể đặt sao cho mình tiện quản lý sau này, mình thường đặt theo dạng TenTheme-widgets.php (đó là cách của mình, dĩ nhiên là bạn có thể tạo và chưa Widget của bạn ở đâu trong ứng dụng cũng được nhé !)

Bắt đầu tạo Widget trong WordPress nào !

Bước 1:
Bạn tạo 1 tập tin tên “TenTheme-widgets.php” trong thư mục includes của Theme. (Ví dụ: includes/cukimngoc-widgets.php).
Bước 2:
Để tạo Widget trong WordPress bạn chỉ cần tạo class đúng theo chuẩn quy định được WordPress hỗ trợ như sau:

// Bắt đầu khởi tạo 1 Widget trong WordPress ^^
class CKN_widget extends WP_Widget {
// Hàm này thể hiện các thông tin cơ bản của Widget như ID, Tên Widget, mô tả của Widget.
function __construct() {
parent::__construct(
// ID widget của bạn
'CKN_widget', 
// Tên Widget xuất hiện trong giao diện
__('Widget chào các bạn', 'CKN_widget_ChaoCacBan'), 

// Thông tin mô tả về Widget
array( 'description' => __( 'Đây là Widget đơn giản hiển thị nội dung Chào các bạn đây là bài viết Hướng dẫn tạo Widget trong WordPress!', 'CKN_widget_ChaoCacBan' ), ) 
);
}
// Phần này sẽ viết mã hiển thị dữ liệu trên giao diện (widget front-end)
// function widget() là hàm xử lý thông tin cần hiển thị lên giao diện;
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
$outputHTML='';
// Trước và sau một Widget bạn cần cho phép hiển thị giá trị của các đối số được định nghĩa bởi Theme bất kỳ, nhằm tăng tính tương thích của Theme với Widget của bạn.
$outputHTML .= $args['before_widget'];
if ( ! empty( $title ) )
$outputHTML .= $args['before_title'] . $title . $args['after_title'];

// Từ vị trí này bạn sẽ viết mã xử lý hiển thị dữ liệu của mình.
$outputHTML .='Chào các bạn đây là bài viết Hướng dẫn tạo Widget trong WordPress!';
$outputHTML .= $args['after_widget'];
echo $outputHTML;
}

// Phần xử lý dữ liệu bên dưới giao diện (widget Backend).
// Form điền thông số tùy chỉnh theo chức năng mà Widget bạn cần phát triển. Ở đây mình chỉ cho tùy chỉnh tiêu đề Widget.
public function form( $instance ) {
// Chúng ta kiểm tra biến $instance['title'] có giá trị không ? Nếu có thì gán cho biến $title
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'Tiêu đề mặc định', 'CKN_widget_ChaoCacBan' );
}
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Tiêu đề:' ); ?></label> 
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php 
}
// Hàm cập nhật giá trị cho Widget, các giá trị cũ $old_instance sẽ được thay thế bằng $new_instance
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // Kết thúc lớp định nghĩa CKN_widget
////////////////////////////////////////////////////////
// Tiến hành đăng ký Widget với hệ thống WordPress
function CKN_load_widget() {
	register_widget( 'CKN_widget' );
}
add_action( 'widgets_init', 'CKN_load_widget' );

Về cơ bản bạn đã hoàn tất việc viết mã 1 widget trong WordPress rồi đó. Giờ do mình viết mã trong tập tin cukimngoc-widgets.php nên mình phải thực hiện thêm 1 thao tác nữa là includes nó vào includes/functions.php trong thư mục Theme của mình. Bạn có thể bỏ qua lưu ý này nếu bạn viết mã Widget trực tiếp vào functions.php:

<?php include 'cukimngoc-widgets.php';?>

Bước 3 sử dụng Widget vừa tạo:

Bạn vào phần quản trị WordPress mục Apperance/ Widgets sẽ thấy Widget bạn vừa tạo hiển thị như sau:

Hướng dẫn tạo Widget trong WordPress

Sau khi tạo Widget sẽ hiển thị trong Appearance/ Widgets

Bạn kéo Widget vừa tạo “Widget chào các bạn” vào vị trí mà Theme bạn hỗ trợ Widget, sau đó chỉnh thông tin tiêu đề cho Widget và lưu lại:

Sử dụng Widget

Sau khi kéo Widget vào mục cần hiển thị, ta có thể thiết lập cấu hình cho Widget trong WordPress

Bây giờ bạn ra website/ blog của mình để xem kết quả hiển thị nhé  !

Giao diện hiển thị của Widget trên giao diện website/ blog

Giao diện hiển thị của Widget trên giao diện website/ blog

Như bạn thấy Widget đã hoạt động, vậy là bạn đã có thể tự mình tạo Widget trong WordPress. Còn việc hiển thị gì qua Widget đó là tùy vào yêu cầu của bạn mà viết mã ở public function widget( $args, $instance ) nhé.
Một số Widget thông dụng bạn nên hỗ trợ cho Theme của bạn là:
Widget hiển thị danh sách bài viết mới
Widget hiển thị bình luận mới

Widget hiển thị danh sách bài viết được xem nhiều
Widget hiển thị bài viết được quan tâm nhiều
Widget hiển thị hỗ trợ trực tuyến
Widget đặt mã quảng cáo trong WordPress

Ở đây mình chỉ hiển thị chuỗi “Chào các bạn đây là bài viết hướng dẫn tạo Widget trong WordPress” nhằm giúp bạn có thể dễ dàng hiểu và tiếp cận về cách tạo Widget trong WordPress. Các Widget phát triển đôi khi thường đi chung với Plugin hơn vì những yêu cầu cụ thể riêng đặc trưng của Plugin (Widget hỗ trợ  trực tuyến). Còn đối với Theme thì thường Widget chỉ thực hiện việc hiển thị các dữ liệu WordPress hỗ trợ sẵn (Các Widget hiển thị bài viết, comment…).

Mọi thắc mắc, chia sẻ, góp ý các bạn vui lòng để lại thông tin và mình sẽ trả lời ngay khi có thể nhé ! Chúc các bạn ngày càng thành công trong quá trình tiếp cận, học hỏi WordPress.

 Cù Kim Ngọc

Hướng dẫn tạo Widget trong WordPress dễ dàng 1.19/5 (23.87%) 62 votes
Nếu bạn mong muốn tìm hiểu rõ hơn về chia sẻ này và những chia sẻ khác, bạn có thể kết nối với mình qua các thông tin sau:
Facebook cá nhân: https://www.facebook.com/PExpress
Blog chia sẻ cá nhân: PolygonExpress.com
Group chia sẻ ứng dụng affiliate marketing & services: MMO tools
Web dịch vụ freelance: FMMSPolygon.com
Email liên hệ mình: fmmspolygon@gmail.com
Điện thoại: 0937.798.420 - 0868.929.024 (Kim Ngọc)

Related

Làm sao để xây dựng hệ thống tracking phục vụ email marketing cho website bán hàng

Làm sao để xây dựng hệ thống tracking phục vụ email marketing cho website bán hàng

In "Conversion rate"
Phân Quyền Các Loại Tài Khoản Thành Viên Trong WordPress (User Role)

Phân Quyền Các Loại Tài Khoản Thành Viên Trong WordPress (User Role)

In "WordPress"

Sửa lỗi trắng trang trong WordPress ? Nguyên nhân và cách khắc phục ?


Xin chào bạn, trước khi tìm hiểu và may mắn gặp phải lỗi này :) chắc chắn bạn đã tìm hiểu về WordPress và biết được nó tiện lợi thế nào trong việc phát triển các website/ blog một cách siêu nhanh chóng. Cơ bản WordPress được oánh giá là làm SEO tốt, giao diện thay đổi linh hoạt như việc bạn cởi áo vậy. Tiện sử dụng là vậy nên WordPress ngày càng được nhiều công ty thiết kế website lựa chọn làm nền tảng phát triển hệ thống của họ cũng như khách hàng sử dụng dịch vụ xây dựng website của họ. Đơn giản bản thân mình cũng đang có những học hỏi ban đầu về Themes WordPress để phát triển dịch vụ của mình tại FMMSPolygon.com Đó là câu chuyện chém gió linh tinh và SEO vài từ linh tinh :) , quay trở vấn đề của bài chia sẻ đó là "Sửa lỗi trắng trang trong WordPress". Đây là lỗi chắc chắn bạn sẽ thường gặp phải khi mới làm quen với WordPress (vì khi này bạn sẽ vọc, phá, chọt, cài linh tinh đủ thứ Plugin, Themes WordPress được chia sẻ mà bạn gặp :) ).

Đâu là nguyên nhân của "lỗi trắng trang trong WordPress" ?

Danh sách các lỗi mình tổng hợp từ nhiều bài chia sẻ với từ khóa "How to Fix the WordPress White Screen of Death" bao gồm như sau: 1. Do cài đặt plugin không tương thích với phiên bản WordPress bạn đang dùng. 2. Do cài đặt Themes không tương thích (theme không phù hợp phiên bản WordPress, theme bị lỗi). 3. Do cấu hình permalinks gây ra. 4. Do cấu hình plugin không đúng (lỗi có thể do xung đột code) gây tốn tài nguyên bộ nhớ được cấp. 5. Do cấu hình hosting có vấn đề, đôi khi thay đổi phân quyền tập tin thư mục nào chẳng hạn. Lỗi này thường do các plugin mới cài vào, hoặc do hosting của nhà cung cấp có thay đổi. Tóm lại đây là các lỗi gián tiếp liên quan đến lỗi trắng trang trong WordPress. 6. Do cấu hình hosting đã trả về Gzip rồi, và plugin Cache bạn dùng cũng tiếp tục bật GZip (WP Supper Cache hoặc plugin Cache nào khác) đôi khi cũng tạo ra lỗi trắng trang, lỗi này cũng khá ảnh hưởng đến tương tác đọc giả dù F5 thì lại hết. (Chia sẻ này cập nhật ngày 15/08/2014 từ blog http://JamViet.com - cảm ơn admin :) )

Cách sửa lỗi trắng trang trong WordPress

1. Đối với lỗi do cài đặt plugin gây ra thì bạn chỉ cần Deactive plugin hoặc gỡ bỏ plugin (nếu bạn vào được Admin nhé !) để website/ blog trở về trạng thái trước khi cài plugin là ok. Nếu bạn không vào được Admin thì bạn FTP vào thư mục chứa website tìm plugin tương ứng bạn vừa cài và xóa nó đi là được. 2. Lỗi do cài đặt Themes WordPress mới. Các Themes WordPress đôi khi sẽ gặp lỗi không tương thích với các phiên bản WordPress, kể cả phiên bản nó được hỗ trợ. Do đó việc gỡ bỏ Theme là cách giải quyết lỗi trắng trang của bạn. 3. Do cấu hình permalinks gây ra việc đơn giản là bạn reset permalinks  về trạng thái default là được. Sau đó tìm hiểu kỹ trước khi thay đổi permalinks nhé !. 4. Việc cấu hình các plugin không đúng ví dụ các plugin Cache, Security, file... đôi khi cấu hình, phân quyền không đúng dẫn đến xung đột và lỗi trắng trang sẽ viếng thăm website/ blog của bạn. Để khắc phục lỗi này bạn nên đọc thật kỹ hướng dẫn cài đặt của plugin đó lên website/ blog của mình là được. 5. Lỗi trắng trang nếu xảy ra trong khi website bạn đang hoạt động bình thường thì vấn đề có thể do nhà cung cấp hosting của bạn. Việc đơn giản là bạn kiểm tra lại log phía hosting, nếu được cung cấp trên hệ thống thì bạn có thể kiểm tra trực tiếp để xem có lỗi phát sinh không. Cuối cùng nếu vẫn không khắc phục được bạn hãy liên hệ với hỗ trợ bên họ để khắc phục. Ở trên là các cách khắc phục lỗi cho người sử dụng không chuyên, còn cách để khắc phục lỗi nhanh chóng nhất dành cho coder là bạn bật chức năng thông báo lỗi trong wp-config.php lên, khi đó các lỗi phát sinh sẽ hiển thị trên giao diện website/ blog. Bạn vào wp-config.php thêm 2 dòng lệnh sau vào:
error_reporting(E_ALL); ini_set('display_errors', 1);
define( 'WP_DEBUG', true);
Sau đó bạn truy cập website/ blog đang bị lỗi bạn sẽ thấy danh sách lỗi hiển thị trên trang. Từ những thông báo lỗi đó bạn có thể khắc phục ngay nếu bạn hiểu lỗi phát sinh từ đâu. Nếu không hiểu lỗi đó bạn tiếp tục search hỏi anh Google về lỗi bạn đang gặp, anh Google luôn luôn có cách ::CacChuDeAnh::

Chia sẻ những lưu ý giúp bạn tránh khỏi và sửa lỗi trắng trang trong WordPress một cách nhanh chóng nhất.

1. Trước khi bạn có ý định thay đổi lớn trên website/ blog đang hoạt động ổn định của mình: cài plugin, cập nhật phiên bản WordPress, thay đổi giao diện. Bạn nên backup dự phòng toàn bộ website/ blog và cơ sở dữ liệu của mình lại. 2. Trước khi cài đặt 1 plugin nào đó hãy xem bình luận, đánh giá từ các thành viên khác trên trang. Chỉ nên tải plugin từ các trang cung cấp chính chủ plugin đó và trang của WordPress.org 3. Tìm đến ngay đến những người bạn mà bạn biết rằng họ có thể giúp bạn xử lý lỗi WordPress. Mấy thằng blogger này bạn có thể nhờ thằng nào cũng được  ::HeHeHe::   JamViet.com, BloggerAz.net, http://eBooksvn.com,.. 4. Nếu bạn đã thuê ai làm website/ blog WordPress cho bạn, hãy gọi ngay cho họ: "ANH ƠI WEB EM KHÔNG CHẠY ::SeBitTayKao:: " " THẾ EM CÓ LÀM GÌ WEB EM KHÔNG ?" - DẠ EM KHÔNG ::UhmNgon:: Ừa để anh fix cho nhé ! chắc lỗi em gặp anh phải search "How to Fix the WordPress White Screen of Death" roài ::CacChuDeAnh:: Vậy thôi còn thiếu gì các bạn chia sẻ bổ sung nhé ! Cảm ơn bạn đã quan tâm !
In "Thủ thuật WordPress"

Comments

  1. say

    Site mình Nó có dạng sidebar như bên dưới rồi

    Sau khi mình thêm code bạn vào thì nó hiện nguyên mấy dòng code vào trang admin mà không thấy bóng dáng chữ widget mô luôn 😀

  2. say

    Mình thêm code thứ 1 của bạn vô functions.php thì nó hiện nguyên code ra website và trong admin luôn. Thực sự thì theme mình ko có widget mà nó có sidebar bên phải, đó là theme iphoto. demo: http://chandai.tv Giờmình không biết làm sao nữa 😀

    • say

      Hi bạn,
      Mình thấy Themes của bạn không hỗ trợ block bên trái/ phải mà bạn ? Nếu muốn thêm block bên trái hoặc phải ĐỂ thêm widget bạn phải chỉnh lại giao diện từ 1 cột hiện tại thành 2 cột nhé !.

      P/s: Bạn không thể post code lên comment của mình trực tiếp được nhé ! Nếu bạn post thì phải đặt trọng thẻ pre với các ký tự <> chuyển thành & g t; và & l t; nhé. Không thì bạn email cho mình về sanddesert8@gmail.com.
      Thân !

      • say

        oh, thanks bạn đã repply mình. giờ trong trang post home đó mình không muốn có sidebar nữa. mình display: none; nó đi rồi. giờ nó còn 1 khoảng trống bên phải đó mình muốn chèn 1 hình trượt cố định vào đó * mìn biết code chèn hình trượt cố định r ) nhưng mà không hiện ra. mình bỏ code vào home.php trong theme vì thấy trong đó code sidebar. quái lạ thật. chèn hình banner quảng cáo cố định bên phải chân trang vào index.php và footer.php thì dc mà sao trong post home nó ko hiện ra, ý mình là chèn cho nó nằm yên bên phải trong mỗi bài viết. bạn có thể cho mình biết chèn code vào file nào ko 🙂 cảm ơn bạn
        mình muốn chèn vô post home như này http://chandai.tv/photo/11737 hoặc bán có thể lấy code sidebar đó của chandai.tv để mình thay vô site mình xem, vì cùng 1 themes 🙂

        • say

          Hi bạn,
          Vào xem trang của bạn mình hoa hết cả mắt @@.
          Tóm lại là bạn muốn trang chủ ở ngoài giống như trang chi tiết khi click vào 1 ảnh phải không ? Nghĩa là phần XEM THÊM sẽ có ở tất cả các trang phải không ?.

          Nếu đúng vậy thì bạn gửi mình Themes mình xem chỉnh giúp cho nhé !
          P/s: Mình không có Themes trang này thì không thể hỗ trợ bạn tốt hơn được, mình đề xuất bạn sao chép phần layout của trang chi tiết sang trang index/ front-page/ home của bạn xem sao ? Nếu bạn đổi index ok rồi mà vẫn chưa được thì đổi thêm front-page/ home nếu có.

          P/s 2: Do mình không thấy cấu trúc theme của bạn nên chỉ hỗ trợ được vậy thôi, mong bạn thông cảm nhé !
          Thân !

      • quoccuong say

        Hi. Thanks bạn. Ý mình đơn giản lắm đó là trong trang chi tiết bài viết như này http://chandai.tv/photo/479 mình muốn chèn thêm 1 banner hình ảnh cố định dọc phía trên hoặc dưới hoặc thay thế sidebar xem thêm đó. chứ không phải ngoài trang chủ ạ 😀

  3. quoccuong say

    themes khong ho trợ widget thì phải làm sao add widget vào bên phải đây anh 🙁

    • say

      Hi bạn,
      Đầu tiên để tạo hiển thị widget thì bạn phải có vị trí để đặt nó trong Themes. Hiện tại nếu Themes bạn không hỗ trợ thì bạn phải bố trí lại layout của bạn nhé. Trong phản hồi này mình sẽ trả lời bạn cách đăng ký sidebar và hiển thị vị trí widget trong sidebar đã đăng ký như sau:
      Bạn vào tập tin functions.php và thêm hàm sau vào:

      function register_widgets_init() {
       register_sidebar( array(
       'name' => 'Block bên phải',
       'id' => 'sidebar-right',
       'description' => 'Đây là vị trí bên phải giao diện',
       'before_widget' => '<aside id="%1$s" class="widget %2$s">',
       'after_widget' => '</aside>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
       ) );
       }
      add_action( 'widgets_init', 'register_widgets_init' );
      

      Đoạn mã trên có nghĩa là bạn đăng ký 1 vị trí sidebar mới tên là Block bên phải và id là sidebar-right. Lưu ý bạn id của sidebar không được trùng (theo nguyên tắc) nếu không sẽ nhận thông báo lỗi.
      Đoạn mã add_action( ‘widgets_init’, ‘register_widgets_init’ ) nhằm chạy hàm register_widgets_init khi action widgets_init được thực thi. Lưu ý bạn là register_widgets_init chỉ là tên hàm mình đặt còn bạn có thể đặt là gì tuy bạn nhé. Tương tự cách khai báo trên bạn sẽ khai báo bao nhiêu sidebar tuỳ ý theo nhu cầu của mình.

      Việc khai báo này sẽ xuất hiện trong phần Widgets của bạn 1 vị trí mới thể hiện như sau:

      Ở trên mình chỉ đăng ký thêm 1 vị trí (tức là 1 sidebar trên giao diện). Bây giờ việc tiếp theo là bạn hiển thị sidebar này trên giao diện của bạn. Bạn mở Theme của bạn ra vị trí nào bạn muốn sidebar này hiển thị thì viết đoạn mã sau vào:

      <?php if ( is_active_sidebar( 'sidebar-right' ) ) : ?>
          <?php dynamic_sidebar( 'sidebar-right' ); ?>
      <?php endif; ?>
      

      Đoạn mã trên có nghĩa là kiểm tra xem sidebar có id là sidebar-right có được đăng ký không (active chưa ?), nếu có thì hiển thị nội dung của nó (tức là các widget bạn kéo vào – ví dụ widget trong bài này 🙂 ).

      Có gì không hiểu bạn có phản hồi lại mình sẽ hỗ trợ nhé !

      Cảm ơn bạn đã ghé thăm ! Thân !

  4. say

    Cho mình hỏi về plugin WP một chút. Bạn biết cái plugin nào tương tự cái block newcenter của nukeviet không (Block hiển thị slide tin mới và bài viết tiêu điểm). Chỉ mình với. Giống cái trang này: kienthucphunu.com

    • say

      Hi Tu,
      Thành thật xin lỗi bạn về việc không trả lời comment của bạn nhé 🙁 giờ kiểm tra lại mình mới thấy. Mình có qua trang http://toancapba.net của bạn thì thấy vấn đề của bạn được giải quyết 🙁 Bạn thông cảm cho mình nhé !
      Chào bạn !

    • say

      Hi ku !
      Comment cứ tưởng ai ^^ ! Các nút share và like có hết ở cuối bài nhé !
      Cũng đang tìm hiểu, học hỏi thôi !
      Thanks ku !

Related

Leave a Reply to Cafe Freelancer Cancel reply

Your email address will not be published. Required fields are marked *