Thực hành phát triển theme WordPress: Hướng dẫn xây dựng theme thương mại responsive từ con số không

Môi trường phát triển và khởi tạo chủ đề WordPress

Trước khi bắt tay vào thực hiện, việc thiết lập một môi trường phát triển địa phương hiệu quả là điều vô cùng quan trọng. Chúng tôi khuyến nghị sử dụng các công cụ như Local by Flywheel, MAMP hoặc Laragon – những công cụ này giúp bạn dễ dàng thiết lập một máy chủ địa phương chứa PHP, MySQL và WordPress một cách nhanh chóng. Sau đó, bạn nên thực hiện các bước cần thiết trong thư mục cài đặt của WordPress… wp-content/themes/ Bên trong thư mục đó, hãy tạo một thư mục riêng biệt dành cho chủ đề bạn sắp tạo, ví dụ như: my-commercial-themeTên của thư mục này sẽ được sử dụng làm biểu tượng cho chủ đề của bạn.

Trước hết, chúng ta cần tạo các tệp cơ bản cho chủ đề (theme files). Tệp đầu tiên là… style.cssNó không chỉ là một bảng định dạng (stylesheet), mà còn là “chứng minh thư” của chủ đề (theme). Các thông tin được ghi chú ở phần đầu tệp tin, như tên chủ đề, mô tả, tác giả, phiên bản, v.v., là những yếu tố duy nhất mà WordPress sử dụng để nhận diện một chủ đề. Một chủ đề có cấu hình tối thiểu… style.css Ví dụ về tệp tin như sau:

/*
Theme Name: My Commercial Theme
Theme URI: https://yourwebsite.com/themes/my-commercial-theme/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一款功能完善、设计现代的响应式商业WordPress主题。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-commercial-theme
Domain Path: /languages
*/

Tệp cơ sở thiết yếu thứ hai là… index.phpĐây là mẫu dự phòng cuối cùng cho tất cả các tệp chủ đề (theme files). Ngay cả khi đó là một tệp trống, chủ đề vẫn có thể được kích hoạt, nhưng để hiển thị nội dung, chúng ta thường sẽ thêm các cấu trúc lặp (loops) cơ bản của WordPress vào tệp đó. Ngoài ra, việc phát triển chủ đề hiện đại khuyến nghị mạnh mẽ việc tạo ra các tệp chủ đề có cấu trúc rõ ràng và được thiết kế một cách functions.php Tệp tin này được sử dụng để thêm các tính năng như chủ đề (theme), menu đăng ký (registration menu), thanh bên (sidebar), v.v. Cuối cùng, còn có một tệp nữa… screenshot.png Các tệp hình ảnh sẽ giúp chủ đề của bạn có một hình ảnh minh họa trực quan trên giao diện quản lý nền.

Đọc thêm Từ cơ bản đến nâng cao: Hướng dẫn toàn diện và bài học thực hành về phát triển theme WordPress。

Xây dựng giao diện có khả năng thích ứng với các thiết bị khác nhau (responsive layout) và các mẫu thiết kế cơ bản (core templates).

Thiết kế thích ứng (responsive design) là tiêu chuẩn cơ bản đối với các trang web hiện đại. Chúng ta sẽ bắt đầu với… style.css hãy tải bản dịch thông qua hàm @media Bạn cần sử dụng các truy vấn (queries) để định nghĩa giao diện (styles) phù hợp với các kích thước màn hình khác nhau. Cách hiệu quả hơn là áp dụng chiến lược “di động trước” (mobile-first): hãy viết mã thiết kế dành cho thiết bị di động trước, sau đó từ từ bổ sung thêm các tính năng hoặc giao diện tùy chỉnh cho máy tính bả

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

Tiếp theo là việc xây dựng các mẫu trang (templates) cốt lõi. WordPress sử dụng hệ thống phân cấp các mẫu để quyết định file nào sẽ được sử dụng để hiển thị nội dung trang. Các file mẫu cơ bản nhất bao gồm… header.php, footer.php, và sidebar.phpBằng cách sử dụng get_header(), get_footer(), get_sidebar() Chúng ta có thể kết hợp các phần đã được mô-đun hóa này lại với nhau sử dụng các hàm như…

Ví dụ, hãy cùng chúng ta hoàn thiện nó. index.php Cấu trúc của… (The structure of…)

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
                <header class="entry-header">
                    <h2 class="entry-title"><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                </header>
                <div class="entry-content">
                    <?php the_excerpt(); ?>
                </div>
            </article>
            <?php
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

Đối với các loại trang cụ thể hơn, chúng ta cần tạo các tệp mẫu tương ứng. Ví dụ, để tạo một trang… single.php Để hiển thị một bài viết blog riêng lẻ, hãy thực hiện các bước sau: page.php Hiển thị trang độc lập, tạo archive.php Điều này giúp hiển thị các trang phân loại, thẻ tag, và các trang lưu trữ khác. Bằng cách này, chúng ta có thể cung cấp những bố cục và thiết kế hoàn toàn khác nhau cho các loại trang khác nhau.

Tăng cường chức năng của chủ đề thông qua tệp lệnh (function file)

functions.php Đây là “bộ não” của chủ đề, chịu trách nhiệm về việc đăng ký và mở rộng tất cả các chức năng. Trước tiên, chúng ta cần phải… add_theme_support() Các hàm được sử dụng để khai báo những tính năng mà chủ đề hỗ trợ, chẳng hạn như ảnh thu nhỏ của bài viết, biểu tượng tùy chỉnh, các thẻ HTML5, v.v.

Đọc thêm Hướng dẫn xây dựng website hiện đại, responsive với Tailwind CSS: Từ cơ bản đến thực hành。

Đăng ký menu điều hướng và thanh bên

Một chủ đề thương mại thường yêu cầu nhiều vị trí cho các mục điều hướng, chẳng hạn như menu chính ở phía trên và menu ở phía dưới trang. Điều này có thể được thực hiện bằng cách… register_nav_menus() Các hàm được sử dụng để thực hiện điều đó.

function my_commercial_theme_setup() {
    // 注册导航菜单
    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'my-commercial-theme' ),
            'footer'  => esc_html__( 'Footer Menu', 'my-commercial-theme' ),
        )
    );
    // 启用文章缩略图支持
    add_theme_support( 'post-thumbnails' );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_commercial_theme_setup' );

Để đăng ký sử dụng thanh bên cạnh (hay còn gọi là “khu vực công cụ nhỏ”), vui lòng làm theo các bước hướng dẫn được cung cấp. register_sidebar() Bạn có thể định nghĩa nhiều khu vực khác nhau cho thanh bên trái chính, khu vực công cụ ở phần chân trang, v.v.

Nhập script và kiểu dáng một cách an toàn

Cách làm đúng đắn là thông qua… wp_enqueue_scripts Các “hook” được sử dụng để xếp hàng và tải các tệp CSS cũng như JavaScript, thay vì việc đặt các liên kết trực tiếp vào mã HTML. Điều này giúp đảm bảo rằng các tệp phụ thuộc được tải đúng thứ tự và phù hợp với các quy định về bảo mật cũng như quản lý của WordPress.

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

function my_commercial_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-commercial-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'my-commercial-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
    // 为评论回复功能添加条件性脚本加载
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_commercial_theme_scripts' );

Implementing custom features and options

Tạo loại bài viết và hệ thống phân loại tùy chỉnh

Đối với các trang web thương mại, việc chỉ sử dụng “bài viết” và “trang” có thể là chưa đủ. Ví dụ, bạn có thể cần các loại nội dung độc lập như “sản phẩm” hoặc “các trường hợp sử dụng thực tế” (case studies). Trong trường hợp đó, bạn có thể… functions.php sử dụng register_post_type() Hàm này được sử dụng để tạo các loại bài viết tùy chỉnh (Custom Post Types – CPT) và áp dụng chúng trong hệ thống quản trị nội dung. register_taxonomy() Hãy tạo một hệ thống phân loại riêng biệt cho nó.

Trình tùy chỉnh chủ đề tích hợp

WordPress Customizer cho phép người dùng xem trước và thay đổi cài đặt của chủ đề ngay lập tức, đây là công cụ tuyệt vời để tạo trải nghiệm tùy chỉnh thân thiện cho người dùng. Bằng cách thêm các “panel” (bảng điều khiển), “sections” (phần nội dung) và “settings/control” (tùy chọn/công cụ), bạn có thể giúp người dùng dễ dàng điều chỉnh màu sắc, phông chữ, văn bản ở phần tiêu đề và chân trang, v.v. $wp_customize->add_setting(), $wp_customize->add_control() Các hàm như vậy, và sau đó gắn chúng vào (mount them)… customize_register hook.

Xây dựng các chủ đề con (subtopics) và việc ghi đè (override) các mẫu (templates)

Xét đến yêu cầu về cập nhật và bảo trì trong tương lai, một chủ đề thương mại chuyên nghiệp cần được thiết kế sao cho có thể hỗ trợ việc mở rộng chức năng một cách dễ dàng, đồng thời tuân thủ các nguyên tắc thiết kế thân thiện với các chủ đề con (sub-templates). Điều này có nghĩa là các chức năng cốt lõi cần được truy cập thông qua các “hook” (cơ chế kết nối giữa các thành phần trong hệ do_action('mytheme_before_footer') Hãy tạo một điểm gắn (mount point) ngay trước phần chân trang (footer) để thuận tiện cho việc các chủ đề con (subtopics) hoặc plugin có thể chèn nội dung vào đó. Đồng thời, hãy đảm bảo rằng cấu trúc của tệp mẫu (template file) phải rõ ràng, giúp người dùng có thể dễ dàng sao chép (override) bất kỳ tệp mẫu nào một cách an toàn bằng cách tạo

Đọc thêm Hướng dẫn toàn diện phát triển website thương mại điện tử WooCommerce: Cẩm nang hoàn chỉnh từ con số 0 đến khi vận hành。

Tóm lại

Việc phát triển một chủ đề WordPress thương mại có khả năng thích ứng với mọi thiết bị (responsive) từ đầu là một công việc mang tính hệ thống, và nó không đơn thuần chỉ là việc viết mã HTML và CSS. Điều này đòi hỏi các nhà phát triển phải hiểu sâu sắc về cấu trúc cốt lõi của WordPress, bao gồm cấu trúc các template, hệ thống hook (những điểm kết nối giữa các thành phần của hệ thống), các tính năng hỗ trợ chủ đề, và API cho việc tùy chỉnh (customizers). Bằng cách tuân theo nguyên tắc thiết kế thích ứng “di động trước” (mobile-first), xây dựng các tệp template một cách module hóa, và áp dụng các kỹ thuật phù hợp, các nhà phát triển có thể tạo ra những chủ đề chất lượng cao, phù hợp với functions.php Bạn có thể đăng ký các tính năng và tài nguyên một cách ổn định và hiệu quả, đồng thời sử dụng các loại bài viết tùy chỉnh (custom article types) cùng các công cụ tùy chỉnh (customizers) để nâng cao tính hữu dụng của chủ đề (theme). Nhờ đó, bạn sẽ tạo ra một chủ đề có cấp độ chuyên nghiệp cao nhưng vẫn đầy tính linh hoạt, phù hợp cho mục đích sử dụng trong môi trường kinh doanh. Hãy luôn ghi nhớ rằng thiết kế chủ đề cần được xem xét với tính mở rộng (scalability) làm yếu tố then chốt: hãy thiết k

FAQ 常见问题

Phát triển chủ đề WordPress cần nắm vững những công nghệ cốt lõi nào?

Để phát triển một chủ đề WordPress hoàn chỉnh, bạn cần nắm vững các kỹ năng liên quan đến HTML, CSS (đặc biệt là các công cụ thiết kế bố cục như Flexbox và Grid để tạo ra giao diện thích ứng với nhiều loại thiết bị khác nhau), và cơ bản về PHP. Bạn cũng cần hiểu sâu về cấu trúc các template trong WordPress, cách sử dụng các vòng lặp (The Loop), cũng như các hàm và thẻ template khác nhau để tùy chỉnh nội dung trang web một cách linh hoạt. the_title(), the_content()Việc hiểu rõ cấu trúc và nguyên lý hoạt động của WordPress là yếu tố then chốt. Ngoài ra, việc am hiểu hệ thống các “hook” (actions và filters) trong WordPress, API cho công cụ tùy chỉnh giao diện (theme customizers), cũng như cách xử lý các tập tin script và file style một cách an toàn, cũng là những kỹ năng không thể thiếu.

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

Làm thế nào để đảm bảo rằng chủ đề (theme) mà tôi phát triển tuân thủ đầy đủ các quy định chính thức của WordPress?

Hãy đảm bảo rằng mã nguồn của giao diện (theme) bạn sử dụng tuân thủ các tiêu chuẩn lập trình của WordPress, bao gồm các quy định về cách mã hóa ngôn ngữ PHP, CSS, JavaScript và HTML. Giao diện không được tạo ra bất kỳ cảnh báo hay thông báo nào liên quan đến PHP. Tất cả các nội dung có thể được người dùng sửa đổi đều phải được xử lý bằng các hàm phù hợp để tránh các lỗi hoặc vấn đề liên quan đến cách mã hóa dữ liệu. esc_html(), esc_url()Mọi đoạn văn bản có thể được dịch đều phải được sử dụng. __() 或 _e() Việc bao bọc các hàm (function wrapping) và thiết lập các trường văn bản (text fields) một cách chính xác là rất quan trọng. Cuối cùng, việc triển khai các tính năng của chủ đề (theme features) không nên phụ thuộc vào bất kỳ mã nguồn hoặc framework nào không tương thích với giấy phép GPL, nhằm đảm bảo tuân thủ các yêu cầu về giấy phép GPL của chính WordPress.

Trong quá trình phát triển ứng dụng, làm thế nào để xử lý các vấn đề liên quan đến nhiều ngôn ngữ và dịch thuật?

WordPress sử dụng framework gettext để thực hiện việc đa ngôn ngữ hóa (localization). Khi phát triển các giao diện (theme), bạn cần sử dụng các hàm dịch (translation functions) cho tất cả các chuỗi ký tự dành cho người dùng (chẳng hạn như văn bản trên nút bấm, tiêu đề, văn bản mặc định, v.v.). esc_html_e('Read More', 'my-commercial-theme')… trong… style.css Đầu trang đã được khai báo đúng cách. Text Domain 和 Domain PathSau khi quá trình phát triển hoàn tất, bạn có thể sử dụng các công cụ như Poedit để tạo ra sản phẩm cuối cùng. .pot tệp mẫu, để người dịch tạo .po 和 .mo Tệp ngôn ngữ: Các tệp dịch liên quan đến việc tải nội dung theo chủ đề thường được sử dụng để thực hiện quá trình dịch tự động trong các ứng dụng hoặc hệ thống. load_theme_textdomain() Hàm đăng ký vùng tiện ích trong after_setup_theme hook.

Chủ đề cần trải qua những kiểm tra nào để được gửi lên thư mục chính thức của WordPress?

Các chủ đề được gửi lên thư mục chính thức WordPress.org phải trải qua quá trình kiểm tra tự động và thủ công nghiêm ngặt. Nội dung kiểm tra bao gồm: tính bảo mật của mã (như xác thực dữ liệu, thoát ký tự, bảo vệ CSRF), mức độ tuân thủ các tiêu chuẩn mã hóa của WordPress, có chứa mã độc hại hoặc mã mã hóa nào không, có sử dụng các hàm đã lỗi thời không, khả năng tương thích của mã front-end, việc xử lý hàng đợi tài nguyên có chính xác không, và có cung cấp đủ tùy chọn tùy chỉnh mà không mã hóa cứng các thông tin quan trọng hay không. Ngoài ra, chủ đề phải hoàn toàn tương thích với giấy phép GPL, và trong hiển thị front-end không nên chứa các liên kết quản trị viên không cần thiết hoặc thông tin tín dụng, trừ khi người dùng có thể dễ dàng loại bỏ chúng.