Trang trí WordPress bằng ảnh động (*GIF)

Mình vốn không tính viết bài này nhưng xu thế hiện giờ của thế giới là khai tử Flash – ứng dụng chạy video, phát nhạc và một số tính năng khác như chạy đồng hồ, trang trí wordpress bằng hoa lá, cành – vì vậy việc tìm kiếm một công cụ khác để trang trí wp rất cần thiết.

Flash gặp khá nhiều hạn chế, ví dụ như tính bảo mật thấp khiến máy tính của bạn có thể gặp nguy hiểm, việc chạy flash thường phụ thuộc vào các trang web khác, vậy nên chúng ta không thể kiểm soát được việc flash có thực sự chạy trên wp của chúng ta không. Ví dụ vào một ngày xấu trời, các website mà chúng ta lấy code flash để chèn vào wp dừng hoạt động kéo theo việc wp của bạn xuất hiện những khoảng trống hoác. Thêm một điểm yếu nữa là muốn xem flash thì máy tính của người dùng phải cài chương trình này. Vâng rất nhiều thứ dây mơ rễ má cần phải có để flash có thể chạy được.

Thay vì Flash thì bạn có thể sử dụng ảnh động (.GIF) để trang trí cho wp của mình. Ưu điểm của GIF là bạn hoàn toàn có thể làm chủ nó, không phụ thuộc vào bất cứ bên nào, đồng thời khả năng tùy biến của GIF là khá cao nếu bạn biết cách tận dụng. Ví dụ điển hình là bạn có thể chèn câu đối ở hai bên Wp nếu theme của bạn có đủ khoảng không.

1/Code cơ bản.

Bạn nhìn lên góc trên bên trái có hình động Goku vừa chạy vừa té, nó được thực hiện bởi code

<a href="https://heomephim.wordpress.com/meo-wordpress/" target="_blank"><img style="top: 0; left: 0; position: fixed; z-index: 1;" src="https://heomephim.files.wordpress.com/2016/01/goku.gif?w=256" alt="" border="0" /></a>

Bây giờ chúng ta sẽ phân tích đoạn code này, nhìn hơi màu mè một chút, các bạn thông cảm nhé, chỉ là vì mình muốn phân định rõ ràng các đoạn thôi 🙂

a/Code chèn link

<a href="https://heomephim.wordpress.com/meo-wordpress/" target="_blank"> 

Bầy giờ bạn Click vào hình Goku đang chạy thì ngay lập tức nó sẽ dẫn bạn đến đường link https://heomephim.wordpress.com/meo-wordpress/. Thực sự thì bạn cũng chẳng cần nhớ code này làm gì vì nó đã được hỗ trợ sẵn trong wordpress rồi, đó là nút chèn link. Bạn hoàn toàn có thể lược bỏ đoạn này đi khi mà bạn đang soạn code.

b/Code xác định vị trí

top: 0; left: 0

Hiểu nôm na là tọa độ đi ha. Mỗi vị trí trên wp của bạn đều có một tọa độ. Ghi một vài ví dụ cho bạn hiểu

top: 0; left: 0

=>Nghĩa là: cách mép trên 0 pixel; cách lề trái 0 pixel

bottom: 265; right: 110

=>Nghĩa là: cách mép dưới 265 pixel; cách lề phải 110 pixel
Để hiểu thêm về Pixel bạn có thể tham khảo link này: Pixel và các vấn đề liên quan
c/Code ghim đối tượng.

position: fixed

Đoạn code này giúp đối tượng của bạn không bị trượt khi thực hiện thao tác cuộn. Bây giờ ta thử nghiệm tinh chỉnh code xem nó sẽ ra sao nhé. Bạn có thể nhìn lên ảnh câu đối ở hai bên wp hiện giờ, khi bạn cuộn thì nó sẽ trượt theo và biến mất.


Hai câu đối này được ghim lên bằng code

<img style="top: 550; left: 0; position: absolute; z-index: 0;" src="https://heomephim.files.wordpress.com/2016/01/cu-i1.png?w=86" alt="" border="0" /></a>

<img style="top: 550; left: 0; position: absolute; z-index: 0;" src="https://heomephim.files.wordpress.com/2016/01/cu-i1.png?w=86" alt="" border="0" /></a>

Các bạn có thể thấy rằng từ

fixed

đã được thay bằng từ

absolute

d/Code ưu tiên đối tượng

z-index: 1

Ở hình Goku đang chạy ở góc trên bên trái mành hình, khi bạn cuộn bài viết này thì ảnh Goku luôn được ưu tiên đè chèn lên các đối tượng khác (chữ, hình,…). Đó là nhờ code này, trong trường hợp bạn không muốn nó được ưu tiên hiển thị nữa thì hãy thay số 1 bằng số 0.
e/Code link ảnh và xác định vị trí

src="https://heomephim.files.wordpress.com/2016/01/goku.gif?w=256"

Chữ màu đỏ là link ảnh, chữ màu xanh là xác định kích thước

w=256

=>Nghĩa là chiều rộng của ảnh là 256 pixel (bạn không cần ghi chiều cao bởi nó sẽ được tự động chỉnh theo tỷ lệ)

Bạn cũng có thể thay Pixel bằng phần trăm. Ví dụ như

w=200%

Lúc này ảnh hiển thị sẽ có kích thước gấp đôi ảnh cũ.

Thực chất code xác định kích thước này chỉ là một code rút gọn, code đầy đủ của nó như sau:

width="" height=""

Code vừa rồi có đầy đủ chiều rộng và chiều cao, nhưng thực tế sử dụng thì ta chỉ cần chiều rộng là được

f/Code hiển thị chữ và đóng khung

alt="" border="0"

Ví dụ cho các bạn thấy:
Goku kute

Ảnh động vừa rồi được hiển thị bằng code:

<img style="z-index: 1;" src="https://heomephim.files.wordpress.com/2016/01/goku.gif?w=256" alt="Goku kute" border="5" /></a>

Trong trường hợp ảnh động không hiển thị được thì nó sẽ được thay thế bằng dòng chữ Goku kute
“5” chính là độ dày của viền khung, nếu muốn dày hơn thì ghi tăng lên, nếu muốn mỏng đi thì giảm xuống.

2/Tùy biến với Widget.

Một khi bạn muốn trang trí wordpress bằng ảnh động thì bạn cần phải chèn nó vào widget. Bằng cách này bạn có thể hiển thị ảnh động ở bất cứ nơi đâu.

Widget mà bạn phải chèn code vào là widget văn bản. Hiện tại widget đã có tùy chọn hiển thị ở một số Tag hay Category theo mong muốn của bạn.

Mẹo WordPress

Chỉ cần chọn Visibility phía dưới widget để kích hoạt tính năng này.

Trong một số trường hợp mà bạn wp của bạn không có nút này thì bạn cần bật nó lên bằng cách vào WP Admin => vào Giao diện => chọn Widget.

Link mẫu: https://XXX.wordpress.com/wp-admin/widgets.php

Ở góc trên bên phải ở mục Tùy chọn hiển thị => chọn Tắt chế độ truy cập nhẹ.Mẹo wordpress

Bằng việc chèn code vào widget bạn có thể tùy biến rất nhiều cách khác như chèn hình động chạy nhảy trên mỗi tiêu đề bài viết, thiết đặt sẵn cho từng chủ đề sẽ có những hình động tương ứng,…

3/Tìm ảnh động

Bạn có thể tìm trên google, trong tìm kiếm hình ảnh bạn chọn Các công cụ tìm kiếm => chọn Ảnh động.

Lưu ý là chọn ảnh nền trắng khi chèn vào bài viết để nhìn hài hòa hơn, trong trường hợp muốn chèn ở các phần khác để trang trí (giống như ảnh Goku) thì chọn ảnh nền Trong suốt.

Mẹo wordpress

 

***LƯU Ý:

  • Tất cả các code trên cũng có thể áp dụng cho các ảnh thường như .PNG, .JPEG, .BMP,…
  • Khi soạn code phải thực hiện ở giao diện văn bản (HTML)

Code cơ bản nhất dành cho tất cả các bạn

<img style="top: 0; left: 0; position: fixed; z-index: 1;" src="LINK ANH" alt="" border="0" /></a>

Các bạn thay thông số cho phù hợp theo như mình đã hướng dẫn nhé, mình đã test thử rồi, chạy ổn.

17 thoughts on “Trang trí WordPress bằng ảnh động (*GIF)

  1. Pingback: [Mẹo WordPress] Hướng Dẫn chèn GIF động vào WordPress – Vân Mộng Hủ Thị
  2. À, heo cho hỏi thêm, những loại theme có hình trượt hoặc 1 số nội dung như trên dàng ngang của Heo ấy. tất cả những nội dung đó là phải “Dán” hay mình dùng “Thẻ”, Neko rất thích dùng theme dạng trượt hàng ngang với các bài nổi bật nhưng chưa biết sử dụng, lúc xài thì nó chỉ hiện ra như một theme thông đứng thông thường thôi, xin chỉ giáo 😛

    Số lượt thích

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s