- Hướng dẫn thiết kế theme wordpress – Khởi động
- Hướng dẫn thiết kế theme wordpress – Upload code lên host
- Hướng dẫn thiết kế theme wordpress – Hiển thị bài viết
- Hướng dẫn thiết kế theme wordpress – File Footer
- Hướng dẫn thiết kế theme wordpress – Page Template
- Hướng dẫn thiết kế theme wordpress – Archive Template
- Hướng dẫn tạo theme WordPress với Bootstrap 3 – Header và Footer
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.phphiển thị những trang có nội dung tĩnh như phần Contact, About… - File
Single.phphiển thị nội dung bài viết -
File
archive.phphiể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
|
1 2 3 4 5 6 7 8 9 |
<?php /** * The template for displaying all pages. */ get_header(); ?> <div class="two-thirds" id="content"></div> <!-- #content--> <?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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; ?> |
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
|
1 2 3 |
/** * 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
|
1 |
<div class="two-thirds" id="content"> |
và thay bằng
|
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
|
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
