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.
MỤC LỤC NỘI DUNG
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).
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ử 😀
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ạn làm ơn chỉ mình cách chèn 1 banner vào trong đầu mỗi bài viết trên blogspot với, mình thêm đoạn code đó (có chỉnh sửa link ảnh và đường dẫn đi kèm khi nhấn vô banner) nhưng nó báo lỗi
Bên Blogspot mình cũng chưa có tìm hiểu nhiều bạn ơi. Nếu mà bạn không rành code thì chuyển sang dùng WordPress nhé! Blogspot là phải biết chút đỉnh code thì mới tùy biến được theme.
wordpress nó có cái wiget trong theme panel. cứ vào đó thay là được
cho mình hỏi mình thêm nó k vào 2 bên mà nó nằm ở dưới ạ
Cái này ko phải dán code vào là nó nhảy ra 2 bên đâu bạn, bạn đem dán nó vào cái widget cần hiển thị nhé !
bài viết hay và hữu ích quá, rất mong nhận được nhiều chia sẻ hơn nữa
Cảm động quá thớt, hehe :v
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!
Thank you for the compliment, this website I use Themezee’s Smartline theme. The theme link is below the footer of Hocban.vn
bài viết rất hay ạ, ko dùng plugin là thấy tốt rồi hihi
Rất cảm động ạ :v
Mình muốn ảnh này di chuyển khi mình cuộn chuột được không bạn
cái này là đoạn code đơn giản, ko được đâu bạn nhé !
Bài viết hay. Vì không dùng plugin nên chạy nhẹ và nhanh, đỡ nặng web
Cảm động quá mà :v
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
Bác comment demo em xem thử nhé !
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 ạ
vâng thank bác ạ
Ồ, vậy thì tạm gác chuyện thêm banner, cái đó không khó. Cái khó là giờ web của thớt có thể đang dính virus, do đó phải quét dọn sạch sẽ trước khi quá muộn. Kỹ thuật này nó chuyên sâu. Thớt chịu khó đăng bài lên nhóm để được tư vấn cụ thể hơn. Link nhóm trong mục liên hệ của Hocban.vn nhé !
hic . gửi qua mail toàn báo lại là virut ko gửi đc bác ạ :(((((((
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 :)))
Bạn gửi theme qua mail: tinhnguyenblog@gmail.com mình xem cho.
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 ạ
Bác dùng theme tên gì ?
thay banner chính vào phần nào vậy ad?
Banner chính là banner nào thớt ? Web bác chỗ nào có hỗ trợ widget thì dán vào được nghen.
Ư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 ^^
Cái này cũng không cần rành code đâu bác, sửa lại cái link theo hướng dẫn bằng cách copy và paste thôi mà 😀
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
Haha, bắn pháo bông từ hôm 23 âm lịch rầu bác :v Bài này bác kiếm từ khóa chi mà lên tốp được hay rứa ? Mà tốp 1 hay tốp 9 đó bác :v
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ả.
Tạm thời bác đăng lên nhóm xem anh em nào đã thực hiện việc này họ chỉ cho nhé, em chưa làm cái này nên cũng không biết nữa.
https://www.facebook.com/groups/Wordpresscoban/
Ở 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 .
Bác nói em mới để ý, hiện nay nó đã cho chèn ảnh vào trong widget rồi. Như vậy cái này còn lại được ưu điểm là về phần SEO với lại có thể dán ở một vị trí nào đó để hiển thị trên theme.
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
Toàn cái đơn giản thôi bác, HTML và CSS rất nhiều người ko biết đó :v
Hay đó. đánh dấu cái đã khi nào cần thì xem. hehe :p
Haha, cái này đơn giản không khó nhưng mà được cái tiện bác ha ? Copy và paste kiểu gì cũng nhanh hơn ngồi gõ lại :v
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.
Vâng bác, tại vị trí có hỗ trợ thêm widget thì quất được hết. Em sưu tầm được một mớ các mẫu như link, ảnh động,… như thế này, khi cần cốp bi tiện phết bác ạ !
Uhm, nói chung dùng trên sidebar thì dễ, widget có sẵn hay code custom HTML đều OK 😀
Haha, em mới nghía ra thêm một thủ thuật chèn ảnh có link bằng cái wiget hình ảnh của WordPress luôn rồi. Không cần chèn code như trên luôn bác ạ. Mình chọn chỉnh sửa ảnh đó nó sẽ dẫn đến mục có điền các thông tin, trong đó có link cần trỏ đến 😀
Top 1 comment -_-
Quẩy mạnh mẽ lên anh em, dạo này trầm quá 😀
cùng đua top thôi 🙂
Tóp rồi, giờ còn cái đầu tư chất lượng comment nữa là ngon. Hiện tại đang là SPAM đó nghen.
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
Ơ ơ, bước này e có viết mà bác :3
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ề.
Uầy, sao bác xài plugin đó làm chi ta 😀 WordPress họ tính cả rồi, trong phần bình luận thì là nofollow hết, nói chung những chỗ nào mình tự chèn, tự viết thì nó sẽ là dạng dofollow. 😀
Em vẫn chèn thủ công như thế này chứ ko cài plugin chi cho mất công 😀
Cái của bác giờ căn nó ra giữa là đc, nó bị lệch sang bên trái. Cũng không cần hiển thị đầy đủ kích thước, của e là do thói quen tận dụng kích thước màn hình ấy mà.
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ế 😀
Em mới thêm cái widget bên sidebar cho bác test đấy, bác thử cả trên PC, tablet và điện thoại xem sao. Độ rộng em để 100% luôn ấy 😀
Đú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 😀
Quảng cáo bác làm tốt quá, cứ như của chuyên gia ấy nhỉ. À khoan, nó có vấn đề với kích thước, trên điện thoại em nó không đủ rộng đó bác (màn hình full HD 5.5 inch). Có thể hiểu là màn hình rộng 100% nhưng nó chỉ rộng có 70% thôi 😀
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 đó 😀
Cài thế này chỉ vài ba dòng HTML nên nhẹ là đúng rồi bác nạ 😀 | Mà các mẫu quảng cáo (hình) bác tự thiết kế hay bên tiếp thị liên kết họ có sẵn vậy nhỉ ?
Khá hay đó đỡ tý dung lượng :v
Đỡ cài theme plugin chứ tý dung lượng chi bạn ?
Hay :v mặc dù không liên quan :v
Chèn vào Blogspot cũng đc mà ko liên quan :3