Hướng dẫn thiết kế theme wordpress

This entry is part 5 of 8 in the series Wordpress for Beginner

wp-content/uploads/2013/12/creating-wordpress-theme-from-static-html-screengrab-300x286.jpg

Tiếp tục loạt bài viết về hướng dẫn thiết kế theme wordpress, trong bài viết này chúng ta sẽ học được cách theme một Page tempate vào trong hệ thống website của chúng ta

Wordpress rất ưu việt ở chỗ, nó cung cấp cho chúng ta nhiều dạng format bài viết khác nhau, và Page Template cũng là một dạng format rất mạnh.
Với Page Template, bạn có thể thiết kế một catalog list ra bài viết, trang liên hệ, trang giới thiệu sản phẩm, menu sản phẩm… Nói chung nó sẽ cung cấp cho bạn tất tần tật những thứ bạn cần ngoài định dạng Post Format ra.
Nguyên liệu cần cho bài học

Một bộ code editor
Một trình duyệt để test thành quả
Một phần mềm chỉnh sửa ảnh, có thể sử dụng ngay Paint trong window
Nếu bạn sử dụng localhost, thì cần cài thêm một số server ảo như EasyPHP, XAMPP….
Nếu bạn không có quyền truy cập thằng vào host, thì cần có một account FTP để upload code.

Tổng quan về các file Tempate

Như đã nói ở trên, wordpress cung cấp cho chúng ta nhiều dạng file template khác nhau, phục vụ các nhu cầu khác nhau, trong đó có các dạng:

File index.php, đây là một file quan trọng trong wordpress, xác định đây là trang chủ cho website của bạn
File Page.php hiển thị những trang có nội dung tĩnh như phần Contact, About…
File Single.php hiển thị nội dung bài viết
File archive.php hiển thị những bài viết dạng lưu trữ – bạn sẽ được học trong những bài viết sau
File template dành riêng cho những format bài viết khác nhau
File template dành riêng cho những format categories, tags, hay taxonomy terms khác nhau.

Và bài ngày hôm nay chúng ta sẽ đi học cách thiết kế một page template trong wordpress.

Tạo một Page Template

Bước đầu tiên, bạn vào folder chứa theme của chúng ta, tạo một file có tên page.php sau đó thêm đoạn code sau

<?php
/**
 * The template for displaying all pages.
 */
get_header(); ?>
  <div class="two-thirds" id="content"></div>
  <!-- #content-->
  <?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php

/**

* The template for displaying all pages.

get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Với đoạn code trên, chúng ta đã kết nối 3 file khác nhau: Header file, sidebar và footer lại, nội dung của Page sẽ được hiện thị trong cặp thẻ div có id="content"

Loop

Bây giờ, làm sao để lấy được nội dung từ database với định dạng là Page format để hiển thị ra? Để làm được việc này, bạn thêm đoạn code sau vào bên trong thẻ div bên trên

<?php
   // Run the page loop to output the page content.
   if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
      <article id="post-<?php the_ID(); ?>">>
 
         <?php if ( ! is_front_page() ) { ?>
            <h2 class="entry-title"></h2>
         <?php } ?>
         <section class="entry-content">
            <?php the_content(); ?>
         </section><!-- .entry-content -->
      </article>
      <!-- #post-## -->
 
   <?php endwhile; ?>

<?php

// Run the page loop to output the page content.

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

<?php if ( ! is_front_page() ) { ?>

<?php } ?>

<?php the_content(); ?>

</section>

</article>

<?php endwhile; ?>

Như vậy chúng ta đã hoàn thành file Page.php rồi đó, cùng thử chiêm ngưỡng thành quả xem nào

Tạo custome Page

Tiếp theo, chúng ta sẽ tạo một custome page để hiển thị những thứ chúng ta muốn. Bạn cũng có thể tham khảo bài viết về Custome Page trên izwebz tại đây.
Ở đây, tôi sẽ hướng dẫn nhanh các bạn tạo một custome page cho riêng mình.
Đầu tiên, bạn vào thư mục chứa theme, duplicate file page.php sau đó đổi lại tên với bất kỳ tên nào với điều kiện có tiền tố page-là được, ví dụ như tôi đặt tên là page-full-width.php chẳng hạn, sau đó bạn mở ra, trong phần chú thích ở phần đầu của file, bạn thêm dòng

/**
 * Template Name: Full-width page, no sidebar
 */

/**

* Template Name: Full-width page, no sidebar

Dòng này sẽ thông báo cho wordpress biết để lấy ra các định dạng page khác nhau. Với Page này, chúng ta sẽ cho hiển thị full nội dung mà không có phần sidebar bên tay phải nữa. Bạn tìm dòng

<div class="two-thirds" id="content">

1	<div class="two-thirds" id="content">

và thay bằng

<div class="full-width" id="content">

1	<div class="full-width" id="content">

Chỉ là đổi tên class đi thôi mà. Sau đó tìm và xóa đoạn code sau đi

<?php get_sidebar(); ?>

1	<?php get_sidebar(); ?>

Vậy là chúng ta đã tạo ra một custome page cho riêng mình một cách đơn giản rồi đó, cũng theo cách trên, bạn có thể tùy ý design lại file custome page của mình theo ý muốn bằng css hoặc có thể dùng các hàm trong wordpress để lấy ra danh sách bài viết theo các format khác nhau cũng được.

Cách sử dụng custome page

Để sử dụng được custome page mà chúng ta vừa tạo, thì bạn login vô wordpress của bạn, sau đó vào phần Pages, điền đầy đủ nội dung, cuối cùng để ý tới phần Page Attribute, chọn loại custome page mà bạn đã tạo

Sau đó chúng ta thử view xem kết quả thế nào

Series Navigation<< Hướng dẫn thiết kế theme wordpress – File FooterHướng dẫn thiết kế theme wordpress – Archive Template >>

Hướng dẫn thiết kế theme wordpress – Page Template

Tổng quan về các file Tempate

Tạo một Page Template

Loop

Tạo custome Page

Cách sử dụng custome page

Like this:

Có liên quan

Nguyễn Trung Hiếu

Tổng quan về các file Tempate

Tạo một Page Template

Loop

Tạo custome Page

Cách sử dụng custome page

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu