• WordPress
    • Tất cả
    • Lỗi Wordpress thường gặp
    • WordPress PLUGINS
    • WordPress SEO
    • WordPress THEMES

    EXAMPLEARTICLE

    EXAMPLEARTICLE

    EXAMPLEARTICLE

    Exploring Dating Trends and Platforms

    Exploring Dating Trends and Platforms

    Free Trade Signals Telegram ➤ Join Top Crypto Trading Group Now

    Hướng dẫn tắt chức năng comment trong wordpress

    Mẹo sử dụng Ping list hiệu quả để tăng tốc độ index google

    Mẹo sử dụng Ping list hiệu quả để tăng tốc độ index google

    9 Plugin tạo bài quiz đố vui tốt nhất cho WordPress (2020)

    9 Plugin tạo bài quiz đố vui tốt nhất cho WordPress (2020)

    Trending Tags

      • WordPress PLUGINS
      • WordPress SEO
      • WordPress THEMES
    • Công cụ
      7 công cụ tạo tên blog tốt nhất giúp bạn tìm ý tưởng cho tên blog WordPress

      7 công cụ tạo tên blog tốt nhất giúp bạn tìm ý tưởng cho tên blog WordPress

      Hướng dẫn sử dụng FOMO trên trang web WordPress để tăng lượt chuyển đổi

      Hướng dẫn sử dụng FOMO trên trang web WordPress để tăng lượt chuyển đổi

      Thiết lập dịch vụ đặt hàng trực tuyến trong WordPress

      Cách thiết lập dịch vụ đặt hàng trực tuyến cho nhà hàng với WordPress

      Các công cụ cần thiết cho một lớp học trực tuyến WordPress

      Các công cụ cần thiết cho một lớp học trực tuyến WordPress

      7 công cụ kiểm tra Backlink tốt nhất

      7 công cụ kiểm tra Backlink tốt nhất

      Cách tạo bố cục WordPress tùy chỉnh với Elementor

      Cách tạo bố cục WordPress tùy chỉnh với Elementor

      Hướng dẫn tối ưu hóa hình ảnh cho WordPress mà không làm giảm chất lượng ảnh

      Hướng dẫn tối ưu hóa hình ảnh cho WordPress mà không làm giảm chất lượng ảnh

      So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

      So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

      Hướng dẫn chặn thực thi PHP tại một thư mục cụ thể để bảo mật website WordPress

      Hướng dẫn chặn thực thi PHP tại một thư mục cụ thể để bảo mật website WordPress

      • Design
    • Hosting

      FTP là gì? hướng dẫn tạo tài khoản ftp trên hosting

      Pasted 81 1

      WooCommerce Hosting tốt nhất năm 2020 (đánh giá và kiểm tra hiệu suất)

      Hướng dẫn cách cài đặt WordPress lên hosting 2020

      Hướng dẫn cách cài đặt WordPress lên hosting 2020

      Hướng dẫn cách lưu trữ trang web đơn giản cho người mới bắt đầu

      Hướng dẫn cách lưu trữ trang web đơn giản cho người mới bắt đầu

      Huong Dan Tang Maximum Size Khi Upload File Tren Wordpress 49146

      Hướng dẫn tăng kích thước file tối đa khi upload trên WordPress

      Luu Ban Nhap Tu Dong 15826

      Cách cài đặt WordPress trên hệ điều hành Windows bằng WAMP

      Hướng dẫn tải hàng loạt file media WordPress qua FTP

      Hướng dẫn tải hàng loạt file media WordPress qua FTP

      9 plugin tốt nhất giúp bạn di chuyển website WordPress sang host mới (Plugin Migration)

      9 plugin tốt nhất giúp bạn di chuyển website WordPress sang host mới (Plugin Migration)

      Cách khắc phục lỗi  403 Forbidden trong WordPress

      Cách khắc phục lỗi 403 Forbidden trong WordPress

      • Domain Hosting
    • News
      chuyen-doi-so-la-gi

      Chuyển đổi số là gì? Giới thiệu 3 phần mềm chuyển đổi số hiệu quả

      Top 7 chủ đề blog giúp kiếm tiền online hot nhất năm 2020

      Top 7 chủ đề blog giúp kiếm tiền online hot nhất năm 2020

      share-plugin-wordpress-wp-rocket

      [Share Plugin WordPress] WP Rocket bản mới nhất – Cập nhật liên tục

      So sánh 15 nền tảng CMS phổ biến nhất năm 2020

      So sánh 15 nền tảng CMS phổ biến nhất năm 2020

      So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

      So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

      So sánh ưu, nhược điểm giữa Wix và WordPress

      So sánh ưu, nhược điểm giữa Wix và WordPress

      Hướng dẫn xóa bộ nhớ Cache trong website WordPress

      Hướng dẫn xóa bộ nhớ Cache trong website WordPress

    • WordPress
      • Tất cả
      • Lỗi Wordpress thường gặp
      • WordPress PLUGINS
      • WordPress SEO
      • WordPress THEMES

      EXAMPLEARTICLE

      EXAMPLEARTICLE

      EXAMPLEARTICLE

      Exploring Dating Trends and Platforms

      Exploring Dating Trends and Platforms

      Free Trade Signals Telegram ➤ Join Top Crypto Trading Group Now

      Hướng dẫn tắt chức năng comment trong wordpress

      Mẹo sử dụng Ping list hiệu quả để tăng tốc độ index google

      Mẹo sử dụng Ping list hiệu quả để tăng tốc độ index google

      9 Plugin tạo bài quiz đố vui tốt nhất cho WordPress (2020)

      9 Plugin tạo bài quiz đố vui tốt nhất cho WordPress (2020)

      Trending Tags

        • WordPress PLUGINS
        • WordPress SEO
        • WordPress THEMES
      • Công cụ
        7 công cụ tạo tên blog tốt nhất giúp bạn tìm ý tưởng cho tên blog WordPress

        7 công cụ tạo tên blog tốt nhất giúp bạn tìm ý tưởng cho tên blog WordPress

        Hướng dẫn sử dụng FOMO trên trang web WordPress để tăng lượt chuyển đổi

        Hướng dẫn sử dụng FOMO trên trang web WordPress để tăng lượt chuyển đổi

        Thiết lập dịch vụ đặt hàng trực tuyến trong WordPress

        Cách thiết lập dịch vụ đặt hàng trực tuyến cho nhà hàng với WordPress

        Các công cụ cần thiết cho một lớp học trực tuyến WordPress

        Các công cụ cần thiết cho một lớp học trực tuyến WordPress

        7 công cụ kiểm tra Backlink tốt nhất

        7 công cụ kiểm tra Backlink tốt nhất

        Cách tạo bố cục WordPress tùy chỉnh với Elementor

        Cách tạo bố cục WordPress tùy chỉnh với Elementor

        Hướng dẫn tối ưu hóa hình ảnh cho WordPress mà không làm giảm chất lượng ảnh

        Hướng dẫn tối ưu hóa hình ảnh cho WordPress mà không làm giảm chất lượng ảnh

        So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

        So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

        Hướng dẫn chặn thực thi PHP tại một thư mục cụ thể để bảo mật website WordPress

        Hướng dẫn chặn thực thi PHP tại một thư mục cụ thể để bảo mật website WordPress

        • Design
      • Hosting

        FTP là gì? hướng dẫn tạo tài khoản ftp trên hosting

        Pasted 81 1

        WooCommerce Hosting tốt nhất năm 2020 (đánh giá và kiểm tra hiệu suất)

        Hướng dẫn cách cài đặt WordPress lên hosting 2020

        Hướng dẫn cách cài đặt WordPress lên hosting 2020

        Hướng dẫn cách lưu trữ trang web đơn giản cho người mới bắt đầu

        Hướng dẫn cách lưu trữ trang web đơn giản cho người mới bắt đầu

        Huong Dan Tang Maximum Size Khi Upload File Tren Wordpress 49146

        Hướng dẫn tăng kích thước file tối đa khi upload trên WordPress

        Luu Ban Nhap Tu Dong 15826

        Cách cài đặt WordPress trên hệ điều hành Windows bằng WAMP

        Hướng dẫn tải hàng loạt file media WordPress qua FTP

        Hướng dẫn tải hàng loạt file media WordPress qua FTP

        9 plugin tốt nhất giúp bạn di chuyển website WordPress sang host mới (Plugin Migration)

        9 plugin tốt nhất giúp bạn di chuyển website WordPress sang host mới (Plugin Migration)

        Cách khắc phục lỗi  403 Forbidden trong WordPress

        Cách khắc phục lỗi 403 Forbidden trong WordPress

        • Domain Hosting
      • News
        chuyen-doi-so-la-gi

        Chuyển đổi số là gì? Giới thiệu 3 phần mềm chuyển đổi số hiệu quả

        Top 7 chủ đề blog giúp kiếm tiền online hot nhất năm 2020

        Top 7 chủ đề blog giúp kiếm tiền online hot nhất năm 2020

        share-plugin-wordpress-wp-rocket

        [Share Plugin WordPress] WP Rocket bản mới nhất – Cập nhật liên tục

        So sánh 15 nền tảng CMS phổ biến nhất năm 2020

        So sánh 15 nền tảng CMS phổ biến nhất năm 2020

        So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

        So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

        So sánh ưu, nhược điểm giữa Wix và WordPress

        So sánh ưu, nhược điểm giữa Wix và WordPress

        Hướng dẫn xóa bộ nhớ Cache trong website WordPress

        Hướng dẫn xóa bộ nhớ Cache trong website WordPress

      Cùng Học WordPress

      Hướng dẫn tạo widget WordPress của riêng bạn

      nickngon được đăng bởi nickngon
      11/06/2020
      trong chuyên mục WordPress
      0 0
      0
      Hướng dẫn tạo widget WordPress của riêng bạn
      0
      CHIA SẺ
      125
      LƯỢT XEM
      Share on FacebookShare on Twitter

      Bạn có muốn tạo các widget của riêng mình trong WordPress không? Các widget cho phép bạn thêm các yếu tố phi nội dung vào sidebar hoặc bất kỳ khu vực nào cho phép sử dụng widget trên website của bạn.

      Bạn có thể sử dụng các widget để thêm banner, quảng cáo, newsletter sign up form và các thành phần khác vào website của mình.

      Trong bài viết này, chúng tôi sẽ chỉ cho bạn từng bước một cách tạo một widget WordPress của riêng mình.

      Tạo một tiện ích WordPress tùy chỉnh

      Lưu ý: Hướng dẫn này dành cho người dùng WordPress đang trong quá trình học phát triển và lập trình WordPress.

      Widget WordPress là gì?

      Các widget WordPress chứa các đoạn mã mà bạn có thể thêm vào các sidebar hoặc các khu vực sẵn sàng cho widget của trang web.

      Hãy xem chúng như các module hỗ trợ bạn đưa thêm các thành phần khác nhau vào WordPress một cách đơn giản, chỉ bằng cách kéo và thả.

      Theo mặc định, WordPress đi kèm với một bộ widget tiêu chuẩn mà bạn có thể sử dụng với bất kỳ theme WordPress nào. Tham khảo hướng dẫn cho người mới bắt đầu của chúng tôi về cách thêm và sử dụng các widget trong WordPress .

      Thêm widget trong WordPress

      WordPress cũng cho phép các nhà phát triển tạo các widget của riêng họ.

      Nhiều theme và plugin WordPress cao cấp đi kèm với các widget của riêng họ để bạn có thể thêm vào sidebar của mình.

      Ví dụ: bạn có thể thêm form liên hệ, form đăng nhập, hoặc gallery hình ảnh vào sidebar mà không cần viết một đoạn mã nào.

      Hãy cùng xem qua cách để dễ dàng tạo các widget của riêng bạn trong WordPress.

      Video hướng dẫn

      Nếu bạn thích hướng dẫn bằng văn bản hơn, xin vui lòng đọc tiếp.

      Tạo một widget của riêng bạn trong WordPress

      Nếu bạn đang học lập trình WordPress, bạn sẽ cần một môi trường phát triển nội bộ (local development environment). Bạn có thể cài đặt WordPress trên máy tính của mình (Mac hoặc Windows).

      Có một số cách khác nhau để thêm mã widget của riêng bạn vào WordPress.

      Lý tưởng nhất là bạn có thể tạo một plugin dành riêng cho trang web (site-specific plugin) và dán mã widget của mình vào đó.

      Bạn cũng có thể dán mã vào file functions.php của theme . Tuy nhiên, nó sẽ chỉ sử dụng được khi theme đó được kích hoạt.

      Một công cụ khác mà bạn có thể sử dụng là plugin Code Snippets cho phép bạn dễ dàng thêm đoạn mã của riêng mình vào WordPress.

      Trong hướng dẫn này, chúng tôi sẽ tạo ra một widget đơn giản với chức năng chào đón khách truy cập mới. Mục tiêu ở đây là làm quen với widget của WordPress.

      Bắt đầu nào.

      Tạo một widget WordPress cơ bản

      WordPress đi kèm với một lớp (class) Widget WordPress tích hợp sẵn. Mỗi widget WordPress mới sẽ mở rộng lớp widget WordPress đó.

      Có 18 method được đề cập trong cẩm nang của nhà phát triển WordPress có thể sử dụng với lớp WP Widget .

      Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ tập trung vào các method sau.

      • __construct (): Đây là nơi tạo ID widget, tiêu đề và mô tả cho nó.
      • widget: Đây là nơi chúng ta xác định output của widget.
      • form: Phần này là nơi chúng tôi tạo form với các option cho widget ở back-end.
      • update: Phần này lưu trữ các option của widget vào cơ sở dữ liệu.

      Chúng ta hãy nghiên cứu đoạn mã sau đây, trong đó sử dụng bốn method này trong lớp WP_Widget.

      // Creating the widget 
      class wpb_widget extends WP_Widget {
       
      // The construct part  
      function __construct() {
       
      }
        
      // Creating widget front-end
      public function widget( $args, $instance ) {
       
      }
                
      // Creating widget Backend 
      public function form( $instance ) {
       
      }
            
      // Updating widget replacing old instances with new
      public function update( $new_instance, $old_instance ) {
       
      }
       
      // Class wpb_widget ends here
      }

      Dòng cuối cùng của đoạn mã là nơi chúng ta sẽ thực sự đăng ký widget với hệ thống của WordPress và load nó.

      function wpb_load_widget() {
          register_widget( 'wpb_widget' );
      }
      add_action( 'widgets_init', 'wpb_load_widget' );

      Bây giờ, hãy kết hợp tất cả những thứ này lại với nhau để tạo ra một widget cho WordPress.

      Bạn có thể sao chép và dán đoạn mã sau vào plugin của bạn hoặc file functions.php của theme.

      // Creating the widget 
      class wpb_widget extends WP_Widget {
        
      function __construct() {
      parent::__construct(
        
      // Base ID of your widget
      'wpb_widget', 
        
      // Widget name will appear in UI
      __('WPBeginner Widget', 'wpb_widget_domain'), 
        
      // Widget description
      array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
      );
      }
        
      // Creating widget front-end
        
      public function widget( $args, $instance ) {
      $title = apply_filters( 'widget_title', $instance['title'] );
        
      // before and after widget arguments are defined by themes
      echo $args['before_widget'];
      if ( ! empty( $title ) )
      echo $args['before_title'] . $title . $args['after_title'];
        
      // This is where you run the code and display the output
      echo __( 'Hello, World!', 'wpb_widget_domain' );
      echo $args['after_widget'];
      }
                
      // Widget Backend 
      public function form( $instance ) {
      if ( isset( $instance[ 'title' ] ) ) {
      $title = $instance[ 'title' ];
      }
      else {
      $title = __( 'New title', 'wpb_widget_domain' );
      }
      // Widget admin form
      ?>
      <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 
      }
            
      // Updating widget replacing old instances with new
      public function update( $new_instance, $old_instance ) {
      $instance = array();
      $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
      return $instance;
      }
       
      // Class wpb_widget ends here
      } 
       
       
      // Register and load the widget
      function wpb_load_widget() {
          register_widget( 'wpb_widget' );
      }
      add_action( 'widgets_init', 'wpb_load_widget' );

      Sau khi thêm đoạn mã trên, bạn cần vào trang Appearance » Widgets . Bạn sẽ nhận thấy có một widget mới có tên là cunghocwp trong danh sách các widget có sẵn. Bạn cần kéo và thả widget này vào một sidebar bất kỳ.

      Tiện ích demo

      Widget này chỉ có một ô để điền, bạn có thể thêm văn bản của mình và nhấp vào nút Save để lưu các thay đổi.

      Bây giờ bạn có thể truy cập trang web của mình để xem cách nó hoạt động thực tế.

      Xem trước widget tùy chỉnh của bạn

      Bây giờ hãy xem lại đoạn mã một lần nữa.

      Đầu tiên, chúng tôi đã đăng ký biến ‘wpb_widget’ và load widget. Sau đó, chúng tôi đã định nghĩa những gì widget đó làm và cách hiển thị trên back-end của widget đó.

      Cuối cùng, chúng tôi đã xác định cách mà widget xử lý các cài đặt của nó.

      Có thể có vài thứ bạn chưa rõ. Ví dụ, mục đích của wpb_text_domain là gì?

      WordPress sử dụng gettext để xử lý phần dịch thuật và bản địa hóa (localization). wpb_text_domain và __e có nhiệm vụ gọi đến gettext và tạo một string có thể dịch sang ngôn ngữ khác. Để biết thêm chi tiết, hãy tham khảo bài viết của chúng tôi về cách bạn tìm những theme WordPress hỗ trợ translation-ready (dịch theme sang ngôn ngữ khác).

      Nếu bạn đang tạo một widget cho theme của mình, bạn có thể thay thế wpb_text_domain bằng text domain của theme đang sử dụng.

      Chúng tôi hy vọng bài viết này đã giúp bạn học được cách để dễ dàng tạo widget WordPress của riêng mình. Bạn cũng có thể tham khảo thêm danh sách các widget WordPress hữu ích nhất cho website của bạn.

      Nếu thích bài viết này, bạn vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.

      Like this:

      Like Đang tải...
      • Xu Hướng
      • Bình luận
      • Mới nhất
      Hướng dẫn cho phép đăng ký tài khoản trên WordPress

      Hướng dẫn cho phép đăng ký tài khoản trên WordPress

      21/05/2020
      Hướng dẫn sử dụng trình chỉnh sửa Block Editor mới trên WordPress (Gutenberg)

      Hướng dẫn sử dụng trình chỉnh sửa Block Editor mới trên WordPress (Gutenberg)

      09/07/2020
      PDF

      Cách upload file PDF lên trang web WordPress

      11/06/2020

      EXAMPLEARTICLE

      0
      Hướng dẫn cài đặt WordPress trên Amazon Web Services

      Hướng dẫn cài đặt WordPress trên Amazon Web Services

      0
      Hướng dẫn cách hạn chế không cho phép điền form đối với người dùng không đăng nhập

      Hướng dẫn cách hạn chế không cho phép điền form đối với người dùng không đăng nhập

      0
      Cách tạo giỏ hàng cho người dùng trên WordPress bằng cách dùng BigCommerce

      Cách tạo giỏ hàng cho người dùng trên WordPress bằng cách dùng BigCommerce

      0

      EXAMPLEARTICLE

      06/02/2025

      EXAMPLEARTICLE

      16/01/2025

      EXAMPLEARTICLE

      16/01/2025

      Exploring Dating Trends and Platforms

      19/09/2024
      QUẢNG CÁO

      Bài viết mới nhất

      EXAMPLEARTICLE

      06/02/2025

      EXAMPLEARTICLE

      16/01/2025

      EXAMPLEARTICLE

      16/01/2025

      Exploring Dating Trends and Platforms

      19/09/2024

      Exploring Dating Trends and Platforms

      29/08/2024


      Cùng Học WP blog chia sẻ kiến thức học tập về WordPress, Hosting, Marketing, SEO, MMO miễn phí. Phương châm của cunghocwp.com là cho đi giá trị.

      Liên Hệ Cùng Học WP

      Mọi thông tin liên hệ về Cùng Học WP mời các bạn liên hệ trực tiếp chúng tôi theo các thông tin sau:

          • Hotline: 0973.666.777
          • Email: lienhe@cunghocwp.com
          • Địa chỉ: 387 Nguyễn Đình Chiểu, Phường 5, Quận 3, Hồ Chí Minh

      © 2020 – Cùng Học WordPress. All Right Reserved.

      Về chúng tôi  /  Liên hệ  /  Chính sách bảo mật  /  Quy định sử dụng

      • WordPress
        • WordPress PLUGINS
        • WordPress SEO
        • WordPress THEMES
      • Công cụ
        • Design
      • Hosting
        • Domain Hosting
      • News

      © 2025 JNews - Premium WordPress news & magazine theme by Jegtheme.

      Xin Chào !

      Đăng nhập vào tài khoản của bạn bên dưới

      Đã quên mật khẩu?

      Tạo tài khoản mới!

      Điền vào các mẫu dưới đây để đăng ký

      Tất cả các trường đều được yêu cầu. Đăng nhập

      Truy xuất mật khẩu của bạn

      Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

      Đăng nhập
      %d bloggers like this: