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 , hoặc 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

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Không biết bạn đã từng đọc qua các nội dung dưới đây chưa nhỉ ?

guest
60 Comments
Inline Feedbacks
View all comments
Vinh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

cho mình hỏi mình thêm nó k vào 2 bên mà nó nằm ở dưới ạ

raimu home <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

bài viết hay và hữu ích quá, rất mong nhận được nhiều chia sẻ hơn nữa

Getjar <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

I really love your site.. Great colors & theme. Did you create this website yourself?
Please reply back as I’m wanting to create my own website and want to learn where you got this from or
exactly what the theme is named. Thanks!

cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend

bài viết rất hay ạ, ko dùng plugin là thấy tốt rồi hihi

Lưu Nam Ngọc <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

Mình muốn ảnh này di chuyển khi mình cuộn chuột được không bạn

Thu Phương <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

Bài viết hay. Vì không dùng plugin nên chạy nhẹ và nhanh, đỡ nặng web

Scotch <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend
Scotch (1)

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>
Friend
dovandung (5)

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>
Friend
dovandung (5)
Đã trả lời  dovandung

vâng thank bác ạ

dovandung <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>
Friend
dovandung (5)
Đã trả lời  dovandung

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

dovandung <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>
Friend
dovandung (5)
Đã trả lời  dovandung

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>
Friend
dovandung (5)
Đã trả lời  dovandung

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 ạ

nội thất nam dương <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

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

Phi Hồ <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">15</span><span style="color: #e91e63;">) </span>
Friend

Ư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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">25</span><span style="color: #e91e63;">) </span>
Friend

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">30</span><span style="color: #e91e63;">) </span>
Friend

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend

Ở 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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">6</span><span style="color: #e91e63;">) </span>
Friend

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

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

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Lại Đình Cường

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">59</span><span style="color: #e91e63;">) </span>
Friend

Top 1 comment -_-

hai le <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">33</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Star Cường IT

cùng đua top thôi 🙂

thiết kế web tại bắc ninh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>
Friend

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">72</span><span style="color: #e91e63;">) </span>
Friend

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">115</span><span style="color: #e91e63;">) </span>
Friend

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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">115</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Vỹ Spirit

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ế 😀

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">115</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Vỹ Spirit

Đú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 style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">115</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Vỹ Spirit

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 đó 😀

Mèo <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

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

Star Cường IT <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">59</span><span style="color: #e91e63;">) </span>
Friend

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