Sử dụng namespace & Autoload trong Plugin Phần 2 đây cũng là cách viết add_meta_box trong class (ok)
https://code.tutsplus.com/vi/tutorials/using-namespaces-and-autoloading-in-wordpress-plugins-part-2--cms-27203
Ví dụ 1:
C:\xampp\htdocs\test\wp-content\plugins\lionel\lionel.php
C:\xampp\htdocs\test\wp-content\plugins\lionel\admin\util\class-css-loader.php
C:\xampp\htdocs\test\wp-content\plugins\lionel\admin\class-meta-box.php
C:\xampp\htdocs\test\wp-content\plugins\lionel\admin\class-meta-box-display.php
C:\xampp\htdocs\test\wp-content\plugins\lionel\admin\data\questions.txt
C:\xampp\htdocs\test\wp-content\plugins\lionel\admin\util\class-question-reader.php
C:\xampp\htdocs\test\wp-content\plugins\lionel\admin\assets\admin.css
Ví dụ 2:
C:\xampp\htdocs\test\wp-content\plugins
Trong bài hướng dẫn trước, chúng ta đã bắt đầu thảo luận về không gian tên và autoload với PHP trong ngữ cảnh phát triển WordPress. Và mặc dù chúng ta chưa thật sự nói về hai chủ đề đó, nhưng chúng ta đã xác định và bắt đầu đặt nền móng cho cách chúng ta giới thiệu chúng trong một hướng dẫn sắp tới.
Tuy nhiên, trước khi chúng ta làm điều đó, có một số tính năng mà chúng ta cần phải hoàn thiện để cung cấp thêm chi tiết cho plugin của chúng ta. Mục đích là để hoàn tất plugin và các tính năng của nó để chúng ta có một plugin hướng đối tượng cơ bản có hướng dẫn tốt và hoạt động tốt với một lưu ý; nó không sử dụng không gian tên hoặc autoload.
Điều này, lần lượt sẽ cho chúng ta cơ hội để xem một plugin trông như thế nào trước và sau khi đưa ra những chủ đề này.
Trước khi tiếp tục, tôi khuyên bạn nên đọc bài hướng dẫn trước đó. Bằng cách này, bạn sẽ biết được không gian tên và autoload là gì, bạn sẽ có phiên bản hoạt động của plugin cho đến thời điểm này (vì chúng ta sẽ xây dựng dựa trên nó) và sau đó bạn sẽ sẵn sàng tiếp tục.
Một khi bạn đã đọc nó, hãy quay trở lại hướng dẫn này và tiếp tục công việc của bạn.
Trước khi Chúng ta Bắt đầu
Cũng như với tất cả các hướng dẫn của tôi, tôi giả định rằng bạn đã có một môi trường phát triển trên máy tính của bạn. Bao gồm:
Môi trường phát triển cục bộ bao gồm PHP 5.6.20, máy chủ web Apache và máy chủ cơ sở dữ liệu MySQL.
Một thư mục chứa WordPress 4.6.
Một trình soạn thảo hay IDE mà bạn quen dùng để viết một plugin.
Kiến thức về WordPress Plugin API.
Nếu bạn đang ở trong loạt bài này (hoặc đã đọc bất kỳ bài viết nào trước đây của tôi), thì tôi cho rằng bạn đã có sẵn một cái gì đó giống như ở trên.
Và khi đó, chúng ta đã sẵn sàng để bắt đầu.
Những gì Chúng ta Đang Xây dựng
Nhắc lại từ bài hướng dẫn trước:
Chúng ta đang xây dựng một plugin giúp dễ dàng nạp các stylesheet và JavaScript trong plugin của chúng ta và hiển thị meta-box nhắc người dùng bằng một câu hỏi để giúp họ tìm ra ý tưởng để viết blog.
Vâng, nó thật sự đơn giản và không phải là điều mà bất kỳ ai cũng sẽ sử dụng ngoài nghiên cứu các khái niệm mà chúng ta đang khái quát trong blog này. Nhưng phương tiện mà chúng ta đang dùng để dạy các khái niệm mà chúng ta đang sử dụng là điều quan trọng.
Plugin này cho chúng ta khả năng thực hiện chính xác điều đó.
Mỗi lần bạn làm mới trang, một câu hỏi mới được nạp. Như lúc này, nó không tệ, nhưng có một số cải tiến mà chúng ta có thể làm liên quan đến phong cách của nội dung trong meta-box.
Đó là, chúng ta có thể đưa ra các stylesheet sẽ giúp chúng ta tạo ra một cách trình bày hấp dẫn và trực quan hơn một chút. Ngoài ra, nó sẽ cho chúng ta một cơ hội để khám phá thêm một vài kỹ thuật hướng đối tượng mà chúng ta có thể sử dụng khi làm việc với các asset chẳng hạn như stylesheet.
Vậy hãy bắt đầu nào.
Giới thiệu về Stylesheet
Đối với mục đích của hướng dẫn này, tôi sẽ không sử dụng bất kỳ loại preprocessor (tiền xử lý) nào. Tôi sẽ sử dụng CSS thuần tuý. Tuy nhiên, cách mà trong đó chúng ta enqueue các tài nguyên sẽ có một chút hướng đối tượng hơn so với những gì mà nhiều nhà phát triển WordPress thường thấy.
Tất cả những điều này sẽ đóng góp vào mục tiêu sử dụng không gian tên và autoload trong loạt bài này. Nhưng trước tiên, hãy bắt đầu bằng việc giới thiệu các stylesheet này, tạo các lớp giao diện, các lớp và giao tiếp cần thiết với WordPress API.
Thêm Tập tin CSS
Trong thư mục admin
, hãy tạo một thư mục con đặt tên là assets
. Bên trong thư mục assets
, tạo một thư mục con gọi là css
và sau đó thêm tập tin admin.css
.
Chúng ta vẫn chưa sẵn sàng cung cấp bất kỳ kiểu phong cách nào cả. Thay vào đó, chúng ta cần chuyển sự chú ý của chúng ta sang code ở phía máy chủ chịu trách nhiệm cho việc enqueue stylesheet này.Advertisement
Enqueue Stylesheet
Liên quan đến việc register (đăng ký) và enqueue cả stylesheet và JavaScript, hầu hết các nhà phát triển plugin cho WordPress đều quen với các hook cần thiết để làm điều đó. Cụ thể, tôi đang đề cập đến admin_enqueue_scripts
và wp_enqueue_style
.
Và mặc dù chúng ta sẽ sử dụng các hook này, nhưng chúng ta sẽ thiết lập nó theo một cách đơn giản, hướng đối tượng. Không, loạt bài này không nhằm mục đích để đi sâu vào các nguyên tắc hướng đối tượng, nhưng khi có dịp, tôi rất vui chỉ ra chúng cho bạn.
Giao diện Asset
Trong lập trình hướng đối tượng, một giao diện (interface) được định nghĩa như sau:
Một giao diện là một cấu trúc hoặc cú pháp lập trình cho phép máy tính bắt buộc cài đặt các thuộc tính nhất định trên một lớp.
Một cách khác để hình dung về nó là:
Nếu bạn có một lớp mà cài đặt một giao diện, thì lớp đó phải định nghĩa các chức năng mà giao diện đưa ra.
Vì vậy, nếu giao diện có hai ký hiệu phương thức với một khai báo mức độ truy cập và tên cụ thể, thì lớp cài đặt giao diện đó phải có hai phương thức với mức độ truy cập và tên tương tự cũng như một cài đặt thực tế.
Và đó là những gì chúng ta sẽ làm. Trước tiên, chúng ta cần định nghĩa giao diện của chúng ta. Vì vậy, trong thư mục util
, tạo interface-assets.php
và sau đó thêm code sau đây:
0102030405060708091011
<?php/** * Defines a common set of functions that any class responsible for loading * stylesheets, JavaScript, or other assets should implement. */interface
Assets_Interface {
public
function
init(); public
function
enqueue();
}
Lưu ý, giao diện không thật sự định nghĩa chức năng. Thay vào đó, nó xác định những gì các lớp cài đặt giao diện này sẽ định nghĩa.
Như bạn có thể đoán được, các lớp mà sẽ cài đặt giao diện này sẽ có hai phương thức ở trên cùng với một cài đặt thực tế cho mỗi phương thức. Và chúng ta sẽ thấy cách nó hoạt động trong giây lát nữa.
Tiếp theo, hãy đảm bảo bao gồm tập tin này trong tập tin chính của plugin:
1234
<?php
// Include the files for loading the assetsinclude_once(
'admin/util/interface-assets.php'
);
Tiếp theo, chúng ta cần phải tạo một tập tin cài đặt giao diện này. Vì chúng ta đang làm việc với các tập tin CSS, nên chúng ta sẽ tạo một CSS loader (trình nạp CSS).
CSS Loader
Đây là lớp chịu trách nhiệm cài đặt giao diện và thực hiện công việc đăng ký hàm với hook WordPress cần thiết (và thật sự đưa ra cài đặt cho hàm đã nói).
Nếu bạn xem xét code dưới đây, nó sẽ tương tự với một cái gì đó mà bạn đã nhìn thấy hoặc có lẽ đã làm việc trong một dự án trước đó:
0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647
<?php/** * Provides a consistent way to enqueue all administrative-related stylesheets. */
/** * Provides a consistent way to enqueue all administrative-related stylesheets. * * Implements the Assets_Interface by defining the init function and the * enqueue function. * * The first is responsible for hooking up the enqueue * callback to the proper WordPress hook. The second is responsible for * actually registering and enqueuing the file. * * @implements Assets_Interface * @since 0.2.0 */class
CSS_Loader
implements
Assets_Interface {
/** * Registers the 'enqueue' function with the proper WordPress hook for * registering stylesheets. */ public
function
init() {
add_action( 'admin_enqueue_scripts', array(
$this,
'enqueue'
) );
}
/** * Defines the functionality responsible for loading the file. */ public
function
enqueue() {
wp_enqueue_style( 'tutsplus-namespace-demo', plugins_url(
'assets/css/admin.css', dirname(
__FILE__
) ), array(), filemtime( plugin_dir_path( dirname(
__FILE__
) ) .
'assets/css/admin.css'
) );
}}
Code ở trên sẽ tương đối dễ hiểu với các chú thích, nhưng tôi sẽ khái quát những gì đang xảy ra:
init
vàenqueue
là cả hai hàm được yêu cầu khi lớp cài đặtAssets_Interface
.Khi
init
được gọi, nó đăng ký hàmenqueue
với hook chịu trách nhiệm đăng ký một stylesheet.Phương thức
enqueue
đăng ký tập tinadmin.css
và sử dụngfilemtime
như là một cách để biết liệu tập tin đã bị thay đổi hay chưa (cho phép chúng ta xóa bất kỳ phiên bản lưu trữ nào trong bộ nhớ cache khi phục vụ).
Trong cài đặt này, tập tin admin.css
thật sự được thêm vào mỗi trang. Thêm một điều kiện để kiểm tra xem hiện tại là trang nào và sau đó xác định xem có nên thêm hay không thêm stylesheet, đây sẽ là một bài tập sau bài hướng dẫn. Để có được một gợi ý, hãy kiểm tra get_current_screen()
.
Tiếp theo, chúng ta cần phải include tập tin này trong tập tin chính của plugin:
12345
<?php
// Include the files for loading the assetsinclude_once(
'admin/util/interface-assets.php'
);include_once(
'admin/util/class-css-loader.php'
);
Tiếp theo, chúng ta cần khởi tạo CSS Loader và gọi phương thức init
của nó trong hàm chính tutsplus_namespace_demo
:
1234
<?php
$css_loader
=
new
CSS_Loader();$css_loader->init();
Giả sử bạn đã làm đúng mọi thứ, bạn sẽ có thể làm mới trang Add New Post, xem nguồn (view source) và bạn sẽ thấy admin.css
được liệt kê như một stylesheet.
Chúng ta còn một việc nữa để làm trước khi chúng ta kết thúc phần này của hướng dẫn. Chúng ta cần thật sự viết một số CSS.
Trang trí Meta-Box
Vì hướng dẫn chủ yếu tập trung vào một số kỹ thuật hướng đối tượng và chúng ta vẫn có một số chủ đề mới để khám phá trong loạt bài này, chúng ta sẽ làm cho phần này tương đối dễ dàng.
Thay vì chỉ sử dụng một số phong cách mặc định được cung cấp bởi WordPress, hãy cải tiến meta-box một chút.
Trước tiên, hãy xác định vị trí của hàm render
trong lớp Meta_Box_Display
. Hãy sửa đổi nó để nó xuất ra nội dung của tập tin trong một phần tử paragraph (đoạn văn) với thuộc tính ID là "tutsplus-author-prompt".
Để làm điều này, chúng ta sẽ đưa ra một phương thức mới mà sẽ sử dụng một phương thức của WordPress API để làm sạch HTML.
01020304050607080910111213141516171819
<?php
/** * Sanitizes the incoming markup to the user so that * * @access private * @param string $html The markup to render in the meta box. * @return string Sanitized markup to display to the user. */private
function
sanitized_html(
$html
) {
$allowed_html
=
array( 'p'
=>
array( 'id'
=>
array(), ), );
return
wp_kses(
$html,
$allowed_html
);}
Sau đó, chúng ta sẽ gọi hàm này từ bên trong phương thức render
để hiển thị nội dung trong meta-box.
01020304050607080910111213141516
<?php
/** * Renders a single string in the context of the meta box to which this * Display belongs. */public
function
render() {
$file
= dirname(
__FILE__
) .
'/data/questions.txt'; $question
=
$this->question_reader->get_question_from_file(
$file
);
$html
=
"<p id='tutsplus-author-prompt'>$question</p>";
echo
$this->sanitized_html();
}
Bây giờ chúng ta có thể mở admin.css và thực hiện một số thay đổi nhỏ để cập nhật giao diện của meta-box trong màn hình Add New Post. Hãy thêm CSS sau đây:
1234567
#tutsplus-author-prompt {
font-style:
italic; text-align:
center; color:
#333;
}
Như đã đề cập ở phần đầu, nó không có gì đặc biệt cả, nhưng nó giúp cải thiện giao diện của câu hỏi một chút.
Tiếp theo Là gì?
Tại thời điểm này, chúng ta đã giới thiệu một số lớp, giao diện khác nhau, và các tính năng hướng đối tượng khác. Chúng ta có một plugin sử dụng dữ liệu từ một tập tin văn bản, giao tiếp với WordPress API và chuẩn hoá thông tin trước khi kết xuất nó lên trang chủ.
Chúng ta có một nền tảng tốt để bắt đầu thảo luận về không gian tên. Vì vậy, trong hướng dẫn tiếp theo, chúng ta sẽ thực hiện chính xác điều đó. Nếu bạn chưa bắt kịp phần còn lại của loạt bài, thì tôi khuyên bạn nên tiếp tục xây dựng dựa trên những gì chúng ta đã học.
Nếu trong thời gian chờ đợi, bạn tìm kiếm các tài liệu liên quan đến WordPress, thì bạn có thể tìm thấy tất cả các hướng dẫn trước đây của tôi trên trang tiểu sử của tôi và bạn có thể theo dõi tôi trên trang blog hoặc trên Twitter của tôi.
Cho đến lúc đó, đừng quên tải về phiên bản hoạt động của plugin (phiên bản 0.2.0) đi kèm với bài viết này. Liên kết có sẵn trong sidebar, bấm vào nút Download Attachment để tải về. Và, như thường lệ, đừng ngần ngại đặt bất kỳ câu hỏi và đưa ra ý kiến của bạn!
Last updated
Was this helpful?