Tạo Dynamic Favicon cho mỗi bài viết

Tạo Dynamic Favicon cho mỗi bài viết dùng Meta Box

Favicon (viết tắt của từ “Favorite Icon”) là một biểu tượng nhỏ được xuất hiện bên cạnh tiêu đề của website trên thanh tab của trình duyệt. Icon này sẽ giúp bạn phân biệt nhanh các tab bạn đang xem trên trình duyệt. Favicon thường là một ảnh có kích thước 16x16px được lưu dưới tên là favicon.ico trong thư mục gốc của máy chủ. Đây cũng được coi là một logo rút gọn của mỗi website.

Thông thường, mỗi website có một favicon riêng được áp dụng trên toàn trang. Nhưng đôi khi, có thể bạn sẽ muốn phá cách hoặc nhấn nhá cho sản phẩm trên website của bạn bằng cách đặt cho mỗi một trang giới thiệu sản phẩm là một favicon riêng chẳng hạn. Những lúc như vậy, bạn hoàn toàn có thể dùng Meta Box plugin, kết hợp chỉnh sửa một chút trong theme bạn đang sử dụng là được nhé.

Mình sẽ hướng dẫn bạn cách làm cụ thể để có Dynamic Favicon. Nhưng trước tiên, mình nói sơ qua về cách tạo một Favicon thông thường cho một website nhé.

Favicon hiển thị trên thanh tab của trình duyệt

Favicon hiển thị trên thanh tab của trình duyệt

Cách tạo Favicon thông thường cho một website WordPress

Trong giao diện admin dashboard, bạn tìm đến menu Appearance > Customize. Trong giao diện customizer hiển thị ra, bạn chọn Site Identity, và nhấn chọn Select Site Icon ở phần Site Icon.

Cách tạo Favicon thông thường cho một website WordPress

Bạn chọn tải lên ảnh bạn muốn đặt làm favicon là được. Cuối cùng, nhấn nút Publish và kiểm tra kết quả.

Ảnh của bạn đã trở thành Favicon

Ảnh của bạn đã trở thành Favicon

Tạo Dynamic Favicon bằng cách sử dụng Meta Box plugin

Dynamic Favicon sẽ giúp chúng ta thay đổi linh hoạt các favicon sử dụng cho mỗi trang / bài viết khác nhau. Ở bài này, mình sẽ tạo các trang giới thiệu sản phẩm, tương ứng với mỗi trang đó là một bài viết giới thiệu sản phẩm đi kèm một favicon tương ứng riêng biệt. Nếu mỗi sản phẩm của bạn có một logo và một biểu tượng riêng, thì đây chính là cách để bạn đặt các biểu tượng đó lên thành favicon cho mỗi sản phẩm.

Để các bạn dễ hình dung, mình sẽ tạo bài viết với một loại post type là Product, để tách khỏi các loại bài viết blog post thông thường.

Chuẩn bị

Để tạo dynamic favicon, mình sẽ sử dụng hai plugin sau đây:

  • Meta Box: là framework giúp bạn tạo và làm việc với custom field trên WordPress.
  • Meta Box Builder: giúp bạn tạo custom fields trên một giao diện trực quan, không cần dùng đến code. Đây là phần không bắt buộc. Nếu bạn muốn tạo field thông qua code thì có thể bỏ qua plugin này.

Ngoài ra, việc tạo dynamic favicon sẽ cần tác động vào theme bạn sử dụng, nên ở đây, mình sẽ thao tác để làm mẫu trên theme Justread của Gretathemes. Đây là một theme miễn phí và chạy khá nhanh nên bạn cũng có thể thử.

Tạo trang giới thiệu sản phẩm

Mình đã có một bài viết hướng dẫn cách tạo trang giới thiệu sản phẩm bằng cách sử dụng Meta Box ở đây, bạn có thể tham khảo nhé.

Tuy nhiên, bạn lưu ý là trong bài viết này, mình sẽ đặt tên custom post type cho các bài viết giới thiệu sản phẩm là Product. Và mình sẽ sử dụng cái tên này xuyên suốt trong bài nhé.

Thêm custom field mới cho bài viết

Mình sẽ tạo thêm một custom field ở mỗi bài viết giới thiệu sản phẩm. Field này sẽ được sử dụng để upload ảnh favicon của chính bài viết đó.

Trong admin dashboard, bạn tìm đến menu Meta Box > Custom Fields > Add New để tạo một field group (hay còn gọi là custom meta box) mới. Và thiết lập các thông tin cho field group này.

Thêm Field Group có tên là Dynamic Favicon

Thêm Field Group có tên là Dynamic Favicon

Tiếp theo, mình tạo một custom field bên trong field group trên. Trong giao diện chỉnh sửa field group, bạn chọn tab Upload ở cột phía bên trái nhé, và chọn loại field là Single Image.

Tạo field Single Image

Tạo field Single Image

Ngay lập tức, một field dạng Single Image sẽ được tạo bên trong field group. Field này sẽ cho phép người dùng được phép upload một file ảnh vào field. Mình đặt tên nó là Favicon luôn.

Tiếp tục, bạn chuyển qua tab Settings của phần chỉnh sửa Field Group và chọn mục Post types là loại post type của bài viết bạn cần. Trong trường hợp này, mình chọn là Product. Thao tác này giúp custom field mình vừa tạo được hiển thị ở tất cả các bài viết có post type là Product.

Chọn loại Post type muốn hiển thị custom field vừa tạo

Chọn loại Post type muốn hiển thị custom field vừa tạo

Bây giờ, bạn quay trở lại trang chỉnh sửa bài viết giới thiệu sản phẩm để xem kết quả nhé.

Một custom field cho phép bạn đăng ảnh Favicon cho bài viết sẽ xuất hiện bên dưới nội dung bài viết

Một custom field cho phép bạn đăng ảnh Favicon cho bài viết sẽ xuất hiện bên dưới nội dung bài viết

Lấy giá trị của custom field để đặt làm Favicon cho trang

Hiện tại, trang giới thiệu sản phẩm của bạn vẫn đang hiển thị favicon là favicon của toàn website. Bước này sẽ giúp ta lấy ảnh được upload ở custom field của bài viết ra để làm favicon cho bài viết đó.

Bạn đặt đoạn code sau vào cuối file functions.php trong thư mục theme của bạn nhé:

function prefix_dynamic_favicon(){
     if ( ! is_singular( 'product' ) ) {
     return;
     }

$favicon = rwmb_meta( 'favicon', array( 'size' => 'thumbnail' ) );
$favicon = $favicon ? $favicon['url'] : get_site_icon_url();

     echo "<link rel='shortcut icon' href='$favicon' sizes='32x32' type='image/x-icon'>";
}
add_action( 'wp_head', 'prefix_dynamic_favicon' );

Đoạn code này sẽ giúp kiểm tra xem bạn đã thêm hình ảnh cho custom field Favicon ở trên hay không. Nếu có, thì sẽ lấy hình ảnh ở field Favicon đó để hiển thị. Ngược lại, nếu field trên không có dữ liệu, thì sẽ tự động gán Favicon của toàn site.

Mình dùng hook wp_head để thêm code vào phần head của trang.

Trong đoạn code trên, có một vài điểm lưu ý là:

  • get_site_icon_url(): cho phép chúng ta lấy url của favicon của website. Hàm này sẽ trả về giá trị là url của favicon đó.
  • rwmb_meta( ‘favicon’ ): giúp lấy giá trị của custom field có ID là ‘favicon’.
  • Array ( ‘size’ => ‘thumbnail’): là tham số kích thước hình ảnh của favicon.

Bạn có thể tham khảo thêm các loại tham số khác của field dạng hình ảnh (image) để tùy chỉnh thêm ở đây.

Bạn lưu file functions.php lại và đi đến trang giới thiệu sản phẩm bạn vừa đặt favicon để kiểm tra nhé. Bạn sẽ thấy favicon mới hiển thị cho bài viết của bạn.

 Favicon riêng đã hiển thị trên trang giới thiệu sản phẩm của mình

Favicon riêng đã hiển thị trên trang giới thiệu sản phẩm của mình

Lời cuối

Bằng cách làm này, bạn hoàn toàn có thể tạo Dynamic Favicon cho các loại trang / bài viết khác nhau trên website của bạn. Đây có thể sẽ là điểm nhấn cho các sản phẩm / dịch vụ của bạn hoặc cũng có thể cải thiện phần nào trải nghiệm người dùng trên website của bạn.

Rất hy vọng với sự hỗ trợ của Meta Box, cách làm này sẽ mang lại cho bạn nhiều lợi ích và bạn có thể ứng dụng nó hiệu quả. Cùng xem thêm các ứng dụng khác của Meta Box trong việc xây dựng website ở đây nhé.

Gửi phản hồi