Công ty Thiết kế web

Widget là gì? Các thông tin về Widget Wordpress

Thảo luận trong 'Tin tức Digital Marketing' bắt đầu bởi Levi72, 20/1/22.

  1. Levi72

    Levi72 New Member

    Widget là gì? Widget đóng vai trò gì trong những trang web được xây dựng từ WordPress. Trong bài viết này tôi sẽ cùng bạn tìm hiểu Widget là gì và định nghĩa widgets, cách quản lí và hướng dẫn cài đặt cũng như sử dụng chi tiết nhất có thể.

    WordPress Widgets là gì?


    1. Widget Wordpress là gì?
    Khi nhắc đến thiết kế website, bạn thường nghe người ta nhắc rất nhiều về Widgets, nhưng widgets là gì? Nói một cách dễ hiểu thì đây là một tiện ích giúp bạn thiết kế giao diện website dễ dàng hơn, nó làm nhiệm vụ cấu tạo, định hình và chỉnh sửa các yếu tố khác.

    [​IMG]


    View attachment 5589
    Widgets là tiện ích hỗ trợ cho website WordPress

    Widgets là tiện ích rất quan trọng trong WordPress giúp tạo lập, xây dựng cũng như sử dụng trang web trở nên dễ dàng hơn.Bạn nên cài đặt các plugin có hỗ trợ Widget liên kết các mạng xã hội khác để dễ quản lý.

    Widget wordpress là gì? Cách hiểu đơn giản nhất thì trên giao diện website của WordPress thì widgets tập hợp loạt chức năng trên thanh sidebar, bạn có thể cho hiển thị bài viết mới nhất bằng cách chèn vào widget recent posts. Còn nếu bạn có kiến thức về code và bạn muốn thêm các mã HTML vào thì widget text là lựa chọn không thể bỏ qua.



    [​IMG]


    View attachment 5588
    widgets là nơi tập hợp loạt chức năng trên thanh sidebar



    Bạn có thể dễ dàng thêm widgets vào bất kì vị trí nào trên trang web theo bố cục nhất định.Nhưng thường thì người ta sẽ thêm vào vị trí bên phải hoặc bên trái trang web.



    Khi bạn đã nắm được widget wordpress là gì, bạn sẽ đến bước tìm cách sử dụng wordpress. Bước này khá đơn giản bạn chỉ cần kéo thả widget vào các khu nhất định trong wordpress là được.

    1. Quản lý widget trong Wordpress
    2.1 Widget mặc định là gì? (Available Widgets)
    Widget mặc định là những widget có sẵn được them cung cấp. Tùy theo nhu cầu và mục đích xây dựng trang web mà bạn có thể xóa hay tùy chỉnh các widget này.

    Các widget mặc định trong wordpress:



    Archive: Hiển thị các bài viết trong tháng



    Recent Post: Hiển thị bài viết mới nhất



    Audio: Trình phát nhạc trên WordPress



    Meta: Webmaster login, RSS và link WordPress.org



    Calendar: Lịch



    Categories:Danh sách categories



    Gallery:Thư viện ảnh



    Image: Hiển thị 1 bức ảnh



    Navigation Menu: Tạo ra trình chuyển hướng



    Pages: Danh sách các trang



    Recent Comment: Các bình luận mới nhất trên trang



    RSS: Hiển thị RSS hay Atom Feed



    Search: Thanh tìm kiếm



    Tag Cloud: Hiển thị post tag



    Videos: Hiển thị các link video từ nhà cung cấp video lớn



    [​IMG]


    View attachment 5593
    những widget mặc định trong WordPress




    2.2 Vị trí đặt widget là gì? (Primary widget area)


    Có một chỗ riêng dành cho widget trên khung giao diện Wordpress.Thông thường khu vực này sẽ được đặt ở vị trí cuối hoặc ở cột bên phải của trang web.Tuy nhiên bạn cũng có thể dễ dàng đặt widget ở mọi vị trí bạn thích mà không cần phải tuân theo quy định cụ thể gì.


    2.3 Widget không sử dụng là gì? (Inactive widgets)

    Do nhu cầu của từng bạn và tùy từng mục đích xây dựng trang web khác nhau mà nhiều người có thể sẽ xài những widget khác nhau.Nếu bạn không xài bất cứ widget nào bạn chỉ việc đặt vào khu inactive widgets. Khi bạn có việc cần đến thì bạn chỉ cần kéo widget vào vị trí mong muốn là được, bạn không cần phải tạo widget mới.



    [​IMG]


    View attachment 5592
    Thêm và loại bỏ widget trong WordPress dễ dàng



    1. Cách thêm widget cho wordpress chuẩn
    3.1 Thêm widget cho wordpress
    Nếu bạn đang cần thêm widget cho wordpress của mình, bạn hãy làm theo các bước sau:

    Bước 1: đăng nhập WordPress Dashboard (Tại appearance>Widgets)



    Bước 2: Kéo widget vào bất kì chỗ nào mà bạn muốn. Lưu ý là nếu wordpress widget có định dạng là video, bạn hãy chèn link hay upload video trực tiếp lên web tùy ý.



    Bước 3: Customize trực tiếp cũng là cách để thêm widgets cho wordpress . Bạn bấm vào nút Customize trên website hoặc vào Appearance trong trang wp-admin để sử dụng chức năng này.

    [​IMG]


    View attachment 5591
    hướng dẫn cách thêm widget vào wordpress

    3.2 Xóa widget trong wordpress
    Có 2 cách sau đây



    Cách 1: Kéo widget mà bạn không muốn ra khỏi sidebar và thả vào khu vực widget hiện có.

    Cách 2:Bấm vào tiêu đề Widget muốn xóa để mở rộng Widget rồi chọn xóa là được.



    [​IMG]


    View attachment 5590
    xóa widget trong wordpress rất dễ làm



    3.3 Thêm widget vào sidebar
    Thêm widget cho wordpress vào thanh ngang trên giao diện wordpress, bạn chỉ cần làm theo hướng dẫn sau:



    Kéo thả vào thanh ngang



    Thông thường trong wordpress hiển thị danh sách những thanh ngang để bạn dễ thao tác khi cài đặt các widget. Chọn thanh ngang mà bạn muốn thêm sau đó bấm nút thêm vậy là bạn đã hoàn thành.



    Mỗi widget trong WordPress đều có nút thêm, bạn chỉ cần nhấn vào nút để tới màn hình truy cập. Tại đây hãy chọn vị trí đặt widget mà bạn muốn, cách tạo widget cho wordpress này rất dễ thực hiện.



    [​IMG]


    View attachment 5587
    Có nhiều cách để thêm widget vào wordpress trên sidebar.



    4.Tùy chỉnh widget trong wordpress


    Trong một plugin tùy chỉnh, bạn có thể code Widget Wordpress tùy chỉnh.Và nó có thể hoạt động trên mọi web có sử dụng plugin này.



    Hay bạn chọn thêm Widget vào file functions.php hoặc là một theme nào bất kì nào đó. Sau đó nó hoạt động trên mỗi theme đó mà thôi.

    4.1 Widget API là gì
    Widget API cho phép bạn có thể code các widget tùy chỉnh, bạn sẽ cần đến lớp WP_Widget từ API khi muốn tạo widget tùy chỉnh nào. Lớp WP_Widget là cơ sở cung cấp đến hơn 20 hàm cơ bản giúp bạn code. 4 hàm cơ bản và thông dụng nhất mà bạn cần lưu tâm đó là:

    __construct(): hàm khởi tạo



    widget(): đầu ra của Widget



    update(): cập nhật các cài đặt của Widget



    form(): định nghĩa các cài đặt của Widget trong Admin Dashboard

    4.2 Tạo Widget tùy chỉnh
    Khi tạo widget cho wordpress, bạn cần thêm code vào file functions.php của theme đang dùng.Bạn có thể thực hiện điều này với bất kỳ plugin nào.

    Khi đã thêm code vào file functions.php, bạn có thể dùng linh hoạt Wordpress editor hoặc file manager.

    Tôi khuyên bạn nên tạo một bản sao lưu(backup) file function.php ở một nơi khác trước khi thêm widget để tránh trường hợp bị lỗi hoặc xung đột không mong muốn.



    Tạo function __construct()



    Trên window, bạn có thể chọn bất kì trình soạn thảo văn bản nào sau đó bạn copy paste những dòng code sau vào trình soạn thảo văn bản để tạo class mở rộng cho lớp WP_Widget:



    class new_widget extends WP_Widget {

    //Insert functions here

    }



    Bạn sẽ dùng để xác định một ID là tên của Widget như cái cách nó hiện diện trong phần mô tả và phần UI.



    function __construct() {

    parent::__construct(

    // widget ID

    'new_widget',

    // widget name

    __('My Sample Widget', ' new_widget_domain'),

    // widget description

    array( 'description' => __( 'My Widget Tutorial', 'new_widget_domain' ), )

    );

    }



    Cấu hình đầu ra của widget()



    Bạn cần thực hiện bước chỉnh sửa cách hiển thị của Widget. Việc thực hiện thông qua các hàm widget () sẽ quyết định phần giao diện Widget như thế nào.

    public function widget( $args, $instance ) {

    $title = apply_filters( 'widget_title', $instance['title'] );

    echo $args['before_widget'];

    //if title is present

    if ( ! empty( $title ) )

    echo $args['before_title'] . $title . $args['after_title'];

    //output

    echo __( 'Hello World!', 'new_widget_domain' );

    echo $args['after_widget'];

    }

    Hàm form() để code cho Widget.

    public function form( $instance ) {

    if ( isset( $instance[ 'title' ] ) )

    $title = $instance[ 'title' ];

    else

    $title = __( 'Default Title', 'new_widget_domain' );

    ?>

    <p>

    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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

    }



    Cập nhật chỉnh sửa nội dung với hàm update():

    public function update( $new_instance, $old_instance ) {

    $instance = array();

    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

    return $instance;

    }



    Bạn cần thêm chức năng đăng ký Widget với WordPress



    function new_register_widget() {

    register_widget( 'new_widget' );

    }

    add_action( 'widgets_init', 'new_register_widget' );




    Giờ hãy khởi tạo hàm new_register_widget() giúp đăng ký widget, bạn hãy sử dụng Widget ID trong _construct(). Tiếp theo bạn khởi tạo hàm này thông qua widgets_init để tải thông tin của widget vào wordpress thông qua add_action(). Mã code tùy chỉnh sẽ như sau


    function new_register_widget() {

    register_widget( 'new_widget' );}

    add_action( 'widgets_init', 'new_register_widget' );

    class new_widget extends WP_Widget {

    function __construct() {

    parent::__construct(

    // widget ID

    'new_widget',

    // widget name

    __('My Sample Widget', ' new_widget_domain'),

    // widget description

    array( 'description' => __( 'My Widget Tutorial', 'new_widget_domain' ), )

    );

    }

    public function widget( $args, $instance ) {

    $title = apply_filters( 'widget_title', $instance['title'] );

    echo $args['before_widget'];

    //if title is present

    if ( ! empty( $title ) )

    echo $args['before_title'] . $title . $args['after_title'];

    //output

    echo __( 'Hello World!', 'new_widget_domain' );

    echo $args['after_widget'];

    }

    public function form( $instance ) {

    if ( isset( $instance[ 'title' ] ) )

    $title = $instance[ 'title' ];

    else

    $title = __( 'Default Title', 'new_widget_domain' );

    ?>

    <p>

    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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

    }

    public function update( $new_instance, $old_instance ) {

    $instance = array();

    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

    return $instance;

    }


    Sau khi đã hoàn thành bạn chọn tiếp appearance ở khu vực của wordpress.Tiếp theo chọn New sample trong Available Widgets. Vậy là bạn đã thành công tạo ra một widget.





    Với những người thiết kế website bằng wordpress, việc bạn thêm widget cho wordpress là cần thiết để bắt kịp các xu hướng của các trang website mua bán ngày nay.Việc thêm widget cho wordpress cũng giúp trang web của bạn ngày một hoàn thiện hơn, tối ưu trải nghiệm của cả bạn và người dùng. Mong rằng những thông tin trong bài viết “widget là gì” này sẽ giúp ích cho các bạn khi thêm widget vào wordpress.


    CÔNG TY TNHH PHẦN MỀM TIN HỌC VIỆT NHÂN

    ► Add: 79 Nguyễn Khuyến - P. 12 - Q. Bình Thạnh - TP. HCM

    ► Hotline: 0888 242 777 - 02866 82 44 77

    ► Email: support@vietnhan.co - vietnhansoft@gmail.com

    ► Website: Vietnhan.co
     

trang này