Hướng dẫn header php

Hướng dẫn header php

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
    • File footer.php
    • File footer.php

Hướng dẫn chi tiết

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

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.

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.

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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.

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ệ

Hướng dẫn header php