Làm thế nào để tạo một Plugin FAQ đơn giản cho WordPress

Bài viết được viết bởi:
  • WordPress
  • Cập nhật: Tháng hai 09, 2017

Chúng tôi đã thấy trước rất nhiều mẹo và công cụ viết blog. Chà, hôm nay chúng ta sẽ tìm hiểu cách tạo một công cụ tốt cho blog của bạn - một plugin trang FAQ. Nhưng điều quan trọng nhất không chỉ là chính plugin, mà là những gì bạn có thể làm với nguyên tắc này. Bạn sẽ tìm hiểu cách lưu trữ bất kỳ loại dữ liệu nào trong trang WP của bạn và cách tích hợp nó với các thư viện bên ngoài (như jQuery UI) tạo các thành phần tùy chỉnh cho trang web của bạn. Băt đâu nao!

Ý tưởng, Demo & Tải xuống

bản demo

Mục tiêu của chúng tôi ở đây là tạo ra một plugin có thể được sử dụng cho rất nhiều thứ, nhưng phù hợp khá tốt cho các trang FAQ.

Nhưng ngoài ra, thành tích chính của chúng ta sẽ là hiểu về WordPress các loại bài đăng tùy chỉnh, mã ngắn, tương tác với plugin JS / jQuery bên ngoài. Với ý tưởng này, bạn có thể tạo ra rất nhiều thứ dựa trên các plugin điên khác mà bạn có thể tìm thấy ở đây, đây chỉ là điểm khởi đầu cho bạn, Padawan thân yêu.

So ở đây bạn có thể tìm thấy bản trình diễn API jQuery đối với thành phần chúng ta sẽ sử dụng - nhưng thứ thực sự tuyệt vời là mã sử dụng để tạo thành phần đó (PHP).

Oh, và tất nhiên bạn có thể tìm thấy các tệp plugin để tải xuống tại đây cũng như vậy bạn chỉ có thể cài đặt trong trang WP của bạn.

Khởi động - Tệp trình cắm và Loại bài đăng tùy chỉnh

Trước hết, chúng tôi cần tạo một loại bài đăng tùy chỉnh để lưu trữ dữ liệu của chúng tôi.

Các loại bài đăng tùy chỉnh là một phần lớn trong ma thuật của WP, nó cho phép bạn tạo một loại dữ liệu mới (loại như bài đăng, trang, tệp đính kèm ..) để có thể gọi và thao tác bằng các chức năng của WP. Điều này có vẻ đơn giản đối với người mới bắt đầu nhưng chỉ những lập trình viên PHP thời xưa (vẫn còn là một vấn đề?) Biết rằng việc kết nối và lưu trữ dữ liệu trong DB của bạn khó đến mức nào. Hãy để một mình tự động tạo ra các loại dữ liệu mới, điều này là tinh tế nhưng cho phép một sự linh hoạt lớn trong mã của chúng tôi.

Đối với chúng tôi để có điều này chúng ta cần một plugin, nhưng có lẽ bạn đã quen thuộc với khái niệm này rồi. Các plugin giống như các khối Lego cho WordPress, chúng thêm hoặc biến đổi chức năng hiện tại bằng cách sử dụng một số mã có thể dễ dàng được cắm (duh!) Hoặc cũng được rút phích cắm nếu bạn muốn.

Để tạo một plugin theo cách WP nhận ra nó, bạn cần những thứ 2:

  1. Tạo một tệp bên trong tệp wp-content / plugins / của bạn /
  2. Thêm siêu dữ liệu vào đầu tệp đó để WP có thể hiểu nội dung đó là gì

Hãy nhớ rằng tên tệp phải là duy nhất để khi ai đó cài đặt plugin của bạn (ngay cả chính bạn) sẽ không có xung đột với plugin hiện tại. Trong trường hợp của chúng tôi cho một tổ chức tốt hơn, chúng tôi sẽ thêm một thư mục mới với tên faq-whsr, và bên trong nó là một tệp có tên faq-whsr.php.

Bây giờ cho metada, chỉ cần thêm một cái gì đó như thế này vào đầu của tập tin plugin của bạn (ngay sau khi <? Php):

meta_01

Nghĩa là:

  • Tên trình cắm: Tên đẹp sẽ được hiển thị trong giao diện plugin wp-admin> của bạn
  • Plugin URI: Nếu bạn muốn thêm một liên kết đến trang của plugin của bạn (tài liệu, ví dụ, trang bán hàng)
  • Mô tả: Đây là một đoạn nhỏ được hiển thị trong giao diện plugin wp-admin> của bạn. Giữ nó đơn giản để người dùng sẽ nhớ nó là gì
  • URI tác giả / tác giả: Người / công ty đã tạo plugin và liên kết cho các khoản tín dụng
  • Giấy phép: Vì vậy, người dùng sẽ biết những gì họ có thể / không thể làm với plugin của bạn

Đã tạo 01-plugin

Ok, bây giờ chúng tôi đã tạo plugin của chúng tôi, thêm một số siêu dữ liệu có liên quan. Ngay khi bạn lưu tệp plugin của mình, bạn sẽ có thể thấy nó trong giao diện wp-admin của bạn

Hãy kích hoạt nó và xem những gì sẽ xảy ra.

Đợi đã, không có gì? Vâng, đó là một điều tốt, nếu bất cứ điều gì là sai ngay bây giờ bạn sẽ thấy một lỗi. Hãy chuyển sang tạo loại bài đăng tùy chỉnh của chúng tôi ngay bây giờ.

Trong trường hợp của chúng tôi, CPT là mục FAQ, nhưng bạn có thể tạo sách, video, lời chứng thực và v.v. Điều quan trọng cần ghi nhớ ở đây là: tên hàm nên là duy nhất. Lặp lại với tôi ngay bây giờ: tên hàm phải là duy nhất, tên hàm phải là duy nhất. Hiểu rồi? Điều này sẽ giúp bạn tiết kiệm rất nhiều rắc rối cho đến khi chúng tôi có thể sử dụng OOP (có thể trong hướng dẫn tiếp theo).

Thuật sĩ được thực hiện với mã này:

cpt

Và đây là những gì các phần liên quan có nghĩa là:

  • $ labels - là một mảng với các nhãn và văn bản cho các phần khác nhau của khu vực wp-admin của bạn. Vì vậy, WP sẽ biết cách thích hợp để gọi các mặt hàng của chúng tôi
  • hỗ trợ - phần này cho biết những gì bạn có thể thấy trong wp-admin> FAQ> màn hình mới. Trong trường hợp của chúng tôi, chúng tôi sẽ có tiêu đề, trình soạn thảo (hộp nội dung chính), tác giả, phiên bản và trường tùy chỉnh (trong trường hợp bạn muốn chúng).
  • phân loại - ở đây bạn cho biết WP nào được phép phân loại (danh mục, thẻ hoặc phân loại tùy chỉnh)
  • register_post_type ('faq_whsr', $ args) - điều này nói với WP “Này, tạo một kiểu bài tùy chỉnh mới với ID là faq_whsr bằng cách sử dụng các đối số từ $ args”.

admin-faq

Lưu nó và nín thở. Bây giờ bạn sẽ thấy một phần mới trong trình đơn wp-admin chính của bạn

Đợi đã, phải không? Ừ. Đoạn mã đó tạo ra toàn bộ chức năng CPT. Nếu bạn không thấy điều này thú vị, hãy đợi nó sẽ nguội hơn trong phần tiếp theo.

Trước khi chúng tôi rời khỏi wp-admin, thêm một số dữ liệu giả (một vài faqs với ít nhất 2 loại).

Front-End - Tương tác WP x jQuery

Bây giờ là lúc cuối cùng để xem một số hành động và chúng tôi sẽ sử dụng jQuery UI Accordion element cho việc này.

jQuery UI có khá nhiều ưu điểm giống như jQuery:

  • Rất nhiều nhà phát triển đang làm việc trên đó
  • Mã trình duyệt chéo và sẵn sàng cho thiết bị di động
  • Được ghi chép rõ ràng
  • Chơi đẹp với WP (WP tự sử dụng chúng)

Câu hỏi bây giờ là: Làm thế nào để chúng ta gọi nó?

Có phương pháp tiếp cận 2 này:

  1. Các thẻ <script> / <style> không hợp lệ trong wp_head của bạn
  2. Các wp_enqueue đẹp

Chúng ta sẽ không mất quá nhiều thời gian với cách tiếp cận sai ngày hôm nay, nhưng về cơ bản, điều tốt nhất là nói với WP "Hey buddy, chúng tôi sẽ cần jQuery UI tại một số điểm trong mã của chúng tôi, xin vui lòng bao gồm nó trong trang". Bằng cách này, WP có thể kiểm tra xem có ai khác đã bao gồm nó hay bao gồm một phiên bản khác của nó và tránh rất nhiều rắc rối với các thư viện trùng lặp. Ok, làm cách nào để dịch trò chuyện thú vị đó thành mã?

Sử dụng hàm enqueue:

enqueue_02

Shortcode

Và bây giờ chúng ta quay trở lại wp-admin. Chúng tôi có các mục FAQ và chúng tôi đã có thư viện để tạo kiểu cho các mục như chúng tôi muốn, còn thiếu gì nữa? Vâng, chúng ta cần gọi các món đồ!

Chúng tôi có rất nhiều lựa chọn cho việc này, nhưng dễ nhất cho trường hợp này là tạo một shortcode. Shortcode là thứ bạn thêm vào trong trường nội dung của bạn (đối với các trang, bài viết, CPTs…) và WP sẽ thực sự tìm kiếm một hàm để chạy trên đó. Có loại 2 của shortcodes:

  1. [tự kèm theo] - Giống như thẻ <hr /> hoặc <br /> loại shortcode này chỉ gọi một hàm tại một số thời điểm - đây là anh chàng của chúng tôi
  2. [được bao bọc] Nội dung [/ gói] - Phần này giống như các thẻ <p> </ p> hoặc <div> </ div> và thực sự có thể biến đổi nội dung của nó hoặc sử dụng nội dung làm đối số.

Hãy xem cách nó hoạt động sau đó. Tạo một trang mới trong wp-admin của bạn và thêm mã này vào đó:

[faq-whsr]

Lưu và truy cập trang đó và xem điều gì sẽ xảy ra…

Chỉ đùa thôi, nó sẽ không làm điều gì đúng không? Vâng, đó là bởi vì chúng tôi đã không tạo ra một chức năng cho nó được nêu ra.

Thêm phần này vào tệp plugin của bạn:

shortcode_02

Bây giờ làm mới trang của bạn và tôi hứa điều gì đó thực sự tuyệt vời sẽ xảy ra.

Cool, huh? Bây giờ bạn có thể thấy rằng nó đang chạy và bầu trời là giới hạn cho bạn bây giờ. Những gì mà mã không chỉ là nói với WP rằng có một shortcode được gọi là [faq-whsr] và nếu WP tìm thấy nó, WP nên chạy một chức năng trong thời điểm đó của trang.

Trong trường hợp của chúng tôi, chúng ta sẽ cần phải đạt được cấu trúc này cho bảng điều khiển giao diện người dùng jQuery được tạo:

api_02

Và cho rằng chúng ta sẽ tạo ra Truy vấn WP, tải các mục FAQ của chúng tôi và nội dung của chúng. Thay thế hàm shortcode bằng chức năng này:

shortcode-basic_02

Ok, bây giờ các mục FAQ của bạn sẽ được gọi. Những gì chúng tôi đã làm là gọi wp_query để gọi loại bài đăng tùy chỉnh của chúng tôi và sau đó chuyển nó đến phần trả về shortcode để WP sẽ hiển thị tất cả chúng theo cấu trúc mong muốn.

Nó tốt nhưng thiếu một cái gì đó, phải không? Thế còn một số lựa chọn ở đó? Chà, chúng ta có thể thêm các tùy chọn cho một shortcode, hãy xem cách tạo một vài đối số WP_Query trong shortcode của chúng ta:

shortcode-final_02

Bằng cách này, bạn có thể gọi các mục bằng cách sử dụng các đối số sau đây (bạn có thể kết hợp bao nhiêu tùy thích):

  • cat - ID danh mục (nhiều được thêm dưới dạng mảng) [faq-whsr cat = 1]
  • category_name - tên danh mục [faq-whsr category_name = ”food”]
  • đơn đặt hàng - ASC hoặc DESC (DESC là mặc định) [faq-whsr order = ”ASC”]
  • orderby - thay đổi tiêu chí đặt hàng các mặt hàng [faq-whsr orderby = ”title”]
  • posts_per_page - thay đổi số lượng mục đã tải [faq-whsr posts_per_page = 5]

Nhưng như tôi đã nói, bầu trời là giới hạn cho bạn của tôi. Dưới đây là một vài tùy chọn cho WP_Query mà bạn có thể triển khai và sử dụng:

  • Tác giả
  • Danh mục (thêm tùy chọn loại trừ với not_in)
  • Tìm kiếm (tuyệt vời nếu bạn muốn cung cấp cho người dùng khả năng tìm kiếm thông qua họ)
  • Trường tùy chỉnh (vì các mục FAQ có chúng, bạn có thể sử dụng chúng để tải các mục với các trường và giá trị tùy chỉnh cụ thể)

Bây giờ đến lượt bạn

Đây chỉ là điểm khởi đầu cho bạn, như bạn có thể thấy. Tất cả chúng ta đều có thể học được rất nhiều điều thú vị khác để cải thiện plugin đơn giản này, dưới đây là một vài gợi ý để bạn có thể tìm hiểu sâu hơn:

  • Thiết kế đáp ứng
  • Tạo widget
  • Plugin kích hoạt / bỏ kích hoạt móc
  • quốc tế hóa
  • OOP
  • Chỉ thực hiện enqueueing nếu cần thiết (đối với các trang nhất định)

Đừng quên để lại suy nghĩ của bạn trong các ý kiến! Và đây là thách thức của chúng tôi dành cho bạn: Bạn có thể áp dụng tùy chọn mặc định của một mục mặc định cho các shortcode (vì vậy khi trang được tải, một mục khác sẽ được mở, đó không phải là mục đầu tiên)? Bạn sẽ làm điều này như thế nào?

Giới thiệu về Olive Oliveira

Tôi là một nhà thiết kế web và doanh nhân từ Itajubá (MG), Brasil. Tôi thích viết về những chủ đề tối nghĩa và làm một số thứ hay ho.

Kết nối: