[Series viết theme bán hàng Woocommerce] 3. Tạo custom cho header và footer

Trong bài trước mình đã hướng dẫn cách tích hợp HTML vào giao diện, trong bài viết này mình sẽ đi chi tiết về cách tích hợp các sản phẩm Woocommerce vào trong theme. Trong bài viết này mình sẽ chỉnh sửa chủ yếu trên 2 tệp là header.php,và footer.php.

Tích hợp menu, logo, và các icon mạng xã hội trong header.php

Tính hợp các Icon mạng xã hội

Bây giờ bạn tạo một thư mục có tên là “inc” trong thư mục theme và tạo một file có tên là “icon_socail.php“. File này sẽ chứa các hàm để tạo ra các custom theme để hiển thị các icon mạng xã hội. Bạn có thể xem lại bài viết Tạo các trường tùy biến cho theme WordPress không cần sử dụng Plugin để biết chi tiết về cách làm này.

bây giờ mở file “icon_socail.php” đã tạo và thêm đoạn code sau vào.

<?php
function icon_socail( $wp_customize ) {
 
 $wp_customize->add_section (
 'section_a',
 array(
 'title' => 'Tùy biến ICON Mạng xã hội',
 'description' => 'Tùy chỉnh các ICON, liên kết mạng xã hội',
 'priority' => 25 ));

 
 $wp_customize->add_setting ('Facebook', array('default' => '') );
 $wp_customize->add_control ('control_Facebook', array(
 'label' => 'Liên kết facebook',
 'section' => 'section_a',
 'type' => 'text',
 'settings' => 'Facebook'));
 
 $wp_customize->add_setting ('Twitter', array('default' => '') );
 $wp_customize->add_control ('control_Twitter', array(
 'label' => 'Liên kết twitter',
 'section' => 'section_a',
 'type' => 'text',
 'settings' => 'Twitter'));
 
 $wp_customize->add_setting ('Linkedin', array('default' => '') );
 $wp_customize->add_control ('control_Linkedin', array(
 'label' => 'Liên kết linkedin',
 'section' => 'section_a',
 'type' => 'text',
 'settings' => 'Linkedin'));
 
 $wp_customize->add_setting ('Google-plus', array('default' => '') );
 $wp_customize->add_control ('control_Google-plus', array(
 'label' => 'Liên kết google-plus',
 'section' => 'section_a',
 'type' => 'text',
 'settings' => 'Google-plus'));

 }
 add_action( 'customize_register', 'icon_socail' );

Bây giờ quay trở lại thư mục theme, tạo một file có tên “functions.php” và thêm đọan sau vào:

<?php
include 'inc/icon_socail.php';

Sau đó bạn truy cập vào trang quản trị, vào mục “giao diện”, chọn “tùy chỉnh”, bạn sẽ thấy kết quả như sau:

Bây giờ mình sẽ tích hợp nó vào theme. Bạn mở file header.php. tìm đến đoạn các mã HTML và thay đoạn như sau vào.

Tương tự như trên bạn có thể thực hiện để tích hợp logo như sau

Tích hợp logo và các thông tin khác

Vào trở lại thư mục inc, tạo tệp có tên “info_web.php” và thêm đoạn mã sau vào:

<?php
function info_web( $wp_customize ) {
 
 $wp_customize->add_section (
 'section_b',
 array(
 'title' => 'Tùy biến thông tin website',
 'description' => 'Tùy chỉnh các thông tin của website',
 'priority' => 25 ));
 

 $wp_customize->add_setting( 'logo' );
 $wp_customize->add_control(
 new WP_Customize_Image_Control( $wp_customize, 'logo', array(
 'label' => 'Logo website',
 'section' => 'section_b',
 'settings' => 'logo'))
 );

$wp_customize->add_setting ('Email', array('default' => '') );
 $wp_customize->add_control ('control_Facebook', array(
 'label' => 'Địa chỉ Email',
 'section' => 'section_b',
 'type' => 'text',
 'settings' => 'Facebook'));
 
 
 $wp_customize->add_setting ('Phone', array('default' => '') );
 $wp_customize->add_control ('control_Facebook', array(
 'label' => 'Số điện thoại',
 'section' => 'section_b',
 'type' => 'text',
 'settings' => 'Facebook'));
 
 }
 add_action( 'customize_register', 'info_web' );

Tiếp theo bạn thêm đoạn sau vào file functions.php:

include 'inc/info_web.php';

Quay trở lại file header.php và thay đổi các thông tin sau:

Tiếp theo mình sẽ tiến hành thay đổi các thông tin còn lại như sau:

Tiếp theo mình sẽ tạo menu cho theme

Tích hợp menu

Mình chỉ tạo menu ở dưới thôi nhé, menu trên sẽ được tạo sau này sau khi tích hợp woocomerce nhé.

Bâu giờ bạn truy cập vào thư mục inc và tạo file có tên “main_menu.php” và thêm vào nội dung sau:

<?php
add_theme_support( 'menus' );

register_nav_menus(
 array(
 'main-nav' => 'Menu chính' ) );

sau đó thêm đoạn sau vào file functions.php

include 'inc/main_menu.php';

Tiếp theo bạn thêm đoạn code để hiển thị menu đa cấp sau:

Để xem chi tiết bạn xem lại bài viết: Tự code menu đa cấp cho themes WordPress để rõ hơn nhé.

Để hiển thị bạn vào phần menu và tạo ra một menu với vị trí là “Menu chính” lưu lại bạn sẽ được kết quả như sau:

Như vậy là cơ bản mình đã xong phần header rồi, một số thành phần của theme mình đã loại bỏ vì nó không cần thiết nhé.

Tích hợp menu, thông tin trang trong footer.php

Trong phần menu này chúng ta sẽ có 9 thành phần chính như sau.

• 1.Logo: Hiển thị tên của website.
• 2.Đoạn mô tả ngắn: Hiển thị một đoạn hoặc một slogan cho website.
• 3.Hiển thị các tin tức mới nhất.
• 4.Hiển thị địa chỉ của shop.
• 5.Menu dịch vụ
• 6.Menu shop
• 7.Menu chính sách
• 8.Menu giới thiệu
• 9.Bản quyền website.

Đầu tiên bạn mở file info_web.php và tiến hành tạo thêm vào 3 custom sau:

 $wp_customize->add_setting ('Name_web', array('default' => '') );
 $wp_customize->add_control ('control_Name_web', array(
 'label' => 'Tên website ở cuối trang',
 'section' => 'section_b',
 'type' => 'text',
 'settings' => 'Name_web'));
 
 $wp_customize->add_setting ('Desc_web', array('default' => '') );
 $wp_customize->add_control ('control_Desc_web', array(
 'label' => 'Mô tả website ở cuối trang',
 'section' => 'section_b',
 'type' => 'text',
 'settings' => 'Desc_web'));

 $wp_customize->add_setting ('Addr_web', array('default' => '') );
 $wp_customize->add_control ('control_Addr_web', array(
 'label' => 'Địa chỉ website ở cuối trang',
 'section' => 'section_b',
 'type' => 'text',
 'settings' => 'Addr_web'));

Sau đó mở file footer.php và thay thế tên website cùng với dòng mô tả thành như sau:

và dòng địa chỉ như sau:

Tiếp theo mình sẽ thực hiện lấy những bài viết mới nhất lên vùng 3 với đoạn code sau:

(*)Mình loại bỏ một số trường không cần thiết, bạn có thể giữ nguyên hoặc sửa đổi tùy ý.

Phần cuối cùng chúng ta sẽ xử lý các phần menu cuối trang nhé. Bây giờ hãy mở file main_menu.php và đăng ký thêm 4 menu như thế này:

Sau đó vào theme và tiến hành thay lần lượt 4 phần menu trên đó như thế này:

Lưu ý là mỗi menu bạn phải thay cái ID menu đi nhé.

Thật ra bạn có thể sử dụng các tạo widget vào chỗ này, nhưng để giữ nguyên cấu trúc và làm nhanh mình sẽ dùng menu. Bạn có thể xem bài: Cách tạo widget trong WordPress.

Như vậy là đã xong phần tạo các thông tin cho đầu trang (header) và cuối trang (footer). Trong bài sau mình sẽ đi vào phần chính bao gồm việc tích hợp sản phẩm và giỏ hàng nhé.