Chèn ảnh – banner quảng cáo vào WordPress, không dùng plugin

Chen anh - banner vao website WordPress

Chèn ảnh – banner vào  website WordPress

Hôm nay Hocban.vn chia sẻ đến các bạn một mẹo nho nhỏ, đó là cách để chèn ảnh hoặc banner quảng cáo vào WordPress mà không dùng plugin.

Thủ thuật này cũng có một vài ưu điểm thế này nè các bạn:

Đầu tiên là nó giúp các bạn chèn một hình ảnh, hay một banner quảng cáo tại một ví trí mà nó hỗ trợ widget. Hoặc là tại một vị trí cố định trong trong theme bạn đang xài, ví dụ như là ở đầu bài viết, cuối bài viết,…

Thứ hai là nó không dùng plugin nên sẽ tránh phải cài thêm 1 plugin.



Thứ ba là cách làm khá đơn giản, tiện lợi và nhanh chóng 😀

Thứ tư là bạn có thêm một số tùy chỉnh liên quan đến link. Ví dụ như khi click vào ảnh là dofollow hoặc là nonfollow , mở link trong tab mới, (cái này dành cho mấy anh em làm SEO).

Cách chèn ảnh – banner quảng cáo vào WordPress mà không dùng plugin

B1: Các bạn phải nghía xem là muốn chèn cái banner quảng cáo ở đâu, bên sidebar, trên header, hay trong bài viết,…

B2: Các bạn vào chỗ cần thêm banner nó sẽ hỗ trợ việc thêm widget;

B3: Các bạn thêm một cái widget HTML, sau đó copy đoạn code sau và paste vào trong đó nhé.

<a class="banner-sidbar" href="https://hocban.vn/chen-anh-banner-quang-cao-vao-wordpress-khong-dung-plugin" target="_blank" rel="dofollow"><img class="class-hinh-anh" title="Quảng Cáo Banner Sidebar" src="https://hocban.vn/wp-content/uploads/2017/11/Mau-quang-cao-sidebar-Hocbanvn.jpg" alt="" width="100%" height="auto" /></a>

Trong đó các bạn lưu ý như sau:

  • Thay link ảnh sau bằng link ảnh của bạn:
https://hocban.vn/wp-content/uploads/2017/11/Mau-quang-cao-sidebar-Hocbanvn.jpg
  • Thay liên kết sau bằng link mà bạn muốn trỏ đến:
https://hocban.vn/chen-anh-banner-quang-cao-vao-wordpress-khong-dung-plugin
  • Nếu muốn thay bằng liên kết nofollow thì thay thế nó chỗ từ dofollow ;

B4: Nếu như cái banner của bạn hiển thị không được ưng ý thì bạn có thể CSS nó lại bằng cách thêm đoạn code CSS dưới đây vào phần Addtional CSS nhé, và bắt đầu tùy chỉnh lại cho vừa ý. Ví dụ ở đây theme mình khi chèn ảnh vào nó sát phần cạnh dưới quá nên mình cho nó cách ra 0.8em. Cái này dự phòng thôi chứ không phải theme nào hiển thị cũng bị lệch như vậy 😀

img.class-hinh-anh {
    margin-bottom: 0.8em !important;
}

Xong rồi đấy, như vậy là các bạn đã có thể chèn ảnh / banner có link đi kèm mà không cần dùng plugin rồi đấy. Còn đây là thành quả của mình sau khi làm thử 😀

Chen banner quang cao tren hocbanvn - thanh qua

Chèn banner quảng cáo trên Hocban.vn – thành quả

À mình nói thêm là cái này cũng áp dụng được cho Blogspot (Blogger) được luôn nhé. Rất đơn giản, các bạn vào chỗ thêm tiện ích >> chọn widget HTML CSS >> Copy đoạn code trên dán vào >> thay thế bằng link ảnh và link đường dẫn sau ảnh mà bạn muốn.

Nếu bạn nào làm không được hoặc có gì thắc mắc, góp ý thì cứ để lại bình luận bên dưới nhé. Cảm ơn các bạn !

Bài viết liên quan

Mời bạn oánh giá 😇

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đẹp ZAI, dễ thương VL 😂

avatar
16 Comment threads
32 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
17 Comment authors
Scotchdovandungnội thất nam dươngPhi HồNguyễn Cao Tiến Recent comment authors
Scotch <span class="wpdiscuz-comment-count">1 bình luận </span>
Scotch 1 bình luận

em đang dùng Be theme có 1 column trên phần footer em muốn chèn ảnh vào , nhưng chèn ảnh cho chữ nằm trên thì làm sao bác

dovandung <span class="wpdiscuz-comment-count">5 bình luận </span>
dovandung 5 bình luận

chào bác ạ. mình muốn chèn vào haeder ở homepage thì làm như nào ạ. loay hoay mãi ko tìm được mong bác chỉ giáo ạ. em dùng Mythemeshop ạ

dovandung <span class="wpdiscuz-comment-count">5 bình luận </span>
dovandung 5 bình luận

Em dùng theme best của mythemeshop bác ạ. em muốn chèn ảnh ngay dưới thanh menu của homepage ý bác ạ. híc mà mãi ko biết làm ntn. bác chỉ giúp em với ạ. đa tạ bác nhiều nắm ạ

dovandung <span class="wpdiscuz-comment-count">5 bình luận </span>
dovandung 5 bình luận

Bác ơi, em gửi qua mail của bác rồi ạ. bác xem giúp em với ạ. thank bác :)))

dovandung <span class="wpdiscuz-comment-count">5 bình luận </span>
dovandung 5 bình luận

hic . gửi qua mail toàn báo lại là virut ko gửi đc bác ạ :(((((((

dovandung <span class="wpdiscuz-comment-count">5 bình luận </span>
dovandung 5 bình luận

vâng thank bác ạ

nội thất nam dương <span class="wpdiscuz-comment-count">1 bình luận </span>

thay banner chính vào phần nào vậy ad?

Phi Hồ <span class="wpdiscuz-comment-count">15 bình luận </span>

Ưu điểm thì có nhưng Nhược điểm là bạn nào ko rành code như mình thì hơi mệt ^^

Nguyễn Cao Tiến <span class="wpdiscuz-comment-count">20 bình luận </span>

Nay vào blog của bác. Tự nhiên nghe bụt bụt. Nhìn lại thì mới thấy nó bắn pháo bông :D.
Bài này tên top luôn nhỉ. Chúc mừng :v

Trần Dương <span class="wpdiscuz-comment-count">24 bình luận </span>

Có plugin nào giúp chuyển hướng 301 một lần mà hết các link trong site ko bạn. Mình muốn chuyển hướng mà ko thấy plugin nào cả.

Vu Class <span class="wpdiscuz-comment-count">2 bình luận </span>

Ở WordPress bản từ 4.9.0 trở lên thì ở Widget hỗ trợ chèn Rich Text Editor , dễ dàng chèn image hay link như trong phần viết bài 🙂 . Còn để tự chèn sau một đoạn văn bản ( 5,7,9 dòng,v…v.. ) trong bài viết thì khuyên dùng plugin vì dùng function trong theme khi theme update lại viết lại rất mệt và phải tự canh div, class, csss cho banner .

Phong Phan <span class="wpdiscuz-comment-count">6 bình luận </span>

Zậy cũng nghĩ ra viết bài dc 🙂 hay thiệt tưởng đâu mấy cái này cơ bãn ai cũng hok biết chớ, để học theo bác viết mấy cái hok ai ngờ chơi 🙂 haha

Gia Phạm <span class="wpdiscuz-comment-count">1 bình luận </span>

Hay đó. đánh dấu cái đã khi nào cần thì xem. hehe :p

Lại Đình Cường <span class="wpdiscuz-comment-count">111 bình luận </span>

Nếu như chèn trên sidebar thì chỉ cần dùng Text Widget trên WordPress 4.9 để chèn hình và link, nếu như chỉ chèn hình không thì có thể dùng Image Widget. Từ phiên bản WordPress 4.8 WordPress có bổ sung nhiều widget hay ho hơn rồi.

Lại Đình Cường <span class="wpdiscuz-comment-count">111 bình luận </span>

Uhm, nói chung dùng trên sidebar thì dễ, widget có sẵn hay code custom HTML đều OK 😀

Star Cường IT <span class="wpdiscuz-comment-count">59 bình luận </span>

Top 1 comment -_-

hai le <span class="wpdiscuz-comment-count">27 bình luận </span>

cùng đua top thôi 🙂

thiết kế web tại bắc ninh <span class="wpdiscuz-comment-count">36 bình luận </span>

thiếu bước chèn code html này vào widget HTML tùy chỉnh của wordpress nhé nói chung là không có gì mới nhưng được cái chịu khó viết bài hehe

Blog Duy Đàm <span class="wpdiscuz-comment-count">60 bình luận </span>

Cách chèn này là hay rồi. Nhưng mình có một vấn đề gặp phải là khi dùng plugin tự động nofollow thì cho dù để link dạng dofollow thì link đó khi kiểm tra trên ahrefs vẫn ko thấy link về.

Vỹ Spirit <span class="wpdiscuz-comment-count">106 bình luận </span>

Em vẫn chèn thủ công như thế này chứ ko cài plugin chi cho mất công 😀

Vỹ Spirit <span class="wpdiscuz-comment-count">106 bình luận </span>

Em nhìn vô mẫu của người ta rồi về làm lại cho phù hợp với kích thước mình muốn đó 😀

Vỹ Spirit <span class="wpdiscuz-comment-count">106 bình luận </span>

Đúng rồi bác, ảnh này nó cố định mà. Đâu phải như quảng cáo GA đâu mà tự co dãn cho phù hợp với kích thước màn hình 😀

Vỹ Spirit <span class="wpdiscuz-comment-count">106 bình luận </span>

Cái này em nghĩ ko cần thiết vì dù sao đi nữa thì nó cũng thể hiện được nội dung của banner rồi, nếu muốn nó tự co dãn theo độ rộng thì chỉ cần thêm 1 dòng CSS nữa là được nhưng ảnh sẽ to lên và mờ đi, em không muốn người ta kéo xuống chỉ để nhìn cái banner quảng cáo to tổ bố như thế 😀

Mèo <span class="wpdiscuz-comment-count">1 bình luận </span>

Khá hay đó đỡ tý dung lượng :v

Star Cường IT <span class="wpdiscuz-comment-count">59 bình luận </span>

Hay :v mặc dù không liên quan :v