Nguyên nhân của tình trạng này đến từ đâu mình cũng không rõ và chưa có nhiều thời gian để tìm hiểu. Nhưng vì chính website GiuseArt.com của mình cũng gặp tình trạng này nên mình đã thử tìm cách khắc phục, và kết quả là thành công. Do đó, nếu bạn gặp trường hợp tương tự dưới đây, thử làm theo cách của mình xem sao nhé!

Update: Facebook đã fix lỗi và Comment Facebook đã ngon lành trở lại vào ngày 12/10/2018 rồi nhé!

Các bạn copy và paste đoạn code CSS bên dưới vào phần tùy chỉnh CSS của website nhé.

Cụ thể như sau:

• Cách phổ thông nhất: Giao diện > Sửa > Style.css (phổ thông nhất)
• Đối với theme Flatsome: Giao diện > Tùy chỉnh > Style > Custom CSS > Custom CSS

Xong rồi các bạn lưu lại và quay trở lại bài viết xem thành quả được chưa nhé!

Chúc các bạn xử lí thành công.

Bài viết mình hướng dẫn thao tác trên theme Flatsome nhé! Do đó, trong quá trình hướng dẫn của mình, một số thao tác có thể sẽ không giống đối với các theme khác. Tuy nhiên, về cơ bản các bạn chỉ cần tìm đúng file .php của trang mà bạn muốn hiển thị Breadcrumbs trong theme là được!

Bước 1: Mở tính năng Breadcrumbs trong Yoast SEO

Có thể bạn đã cài plugin Yoast SEO trước đó rồi hoặc nếu chưa cài thì tải plugin về và cài đặt tại đây: Free (seo 1 keyword) – Fremium (seo nhiều keywords).

Sau khi cài đặt xong, các bạn vào Quản trị > SEO > Advanced và mở Enable Breadcrumbs (phiên bản 5.7.1)

Đối với phiên bản Yoast SEO 7.9 trở lên, cài đặt Breadcrumbs sẽ hơi khác một chút như sau:

Ngay từ bây giờ website của bạn đã sẵn sàng tính năng hiển thị Breadcrumbs rồi nhé.

Tuy nhiên, không phải chỉ ấn Enable là nó hiện luôn, mà việc quan trọng nhất là mình phải chèn một đoạn code PHP bỏ vào đúng vị trí cho nó hiển thị trong theme nữa. Mời bạn tiếp tục bước 2:

Bước 2: Chèn code hiển thị Breadcrumbs trong theme

Bây giờ chỉ cần chèn đoạn code PHP bên dưới vào bất kỳ vị trí nào trong theme để nó hiển thị.

Tuy nhiên, theo thói quen điều hướng của người dùng, chúng ta chỉ nên chèn breadcrumbs vào đầu các trang đơn (page.php) + trang bài viết (single.php). Mình sẽ hướng dẫn các bạn thực hiện lần lượt từng trang một trong theme Flatsome nhé!

Chèn Breadcrumbs vào trang đơn

Trang đơn của theme Flatsome có nhiều kiểu style (template-page) khác nhau. Do đó, theo ý kiến cá nhân của mình thì chỉ nên chèn Breadcrumbs vào trang đơn có bố cục sidebar trái hoặc sidebar phải, vì nó hiển thị tương đương như trong bài viết nên sẽ đẹp và hữu dụng hơn. Các bạn không nên chèn Breadcrumbs vào các kiểu trang khác, đặc biệt là kiểu full-width.

Các bạn vào File Manager trong hosting, truy cập thư mục wp-content > themes > flatsome > page-right-sidebar.php hoặc page-left-sidebar.php.

Bây giờ mình sẽ thực hiện chèn Breadcrumbs vào trang đơn có sidebar bên phải nhé! Mở file page-right-sidebar.php.

Chèn đoạn code mình gửi bên trên đó vào ngay sau <div class=”page-inner”> và ngay trên đoạn <?php if(get_theme_mod(‘default_title’, 0)){ ?>. Các bạn xem kỹ hình trên để copy – paste vào cho chuẩn nhé!

Sau đó, các bạn copy đoạn CSS này bỏ vào phần tùy chọn CSS của theme nhé! Giao diện – Tùy chỉnh – Tùy chỉnh CSS:

Sau khi dán đoạn code vào đúng vị trí và update CSS cho nó, các bạn lưu lại để nó có hiệu lực nhé, và đây là kết quả.

Chèn Breadcrumbs vào bài viết

Chèn breadcrumbs vào bài viết cũng gần tương đương như chèn vào trang đơn.

Các bạn truy cập thư mục sau trong File manager: wp-content > themes > flatsome > template-parts > posts.

Đối với theme Flatsome, bài viết có thể tùy chỉnh sidebar trái hoặc sidebar phải, tương ứng với 2 file layout-left-sidebar.php và layout-right-sidebar.php. Các bạn có thể chèn code hiển thị Breadcrumbs vào 2 file đó.

Tuy nhiên, trong theme Flatsome có một file entry-header.php sẽ áp dụng phần đầu trang cho cả 2 layout trên. Do đó, chúng ta sẽ chèn code hiển thị Breadcrumbs tại file này. Bạn cần truy cập đường dẫn sau: wp-content > themes > flatsome > template-parts > posts > partials > entry-header.php

Bạn copy đoạn code hiển thị Breadcrumbs bên trên rồi chèn vào ngay sau <header class=”entry-header”> như hình trên nhé! Sau đó, lưu lại và hưởng thành quả:

Lời kết

Các bạn thực hiện tuần tự theo các bước mình hướng dẫn nhé! Chúc các bạn làm tốt và có những trải nghiệm thú vị tại website Ninh Bình Web

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ blog GiuseArt trong suốt thời gian qua. Mọi nhu cầu thiết kế – in ấn sáng tạo và thiết kế website, vui lòng liên hệ trực tiếp Admin để được tư vấn và hỗ trợ:

+ Liên hệ: Lê Văn Thiện
+ Phone: 0972939830
+ Email: giuselethien@gmail.com
+ Website: www.giuseart.com
+ Flickr: www.flickr.com/photos/77493237@N07/albums
+ Behance: https://www.behance.net/giuselethien
+ Pintesest: https://www.pinterest.com/giuselethien/pins/

Demo: http://bds7.ninhbinhweb.info

Điều kiện & yêu cầu

Bài viết này mình chỉ cho các bạn mới học làm website WordPress, với mục đích làm sao chỉ cần copy – paste là có thể làm được (đôi khi không cần hiểu). Do đó, lưu ý giúp mình một số điều sau!

• Nền tảng: WordPress (khuyến khích WP 5 trở lên)
• Theme Flatsome

Demo mình làm website sử dụng theme Flatsome nên bạn nào đang có theme Flatsome thì cứ an tâm hoàn toàn, chỉ cần copy – paste theo đúng như hướng dẫn của mình là OK. Những bạn khác không sử dụng theme Flatsome thì có thể liên hệ mình support riêng nhé!

Tạo hiệu ứng ánh sáng lấp lánh khi hover vào ảnh bài viết

Bước 1: Copy CSS

Các bạn copy toàn bộ đoạn code CSS dưới đây nhé! Đừng thiếu gì kẻo không thành công!

Đoạn CSS dưới sẽ làm việc với class .post-item .box-image. Do đó, bất cứ bài viết nào trong website có ảnh đại diện nó đều áp dụng hiệu ứng này các bạn nhé!

Bước 2: Paste CSS

Các bạn vào Giao diện – Tùy biến – Style – Custom CSS. Paste toàn bộ đoạn CSS ở trên vào nhé!

Bước 3: Lưu lại và hưởng thành quả

Các bạn Save lại thao tác và ra trang chủ hoặc trang lưu trữ bài viết để xem sự thay đổi nhé!

Lời kết

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ Ninh Bình Web. Chúc các bạn sử dụng đoạn code CSS trên hiệu quả nhé! Có thắc mắc hoặc lỗi chỗ nào cũng vui lòng comment cho mình biết nữa

Demo: http://dienmay3.ninhbinhweb.info, http://bds8.ninhbinhweb.info

Điều kiện & yêu cầu

Bài viết hướng dẫn trên thực tế trong quá trình làm website của mình. Kiến thức có thể sẽ qúy báu với nhiều người, những cũng có thể không lạ lẫm gì với một số bạn. Do đó, các cao thủ xem qua có gì sai sót vui lòng chỉ giáo thêm cho mình nhé!

Trang demo để thực hiện đoạn code hướng dẫn mình có thông số như sau:

• Nền tảng: WordPress 5.1
• Theme: Flatsome
• Plugin sử dụng: Woocommerce

Do đó, nếu bạn cũng đang có website đáp ứng đầy đủ thông tin như mình vừa liệt kê thì cứ an tâm copy – paste theo hướng dẫn là sẽ thành công nhé!

Các bạn nào không làm được hoặc gặp lỗi, vui lòng comment để mình tìm hướng xử lí cùng nha!

Tạo hiệu ứng ánh sáng lấp lánh khi hover vào ảnh sản phẩm Woocommerce

Bước 1: Copy CSS

Các bạn copy toàn bộ đoạn code CSS dưới đây nhé! Đừng thiếu gì kẻo không thành công!

Đoạn CSS dưới sẽ làm việc với class .product-small .box-image. Do đó, bất cứ sản phẩm Woocommerce nào trong website có ảnh đại diện nó đều áp dụng hiệu ứng này các bạn nhé!

Bước 2: Paste CSS

Các bạn vào Giao diện – Tùy biến – Style – Custom CSS. Paste toàn bộ đoạn CSS ở trên vào nhé!

Bước 3: Lưu lại và hưởng thành quả

Các bạn Save lại thao tác và ra trang chủ hoặc trang lưu trữ bài viết để xem sự thay đổi nhé!

Lời kết

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ GiuseArt. Chúc các bạn sử dụng đoạn code CSS trên hiệu quả nhé! Có thắc mắc hoặc lỗi chỗ nào cũng vui lòng comment cho mình biết nữa

Hiện có một vài bạn mua source code của mình về làm web một thời gian bị virut và có phản hồi lại với mình!

Qua kiểm tra thì mình có nhận định như sau, muốn thông tin cho những anh em khác biết luôn:

• File backup duplicator các bác mua về khôi phục và không xoá các file thực thi của plugin duplicator cũng không gỡ plugin đó ra! -> khả năng nhiễm vi rút lên tới 90% do lỗ hổng từ plugin duplicator.
• Một số bạn cài plugin wp easy SMTP phiên bản cũ cũng bị nhiễm vi rút chuyển hướng hoặc index tiếng nước ngoài!

Khuyến cáo: bất kỳ bạn nào khôi phục web sử dụng plugin duplicator thì sau khi vào đc admin, vui lòng:

1. Quản trị – duplicator – stored data – xoá 3 nút là các file thực thi của plugin duplicator (1. Clean…, 2. Delete…., 3. Remove….)
2. Gỡ plugin duplicator
3. Vào phpmyadmin xoá 2 row đc sinh ra bởi plugin duplicator (không nhớ tên cụ thể nhưng trong tên row có chứa duplicator…., nhìn phát ra ngay)
4. Tìm trong plugins xem có plugin wp easy SMTP, cập nhật phiên bản mới ngay!

Các bác mua source code bị virut inbox mình để được hướng dẫn xử lí nha!

Mình có làm một vài mẫu web và được khách hàng phản hồi khá tích cực về nút Hotline ở góc trái phía dưới trang cũng như 2 nút Hotline + Chat Facebook ở chân trang khi lướt web trên các thiết bị di động. Và hôm nay, mình sẽ hướng dẫn các bạn làm các nút bấm tương tự nhé!

Mời xem demo tại đây: http://cake.ninhbinhweb.com, http://fashion2.ninhbinhweb.com

Lưu ý: nhớ mở cả giao diện mobile để thấy rõ 2 nút ở chân trang nhé!

Tạo nút Hotline cho giao diện Desktop

Thực chất là mình tạo một đoạn HTML để tạo nút Hotline và ném vô file footer.php của giao diện, đoạn HTML đó đã được nhúng sẵn code CSS để định dạng hình dáng và màu sắc theo ý mình muốn.

• Cách tìm file footer.php: vào Quản trị > Giao diện > Sửa > Footer.php
• Đối với theme Flatsome có sử dụng Child theme: Quản trị > Giao diện > Sửa > Chọn giao diện > Flatsome > Footer.php.

Ta copy đoạn code HTML sau và dán vào phía dưới thẻ đóng </body> trong file footer.php của giao diện.

và ta có kết quả như sau:

Giải thích ý nghĩa:

• Trong đó, ta có một khối <div>…</div> chứa text “Hotline: 0972.939.830“.
• Khối <div>…</div> đó được đặt nằm trong cặp thẻ <a>…</a> có đường dẫn là “tel:+84972939830”.
• Do đó, khi ta ấn chuột vào nút Hotline, nó sẽ dẫn link tới số điện thoại bên trong đường dẫn ta vừa ghi.

Bây giờ, chúng ta sẽ sử dụng đoạn code CSS sau để định dạng cho nút Hotline được đẹp lung linh hơn nhé!

Copy toàn bộ đoạn code CSS dưới đây và dán vào sau thẻ đóng </body> trong file footer.php của giao diện. (dán ngay bên trên đoạn code HTML vừa làm).

Đoạn code trên chúng ta đặt cho hotline những thuộc tính chính sau:

• Nằm im một chỗ không nhúc nhích: Position: fixed;
• Cách lề trái 10px: left:10px;
• Cách chân trang 10px: bottom:10px;
• Màu nền là vàng: background: #fac100;
• Trên giao diện mobile thì display:none, nghĩa là cho ẩn trên giao diện di động, để phần sau ta chèn 2 cái nút kia đẹp hơn.

Và sau 2 lần copy – paste, chúng ta đã làm được nút Hotline khá ấn tượng rồi phải không? Phần tiếp theo chúng ta cùng tiếp tục nghiên cứu để làm hai nút Hotline + Chat Facebook ở chân trang trên giao diện mobile như hình dưới nhé!

Tạo nút Hotline và Chat Facebook ở chân trang trên giao diện mobile

Cũng trong file footer.php của giao diện chúng ta vừa sửa, bây giờ các bạn copy và dán đoạn code HTML này vào sau thẻ đóng </body> nhé!

Các bạn thay link Messenger cá nhân và số hotline vào nhé. Còn nếu ai không biết địa chỉ Messenger của mình thế nào thì nhìn hình bên dưới nhé, các bạn nhớ copy phần cuối của URL trang cá nhân, rồi thêm vào sau “http://www.messenger.com/t/” là được nhé!

Bước tiếp theo, copy toàn bộ đoạn code CSS này, và dán vào bên trong cặp thẻ <style>…</style> mà mình vừa sử dụng ở phần trên nhé!

Thế là mình đã có một thanh ngang ở chân trang chứa 2 nút tiện ích Hotline + Chat Facebook rồi nhé!

Tổng hợp code của toàn bộ bài viết:

Các bạn cũng có thể copy toàn bộ đoạn code trên và dán vào sau thẻ đóng </body> trong file footer.php của giao diện bạn đang dùng, để sử dụng đồng thời cả 2 loại nút bấm cho desktop và mobile luôn nhé! Quá dễ phải không nào?

Lời kết

Các bạn thử làm coi sao nhé, nếu không được thì vui lòng liên hệ mình để được hỗ trợ nhé. Cám ơn sự quan tâm theo dõi và ủng hộ của các bạn danh cho blog Ninh Bình Web trong suốt thời gian qua. Chúc các bạn làm tốt nhé!