[Hướng dẫn] Cách đặt hình ảnh trước tiêu đề bài viết trong WordPress

add-custom-field

Nhiều bạn muốn chèn 1 hình ảnh quảng cáo nào đó trước tiêu đề mỗi bài post để làm nổi bật thông điệp muốn truyền tải hoặc hướng khách hàng sang một mục tiêu cụ thể nào đó.

Hôm nay, flatsomea-z sẽ hướng dẫn các bạn cách đặt hình ảnh trước tiêu đề bài viết trong WordPress

Bước 1: Tải hình ảnh mà bạn dự định dùng làm ảnh chèn trên tiêu đề lên WordPress

Bước 2: Bật trường tùy chỉnh trong bài post

WordPress có một tính năng được gọi là “trường tùy chỉnh”, cho phép bạn lưu trữ nội dung duy nhất cho mỗi bài đăng. Nó bị ẩn theo mặc định, vì vậy bạn cần bật nó bằng cách đi tới trình chỉnh sửa bài viết của bạn và nhấp vào “Tùy chọn màn hình” ở đầu màn hình. Sau đó, tick vào mục “Trường tùy chỉnh” như được hiển thị ở đây:

Cách đặt hình ảnh trước tiêu đề bài viết trong WordPress
Cách đặt hình ảnh trước tiêu đề bài viết trong WordPress

Bước 3: Tạo Trường tùy chỉnh mới cho bài đăng

Mở bài mà bạn muốn thêm hình ảnh trước tiêu đề bài trong trình soạn thảo WordPress. Bây giờ hãy cuộn xuống cuối cùng cho đến khi bạn thấy phần “Các trường tùy chỉnh”. Nhấp vào “Nhập mới” như thế này:

them-hinh-anh-truoc-tieu-de-wordpress
them-hinh-anh-truoc-tieu-de-wordpress

Tiếp đó, hãy nhập như sau:

add-custom-field
add-custom-field

Nhập mục Name như hình, mục Value thì paste link ảnh của bạn vào rồi ấn Thêm trường tuỳ chỉnh. Sau đó lưu và post bài đăng

Bước 4: Thêm mã vào functions.php của bạn

Copy và paste đoạn code sau vào file functions.php nhé

function insert_image_before_title( $title, $id = null ) {

if(get_post_meta(get_the_ID(), 'image_before_title_url', true) {
$title = '<img class="icon_title" src="<?php echo get_post_meta(get_the_ID(), 'image_before_title_url', true);?>" />' . $title;
} else {

$title = '<img class="icon_title" src="[URL of Default Image]" />' . $title;

}

return $title;
}
add_filter( 'the_title', 'insert_image_before_title', 10, 2 );

Thay [URL of Default Image] = link ảnh của bạn nha

Vậy là xong rồi. Chúc các bạn thành công ^^

Trả lời

Email của bạn sẽ không được hiển thị công khai.