Viết một theme WordPress từ đầu là một quá trình bao gồm nhiều bước, từ việc tạo các tệp cơ bản đến việc thêm chức năng nâng cao. Hướng dẫn dưới đây sẽ giúp bạn từng bước tạo một theme WordPress đơn giản nhưng đầy đủ các tính năng cơ bản, kèm theo ví dụ mã cụ thể.
Trước tiên, bạn cần một môi trường phát triển WordPress trên máy tính của mình. Các bước thiết lập môi trường bao gồm:
wp-content/themes.my-custom-theme trong wp-content/themes.style.cssindex.phpfunctions.phpstyle.cssTệp style.css giúp định nghĩa kiểu dáng (CSS) và cũng là nơi chứa thông tin về theme của bạn, giúp WordPress nhận diện.
style.css:/* Theme Name: My Custom Theme Theme URI: http://example.com Author: Your Name Author URI: http://example.com Description: A simple custom theme Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: my-custom-theme */
Sau khi khai báo phần meta này, bạn có thể thêm các quy tắc CSS cho giao diện website.
index.phpTệp index.php là file chính hiển thị nội dung của theme, bao gồm việc hiển thị các bài viết và trang của bạn. Đây là tệp mặc định nếu WordPress không tìm thấy các tệp mẫu khác như home.php hoặc single.php.
index.php:<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</header>
<div id="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
echo '<h2>' . get_the_title() . '</h2>';
the_content();
endwhile;
else :
echo '<p>No content found</p>';
endif;
?>
</div>
<?php wp_footer(); ?>
</body>
</html>
functions.phpTệp functions.php cho phép bạn thêm các chức năng tùy chỉnh vào theme. Bạn có thể sử dụng nó để thêm menu, widget, hoặc enqueue các file CSS/JavaScript.
functions.php:<?php
// Đăng ký menu
function my_custom_theme_setup() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );
// Đăng ký widget
function my_custom_widgets_init() {
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar-1',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_custom_widgets_init' );
// Enqueue CSS và JavaScript
function my_custom_enqueue_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_enqueue_scripts' );
?>
WordPress sử dụng các template khác nhau cho từng loại nội dung. Bạn có thể tạo thêm các tệp mẫu khác như single.php cho bài viết đơn, page.php cho trang, hoặc archive.php cho các trang lưu trữ.
single.php (hiển thị bài viết đơn lẻ):<?php get_header(); ?>
<div id="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
echo '<h2>' . get_the_title() . '</h2>';
the_content();
endwhile;
else :
echo '<p>No content found</p>';
endif;
?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
page.php (hiển thị trang đơn lẻ):<?php get_header(); ?>
<div id="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
echo '<h2>' . get_the_title() . '</h2>';
the_content();
endwhile;
else :
echo '<p>No content found</p>';
endif;
?>
</div>
<?php get_footer(); ?>
header.php và footer.phpTệp header.php chứa phần đầu của trang web, bao gồm thẻ mở HTML, thông tin meta, và menu. Tệp footer.php chứa phần cuối trang.
header.php:<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo( 'name' ); ?></h1>
<nav>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
</header>
footer.php: <footer>
<p>© <?php echo date( 'Y' ); ?> - <?php bloginfo( 'name' ); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Tạo một tệp sidebar.php để hiển thị các widget được thêm qua WordPress Admin.
sidebar.php:<div id="sidebar">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php endif; ?>
</div>
Bạn có thể thêm các tùy chọn tùy chỉnh thông qua Customizer để người dùng dễ dàng chỉnh sửa theme từ WordPress Admin.
function mytheme_customize_register( $wp_customize ) {
$wp_customize->add_section( 'mytheme_colors' , array(
'title' => __( 'Theme Colors', 'mytheme' ),
'priority' => 30,
) );
$wp_customize->add_setting( 'header_color' , array(
'default' => '#000000',
'transport' => 'refresh',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
'label' => __( 'Header Color', 'mytheme' ),
'section' => 'mytheme_colors',
'settings' => 'header_color',
) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );
Khi tạo theme, bạn cũng có thể sử dụng hình ảnh nổi bật (thumbnail) cho các bài viết.
// Hỗ trợ post thumbnail
add_theme_support( 'post-thumbnails' );
// Hiển thị thumbnail trong index.php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
Tạo theme WordPress từ đầu là một quá trình thú vị giúp bạn tùy chỉnh giao diện và chức năng của website. Hướng dẫn trên cung cấp cho bạn cái nhìn tổng quát và mã mẫu để bắt đầu. Sau khi nắm vững các bước cơ bản này, bạn có thể mở rộng với các tính năng nâng cao hơn như tùy chỉnh qua Customizer, tạo các post type riêng, hoặc tích hợp API.
Tự do tư tưởng không phải chỉ là muốn nghĩ thế nào thì nghĩ, mà còn là giải thoát ta ra khỏi các áp lực bắt ta phải suy nghĩ theo một lề lối nào đó.
