Chèn ảnh – banner quảng cáo vào WordPress, không dùng plugin
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é.
|
1 |
<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:
|
1 |
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:
|
1 |
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 😀
|
1 2 3 |
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ài viết liên quan
Hocban.vn
Bài viết bạn đang xem được thực hiện bởi Tịnh Nguyễn, một thanh niên đẹp zai chuẩn sói ca, có sở thích vọc vạch về máy tính và Internet, hiện tại là người chém gió nhiều nhất trên Hocban.vn.
Ư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.
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 😀
Uhm, nói chung dùng trên sidebar thì dễ, widget có sẵn hay code custom HTML đều OK 😀
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 ạ !
Top 1 comment -_-
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.
cùng đua top thôi 🙂
Quẩy mạnh mẽ lên anh em, dạo này trầm quá 😀
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 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ỉ ?
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 đó 😀
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 😀
Đú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 😀
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 😀
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ế 😀
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à.
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