[Bài 1] Hướng dẫn tự thiết kế Theme WordPress đơn giản

Thông thường khi làm quen với WordPress chúng ta sẽ sử dụng Theme sẵn có. Nhưng để hiểu rõ hơn về cách thức hoạt động của nó bắt buộc bạn phải mò sâu hơn. Trong bài viết này sẽ hướng dẫn tự thiết kế Theme WordPress đơn giản nhất.

Cấu trúc Theme WordPress gồm mấy file?

Với mỗi mẫu giao diện lại có các file khác nhau cái này sẽ tuỳ thuộc vào cách viết của lập trình viên. Nhưng vẫn sẽ có những file cơ bản và quan trọng như:

style.css: Đây là file chứa mã CSS

index.php: File này sẽ hiển thị giao diện trang chủ

functions.php: File chức năng của theme

header.php: phần trên cùng của trang web

footer.php: phần chân của trang web

sidebar.php: cột bên của theme

single.php: file hiển thị bài viết

page.php: hiển thị page

search.php: chức năng tìm kiếm

– archive.php: file lưu trữ các bài viết theo ngày, năm, tháng và tác giả

Như bạn thấy để tạo một theme hoàn chỉnh trong WordPress cần tới rất nhiều tập tin khác nhau.

Hướng dẫn tạo Theme WordPress từng bước

Đầu tiên bạn sẽ tạo ra một thư mục tên là mytheme tại C:\xampp\htdocs\wordpress\wp-content\themes

Hướng dẫn tạo Theme WordPress từng bước

1. Theo như cấu trúc ở trên đầu tiên bạn sẽ tạo ra một file tên là style.css với nội dung

/*
Theme Name: mytheme
Author: Quach Quynh
Author URI: https://quachquynh.com/
Version: 1.0
*/

Giải thích:

Theme Name: Tên theme do bạn đặt

Author: tác giả tạo ra theme đó

Author URI: Địa chỉ trang web

2. Tạo file index.php

<h1>Hello World</h1>

Sau đó bạn upload theme vừa mới tạo lên để xem kết quả

Cách tạo 1 theme bằng WordPress

Đến đây xem như là bạn đã tạo ra 1 theme WordPress đơn giản nhất rồi đấy!

3. Hiển thị danh sách bài viết ra trang chủ

Thay thế đoạn bằng đoạn code sau <h1>Hello World</h1>

<?php

if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<?php the_content() ?>

<?php endwhile;

else :
echo '<p>There are no posts!</p>';

endif;

?>
4. Thêm header, sidebarfooter vào get_header();  get_footer(); get_sidebar();
<?php

get_header();

if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<?php the_content() ?>

<?php endwhile;

else :
echo '<p>There are no posts!</p>';

endif;
get_sidebar();
get_footer();

?>
5. Tạo trang header.php
<h2>Đây là Header!</h2>
<hr>
6. Tạo trang footer.php
<hr>
<h2>Đây là Footer!</h2>
7. Sửa lại header.php bằng cách thay thế toàn bộ mã dưới
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' ); ?></title>
<?php wp_head() ?>
</head>

<body <?php body_class(); ?>>

<header class="site-header">
<h1><?php bloginfo( 'name' ); ?></h1>
<h4><?php bloginfo( 'description' ); ?></h4>
</header>
8. Sửa lại footer.php bằng toàn bộ mã dưới
<footer class="site-footer">
<p><?php bloginfo( 'name' ) ?></p> 
</footer> 
<?php wp_footer() ?> 
</body> 
</html>
9. Theme Boostrap để dựng lại khung đẹp hơn
Để thêm Boostrap bạn chèn đoạn mã sau vào tập tin header.php trong cặp thẻ <head>…</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
10. Thay toàn bộ code đã viết trong file index.php đoạn code sau:
<?php get_header();?>
<div class="container">
<div class="row">
<div class="col-sm-8">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<?php the_excerpt(); ?>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
?>
</div>
<div class="col-sm-4">
<?php get_sidebar();?>
</div>
</div>
<?php get_footer();?>
Tạo theme WordPress
Sau khi thực hiện tới đây bạn đã gần như tạo xong một theme trên WordPress rồi đấy.
Trong những bài viết tiếp theo mình sẽ tiếp tục hướng dẫn bạn xây dựng thêm những chức năng khác để hoàn thiện giao diện do chính bạn xây dựng nên. Hãy theo dõi nhé!

Quách Quỳnh

Xin chào bạn mình là Quách Quỳnh! Chủ nhân của blog Quachquynh.com. Tại đây bạn sẽ tìm thấy những kiến thức về Wordpress, Seo và lập trình.

Hãy để lại bình luận:

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *