Những sai lầm cần tránh khi phát triển theme Wordpress

Wordpress hiện nay là một CMS cực kỳ linh hoạt, đặc biệt là khi nói đến khả năng phát triển theme và plugin. Bằng chứng là chỉ cần hỏi một nhóm các developer Wordpress cách họ triển khai một tính năng cụ thể, bạn có thể nhận được rất nhiều cách khác nhau để hoàn thành cùng một kết quả. Ngoài ra cũng có rất nhiều diễn đàn, trang web có sẵn các ví dụ cho tính năng bạn cần.

Chính vì sự linh hoạt đó, trong thực tế thật dễ dàng để làm mọi thứ theo cách "sai". Các trường hợp "sai" ở đây có nghĩa là có một cái gì đó hoặc không hiệu quả hoặc làm ảnh hưởng đến sự tối ưu của tính năng. Mặc dù tính năng vẫn hoạt động bình thường nhưng thường có những cách tốt hơn để hoàn thành tính năng đó.

Chúng ta hãy xem 5 lỗi phổ biến thường được tìm thấy trong quá trình phát triển theme, cùng với các lựa chọn thay thế sẽ giúp bạn tránh được những mệt mỏi trong tương lai.

1. Sử dụng đường dẫn tuyệt đối trong templates

Nếu bạn đã từng xem code HTML của trang WordPress, bạn sẽ nhận thấy rằng cả hình ảnh và liên kết nội bộ đều sử dụng URL tuyệt đối (đầy đủ). Nhưng đây không phải là cách tốt nhất để hoàn thành công việc khi thêm code vào theme của bạn.

Ví dụ: giả sử bạn đang phát triển trang web đang sử dụng URL tạm thời. URL tuyệt đối được hardcode trong theme có nghĩa là bạn sẽ phải thực hiện thay đổi code theo cách thủ công khi bạn sẵn sàng khởi chạy trang web trên tên miền vĩnh viễn của nó.

WordPress có các cách tích hợp để xác định URL chính xác - hãy để ý menu Settings > General của trang tổng quan. Đối với một link, dùng esc_url( home_url() ) sẽ có được đường dẫn đầy đủ đến trang chủ. Vì vậy, thay vì đặt URL một cách cố định trong code của bạn, bạn có thể thêm một liên kết đơn giản trở lại trang chủ của bạn như sau:

<a href="<?php echo esc_url( home_url() ); ?>" />Home</a>

Hơn nữa, bạn cũng có thể sử dụng điều này để trỏ đến các trang phụ. Ví dụ: nếu chúng ta muốn liên kết đến trang "Giới thiệu", chúng ta có thể sử dụng mã sau:

<a href="<?php echo esc_url( home_url() ); ?>/about-us/" />About  Us</a>

Một đoạn mã tương tự cũng hoạt động cho hình ảnh. Ví dụ này lấy hình ảnh từ thư mục /images/ trong thư mục theme đang hoạt động của chúng ta:

<img src="<?php echo esc_url( get_stylesheet_directory_uri() ) ; ?>/images/hello.png"  />

2. Thêm Script và Styles trực tiếp vào một Template

Sử dụng Script hay Styles từ bên thứ 3 là điều thường gặp khi phát triển theme WordPress. Khi bạn mới bắt đầu làm themes, bạn có thể chỉ chèn các thẻ < script > hay < style > hoặc thậm chí nhúng Google Font trực tiếp vào thẻ head của theme, đây thường là cách mọi thứ được thực hiện với cách trang HTML tĩnh. Nhưng giống như mọi thứ khác trong WordPress, có một cách tốt hơn để thực hiện điều này. Thay vì như đã nói ở trên, hãy tận dụng wp_enqueue_script() và wp_enqueue_style() - thêm các scripts và stylesheets vào các vị trí chính xác mà bạn cần. Nó cũng làm cho việc quản lý các tài nguyên dễ dàng hơn nhiều, vì mọi thứ được gọi từ tệp functions.php trong theme của bạn.

3. Gọi các trường hợp bên ngoài của jQuery

Trong một lưu ý liên quan, một trong những bí mật ẩn của WordPress là nó đã bao gồm một bản sao của jQuery, cùng với một số tính năng giao diện người dùng phổ biến. Vì vậy, bạn không cần phải cài đặt jQuery hoặc gọi nó từ xa. Điều này làm cho nó dễ dàng tận dụng lợi thế của thư viện JavaScript phổ biến và thực hiện các yếu tố như tabs, datepickers, dialogs và nhiều hơn nữa.

Và, thật ra, không quá khó để thực hiện một yếu tố giao diện người dùng jQuery mong muốn. Ví dụ, để cho phép sử dụng jQuery UI Tabs, bạn chỉ cần thêm đoạn mã sau vào hàm functions.php:

function my_jquery_elements()  {
     wp_enqueue_script( 'jquery-ui-tabs', array('jquery'));
add_action(  'template_redirect', my_jquery_elements ', 10 );

Điều này cho phép WordPress tải trong phần tử từ thư viện đã tồn tại của nó. Từ đó, thiết kế các tab của bạn và xác định chúng như được chỉ định trong tài liệu UI jQuery.

4. Lấy tùy biến quá xa

Khả năng thêm các custom field và các custom post tùy chỉnh có thể làm cho công việc của cả nhà phát triển và người biên tập nội dung trang web dễ dàng hơn nhiều. Chúng cung cấp sự tiện lợi, tổ chức nội dung tốt hơn và UX trực quan hơn. Nhưng đôi khi chúng ta lại đưa chú đi quá xa.

Tôi cực kỳ thích thú với các custom field, post. Nhưng tôi thừa nhận rằng đã có những lúc tôi đã tùy chỉnh một theme đến điểm không linh hoạt. Các trường rất tuyệt vời cho các thiết lập nơi chúng ta biết chính xác nội dung nào cần phải nhập - ví dụ như các trường của hồ sơ nhân viên.

Không có quy tắc cứng và nhanh nào cho loại tùy chỉnh này. Điều duy nhất chúng ta thực sự có thể làm là sử dụng phán đoán tốt nhất về những gì nên được tùy chỉnh và những gì có thể tốt hơn còn lại cho trình soạn thảo nội dung WordPress hoặc thậm chí là một plugin thích hợp. Khi chúng ta thêm các custom field hoặc custom post, chỉ cần biết rằng mọi thứ có thể thay đổi trên đường và cố gắng xây dựng với ý nghĩ đó.

5. Không viết comment cho code

Comment code là quan trọng vì nó ít nhất cung cấp một số điểm tham chiếu trong code. Khi tìm hiểu thông qua các tệp PHP hoặc JS chứa nhiều hơn một tính năng, bạn sẽ muốn biết nơi tìm một mục cụ thể.

Ngay cả khi bạn là người duy nhất sẽ chỉnh sửa code đó, tôi khuyên bạn vẫn nên viết comment. Ví dụ: nếu bạn cần thay đổi thứ gì đó sau sáu tháng, có thể bạn sẽ không nhớ chính xác vị trí bạn đã đặt một đoạn mã.

Xây dựng theme WordPress của riêng bạn có thể là một trải nghiệm tuyệt vời. Nhưng phải mất một chút thực hành để tìm hiểu chi tiết hơn về việc tạo theme có được code tốt và dễ bảo trì. Bạn càng có nhiều kinh nghiệm, kỹ thuật của bạn càng phát triển. Các theme đầu tiên tôi phát triển không thể hiệu quả như những theme ở thời điểm hiện tại. Tôi đã khắc phục mọi sai lầm nêu trên và đó chưa phải tất cả. Nếu bạn cũng có trải nhiệm trong quá trình phát triển theme và plugin WordPress thì hãy để lại ý kiến dưới phần bình luận nhé.

Theo Speckyboy