Home � Feat , lập trình wordpress , WordPress � [Theme Development] Phần cuối: Tạo các file cần thiết trong theme

[Theme Development] Phần cuối: Tạo các file cần thiết trong theme

Admin | 3:17 PM | 0 comments

Ở phần 11 chúng ta đã tìm hiểu qua về cách viết vòng lặp để hiển thị danh sách các bài viết ra trang chủ từ một giao diện HTML có sẵn. Tiếp tục phần cuối này, chúng ta sẽ bắt đầu viết code cho file single.php để hiển thị nội dung bài viết cũng như viết thêm cho những file khác quan trọng có trong theme để hoàn thành một theme.

Tải source ở cuối bài.

Tạo sidebar cho theme

Hiện tại sau khi làm xong phần 11 bạn thấy sidebar vẫn còn trống do chúng ta chưa tiến hành tạo sidebar cho nó. Để tạo sidebar chúng ta có 2 bước như sau:

1. Đăng ký sidebar trong file functions.php

Viết code như sau vào file functions.php để tạo một sidebar cho theme

// Tạo sidebar

if ( function_exists('register_sidebar') ) {

        register_sidebar(array(

                'name' => 'Sidebar Chính',

                'id' => 'main-sidebar',

                'before_widget' => '<div id="%1$s" class="widget %2$s">',

                'after_widget' => '</div>',

                'before_title' => '<h4 class="widget-title">',

                'after_title' => '</h4>'

        ));

}

Với đoạn code trên, mình xin giải thích các tham số như sau:

name: Tên của sidebar để hiển thị trong Appearance -> Widgets.

id: ID của sidebar, dùng để gọi nó hiển thị ngoài giao diện.

before_widget: Nội dung nằm trước mỗi widget.

after_widget: Nội dung nằm sau mỗi widget.

before_title: Nội dung nằm trước tiêu đề của mỗi widget.

after_title: Nội dung nằm sau tiêu đề mỗi widget.

Bây giờ bạn vào Appearance -> Widgets sẽ thấy có một sidebar vừa tạo.

Bây giờ cho dù bạn có đưa widget vào thì nó cũng không có hiện ra ngoài, lý do là chúng ta chưa viết code để hiển thị cái sidebar này ngoài theme.

2. Hiển thị sidebar ra theme

Do sidebar sẽ cần hiển thị ở nhiều nơi nên chúng ta sẽ không chèn trực tiếp vào file index.php hay single.php mà sẽ chèn vào file sidebar.php. Bạn chèn đoạn dưới đây vào file sidebar.php nhé, chưa có thì tạo.

<div class="sidebar">

    <div class="widget search">

        <form action="#">

            <input type="text" placeholder="Nhập từ khóa" />

            <input type="submit" value="Tìm">

        </form>

    </div>

    <div class="recent-post widget">

        <h4 class="widget-title">Bài mới đăng</h4>

        <ul>

            <li>

                <div class="post-thumbnail">

                    <img src="img/post_thumb_100x100.jpg" alt="Post">

                </div>

                <a href="#">10 phần mềm <a href="http://thachpham.com/chuyen-ngoai-le/cac-ung-dung-quan-ly-thoi-gian-va-cong-viec-ban-can-biet.html" title="quản lý thời gian">quản lý thời gian</a></a>

            </li>

            <li>

                <div class="post-thumbnail">

                    <img src="img/post_thumb_100x100.jpg" alt="Post">

                </div>

                <a href="#">10 phần mềm quản lý thời gian</a>

            </li>

            <li>

                <div class="post-thumbnail">

                    <img src="img/post_thumb_100x100.jpg" alt="Post">

                </div>

                <a href="#">10 phần mềm quản lý thời gian</a>

            </li>

        </ul>

    </div><!--end recent-post-->

    <div class="ads">

        <img src="img/ads-250x250.jpg" alt="Ads" />

    </div>

</div>

Sau đó mở file index.php và tìm

    </div><!--end .category-content-->

</div>

Rồi viết đoạn này vào bên dưới nó

<?php get_sidebar(); ?>

Xem ảnh cho dễ hiểu nhé.

Hàm phía trên là để bạn gọi file sidebar.php để nhúng vào file index.php, sau này ta làm tương tự với các file khác nếu bạn muốn hiển thị sidebar.

Nhưng bây giờ ở sidebar nó chỉ hiển thị các nội dung có sẵn bằng HTML mà ta đã viết vào, bây giờ ta sẽ cần đổi nó thành hàm gọi các widget trong sidebar đã tạo ra nhé.

Bạn mở file sidebar.php lên lại và xoá hết chỉ để lại mỗi 2 đoạn này:

Rồi bạn viết code gọi sidebar mà ta đã tạo ở bước đầu vào giữa nó, code gọi sidebar như sau:

<?php

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('main-sidebar') ) :

endif; ?>

Sau đó bạn quay trở lại Appearance -> Widgets và thêm các widget cần thiết vào sidebar nhé.

Nếu bạn có bỏ cái widget Search vào thì có thể nó sẽ không giống với demo mà chúng ta đã làm do nó khác class, cụ thể là class mặc định dành cho search form trong WordPress là.searchform mà mình lại viết CSS cho .search nên bây giờ chúng ta sẽ tạo một cái search form mới với class .search và không có Search label.

Bạn chèn đoạn này vào file functions.php nhé.

//Tuỳ biến searchform.

function custom_searchform( $form ) {

    $form = '<form role="search" method="get" class="search" action="' . home_url( '/' ) . '" >

    <input type="text" placeholder="'.__("Nhập từ khoá").'" value="' . get_search_query() . '" name="s" id="s" />

    <input type="submit" id="searchsubmit" value="Tìm" />

    </form>';

    return $form;

}

add_filter( 'get_search_form', 'custom_searchform' );

Sau khi chèn xong, form tìm kiếm của bạn sẽ tự động thay đổi thành cấu trúc mới mà không cần làm gì cả, và đó cũng là một ưu điểm của việc dùng add_filter để tuỳ biến trong WordPress.

Tiếp đến là widget hiển thị bài mới kèm ảnh thumbnail, chúng ta không thể dùng plugin vì code HTML đã được viết CSS theo phong cách của riêng mình, do vậy giải pháp tối ưu nhất ở đây là tự tạo một widget để hiển thị danh sách bài mới. Do quy trình tạo widget hơi phức tạp nên mình tạm thời chỉ cung cấp code rồi các bạn viết vào file functions.php nhé, mình sẽ giải thích về quy trình tạo widget ở bài khác.

Tiếp tục bạn cài thêm plugin Widget CSS Classes để tự thêm class tuỳ chỉnh vào widget.

Bây giờ bạn vào Appearance -> Widgets kéo widget tên Bài viết mới kèm thumbnail vào sidebar và thiết lập như sau:

Và chèn thêm đoạn này vào file style.css

.sidebar .recent-post img {

height: 90px;

}

Kết quả ta có là….

Quá đẹp cho đội bán dép.

Còn widget chèn ảnh quảng cáo thì bạn dùng Text widget rồi chèn ảnh như bình thường.

Viết code cho file single.php

Bạn có thể thấy ở phần trước chúng ta làm thì khi nhấp vào bài viết để xem nó ra trang trắng, đó là do chúng ta chưa viết code gì vào file single.php để nó hiển thị nội dung một bài viết.

Trong file này code cũng rất đơn giản, chỉ bao gồm một vòng lặp và các template tags để hiển thị các thành phần của bài viết cũng như khung bình luận mà thôi.

Bạn mở file single.php, nếu chưa có thì tạo và viết code dưới đây vào.

<?php

    get_header(); ?>

            <div class="content-main">

                <?php if (have_posts()): ?>

                    <?php while (have_posts()) : the_post();?>

                    <div <?php post_class() ?>>

                        <div class="post-single">

                            <h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>

                            <div class="post-meta">

                                Đăng bởi <a href="<?php the_author_link();?>"><?php the_author();?></a> trong mục <?php the_category(', '); ?>

                            </div>

                            <div class="entry-content">

                                <?php the_content();?>

                            </div>

                        </div><!--end .post-info-->

                        <div class="comment-box">

                            <?php comments_template(); ?>

                        </div>

                    </div><!--end .post-->

                <?php endwhile; endif; //End <a href="http://thachpham.com/wordpress/wordpress-development/tim-hieu-wordpress-query-va-loop.html" title="Loop">Loop</a> ?>

            </div><!--end .content-main-->

            <?php get_sidebar(); ?>

    <?php get_footer(); ?>

Nhìn chung nó cũng giống như code ngoài trang chủ thôi, chỉ là ta thay class lại, bỏ đi các nút mạng xã hội và quan trọng là chèn khung bình luận với hàm comments_template().

Có một vấn đề quan trọng ở đây bạn cần biết là nếu bạn có ấn vào nút Reply dưới bình luận thì nó sẽ không hoạt động do ta chưa khai báo script thêm hiệu ứng reply, giờ ta khai báo bằng cách mở file functions.php, tìm đoạn wp_enqueue_script('jquery'); rồi chèn đoạn dưới đây vào bên dưới nó.

wp_enqueue_script( 'comment-reply' );

Và nhân tiện, hãy chèn một số thuộc tính CSS mặc định dành cho WordPress vào file style.css mà ta chưa làm ở bước viết mã HTML.

/*--CSS cần thiết cho WordPress--*/

ul, ol, li { list-style: none; }

.entry-content img {

  margin: 0 0 1.5em 0;

  }

.alignleft, img.alignleft {

  margin-right: 1.5em;

  display: inline;

  float: left;

  }

.alignright, img.alignright {

  margin-left: 1.5em;

  display: inline;

  float: right;

  }

.aligncenter, img.aligncenter {

  margin-right: auto;

  margin-left: auto;

  display: block;

  clear: both;

  }

.alignnone, img.alignnone {

  /* not sure about this one */

  }

.wp-caption {

  margin-bottom: 1.5em;

  text-align: center;

  padding-top: 5px;

  }

.wp-caption img {

  border: 0 none;

  padding: 0;

  margin: 0;

  }

.wp-caption p.wp-caption-text {

  line-height: 1.5;

  font-size: 10px;

  margin: 0;

  }

.wp-smiley {

  margin: 0 !important;

  max-height: 1em;

  }

blockquote.left {

  margin-right: 20px;

  text-align: right;

  margin-left: 0;

  width: 33%;

  float: left;

  }

blockquote.right {

  margin-left: 20px;

  text-align: left;

  margin-right: 0;

  width: 33%;

  float: right;

  }

.gallery dl {}

.gallery dt {}

.gallery dd {}

.gallery dl a {}

.gallery dl img {}

.gallery-caption {}

.size-full {}

.size-large {}

.size-medium {}

.size-thumbnail {}

.post-single, .comment-box {

  padding: 1em;

}

.comment-box .comment-author img {

  float: left;

  margin: 0.4em 1em 0 0;

}

Ok, bây giờ bạn nhấp vào một bài xem thử đi coi nó hiện nội dung bài viết ra chưa nhé.

Tạo file page.php

File này để dành chúng ta hiển thị nội dung của một Page. Cách đơn giản nhất là bạn tạo file tên page.php trong thư mục theme và copy toàn bộ nội dung trong file single.php qua vì nó chẳng khác gì cả.

Tạo file archives.php

File này sẽ hiển thị danh sách các bài viết trong một category (nếu bạn nhấp vào xem category) hoặc một tag, archive theo ngày tháng,….Cách đơn giản là bạn tạo file archives.php rồi copy toàn bộ code trong file index.php vào nhé, vì nó cũng có khác gì đâu.

Nếu bạn cần tuỳ biến thêm, bạn có thể tự tạo từng file riêng cho nó, ví dụ:

category.php – Hiển thị danh sách bài viết trong category.

tag.php – Hiển thị danh sách bài viết trong tag.

Tạo file search.php

File này dùng để hiển thị kết quả tìm kiếmkiếm, tạm thời bạn copy toàn bộ code file index.php vào file này nhé vì nó cũng dùng loop mà thôi.

Chèn nút mạng xã hội tại trang chủ, archives

Để chèn nút mạng xã hội, mình có một cách cực kỳ đơn giản là hãy cài plugin Digg Digg vào. Sau đó mở file index.php và archives.php tìm 2 dòng:

<div class="facebook">Facebook</div>

 <div class="googleplus">Google+</div>

Và sửa thành

<div class="facebook"><?php dd_fblike_generate('Like Box Count') ?></div>

 <div class="googleplus"><?php dd_google1_generate('Normal') ?></div>

Fix lại file header.php

Do có thiếu sót một xíu nên cái title của website khi nhấp vào nó không trả về trang chủ. Bạn mở file này ra và tìm

<a href="#"><h1><?php bloginfo('name'); ?></h1></a>

Sửa thành

<a href="<?php bloginfo('url'); ?>"><h1><?php bloginfo('name'); ?></h1></a>

Footer – your turn

Mặc dù kết thúc rồi nhưng mình vẫn chưa viết phần tạo widget dưới footer, tại sao? Vì mình cố ý để cho bạn phần đó mà tự làm, hãy kết hợp bước tạo sidebar ở trong bài này để đặt code hiển thị sidebar trong 3 cái cột dưới file footer.php nhé.

Source toàn bộ serie

Đây là file source mà chúng ta đã làm qua ở toàn bộ serie này, bạn có thể tải về để tham khảo.

Tải source

Kết bài

Trong phần này coi như chúng ta đã làm gần xong một giao diện WordPress cơ bản rồi. Thực tế như bạn có thể thấy, serie này mình hướng dẫn rất đơn giản bởi vì khi bạn đã rành rồi thì chẳng ai lại đi viết theme WordPress từ đầu tới cuối bây giờ mà sẽ dùng các starter theme hỗ trợ như Underscore hoặc HTML5Reset để làm cho nhanh.

Nhưng bù lại, bạn có thể hiểu rằng một theme WordPress là như thế nào để có thể hiểu về cách hoạt động của nó để có nền tảng vững chắc hơn mà tiến đến các vấn đề sâu xa hơn.

Mặc dù mình có thể viết tiếp serie này về hướng dẫn cách làm một số tính năng nâng cao, tuy nhiên mình suy nghĩ và thấy sẽ tốt hơn nếu mình đưa nó ra một bài riêng nên mình sẽ kết thúc serie tại đây.

Mặc dù mình biết làm bằng video có thể dễ cho các bạn hơn nhưng quỹ thời gian mình cũng có hạn, nếu bạn cần video để xem thì có thể mua DVD PSD2HTML+WordPress của IzWebz để xem nhé, dĩ nhiên là tiếng Việt ạ.

Nếu bạn còn gì thắc mắc chưa hiểu được, hãy cứ bình luận bên dưới và mình sẽ giải thích rõ hơn. Chúc các bạn sớm tự làm một theme WordPress.

Category: Feat, lập trình wordpress, WordPress

GROUP VIỆT

[Theme Development] Phần cuối: Tạo các file cần thiết trong theme

Tạo sidebar cho theme

1. Đăng ký sidebar trong file functions.php

2. Hiển thị sidebar ra theme

Viết code cho file single.php

Tạo file page.php

Tạo file archives.php

Tạo file search.php

Chèn nút mạng xã hội tại trang chủ, archives

Fix lại file header.php

Footer – your turn

Source toàn bộ serie

Kết bài

0 comments

Nhập nội dung cần tìm:

Trang xã hội của Group Việt

Xem nhiều nhất

Followers

Xem theo tháng