Home > Wordpress > [Theme Development] Phần 10: Khởi tạo theme WordPress – phần 1

[Theme Development] Phần 10: Khởi tạo theme WordPress – phần 1

1. Cài đặt WordPress trên localhost và import dữ liệu mẫu

Chúng ta sẽ không bao giờ làm một theme trực tiếp trên host vì nó rất mất thời gian và không tiện chỉnh sửa mà sẽ làm tại localhost. Bây giờ bạn hãy tạo một website WordPress mới trên localhost nhé, bạn có thể dùng DesktopServer hoặc Ampps, ở đây mình dùng Ampps.

Sau đó bạn hãy tải file .xml chứa nội dung sẵn do WordPress làm để bạn dễ dàng test theme, nó sẽ bao gồm một vài category mẫu, tag mẫu, bài viết mẫu và menu mẫu. Tải Theme Unit Test.

Tải xong rồi thì bạn vào Wp-Admin -> Tools -> Import -> WordPress và import file .xml này vào.

Import file dữ liệu mẫu vào WordPress

Vậy là xong, nếu có thể bạn cũng nên vào Settings -> General, chỉnh lại múi giờ và cấu trúc ngày tháng lại cho phù hợp với website tiếng Việt luôn nhé.

2. Tạo theme WordPress

Để tạo được một theme, bạn vào thư mục wp-content/themes và tạo một thư mục đặt tên bất kỳ nhé, hình dưới là ví dụ mình tạo thư mục theme tên thachpham.

Tạo thư mục theme

Sau đó tại thư mục này, bạn tiếp tục tạo thêm các file sau:

  • style.css
  • index.php
  • header.php
  • footer.php
  • archive.php
  • single.php
  • functions.php
  • page.php
  • search.php

Chú ý: tất cả các file .php nhớ bắt đầu bằng thẻ mở <?php nhưng không có thẻ đóng nhé.
Tiếp đó, hãy tìm một tấm ảnh nào đó làm đại diện định dạng PNG và đặt tên là screenshot rồi bỏ vào thư mục này, ngang hàng với các file đã tạo ở trên. Nếu bạn chưa có thì có thể đặt tạm file này.

Cuối cùng là copy thư mục css, js, imgless_filenormalize.min.css và style.css từ thư mục giao diện HTML vào theme.

theme_dev_part10-3

Bây giờ chúng ta sẽ đi khai báo tên theme, tên tác giả để nó hiển thị trong Appearance -> Themes đã nhé, mở file style.css lên và viết thêm đoạn này vào trên cùng.

 /* Theme Name: Thach Pham Theme Theme URI: http://thachpham.com/wordpress Description: Theme đơn giản thực hành serie Lập trình theme WordPress Version: 1.0 Author: Thach Pham Author URI: http://thachpham.com */

Trong đó:

  • Theme Name: tên của theme
  • Theme URI: Địa chỉ website của theme
  • Description: Mô tả của theme.
  • Version: Phiên bản của theme.
  • Author: Tên của tác giả.
  • Author URI: Địa chỉ website của tác giả.

Bây giờ hãy thử save lại, sau đó vào Appearance -> Themes bạn sẽ thấy theme xuất hiện

theme_dev_part10-4

Hãy ấn nút Active lên để kích hoạt theme và dĩ nhiên bạn sẽ thấy website bạn trắng bóc do mình chưa viết gì vào file index.php cả mà.

Viết code cho file header.php

Đây là file đầu tiên mà chúng ta cần làm việc, mục đích là sẽ khai báo các thẻ head cơ bản cho theme cùng như làm phần logo. Hãy mở file index.html của giao diện mà chúng ta đã làm ra, copy từ đoạn đầu !DOCTYPE html cho đến div class="content".

Tại sao lại copy đến div class="content"? Bởi vì bạn nhìn code thì cũng có thể biết, sau này dù ở bất kỳ trang nào, chúng ta đều phải viết code những đoạn này nên ta sẽ đặt nó ở file header.php, rồi sau này chỉ cần gọi hàm get_header() ra mà thôi. Riêng phần Featured Post, sau này mình sẽ chỉ cách chỉnh nó chỉ hiển thị ở trang chủ nếu bạn muốn.

Sau khi copy xong, nhiệm vụ của chúng ta bây giờ là sửa lại tất cả các đoạn text thông thường thành mã PHP của WordPress hết để nó có thể thay đổi tuỳ theo thiết lập trong WordPress. Mình sẽ làm từng dùng cho các bạn dễ hiểu. Những đoạn mà mình không đề cập tới thì là giữ nguyên.

Tìm đoạn

         <link href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=normalize.min.css" rel="stylesheet" /> <!--Reset CSS-->

Ở đây chúng ta sẽ không thể nào khai báo kiểu này được vì nó sẽ gặp lỗi khi load giao diện ở các trang bài viết/page,…Ta sẽ sử dụng hàm bloginfo('template_url') để khai báo đường dẫn của theme hiện tại để nó load cho chính xác. Sửa lại thành.

         <link href="<?php bloginfo('template_url'); ?>/normalize.min.css" rel="stylesheet" /> <!--Reset CSS-->

Để xem bạn đã làm đúng hay chưa, hãy mở file index.php và viết

 <!--?php <br ?--> get_header();

Sau đó ra ngoài trang chủ và xem source, bạn sẽ thấy nó in đường dẫn ra thế này là đúng

theme_dev_part10-5

Tương tự, chúng ta làm như thế với các file CSS khác bên dưới, kể cả style.css.

         <!---Insert CSS-->                 <link href="<?php bloginfo('template_url'); ?>/normalize.min.css" rel="stylesheet" /> <!--Reset CSS-->                 <link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet" media="screen,handheld" /><!--Default CSS-->                 <link href="<?php bloginfo('template_url'); ?>/css/mobile.css" rel="stylesheet" media="screen and (min-width: 18.750em)" type="text/css" />                 <link href="<?php bloginfo('template_url'); ?>/css/tablet.css" rel="stylesheet" media="screen and (min-width: 34.375em)" type="text/css" />                 <link href="<?php bloginfo('template_url'); ?>/css/desktop.css" rel="stylesheet" media="screen and (min-width: 48em)" type="text/css" />                 <!--IE9 không hỗ trợ query media, do vậy ta sẽ dùng respond.js để bật Responsive cho IE9-->         <!--[if lt IE 9]>             <script src="<?php bloginfo('template_url'); ?>/js/vendor/html5-3.6-respond-1.1.0.min.js"></script>         <![endif]-->

Đi xuống một xíu nữa chúng ta sẽ đi tới phần .top-bar, nhưng ở đây tạm thời chúng ta không sửa gì cả mà sẽ làm ở cuối serie này, tức là tạo một Theme Options để đổi cái chữ này.

Ở phần logo của trang hiện tại ta có

             <div class="site-title">                 <a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23"><h1>Thach Pham</h1></a>             </div>

Sửa thành

             <div class="site-title">                 <a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23"><h1><?php bloginfo('name'); ?></h1></a>             </div>

Tham khảo hàm bloginfo().

Ngay phía dưới nữa là phần menu của website.

             <div class="header-menu">                 <a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23" class="show-menu">Menu</a>                 <ul>                     <li><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Trang chủ</a></li>                     <li><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Liên hệ</a></li>                     <li>                         <a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Dịch vụ</a>                         <ul class="sub"> <!--Start sub menu-->                             <li><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Thiết kế web</a></li>                             <li><a href="">SEO</a></li>                             <li><a href="">Quản trị</a></li>                         </ul> <!--end sub menu-->                     </li>                     <li><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Hợp tác</a></li>                 </ul>             </div>

Nghĩa là bây giờ chúng ta sẽ thay thế code trong khu vực này thành đoạn code hiển thị menu trong WordPress. Như vậy, trước tiên ta sẽ cần tạo một menu cho theme này. Và để tạo menu, chúng ta sẽ sử dụng hàm register_nav_menu(). Hãy đặt đoạn code sau vào file functions.php

 register_nav_menu('main-menu', __('Menu Chính'));

Save lại và truy cập vào Appearance -> Menus -> Manage Locations. Ở đây bạn sẽ thấy có một location mới mang tên Menu Chính mà ta tạo ở trên, hãy chọn cho nó một menu bất kỳ, nhưng tốt nhất hãy chọn menu Short nếu bạn dùng Theme Unit Test mà mình nhắc ở đầu bài.

Kích hoat menu WordPress

Chọn xong rồi thì làm sao nữa nhỉ? Vâng, đó chính là làm thế nào để cho cái menu này hiển thị ra ngoài theme vào đúng vị trí mà ta cần chèn, nghĩa là thay thế cái menu trong giao diện HTML.

Để hiển thị menu mà ta đã tạo từ hàm register_nav_menu(), chúng ta sẽ dùng một hàm khác có tên là wp_nav_menu(). Hãy nhìn lên đoạn code tạo menu, bạn thấy tham số 'main-menu' không? Đó chính là tham số được gọi là location trong hàm tạo menu, và cái hàm wp_nav_menu này sẽ hiển thị một menu nào đó bằng cách khai báo tham số location của hàm register_nav_menu.

Hãy nhìn lại đoạn code HTML tạo menu trong file header.php

             <div class="header-menu">                 <a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23" class="show-menu">Menu</a>                 <ul>                     <li><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Trang chủ</a></li>                     <li><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Liên hệ</a></li>                     <li>                         <a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Dịch vụ</a>                         <ul class="sub"> <!--Start sub menu-->                             <li><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Thiết kế web</a></li>                             <li><a href="">SEO</a></li>                             <li><a href="">Quản trị</a></li>                         </ul> <!--end sub menu-->                     </li>                     <li><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Hợp tác</a></li>                 </ul>             </div>

Ở đây, chúng ta sẽ bắt đầu xoá từ đoạn <ul> đến </ul> rồi thay thế bằng hàm wp_nav_menu, bởi vì hàm này nó đã bao gồm thẻ <ul>. Như vậy, ta có:

             <div class="header-menu">                 <a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23" class="show-menu">Menu</a>                 <?php                     if ( has_nav_menu( 'main-menu' ) ) {                           wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' => false ) );                      }                  ?>             </div>

Ở code trên mình có viết thêm một tham số 'container' => false vào. Nghĩa là mặc định nếu không khai báo tham số này thì menu bạn sẽ có thêm một thẻ <div> bao quanh nữa, nhưng do khi viết CSS ta có sử dụng dấu > để chỉ định thành phần con gần nhất nên nó sẽ không hoạt động. Vì vậy ta đặt tham số này là false để bỏ cái thẻ bao quanh đó đi.

theme_dev_part10-7

Kế tiếp là phần .featured-post, ở phần này chúng ta sẽ lấy bài viết trong một tag chỉ định ra, và trong bài này mình sẽ đặt tag này là featured.

Trước tiên bạn hãy vào sửa 3 bài viết bất kỳ để đặt tag tên là featured cho nó và thêm ảnh Featured Image đàng hoàng nhé. Nhưng muốn có tính năng Set Featured Image trong bài viết thì bạn phải bật tính năng này lên cho theme này, hãy chèn đoạn code sau vào file functions.php

         add_theme_support('post-thumbnails'); //Bật tính năng Set Featured Image cho bài viết         add_image_size('featured-thumb', 330, 335, true); //Size ảnh thumbnail của .featured-post.

Bây giờ ta cùng xem qua đoạn code in ra 3 bài viết nổi bật.

 <div class="featured-post">                 <div class="box">                     <div class="post">                         <img src="img/f-post-1.jpg" alt="Post 1">                         <h2 class="post-title"><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Không tiền thì cạp đất mà ăn à?</a></h2>                     </div>                 </div><!--end .box-->                 <div class="box">                     <div class="post">                         <img src="img/f-post-2.jpg" alt="Post 2">                         <h2 class="post-title"><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Đã tìm ra thuốc trị HIV</a></h2>                     </div>                 </div><!--end .box-->                 <div class="box">                     <div class="post">                         <img src="img/f-post-3.jpg" alt="Post 3">                         <h2 class="post-title"><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Tôi chuẩn man!</a></h2>                     </div>                 </div><!--end .box-->             </div>

Bạn có thể dễ dàng nhận thấy trong đoạn code trên, chúng ta sẽ thấy 3 bài viết được hiển thị với cấu trúc hoàn toàn giống nhau. Nghĩa là nó được đặt bên trong một class tên là .box. Như vậy, ở đây chúng ta sẽ dùng khái niệm Vòng lặp (Loop) trong PHP để lặp lại 3 lần cái đoạn .box.

Bây giờ tạm thời chúng ta xoá đi bớt 2 cái và chỉ để lại một cái .box mà thôi, ta có:

             <div class="featured-post">                 <div class="box">                     <div class="post">                         <img src="img/f-post-1.jpg" alt="Post 1">                         <h2 class="post-title"><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Không tiền thì cạp đất mà ăn à?</a></h2>                     </div>                 </div><!--end .box-->             </div>

Tới đây việc của chúng ta là chuyển đoạn nội dung mà mình bôi đậm thành một vòng lặp trong WordPress để nó lấy ra 3 bài viết từ tag tên featured.

Ngay trên thẻ <div class="box">, hãy viết một đoạn loop như sau:

                 <?php                      $  featured_post = new WP_Query('tag=featured&posts_per_page=3');                     if ( $  featured_post->have_posts() ): while( $  featured_post->have_posts() ) : $  featured_post->the_post();                 ?>

Hàm WP_Query() sẽ có nhiệm vụ lấy dữ liệu bài viết trong database dựa vào các tham số của nó, sau đó mình sẽ cho hàm the_post() thừa hưởng các thuộc tính của hàm WP_Query để truy xuất dữ liệu bởi vì hàm the_post() mặc định là hiển bài viết theo tham số được định sẵn. Từ đó, chúng ta sẽ sử dụng một số hàm con của các hàm query này để in các đối tượng bài viết như:

  • the_permalink(): Đường dẫn bài viết.
  • the_title(): Tiêu đề bài viết.
  • the_content: Nội dung cả bài viết.
  • ……….

Tham khảo:

Trong đoạn WP_Query('tag=featured&posts_per_page=3'); mình có 2 tham số chính đó là:

  • tag: Lấy bài viết trong một tag dựa theo slug của nó.
  • posts_per_page: Số bài viết lấy ra trên mỗi trang. Ở đây chúng ta không sử dụng tham số paged để làm pagination nên cứ hiểu là số bài viết cần lấy ra.

Đã là vòng lặp thì tất nhiên phải có điểm kết thúc đúng không? Do ta chỉ cần lặp trong cặp thẻ <div=”box”> thôi nên chúng ta sẽ đặt kết thúc vòng lặp ngay bên dưới đoạn </div><!--end .box-->

                 <?php                      endwhile;                      else :                         __('Chưa có bài viết nào cả');                     endif;                 ?>

Nếu bạn không muốn in lời nhắn Chưa có bài viết nào khi không có bài thì có thể xoá đoạn else đó đi cũng được. Nhân đây mình cũng nói cho bạn biết vì sao mình sử dụng __() để viết một đoạn text luôn, đó là vì ở cuối serie này mình sẽ hướng dẫn bạn làm file Việt Hoá. Do vậy nếu một text nào đó được đặt bên trong hàm này thì phần mềm Poedit sẽ tự động hiểu đó là một chuỗi (string) có thể hỗ trợ thông dịch.

Ok, bây giờ ta tạm thời có đoạn code hoàn chỉnh cho khu vực .featured-post như sau:

             <div class="featured-post">                 <?php                      $  featured_post = new WP_Query('tag=featured&posts_per_page=3');                     if ( $  featured_post->have_posts() ): while( $  featured_post->have_posts() ) : $  featured_post->the_post();                 ?>                 <div class="box">                     <div class="post">                         <img src="img/f-post-1.jpg" alt="Post 1">                         <h2 class="post-title"><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23">Không tiền thì cạp đất mà ăn à?</a></h2>                     </div>                 </div><!--end .box-->                 <?php                      endwhile;                      else :                         __('Chưa có bài viết nào cả');                     endif;                 ?>             </div>

Tiếp tục, đoạn mình bôi đậm phía trên là những gì mà chúng ta sẽ cần sửa lại bằng Template Tags để nó có thể hiển thị bài viết. Thay đoạn đó thành:

                         <?php if( has_post_thumbnail() ) { the_post_thumbnail('featured-thumb'); } ?>                         <h2 class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>

Đoạn 1 là cả đoạn để in featured image của bài viết đó ra. Hàm has_post_thumbnail() là một hàm điều kiện để kiểm tra xem bài viết đó đã có featured image hay chưa, nếu có rồi thì nó sẽ thực thi hàm the_post_thumbnail() để in cái hình ra. Trong hàm này ta có tham số 'featured-thumb' để lấy cái size hình mà ở đầu bài chúng ta đã thêm bằng hàm add_image_size().

Dòng thứ 2 ta có hàm the_permalink() để hiển thị link của bài viết và the_title() để hiển thị tiêu đề của bài viết.

Và thế là bây giờ ta có kết quả như thế này rồi nhé…

theme_dev_part10-8

Vậy là coi như chúng ta tạm xong phần header.php. Tới đây bài cũng khá dài và có khá nhiều khái niệm mới rồi nên mình tạm pause tại đây. Ở bài tiếp theo mình sẽ hướng dẫn qua file footer.php bởi vì file này có liên quan khá mật thiết với file header.php ở các thẻ đóng.

Đừng quên hỏi lại mình ở phần bình luận nếu bạn còn thắc mắc nhé.

Theo ThachPham blog

About Huy Nguyễn

Chào mọi người, mình là Huy. Mình thích rất nhiều thứ liên quan đến máy tính, thích web thích lập trình, thích thiết kế ... :3. Thích nhiều thứ, hiện tại mình đang tìm hiểu về Wordpress bạn nào có hứng thú thì trao đổi thêm vs mình nha.

Check Also

Theme wordpress Balance YooTheme

Chủ đề thiết kế đẹp và sạch sẽ này là thực sự linh hoạt và …

Leave a Reply

%d bloggers like this: