Hướng dẫn Thiết kế theme wordpress cực chi tiết từ A-Z

Theme là thư mục bắt buộc có trong website của chúng ta. Tất cả những công ty thiết website bằng WordPress muốn chỉnh sửa giao diện đều phải phải thông qua thư mục này. Đó là nơi WordPress cho phép chúng ta thay đổi, chỉnh sửa giao diện. Mỗi website có một theme riêng biệt tạo nên bản sắc riêng cho website. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thiết kế theme cho wordpress không thể chi tiết hơn.

---

Bước 1: Lên ý tưởng thiết kế Theme WordPress

Ở đây, chúng tôi xin lấy ví dụ thiết kế theme cho một trang website tin tức WordPress.

Ý tưởng: Thiết kế theme WordPress tin tức.

Bố cục website: Trang web mà chúng ta sắp xây dựng sẽ gồm 4 phần chính:

1. Header: Phần tiêu đề của website và thanh menu.
2. Main content: Hiển thị các bài viết hiện có.
3. Sidebar: Chứa các widget.
4. Footer: Phần chân trang của website gồm các widget và thông tin bản quyền.

Bước 2: Tạo cấu trúc thư mục khi thiết kế theme WordPress

Trong một cấu trúc theme WordPress sẽ có các tệp tin (template) quan trọng như functions.php, index.php, style.css,…và đó là những tệp tin mà chúng ta sẽ làm. Ngoài ra chúng ta sẽ có thêm các tệp tin content.php, content-none.php,…để dễ dàng cho việc quản lý các vòng lặp để hiển thị các nội dung bài viết.

1. Tạo thư mục chứa theme

Vào thư mục nguồn của website: /wp-content/themes và tạo một thư mục mà chúng ta muốn chứa theme (Ở đây Chúng tôi tạo thư mục với tên là: doankhien)

2. Tạo tệp CSS

Tạo tệp tin style.css để khai báo thông tin của theme : Tên theme, mô tả, tên tác giả…

/* 
*Theme Name: doankhien
*Theme URI: https://mdigi.vn/ 
*Author: Nguyen Doan Khien MDIGI
*Author URI: https://mdigi.vn/author/doankhien/
*Phiên bản: 1.0 
*License: GNU General Public License v2 or later 
*License URI: http://www.gnu.org/licenses/gpl-2.0.html 
*Tags: basic,two-colum,post-format 
*Text Domain: doankhien
*Language Folder: /languages 
*/

3. Tạo các tệp hiển thị

Tiếp theo đó, tạo lần lượt các tệp tin sau: functions.php, index.php, header.php, footer.php, page.php, single.php, content.php, content-none.php, archive.php, search.php, author.php, 404.php, sidebar.php….

Tiếp tục, tạo một thư mục tên là templates trong theme và tạo các tệp tin sau vào thư mục đó, các tệp tin này sẽ là custom page template: full-width.php, contact.php.

Đây là hình ảnh về thư mục chúng ta vừa tạo :

Bây giờ chúng ta vào Bảng tin -> Giao diện -> Themes sẽ thấy theme của chúng ta vừa tạo đã được hiển thị ra.

Bước 3: Viết code cho tệp tin function.php

Một trong những tệp tin quan trọng nhất của một theme WordPress đó là tệp tin functions.php. Đây là một tệp tin bắt buộc trong theme và nó sẽ chứa các đoạn code nguồn mà chúng ta muốn nó luôn được load mỗi khi tải website. Toàn bộ code PHP cần thiết trong một theme (ngoại trừ các code hiển thị nội dung) thì sẽ đều được viết vào tệp tin này.

1. Trước hết chúng ta cần khai bao những hằng số và hàm cần thiết:

Thiết lập các hằng dữ liệu quan trọng

Chúng ta sẽ thiết lập một số hằng thường dùng trong quá trình thiết kế theme như: dường dẫn tới thư mục theme (THEME_URL):

define( 'THEME_URL', get_stylesheet_directory() );

Thiết lập chiều rộng nội dung ($content_width):

 if ( ! isset( $content_width ) ) { $content_width = 620; }

Chúng ta thiết lập giá trị cho biến $content_width tức là thiết lập chiều rộng tối đa mà phần hiển thị nội dung (không tính sidebar) mà theme được phép sử dụng. Việc khai báo như vậy sẽ giúp cho các thành phần hiển thị trong nội dung như các mã nhúng oEmbed, hình ảnh,… sẽ không bị tràn ra ngoài khung nội dung.

Hàm thiết lập chức năng của Theme

Hàm này sẽ có chức năng chèn vào điểm neo (hook) init của WordPress để khởi tạo các chức năng sẽ được theme hỗ trợ, như post format, customizer,…

if ( ! function_exists( 'doankhien_theme_setup' ) ) { function doankhien_theme_setup() { } add_action ( 'init', 'doankhien_theme_setup' ); }

Ở đây mình đặt tên hàm này là: doankhien_theme_setup(). Trong hàm doankhien_theme_setup() chúng ta sẽ thiết lập một số tính năng quan trọng :

Thiết lập language cho theme

Chúng ta sẽ khai báo thư mục chứa ngôn ngữ trong theme, và khai báo textdomain để load các chuỗi ngôn ngữ có trong theme nhằm mục đích cho theme có thể đọc được các tệp tin ngôn ngữ và người dùng có thể dịch ra nhiều ngôn ngữ khác nhau bằng việc sửa/tạo tệp tin *.po.

$language_folder = THEME_URL . '/languages'; load_theme_textdomain( 'doankhien', $language_folder ); 

Thêm chức năng thumbnail cho post

Đây là chức năng để hiện thị ảnh đại diện (Featured Image) cho bài viết:

 add_theme_support( 'post-thumbnails' );

Thêm chức năng title-tag

add_theme_support( 'title-tag' );

Thêm chức năng Post Format

Chức năng Post Format nghĩa là chúng ta có thể tùy biến việc hiển thị post theo các định dạng như Video, Image, Gallery, Quote,…

add_theme_support( 'post-formats', array( 'image', 'video', 'gallery', 'quote', 'link' ) );

Thêm chức năng custom background

Chức năng này sẽ giúp cho người dùng có thể đổi lại màu nền hoặc thêm ảnh nền cho website dễ dàng thông qua Customize.

$default_background = array( 'default-color' => '#e8e8e8', ); 
add_theme_support( 'custom-background', $default_background );

Tạo menu location

register_nav_menu ( 'primary-menu', __('Primary Menu', doankhien) );

Tạo sidebar

$sidebar = array( 
'name' => __('Main Sidebar', 'doankhien'), 
'id' => 'main-sidebar', 
'description' => 'Main sidebar for Doankhien theme', 
'class' => 'main-sidebar', 
'before_title' => '<h3 class="widgettitle">', 
'after_title' => '</h3>' 
); 
register_sidebar( $sidebar );

Bước 4: Viết code cho tệp tin header.php

Tại tệp tin này, chúng ta sẽ khai báo các thẻ HTML cần thiết mà trong một tài liệu HTML chuẩn đều có như <html>, <head>, <body>,… Các thẻ này chỉ bao gồm phần thẻ mở còn phần thẻ đóng sẽ được viết ở tệp tin footer.php.

1. Trong tệp tin header.php chúng ta sẽ khai báo đoạn code HTML như sau:

<!DOCTYPE html> 
<html "<?php language_attributes(); ?>" /> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>" /> 
<link rel="profile" href="http://gmgp.org/xfn/11"/> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"/> 
<?php wp_head(); ?> 
</head> 
<body <?php body_class(); ?> > 
<div id="container">

Trong đó :

• Hook wp_head(): Đây là điểm neo để giúp WordPress hiểu được đây là khu vực thẻ của theme chúng ta để WordPress có thể tự thêm các thành phần cần thiết lên, cũng như các plugin khác có muốn can thiệp vào khu vực này thì cũng sẽ dò qua hook wp_head().
• body_class(): Đây là hàm trả về các class tượng trưng cho từng trang.
• Hàm language_attributes(): hiển thị thuộc tính ngôn ngữ cho thẻ .
• Hàm bloginfo(): hiển thị thông tin về trang web dùng cho thẻ .

Tiếp theo, chúng ta có thể hiển thị tên website, mô tả website và thanh menu.

Lưu ý: Chúng ta nên tạo hàm riêng cho các phần hiển thị ở template trong tệp tin function.php thay vì viết code trực tiếp trong các template để thuận tiện cho việc quản lý và chỉnh sửa.

2. Hàm hiển thị logo

Chúng ta mở tệp tin function.php và khai báo hàm hiển thị logo (Ví dụ, mình đặt tên hàm này là doankhien_hearder()) ở trong đó với đoạn code sau:

if(!function_exists('doankhien_header')){ 
function doankhien_header(){ ?> 
<div class="site-name">
<?php 
if(is_home()){ 
printf('<h1><a href="%1$s" title ="%2$s"> %3$s </a> </h1>', home_url(), 
get_bloginfo('description'), 
get_bloginfo('sitename') ); 
} else{ 
printf('<p><a href="%1$s" title ="%2$s"> %3$s </a> </p>', home_url(), 
get_bloginfo('description'), 
get_bloginfo('sitename') ); 
} ?> 
</div> 
<div class="site-description">Information Technology for Your Life </div> 
<?php }
}

Các tham số như %1$s, %2$s, %3$s là từng tham số tương ứng với 3 hàm dữ liệu nằm bên dưới nó, cụ thể:

• %1$s: home_url() – đường dẫn của website
• %2$s: get_bloginfo( ‘description’ ) – mô tả website
• %3$s: get_bloginfo( ‘sitename’ ) – tên website Đoạn code trên có nghĩa là tên website sẽ được hiển thị với thẻ
  ở trang chủ, còn các trang khác thì nó sẽ được hiển thị bằng thẻ .

3. Hàm hiển thị menu

Chúng ta sẽ tạo ra một hàm ở trong tệp tin function.php để hiển thị menu (Ví dụ: đặt tên hàm là: doankhien_menu( $menu )).

if(!function_exists('doankhien_menu')) { 
function doankhien_menu($menu){ 
$menu=array( 
'theme_location'=>$menu, 
'container'=>$menu, 
'container_class'=> $menu ); 
wp_nav_menu($menu); 
}

Trong đó, hàm wp_nav_menu() là hàm hiển thị menu. Hàm này sẽ được truyền tham số $menu là một mảng slug của menu mà chúng ta cần gọi ra và sẽ tự áp dụng tên slug đó vào làm class cho menu hiển thị.

Tiếp theo, chúng ta sẽ gọi 2 hàm doankhien_header() và doankhien_menu() vừa tạo vào trong phần của tệp tin header.php để chúng hiển thị trong trên website.

<div id="container"> 
<div class="logo"> 
<?php doankhien_header(); ?> 
<?php doankhien_menu('primary-menu'); ?> 
</div>

Chúng ta truy cập vào trang wp-admin, Giao diện -> Menu để đăng ký menu:

Cuối cùng để gọi template header.php ở các template khác chúng ta sẽ thêm đoạn code sau: <?php get_header() ?>.

Bước 5: Viết code cho tệp tin footer.php

Đây là phần chân trang của website. Ở tệp tin footer.php, chúng ta sẽ có các thẻ đóng của các thẻ <body> , <html> và thẻ <div class="container">. Ngoài ra, chúng ta có thể thêm các widget, liên kết và thông tin bản quyền cho website.

Trong tệp tin function.php chúng ta dùng hàm register_sidebar() tương tự như phần tạo Sidebar chính để tạo thêm 4 widget cho footer: first-footer-widget-area, second-footer-widget-area, third-footer-widget-area, fourth-footer-widget-area.

Trong tệp tin footer.php, ta có đoạn code sau:

<div id="footer-widgets" class="clearfix"> 
<aside class="fatfooter" role="complementary"> 
<div class="first quarter left widget-area"> 
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?> </div> 
<div class="second quarter widget-area"> <?php dynamic_sidebar( 'second-footer-widget-area' ); ?> </div> <div class="third quarter widget-area"> <?php dynamic_sidebar( 'third-footer-widget-area' ); ?> </div> 
<div class="fourth quarter right widget-area"> <?php dynamic_sidebar( 'fourth-footer-widget-area' ); ?> </div> 
</aside> 
</div> 
<div id="footer"> 
<div id="copyrights"> 
&copy; <?php echo date('Y'); ?> <a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a> 
</div> 
</div> <!-- #footer --> 
</div> <!—- end container --> 
<?php wp_footer(); ?> 
</body> <!—- end body --> 
</html> <!—- end html -->

Hàm wp_footer() cũng được gọi để WordPress xác định được hook của phần footer. Tương tự như phần header, chúng ta dùng hàm get_footer() để gọi phần footer ở các template khác.

Bước 6: Viết code cho tệp tin index.php

Đây là tệp tin mà nó sẽ làm trang chủ mặc định khi ta thiết kế theme WordPress và thường ở phần này chúng ta sẽ hiển thị danh sách các bài viết mới nhất trên website. Các bài viết này có thể hiển thị nội dung đầy đủ hoặc rút gọn tùy theo ý muốn.

Trong tệp tin index.php, trước hết chúng ta sẽ dùng 2 hàm: get_header() để gọi phần header và get_footer() để gọi phần footer. Code hiển thị nội dung ra website sẽ được viết giữa hai đoạn này. Tiếp theo, chúng ta có thể lựa chọn bố cục website tùy theo ý muốn của mình, miễn sao cân đối vào đẹp mắt là được. Ở đây, mình chia phần nội dung ra thành 2 phần: phần 1 hiển thị các bài viết nằm bên trái và phần 2 sidebar nằm bên phải.

<?php get_header(); ?> 
<div class="content"> 
<div id="main-content"> </div> 
<div id="sidebar"> </div> 
</div> 
<?php get_footer(); ?>

Chúng ta có class .content dùng để bao bọc xung quanh phần hiển thị nội dung và sidebar. Sau đó, ID #main-content là khung hiển thị nội dung và #sidebar là khung hiển thị sidebar của website. Trong phần #main-content, chúng ta sẽ một vòng lặp (loop) để hiển thị tất cả các bài viết đang có ra ngoài trang chủ của website:

<div id="main-content"> 
<?php if(have_posts() ): while (have_posts()) : the_post(); ?> 
<?php get_template_part('content',get_post_format()); ?> 
<?php endwhile?> 
<?php else : ?> 
<?php get_template_part('content','none'); ?> 
<?php endif;?> 
</div>

Hàm get_template_part( 'content', get_post_format()) sẽ load tệp tin content $format.php trong thư mục theme. $format là tên định danh cho từng loại Post Format như video, audio, image,…Nếu bài viết đó chưa chọn Post Format thì nó sẽ load tệp tin content.php.

Hàm get_template_part( 'content', 'none' ) sẽ load tệp tin content-none.php trong thư mục theme và tệp tin này chúng ta sẽ viết nội dung hiển thị thông báo query này chưa có dữ liệu.

Ở phần #sidebar, chúng ta sử dụng hàm get_sidebar() để hiển thị sidebar:

<div id="sidebar"> <?php get_sidebar(); ?> </div>

Bước 7: Viết code cho tệp tin content.php

Khi thiết kế theme WordPress, cần quan tâm tới template content.php dùng để hiển thị nội dung của post (bài viết)/page (trang).

Viết HTML cho content.php

Trong tệp tin content.php chúng ta khai báo đoạn HTML như sau :

<article id="post-<?php the_ID();?>" <?php post_class(); ?> > 
<div class="entry-thumbnail"> </div> 
<div class="entry-header"> </div> 
<div class="entry-content"> </div> 
</article>

Trong phần này, chúng ta cho mỗi bài viết hiển thị ra đều nằm trong thẻ <article> với ID là post-$id của post cùng với các class (lớp) tượng trưng cho bài viết đó. Tiếp đó, khu vực .entry-thumbnail sẽ dùng để hiển thị ảnh đại diện của bài viết. Phần .entry-header sẽ hiển thị tiêu đề và thông tin của bài viết. Phần .entry-content là hiển thị nội dung của bài viết.

Viết code cho .entry-thumbnail

Trong tệp tin function.php, ta khai báo một hàm (ví dụ: doankhien_thumbnail()) để hiển thị ảnh đại diện cho một bài viết như sau:

if ( ! function_exists( 'doankhien_thumbnail' ) ) { 
function doankhien_thumbnail( $size ) { // Chỉ hiển thumbnail với post không có mật khẩu
if ( ! is_single() && has_post_thumbnail() && ! post_password_required() || has_post_format( 'image' ) ) : ?> 
<figure class="post-thumbnail"><?php the_post_thumbnail( $size ); ?></figure> <?php 
endif; 
}}

Tiếp theo, chúng gọi hàm vừa tạo vào khu vực hiển thị thumbnail trong tệp tin content.php và khai báo tên size ảnh cần hiển thị:

<div class="entry-thumbnail"> <?php doankhien_thumbnail( 'thumbnail' ); ?> </div>

Viết code cho .entry-header

Phần này sẽ hiển thị tiêu đề của post và trong mỗi tiêu đề chúng ta sẽ dẫn một đường dẫn đến trang chi tiết của nó. Trước tiên, chúng ta khai báo hàm hiển thị tiêu đề (Ví dụ: doankhien_entry_header() trong tệp tin function.php:

if(!function_exists('doankhien_entry_header')){ 
function doankhien_entry_header(){ ?> <?php if(is_single()) : ?> 
<h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1> 
<?php else: ?> 
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> 
<?php endif;?> 
<?php 
} 
}

Và sau đó gọi hàm doankhien_entry_header() vào class .entry-header:

<header class="entry-header"> <?php doankhien_entry_header(); ?> </header>

Tiếp theo đó, chúng ta tạo hàm để hiển thị thông tin của bài viết như: người đăng, thời gian đăng…(ví dụ: doankhien_entry_meta()):

if(!function_exists('doankhien_entry_meta ')) { 
function doankhien_entry_meta(){ ?>
<?php if(!is_page()) : ?> 
<div class="entry-meta"> 
<?php 
printf(__('<span class="author"> %1$s </span>','doankhien'), get_the_author() ); 
printf(__('<span class="date-published"> %1$s </span>','doankhien'), get_the_date() ); 
printf(__('<span class="category"> %1$s</span>','doankhien'), get_the_category_list(',') ); 
echo '<br/>'; 
if(comments_open()): echo '<span class="meta-reply">'; 
comments_popup_link( 
__(' Leave a comment ','doankhien'), 
__(' One comment ','doankhien'), 
__(' % comment ','doankhien'), 
__(' Read all comment','doankhien') ); 
echo '</span>'; 
endif; ?> 
</div> 
<?php endif; ?> 
<?php 
}
}

Sau đó gọi hàm này trong class .entry-header ngay dưới hàm doankhien_entry_header():

<div class="entry-header"> 
<?php doankhien_entry_header(); ?> 
<?php doankhien_entry_meta(); ?> 
</div>

Viết code cho .entry-content

Chúng ta sẽ tạo hàm (ví dụ: doankhien_entry_content()) trong tệp tin function.php để hiển thị phần nội dung của bài viết và nút đọc thêm (readmore):

if(!function_exists('doankhien_entry_content') ) { 
function doankhien_entry_content () { if(!is_single() && !is_page()) { the_excerpt(); //hien thi noi dung rut gon 
} 
else { the_content(); // hien thi day du noi dung } 
$link_pages=array( 
'before' => __('<p> Page ','doankhien'), 
'after' => '</p>', 
'nextpagelink'=> __('Next page','doankhien'), 
'previouslink' =>__('Previous Page','doankhien') ); 
wp_link_pages($link_pages); 
} 
} 
function doankhien_readmore(){ 
return '<a class="read-more" href="'.get_permalink(get_the_ID()) . '">'. __('[ ... Read more ]','doankhien'). '</a>'; } 
add_filter('excerpt_more','doankhien_readmore');

Trong hàm này, chúng ta sẽ kiểm tra điều kiện:

• Nếu không là trang single hoặc page: Hiển thị nội dung rút gọn bằng hàm the_excerpt().
• Ngược lại: Hiển thị nội dung đầy đủ bằng hàm the_content().
• Sau đó, ta gọi hàm doankhien_entry_content() ra khu vực .entry-content

<div class="entry-content"> 
<?php doankhien_entry_content(); ?> 
<?php (is_single() ? doankhien_entry_tag() : '' ); ?> 
</div>

Hàm doankhien_entry_tag() được tạo để hiển thị các tag hiện có của bài viết. Trong hàm này chúng ta sửa dụng template tag get_the_tag_list().

Code cho tệp tin content-non.php

Tệp tin content-none.php hiển thị một thông báo chưa bài viết nào:

<div class="no-post"> 
<?php _e('Nothing post found.', 'doankhien'); ?> 
</div>

Bước 8: Viết code cho Post Format

Post Format nhằm mục đích hiển thị bài viết theo các định dạng khác nhau: hình ảnh, video, link…

Format content-image.php

<article id="post-<?php the_ID();?>" <?php post_class(); ?> > 
<div class"entry-thumbnail"> 
<?php doankhien_thumbnail('large'); ?> 
</div> 
<div class="entry-header"> 
<?php doankhien_entry_header(); ?> 
<?php $attachment = get_children(array ('post_parent' => $post->ID)); 
$attachment_number=count($attachment); 
printf(__('This image post contains %1$s photos','doankhien'),$attachment_number); ?> 
</div> 
<div class="entry-content"> 
<?php doankhien_entry_content(); ?> 
<?php (is_single() ? doankhien_entry_tag() : '' ); ?> 
</div> 
</article>

Format content-video.php

<article id="post-<?php the_ID();?>" <?php post_class(); ?> > 
<div class"entry-header"> 
<?php doankhien_entry_header(); ?> 
</div> 
<div class="entry-content"> 
<?php the_content(); ?> // Hiển thị toàn bộ nội dung 
<?php (is_single() ? doankhien_entry_tag() : '' ); ?> 
</div> 
</article>

Format content-link.php

<article id="post-<?php the_ID();?>" <?php post_class(); ?> > 
<div class"entry-thumbnail"> 
<?php doankhien_thumbnail('thumbnail'); ?> 
</div> 
<div class="entry-header"> 
<?php

$link=get_post_meta($post>ID,'format_link_url',true); 
$link_description = get_post_meta($post->ID, 'format_link_description',true); 
if(is_single()) { 
printf( '<h1 class="entry-title"><a href="%1$s" target="blank">%2$s </a></h1>' ,$link,get_the_title());
} 
else { 
printf( '<h2 class="entry-title"><a href="%1$s" target="blank">%2$s </a></h2>' ,$link,get_the_title()); 
}?> 
</div> 
<div class="entry-content"> 
<?php printf('<a href "%1$s"target="blank">%2$s</a>', $link,$link_description); ?> 
<?php (is_single() ? doankhien_entry_tag() : '' ); ?> 
</div> 
</article>

Bước 9: Code cho tệp tin single.php và page.php

Đây là 2 template sẽ được tải khi chúng ta vào một post (bài viết) hay một page (trang) cụ thể.

Viết code cho single.php

Cấu trúc của tệp tin single.php tương tự như tệp tin index.php. Chúng ta sẽ bổ sung thêm phần hiển thị tác giả và danh sách các bình luận hiện có. Trước tiên, chúng ta tạo tệp tin author-bio.php để khai báo khung tác giả:

<div class="author-box"> 
<div class="author-avatar "> 
<?php echo get_avatar(get_the_author_meta('ID')); ?> 
</div> 
<h3>
<?php printf('Written by <a href="%1$s">%2$s</a>', 
get_author_posts_url(get_the_author_meta('ID')), 
get_the_author());?>
</h3> 
<p><?php echo get_the_author_meta('description'); ?></p> 
</div>

Trong tệp tin single.php chúng ta sẽ dùng code của tệp tin index.php và bổ sung thêm template author-bio.php và hàm comments_template() để gọi khung bình luận:

<?php get_header();?> 
<div class="content"> 
<div id="main-content"> 
<?php if(have_posts()): while (have_posts()): the_post(); ?> 
<?php get_template_part('content',get_post_format()); ?> 
<?php get_template_part('author-bio'); ?> 
<?php comments_template(); ?> 
<?php endwhile?> 
<?php else : ?> 
<?php get_template_part('content','none'); ?> 
<?php endif;?> 
</div> <div id="sidebar"> 
<?php get_sidebar(); ?> 
</div> </div> 
<?php get_footer(); ?>

Viết code cho page.php

Hoàn toàn tương tự như tệp tin single.php. Chúng ta chỉ bỏ đi phần hiển thị danh sách bình luận.

Bước 10: Viết code cho các trang lưu trữ, trang tìm kiếm và trang 404

Khi thiết kế theme WordPress, chúng ta cần quan tâm các trang lưu trữ bao gồm các trang hiển thị các bài viết theo phân loại như Tag, Category, Lưu trữ theo thời gian và trang riêng của từng tác giả.

• archive.php – Template chung dành cho các taxonomy (phân loại).
• author.php – Template dành cho trang riêng của từng tác giả, nếu không có tệp tin này website sẽ load tệp tin archive.php.
• search.php – Template cho trang hiển thị kết quả tìm kiếm.
• 404.php – Template hiển thị thông báo lỗi 404 trên website WordPress.

Viết code cho archive.php

Hoàn toàn tương tự với trang index.php. Chúng ta sẽ bổ sung thêm phần hiển thị tên trang lưu trữ hiện tại bằng cách sử dụng hàm điều kiện để kiểm tra xem query trên trang hiện tại là Tag, Category, Day, Month hay là Year.

<div class="archive-title"> 
<?php if(is_tag()) :

printf(__('Posts tagged:%1$s', 'doankhien'), single_tag_title('',false)); elseif (is_category()): printf(__('Posts catagorized: %1$s','doankhien'),single_cat_title('',false)); elseif (is_day()) : printf(__('Daily Archives : %1$s','doankhien'),get_the_time('l, F j, Y')); elseif (is_month()) : printf(__('Monthly Archives : %1$s','doankhien'),get_the_time('F Y')); elseif (is_year()) : printf(__('Yearly Archives : %1$s','doankhien'),get_the_time('Y')); endif; ?> 
</div>

Kế tiếp, chúng ta viết thêm một đoạn code nữa để hiển thị mô tả của category và tag nếu có.

<?php if ( is_tag() || is_category() ) : ?> 
<div class="archive-description"> 
<?php echo term_description(); ?> 
</div> 
<?php endif; ?>

Viết code cho author.php

Tệp tin này là một phần trong template archive.php, mục đích là hiển thị các bài viết của một tác giả dựa theo truy vấn đang truy cập. Nội dung của tệp tin author.php hoàn toàn tương tự như tệp tin index.php. Chúng ta sẽ bổ sung thêm class .author-box để hiển thị thông tin tác giả.

<div class="author-box"> 
<div class="author-avatar "> 
<?php echo get_avatar(get_the_author_meta('ID')); ?> 
</div> 
<h3><?php printf('Written by <a href="%1$s">%2$s</a>', get_author_posts_url(get_the_author_meta('ID')), get_the_author());?></h3>
<p><?php echo get_the_author_meta('description'); ?></p> 
</div>

Viết code cho trang tìm kiếm (search.php)

Đây là trang hiển thị kết quả tìm kiếm trên website nếu website đang sử dụng trình tìm kiếm mặc định của WordPress. Chúng ta sử dụng phần code của trang index.php và thêm phần hiển thị thông tin về truy vấn tìm kiếm:

<div class="search-info"> 
<h2 class="page-title">
<?php _e( 'Search Results for:', 'doankhien' ); ?> 
<span><?php echo get_search_query(); ?></span>
</h2>
<hr> 
<?php $search_query=new WP_Query('s='.$s.'&showpost=-1'); 
$search_keyword=esc_html($s,1); 
$search_count=$search_query->post_count; 
printf(__('We found %1$s articles for your search query','doankhien'),$search_count); 
?> 
</div>

Viết code cho trang 404

Ở trang này chúng ta sẽ hiển thị một thông báo nội dung của trang này không tồn tại. Ngoài ra, chúng ta có thể thêm khung tìm kiếm và danh sách các tags, danh sách các categories có trong website để cho người truy cập có thể lựa chọn.

<?php get_header(); ?> 
<div class="content"> 
<div id="main-content"> 
<?php 
_e('<h2> 404 NOT FOUND ERROR !!! </h2>','doankhien'); 
_e('<p> The article you were looking for was not found, but maybe try looking again !','doankhien'); 
get_search_form(); 
_e('<h3> Content categories : </h3>','doankhien'); 
echo '<div class="404-cat-list">'; 
wp_list_categories(array('title-li'=> '')); 
echo '</div>'; 
_e('Tag cloud ','doankhien'); 
wp_tag_cloud();
?> 
</div> 
<div id="sidebar"> 
<?php get_sidebar(); ?>

</div> 
</div> 
<?php get_footer(); ?>

Bước 11: Viết code cho tệp tin sidebar.php

Khi thiết kế theme WordPress, chúng ta đã đăng ký một sidebar với tham số là $sidebar. Ở tệp tin sidebar.php chúng ta sẽ dùng hàm dynamic_sidebar() với tham số là ‘main-sidebar’ .

<?php 
if ( is_active_sidebar('main-sidebar') ) { 
dynamic_sidebar( 'main-sidebar' ); } 
else { 
_e('This is widget area. Go to Appearance -> Widgets to add some widgets.', 'doankhien'); }
?>

Hàm is_active_sidebar() dùng để kiểm tra xem main-sidebar đã có widget nào chưa, nếu sidebar đã được thêm widget vào thì hàm này sẽ hiển thị sidebar lên bằng hàm dynamic_sidebar(). Trường hợp nếu sidebar chưa có widget nào thì sẽ hiển thị một thông báo.

Chúng ta vào trang wp-admin, Giao diện -> Widget để thêm widget cho sidebar.

Bước 12: Viết CSS để thiết kế theme WordPress

Đây là phần quan trọng nhất của theme. Nó sẽ quyết định xem theme của chúng ta có đẹp và hoàn hảo hay không. Để có thể viết CSS cho theme chúng ta cần có kiến thức cơ bản về HTML và CSS.

Chèn CSS vào theme

Trong tệp tin funtion.php, chúng ta tạo một hàm mới. Ví dụ: doankhien_style(). Trong hàm này chúng ta dùng hàm wp_ register_style() để đăng ký tệp tin style.css và danh sách chờ của WordPress. Sau đó dùng hàm wp_enqueue_sytle() để gọi tệp tin này ra giao diện.

function doankhien_style(){ 
wp_register_style('main-style', get_template_directory_uri()."/style.css",'all') ; 
wp_enqueue_style('main-style'); 
} 
add_action('wp_enqueue_scripts','doankhien_style');

Viết CSS cho Theme

Chúng ta sẽ viết CSS từ khái quát cho tới cụ thể từng vùng theo các vùng chọn dựa vào các #id và .class đã được quy định trong suốt quá trình tạo theme.

Viết CSS cho các phần tử quan trọng trong website như : kiểu chữ, màu chữ, cỡ chữ, màu liên kết…

/*Global Style*/ 
html{ 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing:border-box; 
} 
body{ 
font-size: 16px; 
line-height:1.4; 
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale;
} 
img{ max-width: 100%; height: auto;} 
a{ color: #184C7D;text-decoration: none;} 
a:hover{ color: #2771B6; text-decoration: none;} 
input,input[type="submit"],button{ border: 1px solid #c8c8c8 !important; padding: 5px 10px;} 
h1{ font-size: 2.2em;} 
h2{ font-size: 20px;} 
h3{ font-size: 1.7em;} 
h4{ font-size: 1.5em;} 
h5{ font-size: 1.3em;} 
h6{ font-size: 1.1em;} 
table,table tr,table td { border: 2px solid #e7e7e7; padding: 5px; }

CSS chia cột website

Khi thiết kế theme WordPress, chúng ta phân trang ra làm 2 cột đó là cột hiển thị nội dung #main-content và #sidebar. Và tất cả thành phần trong website được bao bọc trong một vùng chọn là #container. Chúng ta sẽ đặt chiều rộng của website với kích thước là 960px cho toàn bộ website, chiều rộng của khung #main-content là 615px rồi nhảy qua trái với thuộc tính float: left, sau đó phần #sidebar sẽ có chiều rộng là 300px, cũng nhảy qua trái với thuộc tính float.

/**=== Chia cot website====*/ 
#container{ width: 960px; margin: 0 auto; } 
.content{ 
overflow: hidden;
padding: 15px; 
background-color: #fff; 
-moz-box-shadow: 0 0 9px 1px rgba(47,103,138,.20); 
-webkit-box-shadow: 0 0 9px 1px rgba(47,103,138,.20); 
box-shadow: 0 0 9px 1px rgba(47,103,138,.20); 
} 
#main-content{ 
overflow: hidden; 
float: left; 
width: 615px; 
} 
#sidebar{ 
overflow: hidden; 
float: left; 
width: 300px; 
margin-left: 15px; 
}

Chúng ta tiếp tục viết CSS cho các phần còn lại của website để tạo ra được giao diện theo ý muốn.

Bước 13: Tạo ngôn ngữ khi thiết kế theme wordpress

Chúng ta dùng phần mềm PoEdit để tạo tệp tin ngôn ngữ cho theme sau đó lưu lại với tên [mã-ngôn-ngữ].po. Ví dụ: vi.po vào thư mục language trong thư mục theme. Để kích hoạt ngôn ngữ tiếng việt, vào WordPress -> Settings -> General, phần Site Languages chọn là vi và lưu lại.

---

Lời kết

Như vậy là chúng ta đã hoàn thành việc tạo một giao diện cơ bản nhất cho website wordpress. Nếu còn thắc mắc nào vui lòng để lại bình luận hoặc liên hệ chúng tôi. Cám ơn bạn đã đọc bài viết này.

Chúc bạn thành công!