🚀 Hướng Dẫn Code Theme WordPress Cơ Bản
Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một theme WordPress từ con số 0 với cấu trúc tối giản và chuẩn xác nhất. Bạn sẽ nắm được thư mục, cấu trúc file, và cách WordPress vận hành giao diện.
1. Cấu Trúc File Cơ Bản
Một theme WordPress tối giản nhất cần có 2 file: style.css (Khai báo Theme) và index.php (Hiển thị nội dung). Tuy nhiên, để linh hoạt và chuyên nghiệp, chúng ta sẽ chia nhỏ các thành phần:
- style.css: Khai báo thông tin Theme và CSS.
- functions.php: Khai báo các tính năng, menu, sidebar, nạp scripts.
- header.php: Chứa thẻ
<head>, Logo và Menu. - footer.php: Chứa thông tin bản quyền và tải thư viện cuối trang.
- index.php: Vòng lặp hiển thị danh sách bài viết.
- sidebar.php: Hiển thị các Widget bên phải.
2. Khởi tạo Theme (style.css)
Tạo một thư mục có tên theme-co-ban trong wp-content/themes/. Bên trong tạo file style.css.
/*
Theme Name: Theme Co Ban
Theme URI: https://example.com/theme-co-ban
Author: Ten Cua Ban
Description: Một theme WordPress cơ bản, cấu trúc chuẩn, hỗ trợ Widget và Menu.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: theme-co-ban
*/
/* --- CSS Reset Cơ bản --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; line-height: 1.6; color: #333; background: #f4f4f4; }
a { text-decoration: none; color: #0d6efd; }
/* --- Layout --- */
.container-basic { max-width: 1100px; margin: 0 auto; padding: 0 15px; }
.site-content { display: flex; flex-wrap: wrap; padding: 20px 0; gap: 30px; }
.main-content { flex: 3; background: #fff; padding: 20px; border-radius: 5px; }
.sidebar-area { flex: 1; min-width: 250px; }
3. Bộ Não Của Theme (functions.php)
Khai báo hỗ trợ tiêu đề, ảnh đại diện, đăng ký menu và nạp file CSS.
<?php
if ( ! function_exists( 'theme_co_ban_setup' ) ) :
function theme_co_ban_setup() {
// Cho phép WordPress tự quản lý thẻ title
add_theme_support( 'title-tag' );
// Cho phép upload ảnh đại diện bài viết
add_theme_support( 'post-thumbnails' );
// Đăng ký vị trí Menu
register_nav_menus( array(
'primary' => __( 'Menu Chính', 'theme-co-ban' ),
) );
}
endif;
add_action( 'after_setup_theme', 'theme_co_ban_setup' );
// Nạp file CSS
function theme_co_ban_scripts() {
wp_enqueue_style( 'theme-co-ban-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_co_ban_scripts' );
// Đăng ký Sidebar
function theme_co_ban_widgets_init() {
register_sidebar( array(
'name' => __( 'Sidebar Chính', 'theme-co-ban' ),
'id' => 'sidebar-1',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'theme_co_ban_widgets_init' );
4. Phần Đầu Trang (header.php)
Chứa cấu trúc HTML ban đầu và hiển thị Logo cũng như Menu.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<header class="site-header">
<div class="container-basic">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<nav id="site-navigation" class="main-navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false ) ); ?>
</nav>
</div>
</header>
<div id="content" class="site-content container-basic">
5. Phần Chân Trang (footer.php)
Đóng các thẻ cấu trúc và gọi hàm wp_footer() để nạp các script cần thiết.
</div><!-- #content -->
<footer class="site-footer">
<div class="container-basic">
<p>© <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?>. Được xây dựng bằng WordPress.</p>
</div>
</footer>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
6. Vòng Lặp Nội Dung (index.php)
File chính để lấy bài viết và hiển thị kết hợp với Header, Footer và Sidebar.
<?php get_header(); ?>
<main id="primary" class="site-main main-content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post' ); ?>>
<header class="entry-header">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-meta">Ngày đăng: <?php echo get_the_date(); ?></div>
</header>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
<?php the_posts_navigation(); ?>
<?php else : ?>
<p>Không tìm thấy bài viết nào.</p>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
7. Cột Bên (sidebar.php)
Hiển thị các widget ở bên phải màn hình.
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="widget-area sidebar-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php endif; ?>
🎉 Hoàn Thành!
Vậy là bạn đã có một cấu trúc Theme cơ bản chuẩn WordPress, hỗ trợ đầy đủ Menu, Widget Area và Responsive cơ bản. Hãy nén tất cả các thư mục vừa tạo thành 1 file .zip và tải lên mục Theme của trang quản trị là có thể sử dụng được ngay.
Tuyen Quang
12/04/2026 lúc 10:47hơ hơ hơ