#5 – WordPress Header Footer – Tạo file header.php và footer.php

0

Trong bài học này, chúng ta sẽ tiến hành tạo file header.php và footer.php cho theme goclamweb. WordPress sẽ quản lý các phần của website và ráp header cũng như header vào phần nội dung chính, chỉ cần chúng ta đặt tên đúng chuẩn là được.

Video Tạo file header.php và footer.php

Hướng dẫn chi tiết

Việc phân tách các bộ phận của 1 trang sẽ giảm được việc viết code, cũng như sai sót có thể xảy ra. Nếu sử dụng framework, các bạn có thể tìm hiểu MVC.

File footer.php

Các bạn cần tạo đúng tên file header.php vào copy những phần sẽ hiển thị trước nội dung chính. Lưu ý, header của theme không chỉ là phần thẻ head mà là phần html từ lúc mở tag html đến khi hiển thị nội dung chính.

Đối với logo, hiện tại chúng ta chưa hiển thị hình logo. Thay vào đó, chúng ta sẽ sử dụng Sitename đã điền trong phần thiết lập làm tên website.

Chúng ta sẽ xóa đi một số thẻ meta trong phần <head></head>. Những thẻ này quan trọng, nhưng sẽ có những plugins SEO như Yoast SEO làm ra những thẻ này nên theme của chúng ta không cần quan tâm.

Thẻ chúng ta cần quan tâm là <title>. Chúng ta sẽ để WordPress tự tạo cho chúng ta. Nhưng để làm được tự động, các bạn cần mở một số tính năng Theme Support.

Trong thư mục includes, tạo file setup.php như sau.

if(!function_exists('glw_theme_setup')){
    function glw_theme_setup(){
        // title tag
        add_theme_support( 'title-tag' );
        add_theme_support(
            'html5',
            array('comment-list','comment-form','search-form','gallery','caption')
        );

    }
}

Include file setup.php vào functions.php

include(get_theme_file_path('/includes/setup.php'));

Add action cho Hook init

add_action( 'init', 'glw_theme_setup' );

Bây giờ hãy thử load lại trang, bạn sẽ WordPress tự tạo ra title cho website của bạn trên tab chrome. Nếu ctrl U xem nguồn trang, bạn sẽ thấy thẻ title đã được tạo tự động.

File footer.php

Tương tự như header, footer bao gồm những phần được lặp lại ở cuối trang. Có một đoạn hiển thị bản quyền (đừng quan tâm nội dung nhé). Điều chúng ta sẽ tìm hiểu là làm sao hỗ trợ người dùng có thể dịch theme của bạn sang ngôn ngữ của họ.

Cách hỗ trợ dịch theme, bạn cần đăng ký text-domain với WordPress. Một dạng chữ ký nhận dạng, để WordPress biết ra, đoạn chuỗi này cho phép dịch.

if(!function_exists('glw_theme_setup')){
    function glw_theme_setup(){
        // text domain - translate
        $lang_folder = get_theme_file_path( '/languages' );
        load_theme_textdomain( 'glw', $lang_folder );
        // title tag
        add_theme_support( 'title-tag' );
        add_theme_support(
            'html5',
            array('comment-list','comment-form','search-form','gallery','caption')
        );

    }
}

Đầu tiên, chúng ta cần cho WordPress biết nơi chứa các file dịch của theme . Sau đó dùng hàm load_theme_textdomain để đăng ký text_domain. Lưu ý: text_domain cần phải riêng biệt, không bị trùng.

Hàm __( ‘Đoạn văn bản cần dịch’ , ‘text_domain’ )

echo __('Copyright @2020 by Goc Lam Web','glw');

Code hoàn thành của bài học: Google Drive

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.