Phần 4: Thực hiện các trang front-end (Header)

Chào các bạn, ở phần 3 chúng ta đã thực hiện xong 1 số phần chính trong trang admin, ở phần này chúng ta sẽ code cho các page.

Các bạn đã quên có thể xem lại các phần trước:

Phần 1: Cấu trúc theme WordPress

Phần 2: Xây dựng cấu trúc theme

Phần 3: Coding Admin page

Đầu tiên chúng ta sẽ đến với file header.php. Chúng ta sẽ thay thế các thành phần tĩnh bằng code.

Bạn thay thế đoạn

1
Electronica

bằng đoạn sau

1
2
3
<?php wp_title();?>
<?php wp_head();?>

Trong đó hàm wp_title() sẽ lấy title của site, bạn có thể thay đổi trong trang admin phần Settings -> General.

Hàm bloginfo() mình đã giới thiệu ở bài trước, bạn cũng có thể thay đổi trong Settings -> General.

Hàm get_option() thì lấy các option trong theme_options mà chúng ta đã làm ở phần 3.

Bạn thay đoạn sau

1
<img class="default_logo" src="<?php bloginfo('template_url');?>/images/logo.jpg" alt="" />

bằng

1
<img class="default_logo" src="<?php get_option('theme_logo');?>" alt="" />

Thay

1
2
3
<h2 class="site">Electronica</h2>
<h2 class="slogan">Electronic Goods</h2>

bằng

1
2
3
<h2 class="site"></h2>
<h2 class="slogan"></h2>

Tương tự đối với các phần còn lại, giờ đến menu.

Đối với menu bạn chỉ show ra các page thì bạn sử dụng code sau:

1
2
3
4
5
6
7
8
9
10
11
<ul>
<ul>
    <li class="home">>
<a href="<?php bloginfo('home');?>">Home</a></li>
</ul>
</ul>

Đoạn code trên chỉ show list tất cả các page. Còn nếu bạn muốn 1 menu với các thành phần khác nhau thì bạn làm như sau:

Đầu tiên trong trang admin bạn vào Appearance -> Menus, tạo 1 menu với các item tùy ý, và nhớ lưu ý phần tên của menu.

Quay trở lại file header.php, bạn thêm code vào chỗ muốn hiển thị menu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php $nav_header = array(                 'menu'            =--> 'header',
        'menu_class'      => 'menu',
        'menu_id'         => '',
                'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'depth'           => 0,
        'walker'          => '');
wp_nav_menu($nav_header);
?>

Tiếp đến ta tạo form search

Đầu tiên bạn tạo file searchform.php, giao diện của form search sẽ được lấy từ file này.

Tại vị trí muốn hiển thị form search bạn dùng hàm sau:

1
<?php get_search_form();  ?>

trong file searchform.php, bạn sử dụng giao diện như sau:

1
2
3
<form action="" method="get">
 <input id="textfield" type="text" name="s" value="" />
 <input id="button" title="Search" type="submit" value="Search" /> </form>

Vậy là ta đã tạm xong phần 4. Và cuối cùng là các file trong phần này.

header.php (Mediafire – FShare)

searchform.php (Mediafire – FShare)