Làm cách nào để thêm id vào một phần tử trong wordpress?
|
Nhiều lần chúng tôi thấy mình đang cố gắng áp dụng một số CSS đặc biệt cho một trang cụ thể hoặc cho một thành phần trong một hoặc một vài trang. WordPress cung cấp cho chúng tôi khả năng đạt được điều đó bằng cách sử dụng ID của trang cụ thể đó làm lớp trong CSS của chúng tôi và trong bài đăng ngắn và đơn giản này, chúng tôi sẽ chỉ cho bạn cách tìm nó Show Như bạn có thể biết, WordPress thường in nhiều lớp bên trong thẻ body của trang web của bạn tùy thuộc vào trang/bài đăng của bạn. Một trong số đó là ID trang. Điều đó cho phép chúng tôi sử dụng lớp đó để áp dụng các quy tắc CSS cụ thể trên phần thân hoặc cho bất kỳ phần tử nào khác bên trong phần thân (thường là tất cả trang web của bạn) Lớp đó trông như thế này. trang-id-[ID-NUMBER] Tiền thưởng độc quyền. Tải xuống Danh sách kiểm tra trang web WordPress cơ bản bao gồm mọi thứ bạn cần để đảm bảo trang web của bạn đã sẵn sàng và được tối ưu hóa cho khách truy cập của bạn Sau đây là bài viết của khách mời Trishah Woolley. Qua nhiều năm, Trishah đã thu thập rất nhiều đoạn mã thực hiện công việc thêm ID và lớp dựa trên một số thông tin biến đổi, như URL hoặc dữ liệu từ WordPress. Mỗi đoạn mã này đều được thu thập từ tài liệu hoặc tài nguyên trực tuyến tương tự hoặc do Trishah viết dựa trên các tính năng tiêu chuẩn của ngôn ngữ và API có liên quan Trong thời gian tôi thiết kế web WordPress, có những lúc tôi cần thêm ID hoặc lớp vào thẻ Để thay đổi giao diện của các trang này theo cách các kiểu chỉ được áp dụng cho trang đó, chúng tôi cần một cách để chỉ nhắm mục tiêu trang hoặc danh mục trang đó. Dưới đây là một số cách tôi thấy hữu ích để thêm ID và lớp vào Biến thể PHP#01 – Thêm ID từ URLĐiều này sẽ loại bỏ dấu gạch chéo về phía trước, `. php` và `?pg=`, từ URL và sử dụng phần còn lại làm ID. Thay đổi mảng để phù hợp với tình huống cụ thể của bạn Ví dụ trở thành #02 – Thêm ID và Lớp từ URLCái này tìm kiếm `?` trong URL và biến những gì đứng trước nó thành một ID và những gì đứng sau nó thành một lớp Ví dụ trở thành #03 – Thêm ID từ tên tệpĐiều này loại bỏ `. php` và sử dụng tên tệp làm ID ________số 8Ví dụ trở thành #04 – Thêm ID từ First Level DirectoryĐiều này sẽ lấy thư mục cấp đầu tiên và sử dụng nó làm ID Ví dụ trở thành Biến thể WordPressWordPress có chức năng riêng để áp dụng các lớp cho phần thân Kết quả đầu ra như thế này, tùy thuộc vào trang bạn đang truy cập Nhưng bạn vẫn có thể làm được nhiều hơn, chẳng hạn như kết hợp nó với các kỹ thuật ở trên và thêm các lớp của riêng bạn #05 – WordPress. Thêm một lớp vào lớp cơ thể mặc địnhThêm lớp của riêng bạn vào lớp do WordPress tạo bằng cái này trở thành #06 – WordPress. Thêm nhiều lớp vào lớp cơ thể mặc địnhBạn có thể thêm nhiều lớp như thế này trở thành #07 – WordPress. Thêm ID và Lớp vào Thẻ Nội dungĐây chỉ có thể là yêu thích của tôi. Nó làm tương tự như trên nhưng thêm lớp mới vào WordPress’ Ví dụ trở thành #08 – WordPress. Sử dụng sênVí dụ trở thành #09 – WordPress. Có điều kiện thêm các lớp bổ sungĐiều này thêm một lớp cơ thể vào lớp được tạo bởi WordPress với logic trở thành #10 – WordPress. Thêm Slug vào Mặc định của lớp cơ thểChúng ta cũng có thể thay đổi đầu ra của hàm Ở đây chúng tôi sẽ thêm sên Ví dụ trở thành #11 – WordPress. Thêm vào Lớp cơ thể bằng chức năng. bộ lọc phpThêm phần sau vào chức năng. php Sau đó nó sẽ ra như thế này, chỉ cần gọi trực tiếp #12 – WordPress. Lọc thô chức năng bằng Hàm. phpĐây là cách bạn sẽ thêm một lớp với bất kỳ tên nào trở thành #13 – WordPress. Lọc thô chức năng bằng Hàm. php để thêm nhiều lớp, có điều kiệnTrở thành trang này trên một trang không phải cửa hàng Trở thành thế này nếu logic xuất hiện #14 WordPress. Xóa các lớp khỏi đầu ra mặc định bằng các hàm. phpVới điều này, bạn có thể xóa các lớp khỏi Nếu chúng ta bắt đầu với điều này Và đã xóa "page-parent", chúng tôi sẽ nhận được điều này #15 WordPress. Thêm danh mụcThêm danh mục vào URL mẫu trở thành #16 WordPress. Thêm Danh mục thông qua chức năng. bộ lọc phpBạn cũng có thể làm điều đó thông qua bộ lọc URL mẫu trở thành #17 WordPress. Thêm tên lớp trình duyệtWordPress cung cấp một số Biến toàn cầu bao gồm các giá trị boolean trên trình duyệt nào đang được sử dụng. Bạn cũng có thể thêm chúng vào lớp cơ thể Ví dụ với Chrome Cẩn thận không dựa vào những thứ này cho chức năng quan trọng. Thử nghiệm tác nhân người dùng, như cách sử dụng này, được biết là gây ra nhiều vấn đề hơn là giải quyết Làm cách nào chúng ta có thể đặt ID cho một phần tử?Sử dụng thuộc tính id
. Cú pháp cho id là. viết một ký tự băm (#), theo sau là tên id. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}
Một phần tử có thể có ID không?Có, bạn có thể . Nhưng lưu ý rằng Id phải là duy nhất trong tệp html của bạn, trong khi các lớp có thể được sử dụng trong nhiều phần tử.
Một phần tử có thể có lớp và id không?3) Một phần tử HTML có thể có id và lớp không? . Sự khác biệt duy nhất ở đây là “id” chỉ có thể có một giá trị duy nhất và “class” có thể có nhiều hơn một giá trị. Yes, any HTML element (like div, input, nav, body, etc) can have both “id” and “class” together and at the same time. The only difference here is that “id” can have only one unique value and “class” can have more than one. |
