Cách đây cũng khá lâu rồi, mình có viết một bài hướng dẫn sử dụng plugin qTranslate để làm website đa ngôn ngữ nhưng plugin đó hiện nay cập nhật khá chậm, lại chứa nhiều bug nên mình xin hướng dẫn với một plugin miễn phí khác dễ dùng hơn và ít bug hơn tên là PolyLang, đặc biệt là không có tự tắt khi cập nhật phiên bản WordPress mới như qTranslate.

Cũng xin nhắc lại rằng, website đa ngôn ngữ là chức năng cho phép chúng ta viết nhiều hơn một ngôn ngữ trên website (ví dụ các post có phiên bản nhiều thứ tiếng khác nhau bạn tự viết) chứ không phải là chức năng tự dịch nội dung trên website.

Lưu ý

• Trước khi sử dụng, mình khuyến khích bạn nên cài tiếng Việt cho WordPress nếu trong các ngôn ngữ bạn cần sử dụng có tiếng Việt, để nó có thể hỗ trợ các cụm từ tiếng Việt đầy đủ nhất trong WordPress.
• Plugin này chỉ hỗ trợ tùy biến đa ngôn ngữ với nội dung bạn nhập vào. Còn các cụm từ trong theme và plugin, muốn dịch bạn phải tự dịch ra nhiều file ngôn ngữ khác nhau, xem hướng dẫn tự dịch theme & plugin.

Cài đặt PolyLang

Sau khi cài plugin PolyLang xong, bạn cần vào Settings -> Languages để thiết lập ngôn ngữ cần sử dụng. Bây giờ bạn hãy lần lượt thêm các ngôn ngữ mà bạn muốn sử dụng trên website (thêm toàn bộ, kể cả tiếng Việt nếu bạn đã Việt hóa WordPress). Ở phần Add New Language, bạn chỉ cần chọn tên ngôn ngữ là nó tự thiết lập cho bạn nên hãy để nguyên tất cả.

Ví dụ mình thêm 3 ngôn ngữ thế này:

Tiếp theo bạn chuyển qua phần Strings Translation để thiết lập tiêu đề website và định dạng ngày giờ trên từng ngôn ngữ. Nếu bạn có thêm tiếng Việt thì ở phần kiểu định dạng thời gian bạn nên để là d/m/Y cho nó hợp chuẩn tiếng Việt.

Kế tiếp bạn chuyển qua tab Settings của nó, sẽ có một số tùy chọn như sau:

• Default Language: Ngôn ngữ mặc định trên Website. Nếu bạn thấy cái dòng màu đỏ phía dưới nghĩa là bạn có dữ liệu post, page, category và tag chưa được thiết lập ngôn ngữ. Đánh dấu vào để áp dụng ngôn ngữ mặc định cho tụi nó.
• URL Modifications: Sử dụng cấu trúc ngôn ngữ cho từng phiên bản ngôn ngữ trên website. Mình khuyến khích bạn chọn kiểu “The language is set from the directory name in pretty permalinks” để sử dụng đường dẫn kiểu http://domain.com/en/tên-post.
  • Hide URL language information for default language: Ẩn đường dẫn xác định ngôn ngữ ở ngôn ngữ mặc định. Ví dụ bạn chọn là tiếng Việt thì đường dẫn phiên bản tiếng Việt sẽ không có /vi/ trên đó.
  • Remove /language/ in pretty permalinks: Xóa phần /language/ trên đường dẫn. (nên chọn)
  • Keep /language/ in pretty permalinks: Giữ nguyên /language/ trên đường dẫn.
•  Detect browser language: Nếu bạn đánh dấu, website sẽ chuyển về ngôn ngữ trùng với ngôn ngữ của trình duyệt.
• Media: Nếu đánh dấu, bạn có thể thêm từng phiên bản hình ảnh cho từng ngôn ngữ.
• Synchronization: Nếu bạn muốn một số phần có cùng một giá trị trên bất cứ ngôn ngữ nào thì chọn vào. Ví dụ phần Custom field, bạn đánh dấu vào thì nó sẽ sử dụng một giá trị custom field cho toàn bộ các phiên bản ngôn ngữ.

Hiển thị nút chuyển ngôn ngữ trên giao diện

Để hiển thị các nút chuyển ngôn ngữ, bạn có thể vào Appearance -> Widget để thêm một widget tên là Language Switcher, ở tùy chọn bạn có thể tùy chọn hiển thị tên và lá cờ của từng ngôn ngữ, hoặc kiểu đổ xuống (dropdown) tùy thích.

Hoặc nếu bạn muốn tự chèn cái language switcher này ở vị trí bất kỳ trong theme, bạn có thể sử dụng hàm sau:

pll_the_languages($args);

Trong đó, $args là một mảng tham số như sau (nếu không thiết lập nó sẽ áp dụng giá trị mặc định)

• ‘dropdown’ => Hiển thị dạng đổ xuống, thiết lập giá trị là 1 nó sẽ thành dạng đổ xuống (default: 0)
• ‘show_names’ => Hiển thị tên ngôn ngữ, giá trị là 1 nó sẽ hiển thị tên ngôn ngữ (default: 1)
• ‘display_names_as’ => Hiển thị tên ngôn ngữ theo “name” hoặc “slug” (default: ‘name’)
• ‘show_flags’ => Hiển thị lá cờ nếu giá trị là 1 (default: 0)
• ‘hide_if_empty’ => Ẩn các ngôn ngữ nếu ngôn ngữ dó chưa có post hoặc page tương ứng, giá trị 1 là ẩn (default: 1)
• ‘force_home’ => Sử dụng đường dẫn trang chủ nếu giá trị là 1, nếu giá trị là 0 thì nó sẽ chuyển trang hiện tại sang ngôn ngữ đã chọn (default: 0)
• ‘echo’ => echoes if set to 1, returns a string if set to 0 (default: 1)
• ‘hide_if_no_translation’ => Ẩn ngôn ngữ nếu ngôn ngữ đó chưa có giá trị nào được dịch (default: 0)
• ‘hide_current’=> Ẩn ngôn ngữ hiện tại đang chọn nếu giá trị là 1 (default: 0)
• ‘post_id’ => Nếu giá trị này thiết lập thì phần ngôn ngữ đó sẽ trỏ tới một post hoặc page chỉ định qua ID (default: null)
• ‘raw’ => Nếu bạn muốn tự viết lại CSS cho phần này thì thiết lập giá trị là 1 (default:0)

Ví dụ:

pll_the_languages( array(
   ‘show_flags’ => 0,

   ‘dropdown’ => 1
));

Nếu bạn muốn nó hiển thị kiểu hàng ngang thì thêm đoạn sau vào style.css của theme:

.widget_polylang li {

   float: left;

   margin-right: 1em;

   list-style: none;

}

.widget_polylang li img {

   margin: 8px 0px 8px 0;

}

Thiết lập menu đa ngôn ngữ

Cái hay của PolyLang là hỗ trợ một vị trí menu có thể hiển thị tách biệt với từng ngôn ngữ khác nhau. Khi bạn vào Appearance -> Menus thì sẽ thấy một vị trí menu (menu location) đều hỗ trợ từng ngôn ngữ thế này:

Bây giờ bạn hãy tạo ra các menu khác nhau và nhập ngôn ngữ tương ứng và chọn vị trí thích hợp là được.

Thiết lập Post và Page đa ngôn ngữ

Trước khi làm việc, mình cần các bạn hiểu cơ chế tạo một post có nhiều ngôn ngữ đó là mỗi ngôn ngữ sẽ là một post riêng, nhưng khi thiết lập thì post này chỉ hiển thị với ngôn ngữ tương ứng. Khi bạn vào Posts -> All Posts, bạn xem thấy có thêm một cột ngôn ngữ như sau:

Trong đó có 2 biểu tượng mang ý nghĩa thế này:

 – Post này dành cho ngôn ngữ tương ứng với cột của nó.

– Trỏ tới post tương ứng với ngôn ngữ của nó.

 – Post này chưa có ngôn ngữ tương ứng, nhấp vào để tạo.

Ví dụ:

Nghĩa là post này là phiên bản tiếng Thụy Điển, nhấp vào icon  sẽ dẫn tới trang sửa post của hai ngôn ngữ còn lại.

Khi tạo post mới, bạn nhìn bên cột Languages sẽ có phần chọn ngôn ngữ và nhập tên post của các ngôn ngữ còn lại. Tốt nhất là bạn hãy soạn ra các post khác nhau tương ứng với từng ngôn ngữ, sau đó mở lại từng post và nhập tên post của nó với phiên bản ngôn ngữ khác.

Đối với Page thì tương tự nhé.

Thiết lập Category & Tag đa ngôn ngữ

Đối với category và tag thì cũng giống như post, tức là bạn sẽ tạo ra nhiều category khác nhau và trỏ nó thành các phiên bản ngôn ngữ cho từng category.

Như hình trên thì thực ra nó là một category nhưng với 3 ngôn ngữ khác nhau. Bạn có thể thiết lập khi sửa category hoặc khi tạo category.

Và khi tạo post mới, danh sách category sẽ hiển thị ra tương ứng với ngôn ngữ mà bạn thiết lập cho post chứ không hiển thị hết tất cả nên bạn đừng lo nó sẽ rối.

Tương tự với tag.

Đa ngôn ngữ với theme và plugin

PolyLang không thể hỗ trợ bạn sửa các cụm từ trong theme và plugin thành đa ngôn ngữ, nhưng nó có thể load file ngôn ngữ phù hợp với ngôn ngữ đang chọn để hiển thị ra bên ngoài. Điều này có nghĩa là, nếu bạn muốn plugin và theme của bạn hiển thị ngôn ngữ phù hợp trên ngôn ngữ khác nhau, thì bắt buộc theme và plugin của bạn phải có các file ngôn ngữ .mo trên host để nó có thể tải ra.

Nếu bạn chưa biết cách dịch theme thì hãy xem bài hướng dẫn tự dịch theme và plugin của mình nhé.

Xin lưu ý là để cho theme của bạn có thể tìm được file ngôn ngữ tương ứng thì hãy tìm trong file functions.php của theme đoạn load_theme_textdomain xem nó load file ngôn ngữ ở thư mục nào và đặt file ngôn ngữ vào thư mục đó.

Lời kết

PolyLang cũng chỉ vậy thôi nhưng những gì mình đã hướng dẫn ở trên đã đủ để cho bạn làm một website đa ngôn ngữ khá hoàn chỉnh nhất rồi. Nếu có khó thì mình nghĩ khó nhất chỉ là phần thiết lập theme hiển thị tốt đa ngôn ngữ thôi nhưng bạn cố gắng tự tìm hiểu và đọc kỹ sẽ làm được.

Chúc các bạn thành công!

Trong một vài trường hợp, đặc biệt là khi bạn tạo một phiên bản thử nghiệm cho website của mình ở một domain khác thì sẽ có nhu cầu đồng bộ dữ liệu trong database giữa hai website với nhau nhanh chóng. Ví dụ như website A bạn vừa thay đổi một số tùy chọn trong website mà bạn cũng muốn website B được đổi theo thì có thể ứng dụng kỹ thuật đồng bộ dữ liệu này. Ngoài ra kỹ thuật này cũng được ứng dụng nhiều trong các việc khác như chuyển đổi dữ liệu giữa hai website.

Trong WordPress, bạn có thể làm được việc này rất tốt và chuyên nghiệp với plugin WP DB Sync hoàn toàn miễn phí. Cũng nên nói thêm rằng, plugin này là bản custom lại của một plugin tương tự WP Migrate DB nhưng nó có hỗ trợ các chức năng mà vốn chỉ có trong Migrate DB Pro (trả phí).

Nên xem: Cấu trúc database của WordPress.

Chức năng của WP DB Sync

• Đồng bộ hóa toàn bộ cơ sở dữ liệu.
• Có thể tùy chỉnh đồng bộ một table bất kỳ.
• Hỗ trợ hai kiểu đồng bộ là Pull (gửi dữ liệu đi) và Push (lấy dữ liệu về).
• Nếu đồng bộ table wp_posts thì sẽ có thêm chức năng đồng bộ luôn các file ảnh với WP Sync Media File.
• Dễ sử dụng.
• Hỗ trợ SSL nếu có.
• Tự đổi địa chỉ của website khi mang database qua website đích.
• Tùy chọn post type được phép đồng bộ.

Cách sử dụng

Trước khi sử dụng, bạn cần lưu ý một điều là bạn nên sử dụng giữa hai website trên cùng một môi trường. Ví dụ như bạn có thể sử dụng giữa hai website trên host hoặc hai website trên localhost, còn nếu bạn có một website ở localhost và một website trên host thì website trên host sẽ không thể sử dụng phương thức Push cho localhost vì nó không kết nối được.

 Pull

Pull nghĩa là bạn lấy một website để kéo dữ liệu của một website nào đó về. Trước tiên, bạn cần chắc chắn hai website đã cài plugin WP DB Sync.

Bây giờ mình định nghĩa như sau:

• Website A: Website cần gửi dữ liệu đi.
• Website B: Website sẽ nhận dữ liệu.

Sau đó mình vào website B -> Tools -> Migrate DB -> Settings và đánh dấu vào “accept pull request...” và copy cái Connection Info.

Sau đó vào website A -> Tools -> Migrate DB -> chọn Pull và copy cái connection info của website B vào.

Sau đó bạn có thể tùy chỉnh việc tự tìm kiếm một chuỗi dữ liệu nào đó và thay thế bằng chức năng Find Replace.

Hoặc bạn có thể tùy chỉnh bảng dữ liệu cần lấy về ở mục Table.

Cuối cùng là ấn Migrate DB để bắt đầu kéo dữ liệu về.

Push

Nếu Pull là phương thức lấy database về từ một website khác thì Push nghĩa là gửi database từ website hiện tại lên website khác.

• Website A: Cần gửi dữ liệu đi.
• Website B: Cần lấy dữ liệu về.

Cách sử dụng cũng y hệt như mình đã hướng dẫn ở trên, chỉ khác là bạn vào website B -> Tools -> Migrate DB -> Settings và đánh dấu “Accept push request….” và copy Connection Info. Sau đó vào website A -> Tools -> Migrate DB -> Push và dán cái Connection Info của website B vào.

Lời kết

Plugin này là câu trả lời cho rất nhiều câu hỏi về việc đồng bộ hóa cơ sở dữ liệu trong WordPress mà mình đã thấy rất nhiều bạn thắc mắc. Bạn có thể ứng dụng nó trong việc chuyển dữ liệu giữa các website với nhau hoặc phục vụ trong việc khác nâng cao hơn như Deployment chẳng hạn.

Đã từ lâu, các bài về WordPress nâng cao đã có khá nhiều trên ThachPham.com rồi, đối với bạn nào đã biết qua về WordPress Core thì có thể dễ dàng hiểu các bài viết đó. Nhưng đối với các bạn mới làm quen với WordPress nâng cao thì có lẽ sẽ hơi khó khăn khi không biết bắt đầu học WordPress nâng cao từ đâu. Mặc dù mình đã có tổng hợp các bài WordPress nâng cao nhưng các bài viết đó chưa được sắp xếp theo tuần tự, và nội dung cũng không liên quan gì với nhau nên mình mong muốn có một serie chính thức về WordPress nâng cao để giúp các bạn mới tìm hiểu dễ dàng học hơn.

WordPress nâng cao là gì?

WordPress nâng cao không có nghĩa là sử dụng các plugin khó, hay cách cài đặt một theme WordPress nào đó nâng cao, mà là chúng ta sẽ học cách hiểu mã nguồn WordPress (viết tắt là WordPress Core).

Hiểu WordPress Core có nghĩa là chúng ta sẽ có thể phát triển thêm nhiều tính năng mới cho riêng mình nhờ vào các tính năng có sẵn của WordPress, ví dụ như bạn có thể tạo ra widget riêng, tạo plugin riêng, hay tạo bất cứ thứ gì riêng.

Trong serie này mình sẽ tập trung tối đa vào các thư viện có sẵn trong WordPress như Query, Widget, các Class, một số functions,….chứ không có hướng dẫn cách bạn làm một theme hay plugin hoàn chỉnh. Nhưng sau này bạn đã xem xong serie này, thì bạn có thể xem tiếp serie Lập trình theme WordPress hay Viết plugin TP Weather. Lúc đó mọi thứ đối với bạn cực kỳ đơn giản.

Kiến thức cần thiết

Để bắt đầu với serie này tốt hơn, mình cần các bạn có ít nhất 4 kiến thức cơ bản nhất là:

• WordPress cơ bản
• HTML cơ bản
• CSS cơ bản
• PHP cơ bản

Về PHP, bạn nên xem qua bài Học PHP cho WordPress và các tài nguyên cần thiết để biết mình sẽ cần học những gì trong PHP để có thể làm việc tốt trong WordPress, và những tài nguyên hữu ích.

Lời kết

Kết thúc bài mở đầu này, mình muốn nói rằng WordPress nâng cao không hề khó, nó chỉ khó khi bạn không chịu đọc hoặc không biết PHP mà thôi chứ nếu so với các CMS khác như Drupal hay Magento, thậm chí là Joomla thì WordPress Core vẫn dễ hiểu chán, có thể gọi là dễ nhất trong đám CMS hiện nay. Vì nó dễ nên mới dễ ứng dụng, thành ra nó trở thành CMS phổ biến nhất thế giới đó.

Nếu bạn đã sẵn sàng bước vào thế giới WordPRess nâng cao rồi, hãy ấn qua bài kế tiếp để xem nhé.

Ở các bài trước của serie PHP cho WordPress Developer chắc bạn đã làm việc qua PHP khá nhiều rồi phải không, bạn cũng đã biết được rất nhiều vấn đề cơ bản trong PHP. Vậy thì ở bài này, hãy vận dụng các kiến thức đó vào việc xử lý một số hàm thông dụng trong WordPress mà khi bạn lập trình với nó bạn sẽ sử dụng rất nhiều, xin nhắc lại, rất nhiều.

Lưu ý: Nếu bạn cần biết thêm nhiều code trong WordPress, bạn có thể xem các bài viết WordPress Nâng Cao.

bloginfo() và get_bloginfo()

bloginfo() và get_bloginfo() là hàm lấy dữ liệu chung của website WordPress của bạn như tên website, đường dẫn website, phiên bản WordPress đang sử dụng,…Sở dĩ có hàm get_bloginfo() là vì hàm get chỉ hỗ trợ return, còn bloginfo() là nó in ra luôn.

Cấu trúc sử dụng: get_bloginfo( $show )

Trong đó, tham số show là tham số khai báo thành phần cần lấy ra, nó có một số tham số như sau:

• 'name' : Tên của website thiết lập trong Setting -> General.
• 'url' : Giá trị Site Address thiết lập trong Settings -> General.
• 'wpurl' : Giá trị WordPress address trong Settings -> General.
• 'description' : Giá trị của phần Tagline trong Settings -> General.
• 'email' : Giá trị của phần Admin Email trong Settings -> General.
• 'charset' : Giá trị charset trong Settings -> Reading.
• 'version' : Phiên bản WordPress đang sử dụng.
• 'language' : Mã ngôn ngữ của website đang sử dụng.
• 'stylesheet_url' : Đường dẫn đến tập tin style.css của theme đang kích hoạt.
• 'stylesheet_directory' : Đường dẫn của thư mục theme đang kích hoạt.
• 'pingback_url' : Đường dẫn trỏ đến tập tin xmlrpc.php trên website.
• 'atom_url' : Đường dẫn của trình cấp Atom trên website.
• 'rdf_url' : Đường dẫn của trình cấp RDF trên website.
• 'rss_url' : Đường dẫn của trình cấp RSS trên website.
• 'rss2_url' : Đường dẫn của trình cấp RSS2 trên website.
• 'comments_atom_url' : Đường dẫn trình cấp Atom của bình luận trên website.
• 'comments_rss2_url' : Đường dẫn trình cấp RSS2 của bình luận trên website.

Ví dụ sử dụng:

Hiển thị tên website

<h1><?php bloginfo(‘name’); ?></h1>

hoặc sử dụng get_bloginfo()

<h1><?php echo get_bloginfo(‘name’); ?></h1>

hoặc sử dụng get_bloginfo() trong việc kiểm tra xem nó có dữ liệu chưa.

<?php

    if( get_bloginfo(‘name’) ) :

        bloginfo(‘name’);

    endif;

?>

Đối tượng $post

Đối tượng $post nó sẽ chứa toàn bộ dữ liệu của các post mà truy vấn trên website gửi về cơ sở dữ liệu. Ví dụ khi bạn ra trang chủ thì mặc định website sẽ có một truy vấn để lấy danh sách các bài viết mới nhất, hoặc khi vào một template nào đó như nội dung bài viết, page, category,..thì nó sẽ có một query riêng để lấy dữ liệu về.

Nên đọc qua: Tìm hiểu Query và Loop trong WordPress

Bây giờ ví dụ bạn thử dump đối tượng $post ở tập tin index.php của theme:

<?php

    echo ‘<pre>’;

    var_dump( $post );

?>

Kết quả sẽ trả về kiểu như thế này (nếu bạn đang thiết lập trang chủ hiển thị các bài mới nhất):

object(WP_Post)#121 (24) {
  ["ID"]=>
  int(1)
  ["post_author"]=>
  string(1) "1"
  ["post_date"]=>
  string(19) "2015-06-10 15:24:53"
  ["post_date_gmt"]=>
  string(19) "2015-06-10 15:24:53"
  ["post_content"]=>
  string(86) "Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!"
  ["post_title"]=>
  string(12) "Hello world!"
  ["post_excerpt"]=>
  string(0) ""
  ["post_status"]=>
  string(7) "publish"
  ["comment_status"]=>
  string(4) "open"
  ["ping_status"]=>
  string(4) "open"
  ["post_password"]=>
  string(0) ""
  ["post_name"]=>
  string(11) "hello-world"
  ["to_ping"]=>
  string(0) ""
  ["pinged"]=>
  string(0) ""
  ["post_modified"]=>
  string(19) "2015-06-10 15:24:53"
  ["post_modified_gmt"]=>
  string(19) "2015-06-10 15:24:53"
  ["post_content_filtered"]=>
  string(0) ""
  ["post_parent"]=>
  int(0)
  ["guid"]=>
  string(37) "https://hocphp-thachpham92.c9.io/?p=1"
  ["menu_order"]=>
  int(0)
  ["post_type"]=>
  string(4) "post"
  ["post_mime_type"]=>
  string(0) ""
  ["comment_count"]=>
  string(1) "1"
  ["filter"]=>
  string(3) "raw"
}

Từ đó, bạn có thể dựa vào đối tượng này mà lấy thông tin ra phù hợp như thế này:

<?php echo $post->post_title; ?>

Thế nhưng, bạn có một cách khác viết code gọn hơn đó là sử dụng các hàm template tags. Ví dụ để hiển thị tiêu đề của post trong đối tượng $post thì sẽ dùng template tag the_title().

Hint: Để xem query, hãy dump đối tượng $wp_query.

Lớp WP_Query

Khi bạn cần viết code để lấy danh sách các post mà bạn cần, thì bạn sẽ phải sử dụng đến lớp WP_Query (có thể dùng hàm get_posts() nhưng mình khuyên các bạn dùng WP_Query). Nó sẽ trả về kết quả là đối tượng chứa danh sách bài viết (giống $post).

Nên đọc qua: Tìm hiểu Query và Loop trong WordPress

Trong lớp này, bạn sẽ phải khai báo một số tham số cho nó để lấy bài viết ra theo ý mình. Ví dụ dưới đây là sẽ lấy 5 bài ngẫu nhiên.

$my_query = new WP_Query( ‘posts_per_page=5&orderby=rand’ );

Hoặc bạn có thể nhét tham số vào một biến riêng.

<?php

    $args = array(

        ‘posts_per_page’    => 5,

        ‘orderby’    => ‘rand’

    );

    $the_query = new WP_Query( $args );

    var_dump( $my_query );

?>

Bạn có đối tượng $my_query rồi thì chỉ cần sử dụng vòng lặp while() để nó hiển thị ra toàn bộ dữ liệu là được.

<?php

    $args = array(

        ‘posts_per_page’    => 5,

    );

    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) {
        echo ‘<ul>’;

        while ( $the_query->have_posts() ) {
            $the_query->the_post();

            echo ‘<li>’ . get_the_title() . ‘</li>’;

        }

        echo ‘</ul>’;
    } else {

        // no posts found

    }
    /* Restore original Post Data */

    wp_reset_postdata();

?>

Hàm add_action() và add_filter()

Hai hàm này được sử dụng rất nhiều trong việc lập trình theme hoặc lập trình plugin. Muc đích của hai hàm này là can thiệp vào mã nguồn của WordPress hoặc mã nguồn của plugin/theme nào đó mà không cần sửa code trực tiếp trong mã nguồn.

Khái niệm action filter khá dài nên mình khuyên bạn đọc bài này.

Lớp WP_Widget

Nếu bạn cần tạo widget trong WordPress thì sẽ cần tạo một lớp khác kế thừa lại lớp này. Rất may là mình đã có bài hướng dẫn kèm video rất chi tiết tại đây.

Hàm register_nav_menus() và wp_nav_menu()

Nếu bạn muốn tạo thêm các vị trí menu trong WordPress (Menu Location) thì sẽ cần sử dụng hàm register_nav_menus(), cách sử dụng rất đơn giản, ví dụ dưới đây mình sẽ tạo ra thêm 3 menu location (code này nên đặt trong functions.php nhé).

<?php

    register_nav_menus( array(

        ‘menu-1’ => ‘Menu 1’,

        ‘menu-2’ => ‘Menu 2’,

        ‘menu-3’ => ‘Menu 3’

    ) );

?>

Và để hiển thị một menu location nào đó ra ngoài template, bạn có thể sử dụng hàm wp_nav_menu().

<?php wp_nav_menu( array( ‘menu_location’ => ‘menu-1’ ) );  ?>

Hàm get_post_meta()

Hàm này sẽ có chức năng lấy các dữ liệu meta (trong bảng wp_postmeta của database) trong một post nào đó ra bên ngoài. Về hàm này bạn sẽ xem hướng dẫn custom field của mình để hiểu rõ hơn.

Tra cứu hàm WordPress

Ở trên chỉ là một số hàm và đối tượng, class thường dùng trong WordPress mà thôi. Nếu bạn muốn xem đầy đủ hơn thì xem tại địa chỉ này.

Lời kết

Vậy là phần này bạn đã thao tác sơ sơ trên các code của WordPress, và mình nghĩ là bây giờ bạn đã hiểu nhiều hơn rồi đó. Và serie này mình viết dành cho những người muốn lập trình trong WordPress nên các kiến thức cơ bản tới đây bạn đã có đủ rồi, nên mình sẽ tạm dừng serie tại đây.

Bây giờ, việc của bạn là xem một số hướng dẫn cụ thể trong WordPress như Hướng dẫn lập trình theme WordPress và Hướng dẫn viết plugin xem thời tiết của Thachpham.com để bạn vận dụng các kiến thức đó vào thực tế tốt hơn. Mình tin là chỉ cần như vậy bạn sẽ dễ dàng nắm bắt được code trong WordPress rồi. Và nếu bạn cần hướng dẫn về code trong WordPres nhiều hơn nữa, hãy đọc các bài viết trong mục WordPress Development của mình.

Trong khi bạn làm việc với WordPress, mình khuyến khích bạn nên dành thời gian học thêm PHP, cụ thể là bạn nên học thêm PHP & MySQL vì nó sẽ có nhiều kiến thức khác sẽ giúp bạn sau này, và nên nắm vững ít nhất một PHP Framework như CodeIgniter, Laravel, Zend vì chỉ khi làm việc trên framework, bạn sẽ học được thêm nhiều cách viết code hay và biết thêm nhiều cái mới mẻ hơn.

Hy vọng với serie ngắn này, các bạn sẽ hiểu hơn về PHP và hiểu cách làm việc trong WordPress tốt hơn với ngôn ngữ PHP. Chúc bạn sớm thành công!

Để có thể dễ dàng hiểu được các phần sau của serie WordPress nâng cao, hoặc để bạn có thể tuỳ biến lại giao diện của WordPress thì chắc chắn bạn cần phải nắm được cấu trúc template của theme trong WordPress và làm quen với các hàm sử dụng trong template (gọi là Template Tags).

Trước tiên bạn cần phải hiểu, một theme được hình thành bởi các template. Các template trong theme sẽ bao gồm các tập tin như header.php, index.php, footer.php, sidebar.php, single.php,…Nhưng sẽ có một tập tin bắt buộc nhưng không phải là template đó là functions.php.

Template ở đây bạn có thể hiểu nó như là một cái khuôn mẫu được định dạng sẵn nhằm mục đích hiển thị nội dung trên website. Ví dụ bạn muốn tuỳ biến lại cách hiển thị nội dung của Post thì sẽ sửa template single.php.

Template và Template Tag hoạt động thế nào?

Template thì bạn đã biết rồi, nó là tập tin để khai báo khuôn mẫu để hiển thị nội dung, và các template tag được sử dụng trong template là những hàm hiển thị nội dung. Ví dụ dưới đây là một đoạn code ngắn thường thấy trong template single.php:

<h1 class="entry-title"><?php the_title(); ?></h1>

Ở trên là mình đã cố định thẻ <h1> để hiển thị nội dung của hàm the_title() (đây là template tag) nhằm hiển thị tiêu đề bài viết của truy vấn hiện tại (hay còn gọi là post hiện tại bạn đang xem). Khi xuất ra trình duyệt nó sẽ có dạng như thế này:

[html]<h1 class=”entry-title”>Cấu trúc Template và Template Tag</h1>[/html]

Như vậy bạn có thể hiểu, việc tuỳ biến theme chỉ đơn giản là sửa cấu trúc HTML và khai báo các template tag cần sử dụng cho nó hiển thị ra mà thôi.

Ví dụ, template single.php sử dụng cho post nào?

Mặc định trong WordPress, sau khi nó phân tích truy vấn dựa vào đường dẫn hiện tại mà bạn đang truy cập, nó sẽ phân tích template phù hợp cần hiển thị. Tất cả các template trong theme có thể sử dụng cho tất cả các phần tử con trong một đối tượng nào đó, ví dụ template single.php sẽ sử dụng cho toàn bộ Post trong WordPress, category.php sẽ áp dụng cho toàn bộ category,…Nhưng bạn cũng có thể tạo tempate riêng cho một phần tử nào đó, ví dụ template single-123.php sẽ áp dụng cho Post mang ID là 123, hay single-gioi-thieu.php sẽ áp dụng cho Post mang slug là gioi-thieu.

Cấu trúc template trong một theme

Hiện nay các theme, ngoài việc họ sử dụng các template bắt buộc của WordPress thì họ còn sử dụng thêm các template thêm vào. Nên nếu bạn muốn hiểu cấu trúc template chuẩn của WordPress thì hãy xem template của theme Twenty Fifteen. Bạn có thể xem nó trong thư mục /wp-content/themes/twentyfifteen/.

Template của WordPress chỉ là các tập tin .php và style.css thôi nên các thư mục bên trong theme đều không thuộc template mà tác giả đã tạo ra để dễ quản lý hoặc chứa các thành phần đặc biệt.

Tips: Cách tốt nhất để nhớ template tags và cấu trúc template là hãy thực hành tuỳ chỉnh theme thật nhiều. Hoặc hãy tham gia serie Lập trình theme WordPress để biết cách tự code một theme từ A tới Z.

style.css – Trái tim của theme

Tất cả các theme trong WordPress đều phải có tập tin style.css. Tập tin này không chỉ là chứa các CSS trong theme mà nó còn có chức năng khai báo thông tin của theme như tên theme, tên tác giả, số phiên bản,…nhằm có thể hiển thị trong khu vực Themes của WordPress. Nếu theme bạn không có tập tin này thì theme của bạn không hợp lệ.

Bạn hãy thử mở tập tin style.css của theme Twenty Fifteen lên, bạn sẽ thấy ở các dòng đầu tiên họ có comment một số đoạn thông tin sau:

/*

Theme Name: Twenty Fifteen

Theme URI: https://wordpress.org/themes/twentyfifteen/

Author: the WordPress team

Author URI: https://wordpress.org/

Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen’s simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.

Version: 1.2

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready

Text Domain: twentyfifteen
This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you’ve learned with others.

*/

Các thông tin đó là những thông tin phải được khai báo ở theme, và nó sẽ hiển thị trong khu vực Appearance -> Themes.

functions.php – Bộ não của theme

Tập tin này tuy không thuộc template của theme nhưng nó sẽ có vai trò chứa những đoạn mã PHP để khai báo các tính năng đặc biệt, hoặc sử dụng hàm add_theme_support() để khai báo các tính năng trong theme. Bạn hãy nhớ một điều rằng, functions.php không phải là template nên nó sẽ không hiển thị ra bên ngoài nhưng mà nó sẽ được thực thi, và tất cả code PHP trong đây sẽ được thực thi khi website được tải ra.

index.php – Template gốc của theme

Tập tin index.php không chỉ là template để sử dụng cho trang chủ, mà nó còn là template gốc của website nếu như các template khác chưa được khai báo. Ví dụ nếu theme của bạn không có tập tin single.php để làm template cho trang nội dung của Post, thì nó sẽ sử dụng tập tin index.php để hiển thị. Các template khác cũng vậy.

header.php – Phần đầu của theme

Template này không bắt buộc nhưng nên sử dụng để khai báo phần header của trang, bao gồm các thẻ như <html>, <head>, <body>,…Và sau đó ở các template khác, chúng ta sẽ gọi nó ra bằng template tag get_header().

footer.php – Phần chân trang của theme

Nó cũng giống như header.php đó là được sử dụng để khai báo phần chân trang của theme. Rồi sau đó ở các template khác ta sẽ gọi nó ra bằng get_footer().

sidebar.php – Phần hiển thị sidebar

Bạn có thể khai báo sidebar trực tiếp vào các template khác với hàm dynamic_sidebar() nhưng nếu bạn sử dụng sidebar ở nhiều template khác nhau thì bạn nên viết code hiển thị sidebar vào tập ti sidebar.php. Rồi sau đó sẽ dùng hàm get_sidebar() để gọi template này ra.

Các template khác trong theme

Các template dưới đây nó sẽ không bắt buộc bạn phải tạo ra như 3 tập tin ở trên, nhưng nó sẽ được sử dụng nếu bạn có khai báo. Template nào không khai báo thì nó sẽ sử dụng template cấp cao hơn. Ví dụ nếu single-123.php không khai báo thì nó sẽ sử dụng single.php.

Template hiển thị trang lưu trữ

Template này sẽ sử dụng cho tất cả các trang lưu trữ trên website. Trang lưu trữ là các trang phân loại bài viết như category, tag, custom taxonomy,…

• archive.php – Định dạng hiển thị cho toàn bộ trang lưu trữ trên website như lưu trữ theo ngày tháng, category, tag, custom taxonomy,..
  • category.php – Định dạng hiển thị cho toàn bộ category của website.
    • category-tin-tuc.php – Định dạng hiển thị trang category có slug là tin-tuc.
    • category-123.php – Định dạng hiển thị cho category mang ID 123.
  • tag.php – Định dạng hiển thị toàn bộ tag của website.
    • tag-tin-tuc.php – Định dạng hiển thị toàn bộ tag có slug là tin-tuc.
    • tag-123.php – Định dạng hiển thị toàn bộ tag có ID là 123.
  • author.php – Định dạng hiển thị cho trang toàn bộ các tác giả trong website.
    • author-thachpham.php – Định dạng trang hiển thị tác giả tên thachpham.
    • author-123.php – Định dạng trang hiển thị tác giả có ID là 123.
  • archive-product.php – Định dạng trang hiển thị danh sách các bài viết thuộc post type tên product.
• taxonomy-product-category.php – Định dạng trang hiển thị danh sách các bài viết thuộc custom taxonomy tên product-category.

Template hiển thị trang nội dung

Template này sẽ định dạng cho trang hiển thị nội dung của Post hoặc Page hoặc một Custom Post Type nào đó.

• single.php – Định dạng trang hiển thị nội dung của tất cả các Post.
  • single-product.php – Định dạng trang hiển thị nội dung tất cả các post trong post type tên product.
  • single-hello.php – Định dạng trang hiển thị nội dung của post có slug là hello.
  • single-123.php – Định dạng trang hiển thị nội dung của post mang ID là 123.
• page.php – Định dạng hiển thị toàn bộ Page trong website.
  • page-123.php – Định dạng hiển thị page có ID là 123.

Template trang chủ

Các template này sẽ được sử dụng cho việc định dạng hiển thị của trang chủ.

• index.php
  • front-page.php
    • home.php

Template trang 404

Template này sẽ hiển thị lỗi 404 trong website, và nó chỉ có 1 tập tin duy nhất là 404.php.

Template trang kết quả tìm kiếm

Khi sử dụng chức năng tìm kiếm trên website, kết quả tìm kiếm sẽ được hiển thị bằng template search.php. Nếu search.php không tồn tại thì nó sẽ dùng archive.php.

Tài nguyên tham khảo

• Template Hierarchy – WordPress Developer
• wphierarchy.com

Tips: Nếu bạn mới làm quen với template trong WordPress, hãy tập tuỳ biến một theme có sẵn thay vì lao vào tạo theme riêng. Nếu bạn học, hãy nên sử dụng các theme miễn phí hoặc theme mặc định.

Tìm hiểu về Template Tag

Nếu các tập tin template là những tập tin đại diện cho trang hiển thị các thành phần trong website thì template tag là những hàm được sử dụng để hiển thị một thành phần đặc biệt trong template. Các template tag bạn có thể sử dụng bằng cách lồng vào những thẻ HTML để nó hiển thị.

Các template tag là hàm PHP nên nó sẽ phải được nằm trong cặp thẻ <?php ?> của ngôn ngữ PHP.

Trong khi danh sách template tags có trong WordPress rất nhiều, mình chỉ nói qua một số template tag thường gặp nhất và cũng là quan trọng nhất.

Nhắc lại: Template Tag là những hàm PHP được sử dụng trong template.

Toàn bộ các template tag trong WordPress đều được khai báo ở các tập tin sau:

• wp-includes/general-template.php
• wp-includes/author-template.php
• wp-includes/bookmark-template.php
• wp-includes/category-template.php
• wp-includes/comment-template.php
• wp-includes/link-template.php
• wp-includes/post-template.php
• wp-includes/post-thumbnail-template.php
• wp-includes/nav-menu-template.php

Vòng lặp (Loop)

Đây không được gọi là template tag nhưng nó là một phần quan trọng được sử dụng thường xuyên trong các template để có thể hiển thị thông tin của. Vòng lặp là mệnh đề while() trong PHP được sử dụng để tạo ra chu kỳ hiển thị toàn bộ nội dung trong một trang nhất định (như tiêu đề trang, nội dung,…).

Vòng lặp trong WordPress thường được sử dụng kèm với mệnh đề if() để tránh việc thực thi vòng lặp khi truy vấn ở trang hiện tại không có dữ liệu. Vòng lặp thường có cấu trúc như sau:

<?php

    if( have_posts() ) :

        while( have_posts() ) :

            the_post();
            // Template tag hiển thị nội dung của trang ở đây.
        endwhile;

    endif;

?>

Về chi tiết ý nghĩa các hàm trong vòng lặp như have_posts() hoặc the_post() mình sẽ nói kỹ hơn ở bài sau.

Bây giờ bạn hãy thử mở tập tin page.php trong theme Twenty Fifteen, bạn sẽ dễ dàng thấy nó có một vòng lặp như sau.

<?php

// Start the loop.

while ( have_posts() ) : the_post();
    // Include the page content template.

    get_template_part( ‘content’, ‘page’ );
    // If comments are open or we have at least one comment, load up the comment template.

    if ( comments_open() || get_comments_number() ) :

        comments_template();

    endif;
// End the loop.

endwhile;

?>

Và vòng lặp này sẽ tạo chu kỳ thực thi hàm get_template_part() và các thành phần khác bên trong để hiển thị nội dung của một page.

Hàm nối get_template_part()

Một trong các template tag được sử dụng nhiều nhất nhưng nhiều bạn cũng khó hiểu nhất đó chính là get_template_part(). Đây là hàm trong WordPress được sử dụng để nối nội dung của một tập tin PHP nào đó vào vị trí hiện tại mà hàm này đang được khai báo.

Ví dụ trong Twenty Fifteen nó sử dụng hàm get_template_part() như sau:

get_template_part( ‘content’, ‘page’ );

Có nghĩa là nó nối tập tin content-page.php có trong cùng thư mục vào vị trí nó được khai báo. Sở dĩ nó phải sử dụng hai tham số thay vì một tham số như vậy là để giúp lập trình viên dễ dàng quản lý các tập tin dựa theo slug (tham số content) và tên template (tham số page).

Như vậy bạn có thể hiểu, thay vì họ viết toàn bộ code của tập tin content-page.php vào vị trí đó thì họ sẽ tách nó ra một tập tin riêng nhằm có thể tái sử dụng lại trong các template khác hoặc cho dễ dàng quản lý code trong theme.

Ngoài ra, nó cũng có thể được sử dụng để nối một tập tin nào đó trong một thư mục nào đó. Ví dụ dưới đây là nối tập tin /part/content-single.php

get_template_part( ‘part/content’, ‘single’ );

Template Tags tổng hợp

Các template tags này thường không đại diện cho một chức năng cụ thể nào.

• get_header() – Nối tập tin header.php trong theme.
• get_sidebar() – Nối tập tin sidebar.php trong theme.
• get_footer() – Nối tập tin footer.php trong theme.
• bloginfo() & get_bloginfo() – Hiển thị thông tin của website.
• wp_head() – Hook mặc định của WordPress để hiển thị các thành phần trong thẻ <head>.
• wp_footer() – Hook mặc định của WordPress để sử dụng ở footer.
• wp_nav_menu() – Hiển thị một Menu Location.
• dynamic_sidebar() – Hiển thị một sidear.

Template Tags cho Post

• the_permalink() – Hiển thị permalink của post hiện tại trong truy vấn.
• the_title() – Hiển thị tiêu đề post hiện tại trong truy vấn.
• the_content() – Hiển thị toàn bộ nội dung của post hiện tại trong truy vấn.
• the_excerpt() – Hiển thị excerpt hoặc một phần đầu nội dung của post hiện tại trong truy vấn.
• the_ID() – Hiển thị ID của post hiện tại trong truy vấn.
• the_tags() – Hiển thị các tag có trong post hiện tại trong truy vấn.
• the_date() – Hiển thị ngày đăng post hiện tại trong truy vấn.
• the_category() – Hiển thị các category của post hiện tại trong truy vấn.
• post_class() – Hiển thị các class HTML đặc trưng của post hiện tại trong truy vấn.

Template Tags cho ảnh thumbnail của Post

• has_post_thumnail() – Kiểm tra xem post hiện tại trong truy vấn có thiết lập thumbnail (Featured Image) hay không.
• the_post_thumbnail() – Hiển thị ảnh thumbnail của post hiện tại trong truy vấn.

Template Tags cho Category và Tag

Các template tags này sẽ sử dụng cho template archive.php trở xuống.

• category_description() – Hiển thị mô tả của category.
• tag_description() – Hiển thị mô tả của tag.
• wp_dropdown_categories() – Hiển thị danh sách category với dạng dropdown.
• single_cat_title() – Hiển thị tên category trong truy vấn.
• single_tag_title() – Hiển thị tên tag trong truy vấn.
• wp_tag_cloud() – Hiển thị mây thẻ.

Lời kết

Yeah, vậy bạn đã hiểu thế nào là cấu trúc template trong theme WordPress và những đoạn code bên trong đó (đa phần là template) chưa? Rất đơn giản phải không nào, thật ra  để hiểu template trong WordPress rất đơn giản, bạn chịu khó xem hướng dẫn của mình trong bài này cùng với việc thường xuyên vọc mã nguồn của theme là sẽ nhanh chóng hiểu thôi.

Ở bài sau, mình sẽ giải thích cho bạn về thuật ngữ truy vấn (query) vốn mình đã nói nhiều trong bài này, ở bài đó bạn sẽ hiểu thêm về template nữa.

Trước khi chúng ta nhảy vào làm việc với WordPress nâng cao như tiếp cận WordPress Core và sử dụng nó, thì ít nhất chúng ta nên hiểu qua về cách mã nguồn WordPress làm các việc như xử lý dữ liệu, tiếp nhận request truy cập (khi ai đó truy cập hoặc làm một thao tác gì đó trên website được gọi là 1 request). Việc hiểu những khái niệm căn bản này rất có ích cho các bạn biết rõ thật sự WordPress là cái gì, chúng ta có thể làm được gì trong WordPress.

Nhưng bây giờ, chúng ta nên tự hỏi rằng mã nguồn WordPress có thể làm gì? Điểm danh sơ qua, ta thấy nó có thể làm:

• Blog cá nhân.
• Trang tin tức, tạp chí.
• Trang bán hàng.
• Trang giới thiệu bất động sản.
• Trang rao vặt.
• Portfolio điện tử.
• ….

Nhưng chúng ta có cảm thấy là các loại website trên đều có một điểm chung là lưu trữ nội dung nhập vào, quản lý nội dung và cho phép người truy cập xem nội dung không? Chúng ta gọi chung nó là CMS – Content Management System (hệ thống quản trị nội dung). Và WordPress là một mã nguồn PHP thuộc loại CMS.

Các dữ liệu làm việc thế nào?

Trong mã nguồn WordPress, nó đã được lập trình nhiều tính năng giúp bản thân nó có thể tương tác với cơ sở dữ liệu (database) như MySQL để giúp người sử dụng có thể lưu trữ dữ liệu mềm trên website. Tất cả các dữ liệu mềm được lưu trữ vào database sẽ bao gồm các nội dung văn bản được nhập vào website, các thiết lập (vì các thiết lập sẽ lưu dưới dạng một kiểu dữ liệu) và một số dữ liệu linh ta linh tinh khác.

Nếu các bạn có vào xem database thông qua phpMyAdmin hoặc các ứng dụng tương tự, bạn sẽ thấy WordPress có nhiều bảng dữ liệu để chứa các dữ liệu được lưu vào

Rồi sau đó, các tính năng trong mã nguồn sẽ tương tác với các bảng dữ liệu đó và đưa ra ngoài trình duyệt hiển thị dưới dạng HTML thông qua các tập tin đã được thiết lập khuôn mẫu trong theme (ta gọi là template). Những cái này có thể bây giờ bạn chưa hiểu nhưng từ từ bạn sẽ hiểu nó trong serie này.

Xem thêm: Cấu trúc database của WordPress và cách tối ưu

WordPress làm gì mỗi khi có người truy cập vào website?

Khi một người truy cập vào website, WordPress sẽ tự động xử lý theo quy trình sau:

Bước 1 – Khởi động mã nguồn

Tập tin index.php trong mã nguồn (không phải của theme hay plugin) được tải ra, sau đó nó sẽ truy xuất các tập tin cốt lõi khác như wp-config.php vốn để kết nối đến cơ sở dữ liệu, wp-settings.php,…. Bạn có thể mở tập tin index.php lên xem và lần mò theo các tập tin được nhúng vào sẽ biết được quy trình nó load theo thứ tự các tập tin.

Ở bước này, WordPress sẽ kết nối đến cơ sở dữ liệu được thiết lập trong wp-config.php, sau đó sẽ tiến hành tải những tính năng trong mã nguồn như /wp-include/functions.php, /wp-include/options.php,…nhằm nạp sẵn các chức năng cần thiết để có thể tiếp nhận những dữ liệu.

Và cũng trong bước này, toàn bộ các dữ liệu được lưu vào bảng wp_options có giá trị ở cột autoload là true sẽ được lôi ra hết, dù thiết lập đó có được sử dụng hay không. Mục đích của bước này là mang sẵn các tuỳ chọn của website cùng các plugin để hỗ trợ cho các bước sau, đặc biệt là bước tải plugin để nó làm việc chính xác. Đó là lý do tại sao ở bài tối ưu bảng wp_options, mình có khuyên bạn nên xoá bớt các hàng dữ liệu không dùng đến ở bảng này để giảm thời gian tải.

Bước 2 – Kích hoạt plugin

Các plugin mà bạn đang kích hoạt trong website sẽ được tải ra ngay sau khi mã nguồn WordPress khởi động xong. Bởi vì các tính năng trong WordPress Core được sử dụng trong plugin thường sẽ được gắn vào hook init (bạn tạm thời hiểu nó là một điểm neo để kích hoạt kịch bản nào đó) nên nó sẽ load ngay sau khi WordPress khởi động là vậy.

Bước 3 – Thực thi tập tin functions.php trong theme

Lúc này, WordPress sẽ tiến hành dò tìm đến tập tin functions.php trong theme đang được kích hoạt để tải các tính năng mà người tạo ra theme đã khai báo ở đó. Vậy làm sao WordPress có thể hiểu được website đang dùng theme nào? Đó là ở bước 1, nó đã kết nối vào database và dựa theo khoá current_theme trong cột option_name tại bảng wp_options.

Bước 4 – Phân tích truy vấn và khởi tạo truy vấn

Đây là bước quan trọng để website của bạn có thể hiển thị nội dung ra bên ngoài, vì các nội dung sẽ được trả về sau khi các truy vấn gửi vào database. Nếu bạn muốn biết nó phân tích như thế nào thì xem tại đây.

Truy vấn nghĩa là một mệnh lệnh được gửi vào database nhằm lấy các thông tin mà truy vấn đó cần xem. Truy vấn ở đây là truy vấn SQL gửi vào MySQL Server.

Trước tiên, WordPress sẽ chạy hàm wp() được thiết lập trong /wp-include/functions.php vốn để gọi phương thức $wp->main() cho mục đích thiết lập truy vấn. Đối tượng $wp được tạo ra bởi lớp WP trong /wp-include/class-wp.php.

/**

 * Set up the WordPress query.

 *

 * @since 2.0.0

 *

 * @param string|array $query_vars Default WP_Query arguments.

 */

function wp( $query_vars = ” ) {

    global $wp, $wp_query, $wp_the_query;

    $wp->main( $query_vars );
    if ( !isset($wp_the_query) )

        $wp_the_query = $wp_query;

}

Lúc này, phương thức $wp->parse_request() sẽ được khởi động cho mục đích phân tích truy vấn dựa theo đường dẫn của website. Vì bạn biết rằng WordPress sẽ tự động sinh truy vấn dựa theo đường dẫn, ví dụ khi chúng ta vào http://domain.com/?p=123 thì WordPress sẽ gửi một truy vấn vào database để lấy dữ liệu của post mang số ID là 123.

Sau khi truy vấn được phân tích, WordPress sẽ làm việc tiếp theo là thiết lập các hàm điều kiện thông qua phương thức $wp_query->parse_query(). Sau đó nó sẽ chuyển các truy vấn đã được tạo ra thành truy vấn bằng các lệnh SQL nhằm gửi đến MySQL để lấy dữ liệu bài viết bằng phương thức $wp_query->get_posts(). Nếu database có dữ liệu, các bài viết sẽ được lấy về sau khi gửi truy vấn và nó sẽ được lưu vào đối tượng $wp_query để nó sử dụng trong các vòng lặp cho việc hiển thị bài viết.

Trong quá trình gửi truy vấn này, nếu nó không tìm thấy dữ liệu thì sẽ phân tích và hiển thị báo lỗi 404.

Và cuối cùng là nó có dữ liệu, thì nó sẽ thiết lập biến $post để sử dụng trong vòng lặp. Biến $post là đối tượng chứa các dữ liệu của bài viết thông qua các thuộc tính. Phần này chúng ta sẽ đào sâu hơn ở phần tìm hiểu sâu về query và vòng lặp.

Bước 5 – Thực thi các tập tin khuôn mẫu (template) trong theme

Sau khi nó đã có dữ liệu bài viết và các dữ liệu liên quan mà nó đã làm ở bước 4, thì nó sẽ tiến hành xử lý các tập tin template của theme thông qua cấu trúc template. Sau đó các nội dung và trang chủ của website sẽ được hiển thị dựa theo các template tags dưới dạng HTML. Phần này chúng ta sẽ tìm hiểu kỹ hơn ở bài sau.

Chúng ta có thể can thiệp gì vào mã nguồn WordPress?

Một câu hỏi được đặt ra, chúng ta có thể làm gì để can thiệp vào mã nguồn WordPress nhằm điều khiển nó hoạt động theo ý mình, hoặc hiểu theo cách khác là tạo thêm tính năng và thay đổi giao diện hiển thị.

Không phải tự nhiên mà mình kể chi tiết ra quy trình WordPress xử lý dữ liệu ra ở trên, mà nó sẽ giúp bạn dễ hiểu hơn ở phần này.

Trước tiên, chúng ta có thể can thiệp vào các tính năng của WordPress và tái tạo lại nó vốn đã được WordPress xử lý ở bước 1 như trên. Sở dĩ chúng ta có thể làm được là vì mã nguồn của WordPress được viết theo kiểu chúng ta có thể can thiệp gián tiếp vào nó và có thể tái tạo lại (thông qua các lớp – Class). Và các tính năng chúng ta tự tạo ra từ việc can thiệp vào mã nguồn có thể được khai báo với dạng plugin và nó sẽ được sử dụng ngay sau khi WordPress khởi động các chức năng cần thiết.

Thứ hai, chúng ta có thể can thiệp vào lớp WP_Query để tự tạo một truy vấn riêng để lấy dữ liệu bất kỳ trong database (nhiều truy vấn có thể sử dụng bằng một hàm nào đó, như get_post_meta() chẳng hạn). Chúng ta ứng dụng WP_Query nhiều nhất vào việc lấy dữ liệu các bài viết (bao gồm post, page, attachment,…).

Thứ ba, chúng ta có thể tạo ra theme, sau đó tự định tuỳ chỉnh lại các tập tin template trong đó để các nội dung của WordPress hiển thị ra theo đúng ý đồ của mình. Vì sau khi WordPress gửi truy vấn lấy dữ liệu, thì việc hiển thị ra thế nào là do các template quyết định, và trong template sẽ là các mã PHP kết hợp với HTML/CSS để hiển thị nó ra website.

Đó là những việc chúng ta có thể làm.

Vậy làm như thế nào?

Câu hỏi hay đó, chúng ta đã biết qua cách WordPress tải như thế nào khi có lượt truy cập đi vào, rồi tuần tự các chức năng được thực thi ra và biết luôn các việc chúng ta có thể làm. Còn làm như thế nào, chúng ta sẽ tìm hiểu ở các phần sau trong serie Học WordPress nâng cao này.

Một trong số các tính năng mạnh mẽ trong WordPress có thể giúp các lập trình viên có thể thêm nhiều tính năng hay trong các bài viết trong WordPress, đó là tính năng Custom Field. Hầu hết hiện nay chúng ta không sử dụng custom field độc lập nhưng hiểu custom field là nền tảng quan trọng để sau này bạn tìm hiểu thêm Meta Boxes hoặc các plugin thông dụng như Advanced Custom Field.

Custom Field là gì?

Giải thích ngắn gọn thì đó là một dữ liệu bổ sung để thêm vào các bài viết (Post, Page). Nghĩa là chúng ta có thể thêm một cột dữ liệu trong mỗi bài viết để nó mang một giá trị tương ứng. Ví dụ như mặc định WordPress chỉ hỗ trợ nhập tiêu đề bài viết, nhưng với Custom Field bạn có thể thêm một trường dữ liệu kiểu như Tiêu đề phụ chẳng hạn.

Hướng dẫn ứng dụng Custom Field

Các bạn vào Posts -> Add New và nhìn xuống dưới sẽ thấy cái khung Custom Field này.

Nếu không thấy thì các bạn nhìn tít lên trên, bấm vào chữ Screen Options và tick dấu vào Custom Field.

Bây giờ các bạn thử thêm Meta Key (tên địa diện của field) với Value (giá trị của field) như sau:

Thêm xong nhớ ấn nút Add Custom Field.

Trong đó,

• tp_country : Là tên đại diện của field của bạn.
• Sweden : Giá trị của field.

Ok, vậy là chúng ta đã hoàn tất việc khai báo xong các meta key và giá trị của nó.

Dữ liệu custom field lưu vào đâu?

Các dữ liệu từ custom field sẽ được lưu lại thành các Post Metadata và nằm trong bảng wp_postmeta trong database (xem ở các trang cuối).

Trong đó, bạn sẽ thấy tên key (meta_key), ID của bài viết chưa key (post_id) và giá trị của nó (meta_value). Và khi bạn dùng field này cho nhiều bài viết khác nhau thì nó cũng sẽ có thêm nhiều hàng dữ liệu có meta_key giống nhau nhưng sẽ có post_id khác nhau.

Các hàm hiển thị giá trị custom field

Nếu bạn muốn lấy giá trị của field nào đó trong bài viết ra hiển thị bên ngoài (như template single.php chẳng hạn) thì bạn có thể sử dụng nhiều hàm khác nhau.

get_post_meta()

Hàm này thích hợp sử dụng nếu bạn cần lấy giá trị của một field nào đó dựa vào Post ID đang chứa field.

Cách sử dụng: get_post_meta( $post, $meta_key, $single )

Trong đó,

• $post: Là ID của bài viết cần lấy custom field.
• $meta_key: tên key của field cần lấy trong bài viết. Mặc định sẽ lấy toàn bộ field có trong post.
• $single: Tuỳ chọn hiển thị một giá trị hay một mảng giá trị. Mặc định là false (hiển thị mảng).

Ví dụ mình muốn hiển thị giá trị của field tp_country trong bài hiện tại thì sẽ đặt đoạn code sau vào single.php (có thể đặt ở các template khác bất kỳ, miễn là lấy được ID của bài viết cần lấy field).

        <?php

            $tp_country = get_post_meta( $post->ID, ‘tp_country’, true );

            

            if( $tp_country ) { // kiểm tra xem nó có dữ liệu hay không

                echo ‘Country: ‘ . $tp_country . ‘</br>’;

            }

        ?>

the_meta()

Nếu bạn cần đơn giản là in ra toàn bộ meta key và meta value của tất cả các field có trong bài viết và hiển thị dưới dạng danh sách bằng HTML thì sẽ sử dụng hàm này, hàm này không có tham số, sử dụng như là một template tags.

get_post_custom()

Hàm này thích hợp nếu bạn cần lấy ra toàn bộ meta key và meta value của bài viết hiện tại (hoặc bài viết bất kỳ dựa vào ID), kết quả trả về là dạng mảng lồng nhau.

Cách sử dụng: get_post_custom( $post_id )

Nếu $post_id không được khai báo thì nó sẽ lấy ID của bài viết hiện tại.

        <?php

            $tp_field = get_post_custom();

            

            echo ‘<pre>’;

            print_r( $tp_field );

            echo ‘</pre>’;

            

        ?>

Ngoài các hàm trên thì còn có get_post_custom_values() và get_post_custom_keys() nhưng mình thấy nó không thông dụng cho lắm vì chỉ cần 3 hàm ở trên là đã rất linh hoạt rồi.

Các hàm thao tác với custom field

Ngoài việc hiển thị ra, bạn cũng có thể sử dụng một số hàm riêng biệt để hỗ trợ thêm, sửa hoặc xoá custom field trong database mà không cần thao tác thông qua việc sửa bài viết. Thông thường các hàm này sẽ có ích khi bạn dùng nó trong các action hook của WordPress.

update_post_meta()

Đây là hàm nên sử dụng nếu bạn cần cập nhật một giá trị mới vào meta key nào đó, và nếu meta key cần cập nhật chưa tồn tại cho post thì nó sẽ tự tạo thêm.

Cách sử dụng: update_post_meta( $post_id, $meta_key, $meta_value, $prev_value )

Trong đó,

• $post_id : ID của bài viết cần cập nhật key.
• $meta_key : Tên key cần cập nhật dữ liệu.
• $meta_value : Dữ liệu cần cập nhật vào.
• $prev_value : Dữ liệu cũ cần thay đổi thành dữ liệu mới. Không bắt buộc phải nhập vì mặc định nếu bạn khai báo $meta_value thì nó sẽ đổi tất cả các giá trị cũ thành mới. Sẽ có ích nếu một meta key có nhiều giá trị khác nhau.

Ví dụ:

// Đổi giá trị ‘tp_country’ của post_id là 15 sang giá trị ‘Viet Nam’

update_post_meta( 15, ‘tp_country’, ‘Viet Nam’ );

Ở hàm này, bạn có thể xem ví dụ ứng dụng làm tính năng lượt xem bài viết rất hay.

delete_post_meta()

Hàm này sẽ xoá toàn bộ dữ liệu trong một meta key nào đó hoặc xoá giá trị meta key. Cách sử dụng tương tự như update_post_meta().

Cách dùng: delete_post_meta( $post_id, $meta_key, $meta_value )

Trong đó,

• $post_id : ID của bài viết cần xoá field.
• $meta_key: Tên meta key cần xoá.
• $meta_value: Tên giá trị cần xoá. Không bắt buộc, vì mặc định nó sẽ xoá toàn bộ giá trị. Nhưng nếu bạn có nhiều giá trị trong một field thì dùng cái này nếu cần giữ lại giá trị theo ý muốn.

Ví dụ sử dụng:

// Xoá toàn bộ giá trị trong key ‘tp_country’ của post_id là 15

delete_post_meta( 15, ‘tp_country’, ‘Viet Nam’ );

Lời kết

Như vậy là trong bài viết này bạn đã làm quen được với tính năng Custom Field trong WordPress, và đây là một tính năng vô cùng thú vị.

Trên thực tế khi làm việc với custom field, ít ai làm thủ công như thế này mà họ sẽ kết hợp với meta box để tạo thêm 1 số khung nhập liệu đẹp mắt dưới khung viết bài. Nếu bạn muốn tạo, có thể xem qua hướng dẫn ACF để làm nhé.

Widget trong WordPress ai cũng hiểu nó là một block nội dung được đặt trong một khu vực được chỉ định, khu vực này ta thường gọi là Widget Area hoặc Sidebar. Ngoài các widget có sẵn như Recent Posts, Recent Comments,…thì nếu muốn có thêm widget bạn phải cài plugin hoặc một số theme cũng cho bạn thêm vài widget tùy chọn.

Vậy làm thế nào để hiểu quy trình tạo một widget ra sao? Ở bài này mình sẽ phân tích kỹ lưỡng cách tạo một widget là như thế nào, nhưng dĩ nhiên là bạn cần có sẵn kiến thức PHP ví dụ như bạn nên hiểu Class và đối tượng trong PHP là thế nào.

Khái niệm về cách tạo widget

Xem trước: Widgets API – WordPress Codex

Trong WordPress đã có sẵn một class tên là WP_Widget, trong class này có những method (phương thức), nghĩa là bạn phải viết các phương thức này theo chuẩn của nó, không được thiếu mà cũng không có thừa và phải viết đúng tên phương thức.

Trong class WP_Widget có tổng cộng 3 phương thức bắt buộc, bao gồm:

__construct: Phương thức khởi tạo này sẽ có nhiệm vụ khai báo tên widget, mô tả widget.

form: Phương thức này sẽ hỗ trợ bạn tạo các form nhập liệu bên trong một widget, xem hình dưới.

update: Phương thức này sẽ hỗ trợ bạn lưu dữ liệu mà người dùng đã nhập vào các form mà bạn đã tạo bằng phương thức form.

widget: Phương thức này sẽ giúp bạn gọi dữ liệu và hiển thị ra ngoài website khi bạn gắn cái widget này lên.

Ngoài ra, trong class này bạn cũng phải khai báo một phương thức nào đó do bạn tùy chọn để thiết lập tên và mô tả của widget. Một số thì dùng phương thức __construct() và một số thì tự tạo một phương thức khác. Ở đây mình chọn cách tự tạo phương thức vì nó dễ nhìn và dẽ hiểu hơn.

Chuẩn bị

Bạn có thể thực hành bài này bằng cách viết code vào file functions.php trong theme, nhưng tốt hơn hết là bạn tạo một plugin đi. Tạo một file với tên nào đó ở thư mục wp-content/plugins và viết đoạn này ở đầu file

<?php

/*

Plugin Name: Test Widget

Plugin URI: https://thachpham.com

Description: Thực hành tạo widget item.

Author: Thach Pham

Version: 1.0

Author URI: http://google.com

*/

Khỏi cần nói cũng biết, các code thực hành trong bài này bạn viết vào bên dưới dòng trên nhé.

6 bước tạo widget item

Bước 1. Khởi tạo widget

Đầu tiên, để khởi tạo một widget thì ta có 4 đoạn sau để khởi tạo.

/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

Trong đó, Thachpham_Widget là class mà chút nữa chúng ta sẽ tạo.

Bước 2. Tạo class và cấu trúc các phương thức

Như mình đã nói, bây giờ chúng ta sẽ tạo một class mang tên Thachpham_Widget kế thừa cái class WP_Widget mặc định, trong đó sẽ có 3 phương thức bắt buộc là form, update, widget và kèm theo một phương thức để đặt tên cho widget. Ta có như sau.

/**

 * Tạo class Thachpham_Widget

 */

class Thachpham_Widget extends WP_Widget {
	/**

	 * Thiết lập widget: đặt tên, base ID

	 */

	function __construct() {
	}
	/**

	 * Tạo form option cho widget

	 */

	function form( $instance ) {
	}
	/**

	 * save widget form

	 */
	function update( $new_instance, $old_instance ) {
	}
	/**

	 * Show widget

	 */
	function widget( $args, $instance ) {
	}
}

Mình đã có comment rõ ràng trong đó rồi nhé.

Bây giờ bạn thử lưu lại xem và có thấy phần Appearance -> Widget của mình xuất hiện thêm một cục không ghi tên như hình dưới không, nếu có thì bạn đã làm đúng.

Bước 3: Đặt tên cho widget (__construct)

Ở bước này, chúng ta sẽ làm việc trong phương thức __construct() nhé. Bây giờ ta sẽ tạo cho nó một cái mảng bao gồm các giá trị như sau:

function __construct() {

    parent::__construct (

      ‘thachpham_widget’, // id của widget

      ‘ThachPham Widget’, // tên của widget
      array(

          ‘description’ => ‘Mô tả của widget’ // mô tả

      )

    );

}

Trong đó, các thông tin mình đã có ghi chú thích vào trong đó rồi nhé.

Bây giờ chúng ta gắn cái biến này vào đoạn sau.

Bây giờ lưu lại và vào Appearance -> Widget tìm cái tên widget mà bạn vừa tạo ra nào.

Bước 4: Tạo form cho widget (form)

Bất kỳ widget nào cũng nên có một form nhập liệu để khách nhập những tùy chọn hay giá trị nào đó vào đây, bạn có thể sử dụng dropdown, checkbox,…nhưng ở đây mình sẽ dùng input loại text cho đơn giản.

Trong bước này ta sẽ làm việc trong phương thức form() nhé. Phương thức này ta có một biến là $instance.

Đầu tiên ra khai báo một mảng như sau:

//Biến tạo các giá trị mặc định trong form

$default = array(

	‘title’ => ‘Tên của bạn’

);

Mảng này có vai trò thiết lập các giá trị mặc định cho từng form. Ví dụ bạn có một form tên title thì giá trị mặc định của nó nếu người dùng chưa nhập vào là Tên của bạn, nếu bạn có nhiều form thì làm thêm nhiều giá trị trong mảng này.

Kế tiếp là viết thêm đoạn này

//Gộp các giá trị trong mảng $default vào biến $instance để nó trở thành các giá trị mặc định

$instance = wp_parse_args( (array) $instance, $default);

Đoạn này bạn hiểu đơn giản là nó sẽ lôi toàn bộ giá trị mảng của biến $default sang biến $instance.

Tiếp tục viết thêm một đoạn này

//Tạo biến riêng cho giá trị mặc định trong mảng $default

$title = esc_attr( $instance[‘title’] );

Đơn giản là ta đưa $instance['title'] vào một biến cho dễ nhớ, dễ viết. Trong đó, $title là biến sẽ chứa giá trị của tiêu đề lấy từ khóa title trong mảng $instance.

Và cuối cùng là đoạn quan trọng nhất, chúng ta sẽ tạo ra một cái trường nhập liệu và nó sẽ hiển thị giá trị là biến $title. Điều này có nghĩa là nếu như sau này chúng ta truyền giá trị mới cho $title thì nó cũng sẽ hiển thị ra.

//Hiển thị form trong option của widget

echo "Nhập tiêu đề <input class="widefat" type="text" name="’".$this->get_field_name(‘title’)."’ value=’".$title."’ />";

Bây giờ bạn lưu lại và mở widget ra sẽ thấy có một form và thuộc tính mặc định như sau:

Bạn có thể thử bằng cách nhập một cái gì đó vào form rồi ấn Save lại thì thấy nó không được lưu lại mà toàn trả về giá trị mặc định. Đó là do chúng ta chưa viết code cho phương thức update.

Toàn bộ code trong bước này:

	/**

	 * Tạo form option cho widget

	 */

	function form( $instance ) {

		parent::form( $instance );
		//Biến tạo các giá trị mặc định trong form

		$default = array(

			‘title’ => ‘Tiêu đề widget’

		);
		//Gộp các giá trị trong mảng $default vào biến $instance để nó trở thành các giá trị mặc định

		$instance = wp_parse_args( (array) $instance, $default);
		//Tạo biến riêng cho giá trị mặc định trong mảng $default

		$title = esc_attr( $instance[‘title’] );
		//Hiển thị form trong option của widget

		echo "Nhập tiêu đề <input class="widefat" type="text" name="’".$this->get_field_name(‘title’)."’ value=’".$title."’ />";
	}

Bước 5. Lưu giá trị khi nhập form (update)

Bước này ta sẽ làm việc với phương thức update(). Trong phương thức này ta có hai tham số chính là $new_instance được dùng để lưu những giá trị sau khi ấn nút Save và $old_instance là giá trị cũ trong cơ sở dữ liệu. Sau khi dữ liệu nhập vào được lưu thì ta sẽ return nó ra.

Ta có

$instance = $old_instance;

$instance[‘title’] = strip_tags($new_instance[‘title’]);

return $instance;

Nghĩa là ở trên mình sẽ lưu lại các giá trị trong form nhập tiêu đề. Hàm strip_tags() được sử dụng để cho cái form không thực thi PHP và HTML.

Toàn bộ code sẽ là

	/**

	 * save widget form

	 */
	function update( $new_instance, $old_instance ) {

		parent::update( $new_instance, $old_instance );
		$instance = $old_instance;

		$instance[‘title’] = strip_tags($new_instance[‘title’]);

		return $instance;

	}

Bây giờ bạn thử viết gì vào form rồi lưu lại, các giá trị sẽ lưu lại.

Bước 6. Xuất dữ liệu hiển thị ra ngoài

Ta đã tạo form, rồi lưu dữ liệu trong form vào. Vậy làm thế nào để có thể xuất nó hiển thị ra ngoài đây? Trong bước này ta sẽ làm việc với phương thức widget để hiển thị nó ra ngoài.

Trong phương thức này ta có 2 tham số là $args để khai báo các giá trị thuộc tính của một widget (title, các thẻ HTML,..) và $instance là giá trị mà khách đã nhập vào form trong widget.

Nếu bạn muốn sử dụng lại các thuộc tính bên trong widget thì tốt hơn hết bạn nên extract cái array trong widget ra thành từng biến riêng. Ta có:

extract( $args );

Sau đó, để hiển thị giá trị của một form thì ta chỉ cần echo $instance['form_name']. Như ví dụ này thì ta có $instance['title'].

Nhưng do cái form này là ta nhập tiêu đề của widget nên bạn nên thêm filter hook cho nó để đúng chuẩn trong WordPress.

echo apply_filters( ‘widget_title’, $instance[‘title’] );

Nhưng mà đợi đã, ta không thể viết chay như vậy, tại sao? Bởi vì trong Widget nó có những cái hook như hook vị trí trước widget (before widget), sau widget (after widget) và quan trọng là nếu bạn hiển thị cái tiêu đề widget như thế kia thì không được do ta thiếu hook $before_widget và $after_widget, hai biến này là hook in ra thẻ heading để tiêu đề widget hiển thị đúng “phong cách”.

Như vậy, ta tạm đưa đoạn apply_filters() vào trong một biến:

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

Sau đó ta viết như sau:

		echo $before_widget;
		//In tiêu đề widget

		echo $before_title.$title.$after_title;
		// Nội dung trong widget
		echo "ABC XYZ";
		// Kết thúc nội dung trong widget
		echo $after_widget;

Như vậy, khi in widget ra bạn bắt buộc phải echo thêm biến $before_widget và $after_widget để bọc nội dung lại, không có nó không có hiển thị đâu nhé.

Và kết quả là:

Toàn bộ code trong bước này là:

	function widget( $args, $instance ) {
		extract( $args );

		$title = apply_filters( ‘widget_title’, $instance[‘title’] );
		echo $before_widget;
		//In tiêu đề widget

		echo $before_title.$title.$after_title;
		// Nội dung trong widget
		echo "ABC XYZ";
		// Kết thúc nội dung trong widget
		echo $after_widget;

	}

Quá dễ phải không nào.

Tải source code

Thực hành – Tạo widget hiển thị bài ngẫu nhiên

Bạn đã biết cách tạo một widget là như thế nào rồi, vậy thì tại sao lại không thực hành nó ngay? Ở đây mình sẽ thực hành cách tạo một widget hiển thị bài viết ngẫu nhiên với tùy chọn cho phép khách nhập số lượng bài cần hiển thị bằng việc ứng dụng khái niệm Loop và Query.

</pre>

<pre>class Random_Post extends WP_Widget {
    function __construct() {

        parent::__construct(

            ‘random_post’,

            ‘Bài ngẫu nhiên’,

            array( ‘description’  =>  ‘Widget hiển thị bài viết ngẫu nhiên’ )

        );

    }
    function form( $instance ) {
        $default = array(

            ‘title’ => ‘Tiêu đề widget’,

            ‘post_number’ => 10

        );

        $instance = wp_parse_args( (array) $instance, $default );

        $title = esc_attr($instance[‘title’]);

        $post_number = esc_attr($instance[‘post_number’]);
        echo ‘<p>Nhập tiêu đề <input type="text" class="widefat" name="’.$this->get_field_name(‘title’).’" value="’.$title.’"/></p>’;

        echo ‘<p>Số lượng bài viết hiển thị <input type="number" class="widefat" name="’.$this->get_field_name(‘post_number’).’" value="’.$post_number.’" placeholder="’.$post_number.’" max="30" /></p>’;
    }
    function update( $new_instance, $old_instance ) {

        $instance = $old_instance;

        $instance[‘title’] = strip_tags($new_instance[‘title’]);

        $instance[‘post_number’] = strip_tags($new_instance[‘post_number’]);

        return $instance;

    }
    function widget( $args, $instance ) {

        extract($args);

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

        $post_number = $instance[‘post_number’];
        echo $before_widget;

        echo $before_title.$title.$after_title;

        $random_query = new WP_Query(‘posts_per_page=’.$post_number.’&orderby=rand’);
        if ($random_query->have_posts()):

            echo "<ol>";

            while( $random_query->have_posts() ) :

                $random_query->the_post(); ?>
                <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
            <?php endwhile;

            echo "</ol>";

        endif;

        echo $after_widget;
    }
}
add_action( ‘widgets_init’, ‘create_randompost_widget’ );

function create_randompost_widget() {

    register_widget(‘Random_Post’);

}</pre>

<pre>

Lời kết

Như vậy là bạn đã biết qua cách tạo một widget là như thế nào rồi đúng không nào? Thoạt nhìn code có thể bạn nghĩ nó khó nhưng thật ra nó chẳng có gì khó cả và mình tin là bạn có thể tự làm được sau khi đọc kỹ bài của mình.

Nếu có gì thắc mắc, hãy comment phía dưới nhé.

Tham khảo: Cách tạo widget nhanh với scbFramework – WordPressKite