Bỏ qua đến nội dung chính

Khái niệm cơ bản trong tùy biến một trang web WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Bạn đã bao giờ muốn sửa đổi tạm thời một trang web để xem nó trông như thế nào với màu sắc, phông chữ, kiểu dáng cụ thể chưa? Điều này là có thể với một công cụ đã tồn tại trong trình duyệt của bạn có tên là " Kiểm tra phần tử ". Đây là một giấc mơ trở thành sự thật cho tất cả người dùng thích thao tác CSS.

Trong hướng dẫn này, chúng tôi sẽ giới thiệu cho bạn những điều cơ bản về kiểm tra phần tử và cách sử dụng nó với trang web WordPress của bạn.

Kiểm tra phần tử WordPress

Một công cụ kiểm tra yếu tố là gì?

Các trình duyệt hiện đại như Google Chrome và Mozilla Firefox đã xây dựng các công cụ cho phép các nhà phát triển web gỡ lỗi. Các công cụ này hiển thị HTML, CSS và JavaScript cho một trang và hiển thị cách mã chạy.

Việc sử dụng công cụ Kiểm tra Element Bạn có thể chỉnh sửa mã HTML, CSS hoặc mã JavaScript cho bất kỳ trang web nào và xem các thay đổi của bạn trực tiếp (chỉ trên máy tính của bạn).

Đối với chủ sở hữu trang web, các công cụ này có thể giúp bạn xem trước một phong cách nhất định sẽ trông như thế nào mà không thực sự thực hiện các thay đổi cho mọi người.

Đối với người viết, những công cụ này thật tuyệt vời vì bạn có thể dễ dàng thay đổi thông tin đăng nhập cá nhân khi chụp ảnh màn hình bằng cách loại bỏ nhu cầu thực sự làm mờ dần các mục.

Đối với các đại lý bàn trợ giúp, đây là một cách tuyệt vời để xác định lỗi có thể gây ra lỗi khi tải phòng trưng bày của bạn hoặc ngăn chúng hoạt động bình thường.

Chúng tôi chỉ cạo bề mặt của các trường hợp sử dụng vì công cụ " Kiểm tra phần tử Thực sự mạnh mẽ.

Trong bài viết này, chúng tôi sẽ tập trung vào công cụ " Kiểm tra phần tử Từ Google Chrome vì đây là trình duyệt chúng tôi lựa chọn. Firefox có các công cụ phát triển riêng cũng có thể được gọi bằng cách chọn menu " kiểm tra phần tử '.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Khởi chạy công cụ "Kiểm tra phần tử" và bản địa hóa mã

Bạn có thể khởi chạy công cụ này bằng cách nhấn CTRL + SHIFT + I trên bàn phím của bạn. Ngoài ra, bạn có thể nhấp vào bất cứ nơi nào trên trang web và sau đó chọn Kiểm tra mục menu của trình duyệt.

codepathing

Cửa sổ trình duyệt của bạn sẽ chia làm hai và cửa sổ dưới cùng sẽ hiển thị mã nguồn của trang web.

Cửa sổ công cụ phát triển được chia thành hai cửa sổ. Ở bên trái của bạn, bạn sẽ thấy mã HTML của trang. Trên khung bên phải, bạn sẽ thấy các quy tắc CSS.

Kiểm tra mã HTML-CSS

Khi bạn di chuyển chuột qua nguồn mã HTML, bạn sẽ thấy vùng được tô sáng trên trang web. Bạn cũng sẽ nhận thấy các quy tắc CSS cho thành phần này trong câu hỏi.

Quy tắc CSS của phần tử HTML

Bạn cũng có thể đưa con trỏ chuột lên một mục trên trang web, nhấp chuột phải và chọn " kiểm tra phần tử ". Mục bạn đã nhấp sẽ được tô sáng trong mã nguồn.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Trình phát triển mã và Trình gỡ lỗi dành cho nhà phát triển

HTML và CSS trong cửa sổ kiểm tra phần tử có thể chỉnh sửa. Bạn có thể nhấp đúp vào mã nguồn HTML và chỉnh sửa mã theo ý muốn.

Chỉnh sửa mã nguồn HTML

Bạn cũng có thể bấm đúp và chỉnh sửa các thuộc tính của các kiểu trong ngăn CSS. Để thêm quy tắc, nhấp vào biểu tượng dấu cộng trên ngăn kiểu ở trên cùng.

thêm một quy tắc mới css

Khi bạn thay đổi mã CSS hoặc HTML, những thay đổi này sẽ được phản ánh ngay lập tức trong trình duyệt của bạn.

Sửa đổi mã sống

Lưu ý rằng không phải tất cả các thay đổi được thực hiện ở đây được lưu ở bất cứ đâu. Công cụ Kiểm tra phần tử Là một công cụ gỡ lỗi và nó không lưu các thay đổi của bạn vào một tệp trên máy chủ của bạn. Điều này có nghĩa là nếu bạn làm mới trang, tất cả các thay đổi của bạn sẽ bị mất.

Để thực sự thay đổi, bạn sẽ cần thay đổi phong cách của chủ đề hoặc mẫu WordPress của bạn để thêm các thay đổi bạn muốn lưu.

Trước khi bạn bắt đầu chỉnh sửa chủ đề WordPress hiện tại của mình bằng công cụ " Kiểm tra phần tử Đảm bảo lưu tất cả các thay đổi của bạn bằng cách tạo một chủ đề con.

Làm thế nào để tìm WordPress lỗi dễ dàng

Công cụ Kiểm tra phần tử Có một khu vực gọi là " An ủi Hiển thị tất cả các lỗi tồn tại trên trang web của bạn. Trước khi cố gắng sửa lỗi hoặc yêu cầu trợ giúp từ các tác giả của một chủ đề hoặc plugin, luôn luôn đáng để xem ở đây để xem có gì sai.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

bảng điều khiển javascript

Ví dụ: nếu bạn là khách hàng OptinMonster Ai tự hỏi tại sao optin của anh ta không tải, sau đó bạn có thể dễ dàng tìm thấy vấn đề chỉ ra rằng " slug của trang của bạn không khớp '.

Nếu thanh chia sẻ của bạn không hoạt động chính xác, thì bạn có thể thấy rằng có lỗi JavaScript gây ra.

Đó là tất cả cho hướng dẫn này, tôi hy vọng bạn có thể tùy chỉnh tốt hơn blog WordPress của mình. Hãy chia sẻ hướng dẫn này với bạn bè của bạn.

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
2 cổ phiếu
cổ phiếu
tweet
Enregistrer2