Hướng dẫn viết theme wordpress căn bản

Hướng dẫn viết theme wordpress căn bản

WordPress là một mã nguồn CMS SEO tốt nhất hiện nay, không chỉ vậy nó còn hỗ trợ rất nhiều thức rất hay và đơn giản. Vấn đề ở WordPress chỉ là giao diện và hôm nay mình sẽ giúp bạn tiếp cận nó ở mức căn bản nhất.

Trong bài viết này mình sẽ sử dụng lại cái web hôm bữa mình cài trên localhost. Các bạn có thể xem lại bài này: Hướng dẫn tạo một website WordPress từ A-Z nhé.

Cấu trúc theme wordpress

Đầu tiên chúng ta cần phải hiểu cấu trúc của theme wp, điều này giúp bạn có cái nhìn tổng thể hơn về cách làm việc của wp và viết themes chính xác hơn.

Cấu tạo nên một theme wp cơ bản bao gồm template tagtemplate.

Template tag

Là một đoạn code gọi hàm thường nằm trong các tệp template của theme. template tag đơn giản nhất bạn có thể hình dung đó chính là <?php the_title(); ?> dùng để hiển thị tiêu đề của trang.

Bạn có thể tìm thấy rất nhiều các template tag của wp tại địa chỉ http://codex.wordpress.org/Template_Tags. Ngoài ra bạn cũng có thể tạo riêng cho mình những template tag phù hợp cho theme của mình nữa. Mình sẽ có một bài hướng dẫn sau nhé.

Template

Như bên trên cũng mình cũng có nhắc đến, thì template nó sẽ chứa nhiều template tag, tức là nó như một khuông mẫu để bạn có thể sử dụng các template tag phù hợp đặt vào. Nói dễ hiểu hơn thì nó giống như một HTML tĩnh vậy, bạn sử dụng các template tag thay vào các thông tin tĩnh thì bạn sẽ được một template wordpress.

Cấu trúc các tệp template trong theme

Như vậy bạn đã biết template và template tag là gì rồi, bây giờ thì nó sẽ được tổ chức như thế nào thì hãy xem phần này nhé.

Hãy truy cập vào đường dẫn “C:\xampp\htdocs\wordpress\wp-content\themes\twentyseventeen” như ở bài trước nhé. Đây là một theme mẫu mà khi cài wp bạn đã có nó. Hãy xem toàn bộ những file của nó nhé.

Bây giờ hãy trở lại đường dẫn “C:\xampp\htdocs\wordpress\wp-content\themes\” hãy tạo một thư mục có tên “mytheme” nào.

Tiếp theo hãy tạo cho mình 2 file có tên là “style.css” và “index.php” nhé. bạn cũng có thể chụp hình một trang web mẫu của bạn lưu lại với định dạng là *.png và đặt tên là “screenshot” sau đó copy vào đây luôn.

Bây giờ bạn vào phần giao diện ở wp-admin bạn sẽ thấy theme của bạn đã có mặt, bạn có thể kích hoạt theme này luôn cũng được.

Bạn mở file “style.css” và thêm đoạn như dưới vào. Dĩ nhiên bạn có thể bỏ qua không quan tâm nhưng mình khuyên bạn nên sử dụng để đánh dấu bản quyền của bạn.

/*
Theme Name: My Theme
Theme URI: http://tuandc.com
Author: Tuan DC
Author URI: http://tuandc.com
Description: huong dan lap tri wordpress can ban.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tuandc
Tags: wordpress, code php, seo.
*/

Tiếp theo hãy mở file “index.php” lên vào code đoạn dưới vào.

<?php get_header(); 

 if ( have_posts() ) :
 get_template_part( 'content');
 else :
 get_template_part( 'content', 'none' );
 endif; 

 get_sidebar(); 

get_footer(); ?>

Chú thích:

get_header(); sẽ giúp bạn lấy nội dung của file “header.php” (lát nữa mình tạo)

get_template_part( ‘content’); sẽ lấy nội dung ở file “content.php” (lát nữa mình sẽ tạo)

get_template_part( ‘content’, ‘none’ ); sẽ lấy nội dung ở file “content-none.php” (lát nữa mình sẽ tạo)

get_sidebar(); sẽ lấy nội dung ở file ở “sidebar.php” (nếu không có nó sẽ lấy mặc định)

get_footer(); sẽ lấy nội dung ở file ở “footer.php” (lát nữa mình sẽ tạo).

Hàm if ở trên sẽ kiểm tra nội dung và đưa lựa chọn tệp nào sẽ được lấy nội dung. Giả sử mình chưa có bài viết nào thì website của mình sẽ hiện thị tệp “content-none.php

Tiếp theo thì tạo ra các tệp như trên thôi lần lượt là “header.php“, “content.php“, “content-none.php“, “sidebar.php“, “footer.php“.

Bạn có thể dễ dàng nhìn thấy các file này được file “index.php” import vào lần lượt từ trên xuống dưới, như vậy tức là nó đang ráp ghép thành một website hoàn chỉnh đấy. Tiếp theo hãy cùng thổi giao diện vào các trang đã tạo ở trên nhé.

Tạo HTML và gắn các template tag cần thiết vào.

Ở đây mình sẽ viết HTML cơ bản thôi nhé nên sẽ thiếu rất nhiều đấy :D. Bạn có thể sử dụng bootstraps để thiết kế giao diện nhanh và đẹp hơn.

Code cho trang header.php

Đầu tiên hãy mở “header.php” và code như hình nhé.

<!DOCTYPE html>
<html>
 <head>
 <?php wp_head(); ?>
 </head>
 
 <body>

Đơn giản vậy thôi nhé. <?php wp_head(); ?> sẽ giúp lấy những thông tin cần thiết vào phần <head> của web. Nếu bạn muốn SEO tốt hãy cài các Plugin SEO nhé. Hoặc nếu bạn không muốn dùng Plugin thì mình sẽ có bài viết về phần này.

Code cho trang footer.php

Tiếp theo hãy mở “footer.php” và code như bên dưới vào nhé.

<div style="text-align:center;">
 <h4>Bản quyền thuộc về ABC</h4>
</div>
<?php wp_footer(); ?>
</body>
</html>

Hàm <?php wp_footer(); ?> giúp hiển thị được thanh công cụ admin ngoài trang. Nếu bạn không cần thiết có thể bỏ luôn cũng được.

Nếu bạn cần thiết kế theme đẹp hơn có thể tham khảo bài viết: Thiết kế giao diện website với bootstraps

Code cho trang content.php

Mở file “content.php” và code như hình dưới

<div style="width:70%; float:left">
 
 <?php $getposts = new WP_Query(array(
 'post_type'=>'post',
 'post_status'=>'publish',
 'orderby' => 'ID',
 'order' => 'DESC')); ?>
 
 <?php while ($getposts->have_posts()) : $getposts->the_post();?>
 
 <?php the_post_thumbnail(full,array( "title" => get_the_title(),"alt" => get_the_title(),"class" => "class-img" ));?>
 <h2><?php the_title();?></h2>
 <p><?php the_excerpt();?></p>
 <a href="<?php the_permalink() ;?>">Xem thêm</a>
 
 <?php endwhile ; wp_reset_query() ;?>
 
 
</div>

Mình sử dụng WP_Query, là một hàm truy vấn của wordpress, để lấy ra các dữ liệu theo yêu cầu là:

  • Loại: post.
  • Trạng thái post: đã đăng (publish)
  • Được sắp sếp theo: ID
  • Sắp sếp theo giảm dần (tức bài mới nhất sẽ được hiển thị ở đầu).

Sử dụng vòng lặp while để lấy ra các bài post. và chèn các template tag vào. cụ thể:

  • the_post_thumbnail dùng để lấy ảnh thumbnail vào. Mình sẽ có bài viết cụ thể về cái này.
  • the_title dùng để lấy tiêu dề của bài viết.
  • the_excerpt đùng để lấy đoạn mô tả.
  • the_permalink để lấy liên kết đến bài viết.
  • Kết thúc vòng lặp nhớ đặt hàm wp_reset_query(); để có thể sử dụng WP_Query trong truy vấn khác nếu không sẽ có lỗi nhé.

Code cho trang sidebar.php

Tiếp theo hãy mở file “sidebar.php” và code đoạn dưới vào.

<div style="width:30%; float:left">
 
 <?php if ( is_active_sidebar( 'sidebar-1' ) ) :
 dynamic_sidebar( 'sidebar-1' );
 endif; ?>
 
</div>

Ở đây mình sử dụng dynamic_sidebar tức là sẽ lấy một cái sidebar chứa nhiều nhiều widget. Mình sẽ hướng dẫn các bạn ở phần dưới nhé…

Viết các hàm chức năng cần thiết trong file functions

WordPress có rất nhiều các tempalate tag có các chức năng cần thiết để chúng ta có thể triển khai ra các tệp template nhanh chóng. Thế nhưng có nhiều yêu cầu phức tạp hoặc yêu cầu để phù hợp themes của bạn thì bạn có thể tạo ra các hàm riêng biệt.

Ví dụ: wp_nav_menu() sẽ sản sinh ra một đoạn mã html mình không mong muốn vì nó không phù hợp với template của mình vì thế mình có thể sử dụng nó để lấy dữ liệu và sản sinh ra một đoạn mã html khác phù hợp với template của mình hơn.

Và bây giờ chúng ta sẽ tạo một file có tên “functions.php” nhé và tiến hành đưa các code chức năng vào như sau.

Kích hoạt tính năng post thumbnail cho bài viết.

<?php
 add_theme_support( 'post-thumbnails' );

Thông thường tính năng này sẽ bị ẩn đi và bạn không tìm thấy chỗ nào có thể úp ảnh đại diện bài viết lên cả, vì thế hãy thêm đoạn mã này vào nhé. Đoạn này cho biết themes chúng ta hỗ trợ thumbnail và yêu cầu kích hoạt tính năng này trong trình soạn thảo văn bản.

Tạo vùng chứa widgets cho sidebar đã tạo

Ở trên mình đã tạo ra một file “sidebar.php” và có lấy một sidebar có id là “sidebar-1”. Tuy nhiên khi vào trong giao diện bạn sẽ không thấy cái widget đâu cả. Đó là vì themes của bạn chưa có tạo bất cứ một sidebar nào. Để tạo sidebar bạn sử dụng hàm “register_sidebar” và code như dưới.

function sideright_widgets_init() {

register_sidebar( array(
 'name' => 'Witget_side',
 'id' => 'sidebar-1',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ) );
 
}
add_action( 'widgets_init', 'sideright_widgets_init' );
  • Name là tên của sidebar. Khi vào witget sẽ có một vùng này để chứa các witget,  các bạn chỉ việc kéo thả witget vào đây thôi.
  • ID là một mã để bạn có thể gọi nó ra themes. nó không được trùng lặp nhé. Câu gọi nó là dynamic_sidebar( ‘sidebar-1’ ); mà mình có viết trong sidebar.php đấy.
  • Before_widget: là thẻ bắt đầu witgets.
  • After_widget: là thẻ kết thúc witgets.
  • tương tự before_title và after_title thì áp dụng cho cái title. Bạn có thể thêm class vào các thẻ before để hiển thị phù hợp với themes.

Tạo các file còn lại như single, search, page, archive,….

Để hoàn thành một trang web tin tức bạn cần tạo thêm các file khác nữa. cụ thể:

Tạo file single.php – hiển thị một bài viết cụ thể

Bạn hãy tạo một file có tên “single.php” và code đoạn sau vào nhé.

<?php get_header(); ?>

 <div class="content-wrap">
 <h1 class="title"><?php the_title() ;?></h1>
 
 <?php while ( have_posts() ) : the_post(); ?>
 <p class="exce"> <?php the_excerpt();?> </p>
 <div class="content">
 <?php the_content(); ?>
 </div>
 <?php endwhile;?>
 </div>
 
<?php get_footer(); ?>

Trong file mình cũng sẽ import header và footer như trang index. ở bên trong đơn giản là chèn các các template tag vào các thẻ html để nó hiện thị nội dung.

Lệnh lặp While được áp dụng để lấy chi tiết ra nội dung, mô tả,…. Bạn có thể design lại cho đẹp nhé.

Tạo file search.php, tag.php và archive.php – hiển thị tìm kiếm và danh mục

Thông thường mình tạo 3 trang này y hệt nhau vì chúng đều có chung tính năng và cũng đôi khi có giao diện giống nhau. Bạn có thể code 1 và copy ra và đổi tên là được. Code mình viết đơn giản như bên dưới.

<?php get_header(); ?>

<div class="content-wrap">
 
 <?php while ( have_posts() ) : the_post(); ?>
 <div style ="width:33%; float: left">
 <?php the_post_thumbnail(full,array( "title" => get_the_title(),"alt" => get_the_title(),"style" => "width:100%; height:auto" ));?>
 <h2><?php the_title();?></h2>
 <p><?php the_excerpt();?></p>
 <a href="<?php the_permalink() ;?>">Xem thêm</a>
 
 </div>
 <?php endwhile;?>
 
 <div class="pages">
 <?php previous_posts_link( '&laquo; TRƯỚC', $loop->max_num_pages) ?>
 <?php next_posts_link( 'TIẾP &raquo;', $loop->max_num_pages) ?>
 </div>
 </div>
 
<?php get_footer(); ?>

Vậy là đã xong.

Còn tệp “page.php” thì bạn cũng vậy. Bạn có thể sử dụng lại file single.php copy ra và đổi tên. Như vậy cơ bản thì bạn đã hoàn thiện được website của mình rồi đấy.

Còn một số cái như author.php, 404.php,.. thì bạn có thể tìm hiểu thêm, mình nghĩ là làm được các trang trên thì 2 trang này không thành vấn đề. Nếu bạn cần giúp đỡ gì hãy comment bên dưới mình sẽ phản hồi nhé.

Nếu bạn thấy hữu ích đừng quên bấm like và chia sẻ nhé.

Các bài liên quan

Tuấn ĐC

Tuấn ĐC

Tôi thích tự do, làm những gì mình thích, thích đi nhiều nơi và học được nhiều thứ.

Liên hết bài viết: ""