Code theo chuẩn WordPress: Nền tảng của sự phát triển vững chắc
Sơ đồ trang
Trong việc phát triển WordPress, các tiêu chuẩn viết code (coding standards) đóng vai trò then chốt trong việc tạo ra một codebase đáng tin cậy và ổn định. Coding standards đại diện cho một tập hợp các quy tắc và quy ước mà các lập trình viên sử dụng khi viết code.
Tiêu chuẩn viết code WordPress giúp cải thiện công việc khi làm việc đội nhóm hoặc đơn giản hóa việc bảo trì code và đảm bảo tính ổn định nhất quán khi phát triển dự án.
Tiêu chuẩn viết code WordPress
Lợi ích của việc sử dụng tiêu chuẩn viết code:
Nâng cao chất lượng code: Tiêu chuẩn viết code giúp tránh những lỗi phổ biến và thiếu sót, làm cho code có chất lượng cao hơn và ổn định trước các lỗi.
Làm việc hiệu quả trong team: Đặc biệt quan trọng trong các dự án WordPress, nơi có thể có nhiều developer cùng làm việc trên một website. Tiêu chuẩn thúc đẩy sự tương tác hiệu quả trong team, giảm khả năng xảy ra xung đột và tăng tốc quá trình phát triển.
Tính nhất quán và kế thừa: Tuân thủ tiêu chuẩn viết code đảm bảo tính đồng nhất của code trong các dự án khác nhau. Điều này cho phép các developer dễ dàng chuyển đổi giữa các codebase khác nhau mà không cần phải dành thời gian học các style viết code riêng biệt của từng dự án.
Tính dễ hiểu và có thể bảo trì: Nhờ vào tiêu chuẩn, code trở nên dễ đọc và dễ hiểu hơn đối với các developer khác. Điều này đơn giản hóa quá trình thực hiện thay đổi và cải tiến trong tương lai, cả cho người viết code ban đầu và các chuyên gia khác.
Tiêu chuẩn viết code WordPress chính thức bao gồm năm lĩnh vực chính để đảm bảo phát triển nhất quán và hiệu quả:
Bài viết liên quan
- PHP: Tiêu chuẩn cho server-side code, đảm bảo tính đồng nhất và hoạt động không lỗi.
- HTML: Quy tắc tạo markup HTML có cấu trúc và semantic.
- JavaScript: Tiêu chuẩn cho việc triển khai hiệu quả các chức năng client-side bằng JavaScript.
- CSS: Xác định cách tiếp cận nhất quán cho việc styling các element của website.
- Accessibility (Khả năng tiếp cận): Tiêu chuẩn hướng tới việc tạo ra các website inclusive và thân thiện với tất cả người dùng, xem xét nhu cầu của người khuyết tật.
Tiêu chuẩn viết code PHP
Ngoài việc đảm bảo chức năng và giao diện của website, phát triển WordPress grамотный yêu cầu tuân thủ tiêu chuẩn viết code. Những tiêu chuẩn này, cụ thể cho PHP, đảm bảo code sạch, dễ đọc và nhất quán. Chúng là bắt buộc đối với WordPress core và được khuyến khích mạnh mẽ cho themes và plugins.
Các danh mục chính của tiêu chuẩn viết code PHP trong WordPress:
1. Tiêu chuẩn chung
Xác định vị trí của các thẻ mở và đóng PHP, khuyến nghị sử dụng dấu nháy đơn hoặc kép, và quy định việc viết các lệnh include và require.
// Thẻ mở và đóng PHP trong HTML:
// Đặt các thẻ mở/đóng trên dòng riêng của chúng.
# Đúng
function foo() {
?>
<div>
<?php
echo esc_html (
bar (
$param1,
$param2
)
);
?>
</div>
<?php
}
# Sai
if ( $x === $y ) { ?>
<div>
<!-- HTML content -->
<?php }
// Tránh thẻ PHP rút gọn
# Đúng
<?php ... ?>
<?php esc_html( $x ); ?>
# Sai
<? ... ?>
<? esc_html( $x ); ?>
// Viết include/require:
// Tránh include_once, vì nó tiếp tục thực hiện ngay cả khi file không tìm thấy.
// Không sử dụng dấu ngoặc đơn quanh đường dẫn file.
# Đúng
require_once ABSPATH . 'file-name.php';
# Sai
require_once __DIR__ . '/file-name.php';
include_once ( ABSPATH . 'file-name.php' );
2. Đặt tên (Naming)
Thiết lập quy tắc đặt tên functions, variables, constants và hooks với việc sử dụng các format nghiêm ngặt.
# Đúng
// Sử dụng chữ thường cho tên functions và variables.
function genius_function( $some_variable ) {}
// Sử dụng chữ hoa cho tên constants.
define('MAX_AGE', 60);
# Sai
// Sử dụng camelCase.
function geniusFunction( $someVariable ) {}
3. Indentation (Thụt lề)
Quy định việc sử dụng spaces, indentation và loại bỏ spaces thừa ở cuối dòng.
# Đúng
// Đặt spaces sau dấu phẩy.
$colors = ['red', 'green', 'blue'];
// Đặt spaces ở cả hai bên của dấu ngoặc mở và đóng trong control structures.
foreach ( $foo as $bar ) { ...
// Định nghĩa function:
function my_function() { ...
// So sánh logic:
if ( ! $foo ) { ...
// Truy cập element array:
$a = $foo['bar'];
$a = $foo[ $bar ];
# Sai
$colors = ['red','green','blue'];
foreach($foo as $bar){ ...
function my_function(){ ...
if(!$foo) { ...
$a = $foo[ 'bar' ];
$a = $foo[$bar];
4. Formatting (Định dạng)
Xác định style của dấu ngoặc nhọn, khai báo array, gọi function nhiều dòng, sử dụng toán tử “spread” và nhiều thứ khác.
# Đúng
// Sử dụng style sau cho dấu ngoặc.
if ( condition ) {
action();
} elseif ( condition2 ) {
action2();
} else {
default_action();
}
// Khai báo arrays sử dụng syntax dài.
$numbers_long = array(1, 2, 3, 4, 5);
// Trong gọi function nhiều dòng, mỗi parameter chỉ nên chiếm một dòng.
// Giá trị parameter nhiều dòng nên được gán cho variable, và variable được truyền vào function call.
$data = array(
'user_name' => 'John Doe',
'email' => 'john@example.com',
'address' => '123 Main Street, Cityville',
);
$greeting_message = sprintf(
/* translation function. %s maps to User's name */
__( 'Hello, %s!', 'yourtextdomain' ),
$data['user_name']
);
$result = some_function(
$data,
$greeting_message,
/* translation function %s maps to city name*/
sprintf( __( 'User resides in %s.' ), 'Cityville' )
);
// Magic constants phải được viết hoa.
// Constant ::class phải được viết thường không có spaces quanh scope resolution operator (::).
add_action( my_action, array( __CLASS__, my_method ) );
add_action( my_action, array( My_Class::class, my_method ) );
5. Visibility operators, namespaces và import
Quy định khai báo namespaces và sử dụng các lệnh use.
// Mỗi khai báo namespace phải chứa các từ viết hoa, phân cách bởi dấu gạch dưới.
namespace My_Genius_ProjectUtilities;
// Import use có thể sử dụng aliases để tránh xung đột tên.
use Project_NameFeatureClass_C as Aliased_Class_C;
6. Object-Oriented Programming (OOP)
Xác định quy tắc sử dụng object structures, áp dụng use trait directives, khai báo visibility bắt buộc cho class elements, thứ tự visibility modifiers và quy tắc tạo object instances.
// Các use trait operators phải ở đầu class.
// Trait use phải có ít nhất một dòng trước và sau use statements đầu tiên và cuối cùng.
// Luôn khai báo visibility.
class Foo {
use Bar_Trait;
public $baz = true;
...
}
// Luôn sử dụng dấu ngoặc đơn khi tạo instance object mới.
// Không thêm space giữa tên class và dấu ngoặc mở.
$foo = new Foo();
7. Control structures
Bao gồm việc sử dụng elseif thay vì else if, và khuyến nghị áp dụng Yoda conditions (đặt variable ở bên phải trong so sánh logic).
// So sánh "hợp pháp":
if ( true === $result ) {
// Làm gì đó với $result
}
// Nhưng lỗi chính tả như thế này có thể lọt qua:
if ( $result = true ) {
// Chúng ta sẽ luôn rơi vào đây
}
8. Operators
Bao gồm quy tắc sử dụng ternary operator, error control operator (@) và increment/decrement operators.
// Luôn sử dụng ternary operators để kiểm tra nếu statement là true, không phải false.
$programming_language = ( 'PHP' === $language ) ? 'cool' : 'meh';
// Ưu tiên pre-increment/decrement hơn post-increment/decrement cho standalone statements.
// Đúng
--$a;
// Không cần
$a--;
9. Database
Cung cấp hướng dẫn thực hiện database queries và formatting SQL expressions.
Inline Documentation cho PHP
Inline Documentation cho PHP trong WordPress dựa trên tiêu chuẩn PHPDoc và được sử dụng để document code. Nó bao gồm mô tả functions, classes, methods, parameters, return values và các khía cạnh khác của code.
/**
* Mô tả ngắn gọn của function.
*
* Mô tả chi tiết của function, bao gồm thông tin về parameters,
* return values và các khía cạnh khác.
*
* @param string $param1 Mô tả ngắn gọn của parameter 1.
* @param int $param2 Mô tả ngắn gọn của parameter 2.
* @return bool Mô tả return value.
*/
function my_function( $param1, $param2 ) {
// Nội dung function
}
Tiêu chuẩn viết code JavaScript
JavaScript trong WordPress được sử dụng để thêm tính tương tác cho websites, tạo user interfaces và cải thiện tương tác với người dùng. Viết code JavaScript trong WordPress tuân theo những tiêu chuẩn và practices nhất định để đảm bảo compatibility, security và performance của code.
Cơ bản về làm việc với JavaScript trong WordPress
function my_theme_enqueue_scripts() {
// Đăng ký script
wp_register_script(
'my-custom-script', // Unique identifier của script
get_template_directory_uri() . '/js/my-custom-script.js', // Đường dẫn tới file script
array('jquery'), // Dependencies từ các scripts khác (ví dụ: jQuery)
'1.0.0', // Version của script
true // Load script trong footer
);
// Enqueue script
wp_enqueue_script('my-custom-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
Để truyền dữ liệu từ PHP sang JavaScript có thể sử dụng wp_localize_script:
function my_theme_enqueue_scripts() {
wp_register_script(
'my-custom-script',
get_template_directory_uri() . '/js/my-custom-script.js',
array('jquery'),
'1.0.0',
true
);
wp_enqueue_script('my-custom-script');
// Truyền dữ liệu sang JavaScript
wp_localize_script(
'my-custom-script',
'myScriptVars',
array(
'ajaxUrl' => admin_url('admin-ajax.php'), // URL cho AJAX requests
'someData' => 'Ví dụ dữ liệu từ PHP' // Ví dụ dữ liệu để sử dụng trong JavaScript
)
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
Các tiêu chuẩn JavaScript chính trong WordPress:
1. Indentation và formatting
// Khai báo object
// Đúng
var obj = {
name: 'John',
age: 27,
height: 179
}
// Sai
var obj = {
name: 'John', age: 27,
height: 179
}
// Arrays và function calls
// Sử dụng spaces bổ sung quanh elements và arguments
array = [ 1, 2 ];
foo( arg1, arg2 );
2. Semicolons
// Luôn sử dụng semicolons
array = [ 1, 2 ];
3. Blocks và control structures
// Sử dụng tab cho indentation
( function ( $ ) {
// Expressions với indentation
function doSomething() {
// Expressions với indentation
}
} )( jQuery );
// Blocks if, else, for, while và try phải nằm trên nhiều dòng
if ( condition ) {
// Expressions
} else if ( ( condition && condition ) || condition ) {
// Expressions
} else {
// Expressions
}
4. Naming conventions
// Abbreviations nên viết bằng camelCase
// Tất cả chữ cái của acronyms phải viết hoa
const userId = 1;
const currentDOMDocument = window.document;
// Class definition phải sử dụng UpperCamelCaseConvention.
class Human {
...
}
// Constants
const SESSION_DURATION = 60
5. Equality và strings
// Sử dụng strict equality checks (=== và !==)
if ( name === "John" ) {
...
}
// Sử dụng single quotes (') cho string literals
var myString = 'Hello world!';
Tiêu chuẩn viết code HTML và CSS
Các developer WordPress được khuyến khích sử dụng semantic markup, tức là áp dụng các HTML elements theo đúng mục đích của chúng. Practice này cải thiện cấu trúc content và tích cực ảnh hưởng đến search engine optimization (SEO) của website.
Tiêu chuẩn HTML trong WordPress:
1. Validation
Tất cả HTML pages phải được kiểm tra bằng W3C validator để đảm bảo markup chính xác.
2. Self-closing elements
<!-- Đúng -->
<br />
<!-- Sai -->
<br/>
3. Attributes và tags
<!-- Đúng -->
<a href="http://example.com/" title="Mô tả link">Text mô tả</a>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Sai -->
<a HREF="http://example.com/" TITLE="Mô tả link">Click here</a>
4. Quotes
<!-- Đúng -->
<input type="text" name="email" disabled="disabled" />
<input type='text' name='email' disabled='disabled' />
<!-- Sai -->
<input type=text name=email disabled>
Tiêu chuẩn CSS trong WordPress:
1. Structure
/* Đúng
Mỗi selector phải nằm trên dòng riêng, kết thúc bằng
dấu phẩy hoặc dấu ngoặc nhọn. Dấu ngoặc nhọn đóng phải
có cùng level indentation với opening selector. */
#selector-1,
#selector-2 {
property: value;
}
2. Selectors
/* Đúng
Sử dụng chữ thường và phân cách từ bằng dấu gạch ngang.
Sử dụng double quotes quanh values cho attribute selectors.
Tránh over-qualified selectors như div.container. */
#contact-form {
property: value;
}
input[type="text"] {
property: value;
}
3. Properties và values
/* Đúng
Thêm properties với colon và space.
Properties phải ở lowercase và sử dụng shorthand notation. */
#contact-form {
font-family: "Helvetica Neue", sans-serif;
opacity: 0.9;
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(20, 120, 170, 0.9);
}
Đảm bảo Accessibility khi phát triển WordPress
Tiêu chuẩn accessibility đóng vai trò then chốt trong việc đảm bảo rằng digital content, bao gồm các websites được tạo trên WordPress, thân thiện với người khuyết tật.
Web Content Accessibility Guidelines (WCAG)
Hướng dẫn accessibility của W3C, đặc biệt là Web Content Accessibility Guidelines (WCAG), cung cấp framework toàn diện để cải thiện accessibility của web content.
Các nguyên tắc chính:
1. Sử dụng Semantic HTML
Sử dụng các semantic tags HTML đúng cách. Ví dụ, sử dụng <nav> cho navigation menus, <header> cho site headers và <main> cho main content.
2. Text alternatives cho multimedia
Cung cấp descriptive alt-text cho images, subtitles và transcripts cho videos, và text alternatives cho audio content.
3. Responsive design
Đảm bảo theme hoặc plugin responsive và thích ứng tốt với các kích thước màn hình khác nhau.
4. Accessible forms
Cung cấp labels và instructions rõ ràng cho form fields. Sử dụng các input types phù hợp như email hoặc telephone.
5. Keyboard navigation
Đảm bảo tất cả interactive elements có thể truy cập bằng keyboard. Users phải có thể navigate giữa links, buttons và form fields bằng Tab và Enter keys.
Tools để tuân thủ tiêu chuẩn code WordPress
PHP_CodeSniffer
PHP_CodeSniffer scan PHP code để phát hiện những sai lệch khỏi các chuẩn mực đã thiết lập. Nó thúc đẩy việc viết code sạch và hiệu quả, chỉ ra các vi phạm style và errors.
W3C CSS Validation Service
Dịch vụ validation CSS của W3C scan CSS styles, phát hiện và sửa những potential errors có thể cản trở hoạt động tối ưu của website.
JSHint
JSHint phân tích JavaScript code, phát hiện potential errors, style inconsistencies và tuân thủ best practices.
WebAIM Contrast Checker
WebAIM Contrast Checker giúp đánh giá và cải thiện accessibility của WordPress websites thông qua việc tối ưu color contrast.
Kết luận
Tiêu chuẩn viết code là nền tảng của việc phát triển software hiệu quả và có tính hợp tác. Chúng đảm bảo tính nhất quán và khả năng đọc của code, đơn giản hóa quá trình phát triển, tăng tính maintainable và thúc đẩy teamwork. Đối với các WordPress developers, tuân thủ tiêu chuẩn viết code là vô cùng quan trọng để tạo ra các websites đáng tin cậy và có thể mở rộng.
