Cấu Trúc Theme WordPress – Các File Cơ Bản Và Chức Năng

Theme WordPress là tập hợp các file PHP, CSS, hình ảnh, và JavaScript, làm việc cùng nhau để định hình giao diện và chức năng của một trang web. Dưới đây là danh sách các file cơ bản và vai trò của từng file trong theme WordPress.

1. Các File Cơ Bản Trong Theme WordPress

1.1. style.css

  • Đây là file bắt buộc trong mọi theme WordPress.
  • Dùng để chứa thông tin mô tả về theme và các style CSS.

Ví dụ nội dung file:

/*
Theme Name: My Theme
Author: Your Name
Description: A simple WordPress theme.
Version: 1.0
Text Domain: my-theme
*/

1.2. index.php

  • File mặc định của theme.
  • Nếu không có các file khác như archive.php, single.php, WordPress sẽ sử dụng index.php để hiển thị nội dung.

Ví dụ nội dung file:

<?php get_header(); ?>
<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <p><?php the_content(); ?></p>
    <?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

1.3. header.php

  • Chứa phần đầu trang, thường bao gồm thẻ <head> và phần mở <body>.
  • Sử dụng wp_head() để WordPress thêm các script và styles cần thiết.

Ví dụ nội dung file:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
    <h1><?php bloginfo('name'); ?></h1>
    <p><?php bloginfo('description'); ?></p>
</header>

1.4. footer.php

  • Chứa phần cuối trang, thường bao gồm thông tin bản quyền và các script cần thiết.
  • Sử dụng wp_footer() để WordPress thêm script trước thẻ đóng </body>.

Ví dụ nội dung file:

<footer>
    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
    <?php wp_footer(); ?>
</footer>
</body>
</html>

1.5. functions.php

  • File này không bắt buộc nhưng rất quan trọng.
  • Dùng để thêm các tính năng và chỉnh sửa hành vi mặc định của WordPress.

Ví dụ nội dung file:

<?php
// Thêm hỗ trợ ảnh đại diện
add_theme_support('post-thumbnails');

// Đăng ký menu
register_nav_menu('primary', 'Primary Menu');
?>

1.6. 404.php

  • Hiển thị khi người dùng truy cập vào một trang không tồn tại.

Ví dụ nội dung file:

<?php get_header(); ?>
<main>
    <h1>404 - Page Not Found</h1>
    <p>Sorry, the page you are looking for does not exist.</p>
</main>
<?php get_footer(); ?>

1.7. archive.php

  • Hiển thị danh sách bài viết thuộc danh mục, tag, hoặc tác giả.

Ví dụ nội dung file:

<?php get_header(); ?>
<main>
    <h1><?php the_archive_title(); ?></h1>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <p><?php the_excerpt(); ?></p>
    <?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

1.8. front-page.php

  • File dùng để hiển thị trang chủ khi được thiết lập trong Cài đặt > Đọc.

Ví dụ nội dung file:

<?php get_header(); ?>
<main>
    <h1>Welcome to My Website</h1>
    <p>This is the custom front page.</p>
</main>
<?php get_footer(); ?>

1.9. page.php

  • Hiển thị nội dung của các trang (Pages).

Ví dụ nội dung file:

<?php get_header(); ?>
<main>
    <h1><?php the_title(); ?></h1>
    <p><?php the_content(); ?></p>
</main>
<?php get_footer(); ?>

1.10. single.php

  • Hiển thị nội dung chi tiết của một bài viết đơn lẻ.

Ví dụ nội dung file:

<?php get_header(); ?>
<main>
    <h1><?php the_title(); ?></h1>
    <p><?php the_content(); ?></p>
</main>
<?php get_footer(); ?>

1.11. search.php

  • Hiển thị kết quả tìm kiếm.

Ví dụ nội dung file:

<?php get_header(); ?>
<main>
    <h1>Search Results for: <?php echo get_search_query(); ?></h1>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <p><?php the_excerpt(); ?></p>
    <?php endwhile; else : ?>
        <p>No results found.</p>
    <?php endif; ?>
</main>
<?php get_footer(); ?>

1.12. screenshot.png

  • Là hình ảnh đại diện cho theme trong giao diện quản trị WordPress.
  • Kích thước gợi ý: 1200 x 900px (Tỉ lệ 4:3).

2. Cách Tạo Theme Đơn Giản

  1. Tạo thư mục trong /wp-content/themes/, ví dụ: /my-theme/.
  2. Thêm các file cơ bản: style.css, index.php, functions.php, ...
  3. Kích hoạt theme trong giao diện quản trị WordPress.

Nhận xét

Mới hơn Cũ hơn