Cấu trúc cốt lõi của chủ đề WordPress

Đọc thêm Trong thế giới mạng cạnh tranh khốc liệt ngày nay, một WordPress。

Thông tin đầu của bảng định dạng chủ đề (Theme Style Sheet)

Chủ đềstyle.cssPhần đầu của tệp tin phải chứa một đoạn chú thích có định dạng chuẩn. WordPress sẽ đọc thông tin này để nhận diện và hiển thị giao diện (theme) tương ứng ở phía sau nền (backend).

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

/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: A modern, responsive WordPress theme built for speed and SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
*/

Trong đó, “Text Domain” được sử dụng cho mục đích hóa đa ngôn ngữ (internationalization) và là mã định danh (identifier) được dùng trong quá trình dịch thuật sau này; thường trùng với tên thư mục chứa nội dung liên quan đến chủ đề (theme folder).

Các thao tác thường dùng đối với tệp tin chứa tính năng chủ đề (Theme Feature Files)

functions.phpTệp tin chính là “bộ não” của một chủ đề (nội dung được trình bày). Một thao tác phổ biến là sử dụng tệp tin đó để quản lý và tổ chức nội dung liên quan đến chủ đề đó.add_theme_support()Các hàm được sử dụng để khai báo những tính năng mà chủ đề hỗ trợ. Ví dụ: kích hoạt tính năng hiển thị hình ảnh đặc biệt cho bài viết, tùy chỉnh Logo, tùy chỉnh nền, v.v.

<?php
function my_awesome_theme_setup() {
    // 添加对文章特色图片的支持
    add_theme_support( 'post-thumbnails' );
    // 添加对自定义Logo的支持
    add_theme_support( 'custom-logo' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 添加对标题标签的支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );
?>

Đoạn mã này sử dụng các “hook” (các hàm được gọi tự động trong quá trình thực thi chương trình) để thực hiện các thao tác cụ thể.after_setup_themeChức năng này được thực hiện sau khi chủ đề được tải xuống, và nó kích hoạt một số tính năng cốt lõi của WordPress một cách an toàn.

Cấp độ của các mẫu (templates) và các mẫu tùy chỉnh (custom templates)

WordPress sử dụng một hệ thống thông minh được gọi là “hệ thống cấp độ template” (template hierarchy) để quyết định cách hiển thị các loại trang khác nhau. Khi người dùng truy cập một trang, WordPress sẽ tìm kiếm tệp template tương ứng theo một thứ tự ưu tiên nhất định. Ví dụ, đối với một bài viết được phân loại là “News” (Tin tức), WordPress sẽ tìm kiếm theo thứ tự sau:single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpCác nhà phát triển có thể sử dụng bộ quy tắc này để tạo ra các tệp mẫu có tên cụ thể, từ đó thực hiện việc kiểm soát trang web một cách chi tiết và chính xác.

Đọc thêm Nhập môn phát triển theme WordPress: Xây dựng website tùy chỉnh từ đầu。

Ngoài các mẫu được quy định sẵn bởi hệ thống, các nhà phát triển cũng có thể tạo ra “mẫu trang” (page templates). Đây là những mẫu được thiết kế riêng cho một trang cụ thể hoặc một nhóm trang nhất định. Để tạo một mẫu trang, bạn cần phải ghi rõ điều này trong phần chú thích ở đầu tệp mẫu.

Tạo mẫu trang tùy chỉnh

Ví dụ, để tạo một mẫu trang có độ rộng toàn màn hình, bạn có thể tạo một tệp mới với tên…template-fullwidth.phpTệp tin này chứa thông tin về… (Nêu rõ nội dung của tệp tin). Hãy thêm ghi chú sau đây ở đầu tệp tin:

<?php
/**
 * Template Name: 全宽度页面布局
 * Description: 一个没有侧边栏的全宽度页面模板
 */
?>

Sau đó, khi bạn chỉnh sửa trang trong giao diện quản trị WordPress, bạn có thể nhìn thấy và chọn tùy chọn “Bố cục trang toàn chiều rộng” (Full Width Page Layout) trong danh sách thả xuống “Mẫu” (Template) thuộc mục “Thuộc tính trang” (Page Properties). Điều này mang lại sự linh hoạt rất lớn trong việc hiển thị nội dung, giúp bạn đáp ứng các yêu cầu bố cục đặc biệt mà không cần phải thay đổi các tệp cốt lõi của giao diện (theme).

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

Sử dụng các thẻ điều kiện (condition tags) để thực hiện kiểm soát logic.

Trong các tệp mẫu (template files), thường xuyên cần hiển thị nội dung khác nhau tùy theo các điều kiện khác nhau. Điều này đòi hỏi phải sử dụng các thẻ điều kiện (condition tags) của WordPress. Ví dụ, trong…index.phpTrong đó, có thể sử dụng các thẻ điều kiện (condition tags) để xác định xem đang ở trang danh sách bài viết hay trang chi tiết của một bài viết cụ thể; tuy nhiên, thường thì có các tệp mẫu (template files) chuyên biệt được thiết kế để thực hiện công việc này.

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>Danh sách bài viết trên blog</h1>
<?php elseif ( is_search() ) : ?>
    <h1>搜索结果：</h1>
<?php endif; ?>

Các thẻ điều kiện thường được sử dụng còn bao gồm:is_single()、is_page()、is_category()、is_archive()V.v., chúng là những nền tảng cơ bản để xây dựng các chủ đề (templates) động và thông minh.

Quản lý mã nguồn và phong cách (styles) của chủ đề (theme)

Để đảm bảo tính ổn định và hiệu suất của trang web, tất cả các tệp JavaScript và CSS đều nên được tải theo thứ tự nhất định bằng các phương thức mà WordPress cung cấp, thay vì được sử dụng trực tiếp trong các tệp mẫu (template files).或Nhãn. Điều này được thực hiện thông qua…functions.phptrongwp_enqueue_scriptsĐược thực hiện bằng cách sử dụng các “hook” (các công cụ hoặc thành phần được thiết kế để kết nối các phần khác nhau của chương trình).

Đọc thêm Tập trung vào thực hành: Từ con số không đến việc nắm vững các kỹ năng cốt lõi trong việc phát triển giao diện WordPress hiện đại。

Đăng ký và xếp hàng đúng cách để sử dụng các nguồn lực.

Sử dụngwp_register_script()和wp_enqueue_script()(Script) hoặc tương ứng với nówp_register_style()和wp_enqueue_style()(Các tính năng về giao diện): Các hàm này cho phép WordPress quản lý các mối phụ thuộc giữa các thành phần (components) một cách thống nhất, thực hiện công tác kiểm soát phiên bản (version control), và ngăn chặn việc tải lại các tài nguyên (resources) một cách không cần thiết.

<?php
function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

    // 注册一个自定义JavaScript文件
    wp_register_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
    // 排队这个脚本（仅在需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
?>

Trong ví dụ trên,get_stylesheet_uri()Lấy thông tin về chủ đề hiện tạistyle.cssĐường dẫn (Path)get_template_directory_uri()Truy xuất URI của thư mục chủ đề (theme directory). Hãy đặt tham số cuối cùng của script thành…trueĐiều này có nghĩa là nội dung sẽ được tải vào phần chân trang (footer), và việc này giúp cải thiện tốc độ tải trang.

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

Thêm kiểu dáng nội tuyến (inline styles) hoặc script.

Đôi khi, cần phải tạo ra một số mã CSS hoặc JavaScript một cách dinh hình dựa trên logic của PHP. Trong trường hợp đó, có thể sử dụng các công cụ hoặc phương pháp phù hợp để thực hiện điều này.wp_add_inline_style()和wp_add_inline_script()Các hàm (functions) phải được sử dụng cùng với một nguồn lực (resource) đã được xếp hàng (queued).

<?php
function my_dynamic_css() {
    $custom_css = "
        .site-header {
            background-color: #" . get_theme_mod('header_bg_color', 'ffffff') . ";
        }
    ";
    wp_add_inline_style( 'my-awesome-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_css' );
?>

Trình tùy chỉnh chủ đề và tính năng tùy chỉnh

WordPress Theme Customizer cung cấp một giao diện xem trước theo thời gian thực, cho phép người dùng (quản trị viên) điều chỉnh một số thiết lập của chủ đề như màu sắc, Logo, hình nền, v.v. Nhờ vào API của Theme Customizer, các nhà phát triển có thể dễ dàng thêm các tùy chọn có thể cấu hình vào chủ đề một cách an toàn.

Thêm một tùy chọn trong bộ công cụ tùy chỉnh (Customizer).

Trước hết, cần phải…functions.phpsử dụngcustomize_registerCác công cụ (hook) được sử dụng để đăng ký cài đặt, các thành phần điều khiển (controls), và các khu vực (regions) cần được quản lý trong hệ thống.

<?php
function my_awesome_theme_customize_register( $wp_customize ) {
    // 添加一个“颜色”板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-awesome-theme' ),
        'priority' => 30,
    ) );

    // 添加一个“链接颜色”设置
    $wp_customize->add_setting( 'link_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( '链接颜色', 'my-awesome-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'link_color',
    ) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );
?>

Hiển thị các thiết lập tùy chỉnh trong chủ đề.

Sau khi thêm các thiết lập, bạn cần hiển thị giá trị này trên giao diện người dùng (frontend) của chủ đề (theme). Thông thường, điều này được thực hiện thông qua các đoạn mã được viết trong phần tương ứng của mã nguồn chủ đề.style.cssHoặc thông qua…wp_add_inline_style()Trong CSS động được thêm vào, sử dụngget_theme_mod()Hàm truy xuất giá trị.

<?php
function output_customizer_css() {
    $link_color = get_theme_mod( 'link_color', '#0073aa' ); // 第二个参数为默认值
    if ( $link_color !== '#0073aa' ) {
        $css = "
            a { color: {$link_color}; }
            a:hover { color: " . adjust_color( $link_color, -50 ) . "; }
        ";
        wp_add_inline_style( 'my-awesome-theme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'output_customizer_css' );
?>

Bằng cách này, chức năng và giao diện của chủ đề (theme) trở nên rất dễ cấu hình, trong khi vẫn giữ được tính gọn gàng và an toàn của mã nguồn (code).

Tóm lại

Việc phát triển một theme cho WordPress là một quá trình mang tính hệ thống, đòi hỏi sự hiểu biết sâu rộng về cấu trúc các template, các hàm cốt lõi của hệ thống, cách quản lý các tài nguyên, cũng như các API được cung cấp để tùy chỉnh giao diện. Bắt đầu từ việc xây dựng những thành phần cơ bản nhất…style.css和index.phpBắt đầu bằng cách tạo các tệp mẫu cụ thể để kiểm soát cách hiển thị của các trang khác nhau, bằng cách sử dụng…functions.phpViệc mở rộng các tính năng của một chủ đề và quản lý các tập lệnh (script) cũng như phong cách thiết kế (style) theo các tiêu chuẩn của WordPress là nền tảng cơ bản để tạo ra những chủ đề mạnh mẽ và hiệu quả. Hơn nữa, việc tích hợp API cho công cụ tùy chỉnh chủ đề (theme customizer) có thể mang đến cho người dùng trải nghiệm tùy chỉnh thời gian thực một cách thân thiện. Việc nắm vững những khái niệm và kỹ năng cốt lõi này là chìa khóa để trở thành một nhà phát triển chủ đề WordPress chuyên nghiệp.

FAQ 常见问题

Một theme WordPress cơ bản nhất cần ít nhất bao nhiêu tệp tin?

Một chủ đề cơ bản nhất, có thể được WordPress nhận diện, cần ít nhất hai tệp tin:style.css和index.php。style.cssPhần tiêu đề (header) phải chứa thông tin chú thích về chủ đề một cách chính xác.index.phpĐây là tệp lưu trữ dùng để thực hiện việc “lùi lại” (rollback) ở cấp độ mẫu (template level), dùng để hiển thị nội dung cơ bản nhất.

Sự khác biệt giữa chủ đề con (sub-topic) và chủ đề cha (parent-topic) là gì? Làm thế nào để tạo chúng?

Các chủ đề con kế thừa tất cả các chức năng và kiểu dáng của chủ đề cha, nhưng cho phép nhà phát triển thay đổi hoặc tùy chỉnh chúng mà không cần phải sửa đổi các tệp liên quan đến chủ đề cha. Điều này giúp giữ nguyên các thay đổi tùy chỉnh đã thực hiện khi chủ đề cha được cập nhật. Để tạo một chủ đề con, bạn chỉ cần…/wp-content/themes/Hãy tạo một thư mục mới trong thư mục đó, và sau đó tạo một tệp tin (hoặc một thư mục con nữa) bên trong thư mục mới vừa được tạo.style.cssTệp tin đó phải chứa các ghi chú ở phần đầu (header comments).Template:Bạn cần chỉ định tên thư mục của chủ đề cha (parent topic) bằng cách nhập thông tin tương ứng.

Tại sao mẫu trang tùy chỉnh của tôi không hiển thị trong danh sách thả xuống ở phía sau (backend)?

Vui lòng kiểm tra tệp mẫu trang của bạn (chẳng hạn như…)my-template.phpTệp tin phải nằm trong thư mục gốc của chủ đề (theme), và đoạn mã chú thích ở đầu tệp phải được định dạng một cách chính xác. Đoạn mã chú thích này phải bao gồm những nội dung nhất định.Template Name:Dòng này phải chứa tên của mẫu (template) của bạn, và phải được theo ngay sau đó. Một khoảng trắng sai vị trí hoặc sự thiếu vắng dấu hai chấm (:) đều có thể khiến WordPress không thể nhận diện được nó.

Làm thế nào để chủ đề của tôi hỗ trợ dịch đa ngôn ngữ?

Điều này chủ yếu được thực hiện thông qua các quá trình “quốc tế hóa (i18n)” và “địa phương hóa (l10n)”. Trước hết,style.css“Text Domain” và…functions.php的load_theme_textdomain()Trong quá trình gọi hàm, hãy sử dụng cùng một lĩnh vực văn bản chủ đề (theme text field). Sau đó, áp dụng nó ở tất cả các chuỗi cần được dịch.__()、_e()Bạn nên bọc các hàm dịch (translation functions) lại trong một lớp (class) hoặc module riêng biệt. Sau đó, sử dụng công cụ như Poedit để tạo ra tệp cấu hình dịch (translation configuration files)..potTệp mẫu, và tạo ra phiên bản tương ứng bằng ngôn ngữ cần thiết..po和.moTệp tin được đặt trong phần nội dung chính của chủ đề (theme content)./languages/của child theme.