Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thêm hiệu ứng css tùy chỉnh vào bất kỳ trang wordpress hoặc bài đăng nào một cách dễ dàng chỉ trong vài phút. Sẳn sàng?
Có một số cách để thêm CSS tùy chỉnh vào WordPress
Trình chỉnh sửa chủ đề
Phương pháp đầu tiên là sử dụng trình chỉnh sửa chủ đề để thêm trực tiếp CSS của bạn vào chủ đề. Nhưng đây là một cách làm rất tệ vì CSS sẽ được áp dụng cho toàn bộ trang web, không chỉ một trang. Ngoài ra, mã CSS của bạn sẽ bị xóa khi cập nhật chủ đề
CSS nội tuyến
Phương pháp thứ hai là thêm CSS nội tuyến bằng cách sử dụng thẻ kiểu trực tiếp vào bài đăng
Điều này hoạt động trong hầu hết các trường hợp nhưng bạn sẽ thấy CSS cũng sẽ được tính là nội dung [Xem hình bên dưới] và gây nhầm lẫn cho các plugin khác như Yoast SEO và chèn quảng cáo dẫn đến đặt sai vị trí quảng cáo hoặc thậm chí phá vỡ mã CSS của bạn
Trình tùy chỉnh WordPress
Một phương pháp khác là sử dụng bảng CSS bổ sung trong tùy biến WordPress. Đây có lẽ là cách tốt nhất so với hai cách trước. Nhưng CSS vẫn sẽ được áp dụng cho toàn bộ trang web chứ không phải bài đăng
Sử dụng Plugin
Vì vậy, để giải quyết vấn đề này, chúng tôi sẽ sử dụng plugin WP Thêm CSS tùy chỉnh
Sau khi cài đặt, bạn sẽ có hộp bổ sung ở cuối bài đăng cho phép thêm bất kỳ CSS bổ sung nào vào bài đăng đó.
Hãy kiểm tra nó
Nút Phương tiện truyền thông xã hội 3D có thể lật bên dưới là một ví dụ về việc thêm CSS tùy chỉnh bằng cách sử dụng plugin này
Theo dõi @redStapler_twit
Hãy để tôi chỉ cho bạn cách tôi đã làm nó. Đầu tiên mình sẽ copy html vào bài viết. Chúng ta cần làm điều này trong chế độ văn bản. Bạn sẽ thấy rằng tôi cũng đã thêm JavaScript, điều này hoàn toàn ổn
Tiếp theo, tôi sẽ sao chép CSS vào hộp
Bây giờ chúng ta sẽ cần một chút điều chỉnh. Mã ban đầu đã được thêm vào phần nội dung của trang nhưng ở đây chúng tôi đang thêm vào phần bài đăng để thay thế. Vì vậy, tôi sẽ tạo một trình bao bọc div để bọc mã của chúng ta. Và sau đó sao chép CSS có liên quan trên phần thân vào trình bao bọc
.social-wrapper {
/* related code on the body */
}Và đó là nó. bạn có thể tìm thấy mã nguồn và hướng dẫn cho nút Phương tiện truyền thông xã hội có thể lật tại đây
Vì vậy, đó là tất cả cho hướng dẫn này. Nếu bạn thích nó, đừng quên thích hoặc đăng ký Kênh Facebook và YouTube của chúng tôi để duy trì kết nối với chúng tôi. Hẹn gặp lại bài sau
Bạn không thể thêm mã HTML, CSS và JS vào trang WordPress và hiển thị đầu ra? . Tôi có 2 giải pháp tốt nhất cho vấn đề này, mà tôi sẽ cho bạn biết trong bài viết này. Vì vậy, bài viết này nói về cách thêm mã HTML, CSS và JS vào trang WordPress. Trong một dự án, tôi đã tạo bằng mã HTML, CSS và JS, tôi đã nghiên cứu cách chạy đầu ra trên các trang WordPress. Khi nghiên cứu cách hiển thị đầu ra của dự án của tôi được tạo bằng HTML, CSS và Js trên trang WordPress. Tôi không thể hiển thị đầu ra trên trang WordPress của mình, sau đó tôi tìm thấy hai giải pháp. Cả hai phương pháp sẽ phù hợp với bạn, bất kể bạn viết mã ba ngôn ngữ lập trình này cùng nhau và riêng biệt như thế nào
Một trong hai phương pháp đó yêu cầu plugin và phương pháp kia không yêu cầu plugin. Nếu bạn muốn sử dụng chúng mà không cần phương thức plugin, bạn cần hợp nhất mã CSS và JS vào HTML. Với phương pháp plugin, mã HTML, CSS và JS của bạn cũng có thể được tách biệt. Hãy xem hai phương pháp dễ dàng để thêm mã vào các trang WordPress
1. Thêm mã vào trang WordPress mà không cần sử dụng plugin
Ghi chú. Chỉ làm theo phương pháp này nếu bạn đang sử dụng trình chỉnh sửa khối, nếu không thì hãy sử dụng phương pháp tiếp theo
Step 1. In this method, your HTML, CSS, and JS code should be combined if they are separate so, you need to include your CSS and Js code in HTML. Add tag inside the HTML tag and give your CSS code inside the style tag, as shown in the figure. And add tag inside HTML tag and give your JavaScript code inside tag, as shown in the figure.
Bước 2. Đăng nhập vào bảng điều khiển WordPress của bạn. Thêm một trang mới để thêm HTML, CSS và JS tùy chỉnh của bạn. Tạo trang mới theo trang > thêm trang mới ở menu bên trái. Khi đã ở trong trang WordPress, hãy nhấp vào biểu tượng thêm + [thêm trình chèn khối] ở trên cùng
Bước 3. Tìm kiếm HTML tùy chỉnh trong hộp tìm kiếm và nhấp vào HTML tùy chỉnh để thêm nó
Bước 4. Dán HTML kết hợp của bạn vào hộp HTML tùy chỉnh. Sau đó nhấp để xem trước trang và đầu ra của mã HTML tùy chỉnh của bạn được hiển thị thành công trên trang WordPress
Nếu bạn muốn đầu ra của mã được hiển thị trên toàn bộ trang của mình, hãy đặt "chiều rộng đầy đủ" cho mã đó trong bố cục nội dung trong cài đặt chủ đề trang của bạn. Và thay đổi “không có thanh bên” trong cài đặt thanh bên của chủ đề. Nếu bạn làm điều này, đầu ra của mã của bạn sẽ hiển thị trên toàn trang, Chỉ có đầu trang và chân trang của bạn được hiển thị
Vì vậy, nếu bạn nghĩ rằng phương pháp này khó đối với bạn và gặp sự cố khi hợp nhất mã CSS và mã Js trong HTML thì hãy thử phương pháp tiếp theo. Trong phương pháp tiếp theo, bạn có thể hiển thị/chạy đầu ra trên trang WordPress của mình mà không cần hợp nhất mã HTML, CSS và JS của bạn. Vì vậy, hãy xem cách thêm mã HTML, CSS và JS vào trang WordPress bằng cách sử dụng plugin và hiển thị đầu ra trên trang
2. Thêm mã vào trang WordPress Bằng cách sử dụng plugin
Bước 1. Trong phương pháp này, trước tiên bạn cài đặt và kích hoạt plugin có tên “WP-CODER“. Đây là plugin tốt nhất để thêm mã HTML, CSS và JS vào các trang/bài đăng WordPress. Bởi vì bạn có thể dễ dàng thêm mã của ba ngôn ngữ này vào đó và xem đầu ra của mình
Bước 2. Sau khi bạn kích hoạt plugin wpcoder, tùy chọn plugin Wow sẽ được thêm mới vào menu WordPress. Plugin G0 to wow > wp coder
Bước 3. Thêm mã HTML, CSS và JS của bạn bằng plugin này. Vì vậy, hãy nhấp vào nút thêm mới ở trên
Bước 4. Bài đăng wp coder có ba tùy chọn riêng biệt là mã HTML, mã CSS và mã JS. Dán, HTML của bạn trong hộp mã HTML, CSS của bạn trong hộp mã CSS và Javascript của bạn trong hộp mã JS. Nếu bạn có tất cả mã ở định dạng HTML, hãy dán nó vào hộp HTML
Bước 5. Sau khi dán mã của bạn, nhấp vào nút lưu. Để hiển thị đầu ra của mã này trên trang WordPress của bạn, hãy sao chép mã ngắn của bạn như hình bên dưới và dán nó vào trang WordPress của bạn
Sau khi dán mã ngắn của bạn trên trang, sau đó xuất bản trang của bạn và xem đầu ra của mã HTML, CSS và JS của bạn được hiển thị thành công trên trang của bạn. Bạn có thể sử dụng 2 phương pháp này, Nếu bạn có một trang web liên quan đến mã hóa, bạn có thể cung cấp mã trong bài đăng của mình và hiển thị đầu ra cho người dùng bằng phương pháp này. Bạn có thể hiển thị đầu ra cho người dùng của mình và diễn giải mã
Phần kết luận
Tôi hy vọng cả hai phương pháp đều hữu ích cho bạn. Tôi khuyên bạn nếu bạn đang sử dụng trình chỉnh sửa cổ điển trong WordPress thì hãy sử dụng phương pháp plugin. Và nếu bạn đang sử dụng trình chỉnh sửa khối, bạn có thể sử dụng chúng mà không cần phương thức plugin. Đừng thêm quá nhiều mã JavaScript vào trang web của bạn, vì nếu trang web của bạn đã được thiết lập quảng cáo, trang web của bạn sẽ trở nên chậm chạp. Hãy cẩn thận, vì nếu bạn không biết mình đang làm gì, bạn có thể khiến trang web bị sập. Nếu bạn có bất kỳ nghi ngờ nào khác, hãy hỏi họ trong hộp bình luận. Bây giờ bạn đã biết cách thêm HTML, CSS và JS vào trang hoặc bài đăng WordPress