Vô hiệu hóa mẫu liên hệ 7 CSS

Question

Xóa biểu mẫu liên hệ 7 javascript. js và Biểu định kiểu. css. Bài viết này giải thích cách tải biểu mẫu liên hệ 7 chỉ trên trang liên hệ hoặc bất kỳ trang cụ thể nào khác. Nói tóm lại, chúng tôi không muốn tải tham chiếu các tệp JavaDcript và Biểu định kiểu (JS / CSS) của Biểu mẫu liên hệ 7 trên tất cả các trang của Trang web WordPress của chúng tôi. Ở đây sẽ cố gắng giải thích cách thức và lý do xóa tệp javascript và biểu định kiểu trên tất cả các trang khác trong WordPress

Nội dung chính Show

Mẫu liên hệ 7 là gì?
Tại sao lại xóa các tệp JS và CSS của Biểu mẫu liên hệ 7?
Mã cho Biểu mẫu liên hệ được tối ưu hóa 7?

Mẫu liên hệ 7 là gì?

Contact Form 7 là plugin tốt nhất và được sử dụng rộng rãi trong mọi website WordPress. Nó có thể quản lý nhiều biểu mẫu liên hệ, ngoài ra bạn có thể tùy chỉnh biểu mẫu và nội dung thư một cách linh hoạt với đánh dấu đơn giản. Biểu mẫu hỗ trợ gửi do Ajax cung cấp, CAPTCHA, lọc thư rác Akismet, v.v.

Thật dễ dàng để thiết lập và tính năng chống thư rác và CAPTCHA tích hợp giúp nó an toàn và đáng tin cậy hơn. Đó là một trong những plugin mặc định của tôi đã được cài đặt trong tất cả các trang web WordPress của tôi

Tại sao lại xóa các tệp JS và CSS của Biểu mẫu liên hệ 7?

Tôi thích plugin này, đây là một plugin tạo biểu mẫu liên hệ tuyệt vời cho WordPress, nhưng có một nhược điểm khi sử dụng nó. Đó là nó tải JavaScript và CSS của nó trên mọi trang trong trang web của bạn, ngay cả khi bạn chỉ sử dụng nó trên một trang. Tải tham chiếu JavaScript và CSS trên tất cả các trang sẽ ảnh hưởng đến tốc độ tải trang của bạn. Tăng thời gian tải trang có hại cho SEO vì yếu tố xếp hạng của Google phụ thuộc vào Tốc độ tải trang

Bằng cách xóa tệp JS và CSS của Mẫu liên hệ 7 sẽ giúp trang của bạn tải nhanh hơn nhiều. Vì vậy, bây giờ câu hỏi lớn là có thể tải JS và CSS trên trang liên hệ chỉ trên trang liên hệ với chúng tôi hay tải có điều kiện (tải cho các trang cụ thể. ). Câu trả lời là CÓ, chúng ta phải thay đổi chức năng của mình. tập tin php

Mã cho Biểu mẫu liên hệ được tối ưu hóa 7?

#Restrict Biểu mẫu liên hệ 7 tập lệnh và kiểu. Bây giờ hãy đăng nhập vào bảng điều khiển quản trị Wordpress của bạn, đi tới Giao diện -> Trình chỉnh sửa -> chọn chức năng. tập tin php. Thêm mã được viết bên dưới vào cuối các chức năng của bạn. tập tin php. Thao tác này sẽ chỉ tải Liên hệ từ các tệp JS và CSS cho trang cụ thể

Trong trường hợp của tôi, tôi chỉ muốn tải biểu mẫu liên hệ 7 trên trang liên hệ của mình. Vì vậy, trước tiên, chúng tôi phải tìm ra id trang liên hệ của mình và sử dụng id trang đó trong chức năng tùy chỉnh của chúng tôi (load_contactform7_on_specific_page). Ở đây trong trường hợp của tôi 100 là id trang liên hệ của tôi

function load_contactform7_on_specific_page(){
   //  Edit page IDs here
   if(! is_page(100) )    
   {		
      wp_dequeue_script('contact-form-7'); // Dequeue JS Script file.
      wp_dequeue_style('contact-form-7');  // Dequeue CSS file. 
   }
}

add_action( 'wp_enqueue_scripts', 'load_contactform7_on_specific_page' );

Phần kết luận. Bằng cách sửa đổi các chức năng của chúng tôi. tệp php sẽ chỉ có thể tải tệp mẫu liên hệ 7 trên trang liên hệ với chúng tôi. Điều này sẽ giúp chúng tôi tải trang web của mình nhanh hơn, nơi chúng tôi không muốn tải các tệp này

Link tham khảo khác. Contact Form 7 loại bỏ CSS và JS

Cảm ơn bạn đã đọc, vui lòng tiếp tục truy cập blog này và chia sẻ điều này trong mạng của bạn. Ngoài ra, tôi rất thích nghe ý kiến của bạn trong phần bình luận

Làm cách nào để tạo kiểu cho biểu mẫu liên hệ? . Contact Form 7 không cung cấp bất kỳ tùy chỉnh nào cho kiểu dáng. Chỉnh sửa biểu định kiểu CSS là phương pháp tốt nhất để tạo kiểu cho biểu mẫu liên hệ. Trong bài viết này, tôi sẽ chỉ cho bạn một số bước quan trọng để tạo kiểu dáng cho biểu mẫu liên hệ của bạn. Nếu bạn biết về CSS, giải thích của tôi rất đơn giản. Nếu bạn chưa quen với CSS, vui lòng học CSS trước với các trang web thông tin này

Học CSS – W3C
Hướng dẫn CSS – W3Schools
Học CSS. MDN – Mạng nhà phát triển Mozilla
Khái niệm cơ bản về CSS

Tôi nên chỉnh sửa biểu định kiểu nào?

Bất kỳ biểu định kiểu nào cũng được, nhưng tôi khuyên bạn nên chỉnh sửa biểu định kiểu chính của chủ đề. Tốt hơn hết là không nên chỉnh sửa biểu định kiểu trong plugin vì các thay đổi của bạn sẽ bị ghi đè khi plugin được cập nhật. Các chủ đề có thể được cập nhật, nhưng chúng thường được cập nhật ít thường xuyên hơn các plugin. Nếu chủ đề của bạn được cập nhật thường xuyên, bạn có thể tạo một chủ đề con và quản lý biểu định kiểu trong chủ đề con

Bạn cũng có thể sử dụng CSS bổ sung và nó có một số lợi thế so với việc sửa đổi trực tiếp biểu định kiểu của chủ đề

Tạo kiểu cho các trường biểu mẫu liên hệ

Hãy xem cách chúng ta có thể định kiểu các trường riêng lẻ trong biểu mẫu liên hệ. Có một số loại trường đầu vào. Trường phổ biến nhất là trường nhập văn bản một dòng, vì vậy hãy thêm quy tắc kiểu cho trường đó

input[type="text"]
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

Bộ chọn này khớp với tất cả các phần tử

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

4 có thuộc tính

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

5 có chính xác giá trị

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

0 (i. e. các trường nhập văn bản một dòng). Ngoài ra, quy tắc kiểu này có ba thuộc tính chỉ định màu trắng làm màu nền, màu đen làm màu nền trước (văn bản) và 50% làm chiều rộng của trường

Bạn có thể muốn áp dụng quy tắc kiểu này cho các loại trường khác. Hãy thêm bộ chọn cho trường nhập địa chỉ email và vùng nhập văn bản nhiều dòng

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

Bây giờ phong cách này được áp dụng cho mọi phần của trang web của bạn. Bạn có thể muốn giới hạn nó trong các biểu mẫu liên hệ. Biểu mẫu của Biểu mẫu liên hệ 7 có phần tử bao bọc có lớp

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

1. Bạn có thể giới hạn phạm vi mục tiêu bằng cách thêm bộ chọn tổ tiên

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

Xem thêm

Tại sao trường nhập địa chỉ email của tôi trông khác với các trường nhập văn bản khác?
Bố cục tùy chỉnh cho hộp kiểm và nút radio

Tạo kiểu cho các trường cụ thể

Bạn có thể chỉ muốn tạo kiểu cho các trường cụ thể. Đầu tiên, thêm tùy chọn

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

2 hoặc

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

3 vào thẻ biểu mẫu của các trường mà bạn muốn tạo kiểu

________số 8

Sau đó, thêm quy tắc kiểu bằng cách sử dụng id hoặc lớp

#very-special-field
{
    color: #f00;
    border: 1px solid #f00;
}

Tạo kiểu cho toàn bộ biểu mẫu liên hệ

Như tôi đã đề cập trước đó, phần tử cấp cao nhất của biểu mẫu liên hệ có lớp

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

1. Để tạo kiểu cho toàn bộ biểu mẫu liên hệ, hãy thêm quy tắc kiểu cho bộ chọn lớp

input[type="text"]
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

1

Quy tắc kiểu này cung cấp cho biểu mẫu liên hệ của bạn nền màu xám nhạt và viền màu lục

Xem thêm. Tôi có thể thêm thuộc tính id và lớp vào thành phần biểu mẫu không?

Tạo kiểu cho tin nhắn phản hồi

Thông báo phản hồi ở cuối biểu mẫu liên hệ theo mặc định có lớp

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

5, vì vậy bạn có thể áp dụng quy tắc kiểu cho lớp này để tạo kiểu cho thông báo phản hồi

Để quyết định kiểu dựa trên trạng thái của biểu mẫu liên hệ, hãy tham khảo thuộc tính

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

3 của phần tử

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

6. Nó nên có một lớp phản ánh tình trạng hiện tại. giá trị có thể là.

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

8,

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

9,

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

0,

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

1,

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

2,

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

3 hoặc

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

4

Để biết ví dụ về kiểu dáng, hãy xem các quy tắc kiểu dáng mặc định sau đây mà Contact Form 7 5. 2. 2 áp dụng cho một tin nhắn phản hồi

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

2

Xem thêm. Định vị hộp thông báo phản hồi ở bất cứ đâu

Thông báo lỗi xác thực kiểu dáng

Khi một trường có giá trị không hợp lệ, thông báo lỗi xác thực sẽ xuất hiện bên dưới trường. Vì phần tử của thông báo lỗi xác thực có lớp

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

5, bạn có thể sử dụng lớp này để tạo kiểu cho thông báo lỗi xác thực

programming css

Vô hiệu hóa mẫu liên hệ 7 CSS

Mẫu liên hệ 7 là gì?

Tại sao lại xóa các tệp JS và CSS của Biểu mẫu liên hệ 7?

Mã cho Biểu mẫu liên hệ được tối ưu hóa 7?

Tôi nên chỉnh sửa biểu định kiểu nào?

Tạo kiểu cho các trường biểu mẫu liên hệ

Tạo kiểu cho các trường cụ thể

Tạo kiểu cho toàn bộ biểu mẫu liên hệ

Tạo kiểu cho tin nhắn phản hồi

Thông báo lỗi xác thực kiểu dáng

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội