Bạn đã bao giờ muốn tạm thời chỉnh sửa một trang web để xem nó trông như thế nào với màu sắc, phông chữ, phong cách cụ thể? Điều này có thể thực hiện được với một công cụ đã tồn tại trong trình duyệt của bạn có tên " 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ẽ hướng dẫn bạn những điều cơ bản về kiểm tra mặt hàng và cách sử dụng nó với trang web WordPress của bạn.
Công cụ kiểm tra mặt hàng 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 của một Website, những 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ự áp dụng 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 nhận dạng cá nhân trong khi chụp ảnh màn hình mà không cần thực sự làm mờ các yếu tố.
Đối với các nhân viên hỗ trợ, đây là một cách tuyệt vời để xác định lỗi có thể khiến các phòng trưng bày của bạn không tải hoặc ngăn chúng hoạt động bình thường.
Chúng tôi chỉ đang làm xước bề mặt của các ca 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ì đó 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ử '.
Khởi chạy công cụ "Kiểm tra phần tử" và bản địa hóa củ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 kỳ đâu trên trang web, sau đó chọn Kiểm tra mục menu của trình duyệt.
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ụ dành cho nhà phát triển được chia thành hai cửa sổ. Ở bên trái, bạn sẽ thấy mã HTML của trang. Trên ngăn bên phải, bạn sẽ thấy các quy tắc 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.
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 vào sẽ được đánh dấu trong mã nguồ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.
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.
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.
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ự thực hiện các thay đổi, bạn cần phải sửa đổi kiểu theme WordPress hoặc một mẫu để thêm các thay đổi bạn muốn lưu.
Trước khi bạn bắt đầu chỉnh sửa theme WordPress hiện có bằng cách sử dụ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.
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 bình thường thì bạn có thể thấy rằng có một lỗi JavaScript gây ra nó.
Đó 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. Hãy chia sẻ hướng dẫn này với bạn bè của bạn.
