Bỏ qua đến nội dung chính

Làm thế nào để tạo ra một widget tùy chỉnh trên WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Bạn có muốn tạo các widget tùy chỉnh của riêng mình trên WordPress không?

Các widget cho phép bạn kéo và thả các mục vào bất kỳ khu vực thanh bên hoặc tiện ích sẵn sàng nào trên trang web của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo tiện ích WordPress tùy chỉnh.

Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn

Sau đó trở lại lý do tại sao chúng ta ở đây.

Tiện ích 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 thanh bên của trang web hoặc vào các khu vực tương thích với widget. Hãy nghĩ về nó như các mô-đun mà bạn có thể sử dụng để thêm các yếu tố khác nhau bằng giao diện "Kéo và Thả" đơn giản.

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ỳ chủ đề WordPress nào.

Khám phá quá chủ đề WordPress cao cấp tốt nhất của chúng tôi.

WordPress cũng cho phép các nhà phát triển tạo các widget tùy chỉnh của riêng họ. Nhiều chủ đề và plugin WordPress đi kèm với các tiện ích tùy chỉnh của riêng bạn mà bạn có thể thêm vào thanh bên của mình.

Ví dụ: bạn có thể thêm một mẫu liên hệ, một hình thức đăng nhập tùy chỉnh hoặc một bộ sưu tập ảnh trong một thanh bên mà không viết bất kỳ mã nào.

Điều đó nói rằng, hãy xem cách dễ dàng tạo các widget tùy chỉnh của riêng bạn trên WordPress.

Làm thế nào để tạo ra một widget tùy chỉnh trên WordPress

Hướng dẫn này dành cho những người có kiến ​​thức về phát triển web.

Trước khi bắt đầu, sẽ tốt hơn nếu tạo một plugin cụ thể trên trang web nơi bạn dán mã widget cho hướng dẫn này.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Bạn cũng có thể dán mã vào tệp "tests.php" trong chủ đề WordPress của mình. Tuy nhiên, nó sẽ chỉ khả dụng khi chủ đề WordPress cụ thể đó đang hoạt động.

Trong hướng dẫn này, chúng tôi sẽ tạo ra một tiện ích đơn giản sẽ chào đón khách truy cập. Nhìn vào mã này, sau đó dán nó vào plugin cụ thể của bạn để xem nó hoạt động.

// Đăng ký và tải hàm widget wpb_load_widget () {register_widget ('wpb_widget'); } add_action ('widgets_init', 'wpb_load_widget'); // Tạo wpb_widget lớp phụ tùng kéo dài WP_Widget {function __construct () {parent :: __ construct (// cơ sở ID của widget wpb_widget của bạn '// tên Widget sẽ xuất hiện trong IU __ (' PCBs Widget '' wpb_widget_domain ') , // mảng mô tả Widget ('description' => __ ('Simple WordPress Widget', 'wpb_widget_domain'),)); } // Tạo Widget public function front-end phụ tùng ($ args, $ chẳng hạn) {$ title = apply_filters ( 'widget_title' $ dụ [ 'title']); // trước và sau khi đối số widget được định nghĩa bởi các chủ đề echo $ args ['before_widget']; if (empty ($ title)) echo $ args ['before_title']. $ tiêu đề. $ Args [ 'after_title']; // Đây là nơi bạn chạy mã và hiển thị echo đầu ra __ ('Simple Widget', 'wpb_widget_domain'); echo $ args ['after_widget']; } // Widget Backend dạng public function ($ chẳng hạn) {if (isset ($ dụ [ 'title'])) {$ title = $ dụ [ 'title']; } else {$ title = __ ('Tiêu đề mới', 'wpb_widget_domain'); ?} // Widget quản trị form> <p> <label for = "<? Php echo $ this-> get_field_id ( 'title');>?"> <_e Php? ( 'Tiêu đề:'); ?> </ Label> <input class = "widefat" id = "<? Php echo $ this-> get_field_id ( 'title');?>"? Tên ="<? Php echo $ this-> get_field_name ( 'danh hiệu'? );?> "type =" text "value =" <? php echo esc_attr ($ title);??> "/> </ p> <? php} // cập nhật trường phụ tùng thay thế cũ với mới 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 kết thúc ở đây

Sau khi thêm mã, bạn phải chuyển đến " Appearance> Widgets ". Bạn sẽ nhận thấy tiện ích mới " PCB widget Trong danh sách các vật dụng có sẵn. Bạn phải kéo và thả tiện ích này vào một thanh bên.

Bây giờ bằng cách truy cập blog của bạn, bạn sẽ thấy một tiện ích trên thanh bên nơi bạn đã thêm tiện ích được đề cập.

Bây giờ hãy xem mã này.

Đầu tiên, chúng tôi ghi lại " wpb_widget Và tải widget tùy chỉnh của chúng tôi. Sau đó, chúng tôi đã xác định những gì tiện ích này làm và cách hiển thị nó trên bảng điều khiển.

Cuối cùng, chúng tôi đã xác định cách xử lý các thay đổi được thực hiện cho widget.

Bây giờ, có một vài điều bạn có thể muốn biết. Ví dụ, mục tiêu là gì " wpb_text_domain »

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

WordPress sử dụng "gettext" để quản lý dịch thuật và bản địa hóa. Vì vậy wpb_text_domain "và __e cho gettext biết cách lấy chuỗi dịch nếu nó tồn tại.

Nếu bạn tạo một tiện ích tùy chỉnh cho chủ đề WordPress của mình, bạn có thể thay thế "wpb bản_domain" bằng văn bản tên miền của chủ đề.

Khám phá thêm một số plugin WordPress cao cấp

Bạn có thể sử dụng các plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của blog hoặc trang web của bạn.

Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.

1. Galaxy Funder

Galaxy Funder là một hệ thống gây quỹ cộng đồng được thiết kế cho bất kỳ trang web WooC Commerce nào và có nhiều tính năng. Sử dụng plugin Galaxy Funder WordPress cao cấp, bạn có thể quản lý trang web gây quỹ cộng đồng của riêng mình hoặc thêm các chiến dịch gây quỹ vào tiêu đề của cửa hàng trực tuyến WooC Commerce của bạn.

Bạn cũng có thể sử dụng bất kỳ cổng thanh toán được hỗ trợ bởi WooC Commerce. Xin lưu ý rằng "Galaxy Funder" hoạt động trực tiếp trên trang cửa hàng điện tử, tạo điều kiện thuận lợi cho quá trình nhập liệu của người dùng.

Tải về | Bản demo | Web hosting

2. Nhấp vào Trò chuyện WhatsApp

Plugin WordPress cao cấp Nhấp vào WhatsApp Chat cho phép khách hàng WordPress dễ dàng kết nối với chủ sở hữu trang web hoặc hỗ trợ khách hàng bằng tài khoản WhatsApp của họ.

Chỉ cần một cú nhấp chuột vào tài khoản WhatsApp và nó sẽ được chuyển trực tiếp đến tài khoản WhatsApp di động với một thông báo mặc định. Và nếu khách hàng ở trên máy tính để bàn hoặc máy tính xách tay, anh ta sẽ được chuyển hướng đến WhatsApp Web.

Plugin này yêu cầu số lượng và thời gian và ngày của WhatsApp mà chủ sở hữu trang web hoặc nhóm hỗ trợ sẽ sử dụng để trò chuyện. Nút trò chuyện có thể được thêm vào trang chi tiết sản phẩm WooC Commerce, có liên quan trực tiếp đến sản phẩm này.

Tải về | Bản demo | Web hosting

3. Tải xuống hình ảnh Watermark

Tiện ích mở rộng WordPress cao cấp này cho phép bạn dễ dàng thêm hình mờ vào hình ảnh của mình Tải về kỹ thuật số dễ dàng.watermark dễ kỹ thuật số-file-tải hình ảnh

những watermarks có thể là một hình ảnh biểu tượng bản quyền, một logo công tyhoặc một phần của hình ảnh thương hiệu dưới dạng hình ảnh PNG trong suốt.

Tải về | Bản demo | Web hosting

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Các tài nguyên được đề xuất khác

Chúng tôi cũng mời bạn tham khảo các tài nguyên dưới đây để đi xa hơn trong việc kiểm soát và kiểm soát trang web và blog của bạn.

Kết luận

Voila! Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn tạo các widget tùy chỉnh trên blog WordPress của bạn. Nếu bạn có ý kiến hoặc đề xuất, đừng ngần ngại cho chúng tôi biết trong phần dành riêng.

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.

...

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
10 cổ phiếu
cổ phiếu8
tweet1
Enregistrer1