how-to-customize-wordpress-header

Hướng Dẫn Làm Theme WordPress – Phần 3: Tạo Header

Trước hết bạn cần cài đặt plugin: Advance Custom Field. Tải bằng cách vào Plugin => Add New => Tìm kiếm Advance Custom Field rồi Active

Sau đó bạn vào mục Custom Fieds => Add New. Ở đây bạn tiếp tục điền tên Field Group vào => Add Field. Bạn setup thông tin như trong hình nhé (tại Field label và Field name bạn muốn đặt tên theo ý bạn. Mục preview size thì bạn chọn tùy ý). Hoàn tất thì bạn closed Field lại.

Advance Custom Field logo img

Kế tiếp bạn tiếp tục setup tại khu vực Location và nhấn Publish để Save lại.

Location ACF

Kế đến tạo file functions.php

/*
* GLOBAL VARIABLES
*/
define('THEME_DIR', get_stylesheet_directory());
define('THEME_URL', get_stylesheet_directory_uri());

/*
* INCLUDED FILES
*/

$file_includes = [
'includes/theme-assets.php', // Style and JS
'includes/theme-setup.php', // General theme setting
'includes/acf-options.php', // ACF OptiQon page
'includes/product-post-type.php', // Products custom post type
'includes/api.php', // Products custom post type
];

foreach ($file_includes as $file) {
if (!$filePath = locate_template($file)) {
trigger_error(sprintf(__('Missing included file'), $file), E_USER_ERROR);
}

require_once $filePath;
}

unset($file, $filePath);

Đây là thư mục dùng để tự động add các file css, js. Do đó bạn cần tạo thêm một folder assets chứa các thư mục css, js để chứa file .css và .js.

assets css js

Sau khi bạn includes xong thì bạn vào Theme Option chọn image logo và update

Giờ ta bắt đầu code header trong file header.php. Có đoạn <?php echo get_field(‘logo_image’,’option’) ?> đây là đoạn hungmkt dùng để lấy hình ảnh tại theme options. Cú pháp cụ thể get_field(‘tên field’, ‘type’) cuối cùng thì mình style lại cho nó đẹp nhé tại file .css trong thư mục css


118