174 Views

hướng dẫn dùng custom field để tạo tooltip image hover

Xin chào cộng đồng coder , nay mình tranh thủ làm WFH ở nhà có chút thời gian chia sẻ cho anh em về tooltip ảnh nhìn cũng khá là đẹp, giúp cho trãi nghiệm người dùng thích thú hơn . và làm cho web bạn sinh động hơn .  Chúng ta bắt đầu nhé.

Đầu tiên các bài phải cài cho 1 plugin ACF, plugin này giúp cho chúng ta tạo ra các field tương ứng để admin nhập vào nhé .

Hình Ảnh 1

– số 1 : chúng ta chọn add new 

-số 2 : nhập tên Field Group

-số 3 :  chọn kiểu post_type . 

-số 4 : chọn kiểu type

=> nhìn ảnh trên thì chúng ta đang muốn nó hiển thị ở trang : và trang đó là góc chia sẻ

-số 5 click vào Add Field chúng ta sẽ được hình bên dưới , Hình Ảnh 2

 

Hình Ảnh 2

Các bạn nhập đúng tên và trường giống hình ảnh bên trên nhé.sau khi nhập đầy đủ thông tin như trên thì nhớ bấm cập nhật lại nhé các bro.

Sau khi nhập đầy đủ thông tin , chúng ta vào trang chúng ta cần thêm , như trên thì chúng ta sẽ vào trang edit “góc chia sẻ” thì sẽ được Hình ảnh 3

sau khi nhập đầy đủ nội dung bắt đầu chúng ta thêm code cho . để nó hiển thị ra được màn hình.

Bước 1 : copy code ở bên dưới cho vào file function.php. đoạn code này viết theo kiểu shortcode

Bước 2: copy css ở bên dưới, chúng ta cho vào file style.css nhé .

Bước 3 :  khá quan trọng , chúng ta phải cho nó hiển thị ra màn hình

Chúng ta sẻ phải chèn đoạn function shortcode [cam_nhan_ph] ở hình ảnh 1 , vào cái nên mà chúng ta muốn nó hiển thị .vậy là xong rồi đó .

kết quả:

chúc các bạn thành công nhé , nếu có vấn đề gì thắc mắc thì mạnh rạn liên hệ mình nhé..

 

Mến tôi mới vào đọc đúng không nè .. !! Thế hãy nhắn tin cho tôi đi Hoặc bình luận bên dưới nhé

DMCA.com Protection Status