Để tạo option thay đổi logo trong WordPress bạn cần cài đặt Redux Framework, một plugins cho phép các nhà phát triển tạo ra các options chuyên nghiệp phía backend và dễ dàng code hiển thị ra frontend của template.
Mình đã có bài viết hướng dẫn bạn cài đặt, cấu hình và tạo ra các options của riêng bạn. Bạn có thể lựa chọn nhúng plugin này vào thư mục gốc của theme hoặc cài đặt nó trong mục Plugins của website. Xem bài viết: Tạo theme options WordPress bằng Redux framework mới nhất.
1. Code option thay đổi logo trong WordPress
Trước tiên, bạn mở file class-webshop-options.php đã tạo trong hướng dẫn trên ra. Nói lại một chút thì đây là file tạo ra các options của riêng bạn, copy nó trong thư mục plugins\redux-framework\sample\barebones-config.php.
Copy file php này về thư mục inc\classes và đổi tên thành class-webshop-options.php. Bạn xem lại bài hướng dẫn trên là sẽ hiểu cách mình nhúng và chạy file này.
Thêm vào đoạn code sau xuống dười cùng:
$section = array(
'title' => esc_html__( 'Header', 'webshop' ),
'desc' => esc_html__( 'All of settings for header this website.', 'webshop' ),
'id' => 'es-header',
'icon' => 'el el-wrench-alt',
'fields' => array(
array(
'id' => 'logo-image',
'type' => 'media',
'title' => esc_html__('Logo Image','webshop'),
'desc' => esc_html__('Image that you want to use as to logo','webshop'),
)
// Thêm các options khác cho Header nếu muốn
),
);Trong đoạn code trên, mình sử dụng option media của Redux Framework để tạo logo cho dự án webshop mình đang xây dựng.
'title': Đây là tiêu đề của phần tử (section) và được dùng để hiển thị trên giao diện cấu hình. Ở đây mình tạo một thư mục Header để cấu hình chung cho các phần thuộc header website.'desc': Đây là mô tả của phần tử và giải thích cho người dùng về nội dung của phần tử.'id': Đây là ID của phần tử, nó được sử dụng để xác định phần tử trong mã PHP và HTML. Giá trị của'id'là một chuỗi không chứa ký tự đặc biệt hoặc dấu cách.'icon': Đây là biểu tượng (icon) được sử dụng để đại diện cho phần tử này trên giao diện cấu hình. Giá trị của'icon'là một chuỗi đại diện cho tên của icon trong bộ sưu tập Elusive Icons.'fields': Đây là một mảng chứa các trường cấu hình (settings fields) bên trong phần tử (section) này. Trong đoạn mã, chỉ có một trường cấu hình logo được mình định nghĩa và đây là Option thay đổi logo mà chúng ta đang xây dựng. Trường này có các thuộc tính sau:'id': Đây là ID của trường và nó được sử dụng để xác định trường trong code PHP frontend.'type': Đây là loại trường cấu hình và xác định cách người dùng sẽ cung cấp thông tin cho trường này. Trong trường hợp này, trường có loại là'media', có nghĩa là người dùng có thể chọn một hình ảnh (media) từ thư viện media của WordPress.'title': Tiêu đề của trường, hiển thị trên giao diện cấu hình.'desc': Mô tả của trường, giải thích cho người dùng về nội dung của trường.
- Các giá trị trong hàm
esc_html__()là để làm sạch và đảm bảo an toàn dữ liệu.
Lưu lại và kiểm tra mục Theme Options trong quản trị website, bạn sẽ thấy chức năng Option thay đổi logo đã hiển thị bên trong thư mục Header.
Đây là một box nhỏ gọn với một chức năng duy nhất là upload hình ảnh lên. Giờ là lúc chúng ta sẽ code để hiển thị nó ra ngoài giao diện website (frontend).
2. Hiển thị logo ra giao diện website
Đây là đoạn mã HTML ban đầu:
<div class="col-lg-3 d-none d-lg-block">
<a href="" class="text-decoration-none">
<h1 class="m-0 display-5 font-weight-semi-bold"><span class="text-primary font-weight-bold border px-3 mr-1">E</span>Shopper</h1>
</a>
</div>Bạn thấy rằng template đang hiển thị logo dạng text, chỉ có một thẻ H1, mà chúng ta đang tạo Option thay đổi logo là một Image, do đó cần phải sửa lại một chút trước khi code.
<div class="col-lg-3 d-none d-lg-block">
<a href="http://webshop.vn" title="webshop.vn"><img src="/logo-1.png" alt="logo webshop"></a>
</div>Trong file style.css, bạn cần phải cấu hình css cho hình ảnh vừa với khung của giao diện, tùy theo giao diện bạn sử dụng, bạn lựa chọn giá trị cho phù hơp:
.header-logo img {
max-width: 270px;
}Sau đó là code hiển thị hình ảnh bạn đã tải lên trong options thay đổi logo của quản trị.
<?php global $ws_options; ?>
<div class="col-lg-3 d-none d-lg-block header-logo">
<?php
if (!empty($ws_options['logo-image']['url'])):
printf('<a href="%s" title="%s"><img src="%s" alt="%s" /></a>',
get_bloginfo('url'),
get_bloginfo('description'),
$ws_options['logo-image']['url'],
get_post_meta($ws_options['logo-image']['id'], '_wp_attachment_image_alt', true )
);
else :
printf(__('Logo image here!'), 'webshop');
endif;
?>
</div>Giải thích đoạn code tạo Option thay đổi logo:
<?php global $ws_options; ?>: Dòng này định nghĩa biến toàn cục$, cho phép bạn truy cập vào dữ liệu của biến này từ bất kỳ đâu trong mã PHP của trang web.ws_options<?php if (!empty($ws_options['logo-image']['url'])): ?>: Kiểm tra xem logo đã được upload lên chưa? Nó cũng đúng với trường hợp plugin Redux Framework chưa được kích hoạt.printf('<a href="%s" title="%s"><img src="%s" alt="%s" /></a>', ...);: Nếu$ws_options['logo-image']['url']printfđể tạo chuỗi HTML chứa logo. Các giá trị củaget_bloginfo('url'),get_bloginfo('description'),$es_options['logo-image']['url'], vàget_post_meta($es_options['logo-image']['id'], '_wp_attachment_image_alt', true )lần lượt theo thứ tự được đưa vào chuỗi format thông qua%s.else: Nếu chuỗi$es_options['logo-image']['url']rỗng (hoặc chưa được định nghĩa), mã bên trong câu lệnhelsesẽ được thực thi và chạy câu lệnh:printf(__('Logo image here!'), 'webshop');- Sử dụng hàm
printfđể in ra HTML thông báo “Logo image here!”. Hàm__()được sử dụng để dịch chuỗi thông báo này sang ngôn ngữ khác nếu đã được thiết lập.
Tổng kết
Chúng ta thấy rằng với sự hỗ trợ của Redux Framework việc tạo Option thay đổi logo trong WordPress không hề khó. Chúng ta có một giao diện quản trị chuyên nghiệp, code hiển thị cũng dễ dàng.
Hãy theo dõi seri bài viết về Lập trình WordPress và bình luận bên dưới các bài viết về các chức năng bạnmuốn mình hướng dẫn. Và nhớ share bài viết này nếu bạn thấy nó hữu ích cho nhiều người. Cảm ơn và hẹn gặp lại!
