Tùy chỉnh header trong wordpress không dùng plugin

 

Tùy chỉnh header nghĩa là phần hiển thị bố cục trên đầu trang, hoặc bạn muốn hiển thị tùy biến trên header chỉ trên trang chủ mà không hiển thị trên trang con hoặc bạn muốn cho nó cố định mà khi cập nhật wordpress sẽ không bị thay đổi (Phần này tốt nhất bạn lên dùng child-theme vì khi bạn thêm hoặc bớt nó sẽ không bị mất đi trong quá trình mình cập nhật phiên bản cho website).

Ở bài này tôi sẽ hướng dẫn cho các bạn về cách làm sao quản trị trang web của bạn sao cho tối ưu nhất mà không cần phải dùng plugin. Chỉ cần các bạn biết một số thủ thuật cơ bản của wordpress, biết sử dụng HTML và CSS cơ bản và hiểu sơ sơ về những ngôn ngữ lập trình cơ bản như PhP (Hoặc cả Pascal..) :D… Thôi không nói vòng vo nữa tôi sẽ chỉ cho bạn cách kết nối các file trong wordpress.

1. Tìm hiểu về hàm: “get_template_part();” trong wordpress

Hàm này có tác dụng load một phần template nhỏ nào đó vào một template khác một cách đơn giản. Ở đây không phải footer, header, sidebar vì nó có các hàm khác hỗ trợ rồi.

Hàm này có hai tham số, tham số thứ nhất là {slug} và tham số thứ hai là {name}, để rõ hơn ta xem cấu trúc của nó như sau:

[php]

<?php get_template_part(‘$slug’) ?>

<?php get_template_part(‘$slug’, ‘$name’)?>

[/php]

Trong đó:

• Nếu dùng một tham số $slug thì wordpress sẽ load file có tên là {$slug}.php, nghĩa là ta không cần phải thêm phần đuôi .php vào mà nó tự thêm sẵn rồi
• Nếu dùng hai tham số là $slug và $name thì wordpress sẽ load file có tên là {$slug-$name}.php, nghĩa là nó nối phần slug và name lại với nhau cách nhau bởi dấu gạch ngang (-)

Ở như hình trên ta sẽ có cấu trúc code như sau:

[php]

get_template_part(‘header’, ‘banner’);

[/php]

Nếu bạn dùng FileZilla hoặc dùng plugin File Manager (tùy chỉnh code trực tiếp trong wordpress) để thêm hoặc chỉnh sửa code cho giao diện.

2. Thêm thư mục và thêm file.php trong header.

Bạn chú ý: file header.php và thư mục bạn thêm phải cùng cấp. Tôi ở đây sẽ để file có tên là template-parts và file php có tên là header-banner.php đường dẫn như sau: template-parts/header/header-banner.php

Nhớ tạo xong hãy viết gì vào đó cũng được để tiện theo dõi trong quá trình mình chỉnh sửa.

[php]

<?php echo "Hello World"; ?>

[/php]

Tiếp theo, để kết nối tới file header-banner.php vừa tạo từ trong file header.php (Đầu trang) bạn làm như sau:

[php]

<?php get_template_part(‘template-parts/header/header’, ‘banner’); ?>

[/php]

Lúc này bạn thử ra ngoài site, load lại trang xem nó đã hiển thị “Hello World” trên đầu trang chưa! Nếu hiển thị bạn đã thành công.!

Lúc này bản nảy sinh thêm yêu cầu đó là giao diện mình vừa tạo mình chỉ muốn cho nó chạy trên trang chủ, và các trang không phải là trang chủ sẽ không được hiển thị. Ta sẽ có code như sau:

[php]

<?php if (is_home() || is_front_page()) {
get_template_part(‘template-parts/header/header’, ‘banner’);
}
?>

[/php]

Giờ hãy ra ngoài site, hưởng thụ thành quả của mình một lần nữa. Nếu về trang chủ nó hiển thị và nhấp chuột sang trang khác thì nó không hiển thị thì Chúc mừng bạn đã thành công!

Nếu bạn thấy hài lòng về bài viết này hãy share hoặc like để chúng tôi có thêm động lực viết bài đáp ứng nhu cầu của bạn!
Cảm ơn bạn đã đọc bài viết này!