Kiến thức cơ bản về phần tử kiểm tra: Tùy chỉnh WordPress cho người dùng tự làm

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ữ, kiểu dáng cụ thể, v.v. 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 là Kiểm tra phần tử. Đây là một giấc mơ trở thành hiện thực cho tất cả những người dùng DIY khi họ tìm hiểu về nó. Trong bài viết này, chúng tôi sẽ chỉ cho bạn những điều cơ bản về phần tử kiểm tra và cách sử dụng nó với trang web WordPress của bạn.

Other :

WordPress beginner's guide to using Inspect tool in Google Chrome

Kiểm tra phần tử hoặc công cụ nhà phát triển là gì?

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

Sử dụng công cụ Kiểm tra phần tử, bạn có thể chỉnh sửa mã HTML, CSS hoặc 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 DIY, những công cụ này có thể giúp bạn xem trước thiết kế trang web trông như thế nào mà không thực sự thực hiện 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 khi chụp ảnh màn hình mà không cần phải làm mờ hoàn toàn các mục.

Đối với các nhân viên hỗ trợ, đó 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 các thanh trượt của bạn không hoạt động bình thường.

Chúng tôi chỉ đang sơ lược bề mặt của các trường hợp sử dụng. Phần tử kiểm tra thực sự mạnh mẽ.

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

Sẵn sàng? Bắt đầu nào.

Đăng ký WPBeginner

Nếu bạn không thích video hoặc cần thêm hướng dẫn, thì hãy tiếp tục đọc.

Khởi chạy Kiểm tra phần tử và xác định vị trí mã

Bạn có thể khởi chạy công cụ kiểm tra phần tử bằng cách nhấn các phím CTRL + Shift + I trên bàn phím của mình. Ngoài ra, bạn có thể nhấp vào bất kỳ đâu trên trang web và chọn phần tử kiểm tra từ menu trình duyệt.

Inspect menu

Cửa sổ trình duyệt của bạn sẽ được chia thành hai và cửa sổ dưới 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.

HTML and CSS Panes in Inspect window

Khi bạn di chuyển chuột qua nguồn HTML, bạn sẽ thấy vùng bị ảnh hưởng được đánh dấu trên trang web. Bạn cũng sẽ nhận thấy các quy tắc CSS thay đổi để hiển thị CSS cho phần tử bạn đang xem.

Editing a particular HTML element

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

Chỉnh sửa và gỡ lỗi mã trong phần tử kiểm tra

Cả HTML và CSS trong cửa sổ phần tử kiểm tra đều có thể chỉnh sửa được. Bạn có thể nhấp đúp vào bất kỳ đâu trong mã nguồn HTML và chỉnh sửa mã theo ý muốn.

Editing HTML code in inspect element tool

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

Editing CSS in the inspect element tool

Khi bạn thực hiện thay đổi đối với CSS hoặc HTML, những thay đổi đó sẽ được phản ánh trong trình duyệt ngay lập tức.

Live CSS changes in the browser screen

Lưu ý rằng bất kỳ thay đổi nào bạn thực hiện ở đây sẽ không được lưu ở bất kỳ đâu. Phần tử Kiểm tra là một công cụ gỡ lỗi và nó không ghi các thay đổi của bạn trở lại các 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ẽ không còn nữa.

Để thực sự thực hiện các thay đổi, bạn sẽ phải chỉnh sửa biểu định kiểu của chủ đề WordPress của mình hoặc mẫu có liên quan để 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 có của mình bằng công cụ Kiểm tra phần tử, hãy đảm bảo rằng bạn lưu tất cả các thay đổi của mình bằng cách tạo một chủ đề con.

Dễ dàng tìm thấy lỗi trên trang web của bạn

Phần tử Kiểm tra có một khu vực được gọi là Bảng điều khiển hiển thị tất cả các lỗi tồn tại trên trang web của bạn. Khi cố gắng gỡ lỗi hoặc yêu cầu hỗ trợ từ tác giả plugin, bạn nên xem ở đây để xem lỗi là gì.

Browser Console Error

Ví dụ: nếu bạn là khách hàng của OptinMonster tự hỏi tại sao optin của bạn không tải, thì bạn có thể dễ dàng tìm thấy vấn đề “slug 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.

Các công cụ như Kiểm tra Bảng điều khiển Phần tử và SupportAlly giúp bạn nhận được hỗ trợ khách hàng tốt hơn vì nhóm hỗ trợ kỹ thuật yêu thích những khách hàng chủ động cung cấp phản hồi chi tiết về vấn đề.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu những kiến thức cơ bản về phần tử kiểm tra và cách sử dụng nó với trang WordPres của mình. Bạn cũng có thể muốn xem bảng gian lận CSS do WordPress tạo mặc định để tăng tốc kỹ năng phát triển chủ đề của mình.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Google+.

Free Download Kiến thức cơ bản về phần tử kiểm tra: Tùy chỉnh WordPress cho người dùng tự làm :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Join our official telegram group and channel for latest updates.

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

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress