Sign up
118
0
Web Development WordPress

WordPress: Thiết Kế Theme (P4.1: Tạo Header)

Lamies
Lamies
18/04/2020 · 3 min read
118
WordPress-Development
Thời gian đọc: 3 phút

Chào các bạn, ở phần 3 trong series WordPress Căn Bản Cho Người Mới mình đã demo cho các bạn xem tổng quát về vai trò các file Php trong WordPress. Thì ở bài này mình sẽ bắt đầu hướng dẫn code header.php website.

Phần 1: Header

Trước hết bạn cần cài đặt plugin: Custom Field Pro bạn có thể download tại đây . Sau khi bạn download xong bạn vào Plugin > Add New > Upload Plugin và chọn bạn vừa download về rồi active Add Plugin Custom Field Image 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 sao cũng đc. Mục preview size thì bạn chọn tùy ý). Hoàn tất thì bạn closed field lại. Add New Field Image Kế tiếp bạn tiếp tục setup tại khu vực location và nhấn publish để save lại. WordPress Location Field Image Kế dến bạn tải folder includes của mình (download tại đây) và đưa vào folder themes của bạn rồi bạ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);

giờ mình xin phép giải thích 1 số điều để có thể sử dụng folder includes nhé. Đây là thư mục mình 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. Tree Folder image Sau khi bạn includes xong thì bạn vào Theme Option chọn image logo và update logo wolfactive wordpress Giờ ta bắt đầu code header trong file header.php: header image Mình có đoạn <?php echo get_field(‘logo_image’,’option’) ?> đây là đoạn mình 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:



body{
  padding:0;
  margin:0;
  font-family: BalooThambi2;
  font-size: 15.5px;
  line-height: 1.5;
  color: #000;
}
.container{
  max-width: 1300px;
  width:100%;
  margin: 0 auto;
}
ul{
  list-style: none;
  padding:0;
}
a{
  text-decoration: none;
}
img{
  width:100%;
  height:auto;
}
div{
  display: block;
}
header a{
  color:#fff;
}
.header__contain{
  padding:15px 0;
  background: #1c6182;
  color:#fff;
}
.header__background{
  justify-content: space-between;
  flex-wrap: wrap;
  display: flex;
}
.header__logo-image{
  height:auto;
  width:170px;
}
.brand__contain{
  display: flex;
  text-transform: uppercase;
  font-family: Lora;
}
.header__brand{
  margin:auto 0;
}
.brand__contain .brand-item{
  margin:auto;
  padding:10px 15px;
}
.brand-item a{
  font-weight: 600;
  font-size:25px;
}
.active{
  background-color:#6d93ad;
}

Và đây là kết quả: result image Như vậy, mình đã hướng dẫn cho các bạn cách sử dụng custom field, theme option và tạo phần header rồi. Ở bài kế mình sẽ chỉ các bạn cách tạo menu nhé.

0