Hướng dẫn này hoàn hảo cho những bạn đang cố gắng tìm ra cách thêm các lớp vào menu của mình, nhưng bạn không chắc chắn về vị trí hoặc cách thực hiện. Có một vài lớp CSS khác nhau mà bạn có thể thêm vào menu WordPress, nhưng hãy tập trung vào việc thêm các lớp tùy chỉnh CSS “đầu tiên” và “cuối cùng” vào menu WordPress
Ngoài kỹ thuật này, còn có nhiều cách khác để thêm kiểu tùy chỉnh vào WordPress .
Lớp CSS tùy chỉnh là gì?
CSS, hoặc “Cascading Style Sheets,” là một cách để áp dụng các quy tắc kiểu dáng cho nội dung. Khi bạn áp dụng các quy tắc tùy chỉnh, bạn cung cấp cho trang web của mình khả năng thực hiện những việc khác ngoài cài đặt mặc định được cung cấp
Bạn có thể thêm CSS tùy chỉnh vào bất kỳ phần nào của trang web, miễn là bạn biết cách truy cập biểu định kiểu
cộng. Đầu tiên và. Lớp CSS tùy chỉnh cuối cùng cho Menu
Đôi khi bạn gặp một yêu cầu thiết kế trong khi làm việc trên một trang web mà bạn phải thực hiện hơi khác so với bình thường
Giả sử bạn đang làm việc trên một trang web cho khách hàng và cần thêm một lớp CSS tùy chỉnh WordPress theo cách khác với cách bạn thường làm vì bạn sẽ xử lý trang web đó khi hoàn thành và sẽ không có quyền truy cập nữa
Bạn có thể dễ dàng vào khu vực quản trị WordPress và thêm một lớp CSS tùy chỉnh vào các mục menu đầu tiên và cuối cùng, nhưng vì khách hàng nhiều khả năng sẽ sắp xếp lại menu WordPress theo thời gian nên đây có lẽ không phải là lựa chọn tốt nhất
Điều đó đang được nói, trong bài viết này tôi sẽ chỉ cho bạn cách thêm các lớp này bằng cách kết hợp các bộ lọc với. đầu tiên và. lớp CSS cuối cùng
Bạn có thể hoàn thành nhiệm vụ này theo một số cách khác nhau, vì vậy hãy xem xét cả hai cách
Chức năng truy cập. tệp php
Tùy chọn đầu tiên của bạn là mở các chức năng. php nằm trong phần phụ trợ của trang web WordPress. Đừng nhầm lẫn với tệp cấu hình WordPress. Để truy cập tệp, chỉ cần nhấp vào Giao diện> Trình chỉnh sửa
Khi bạn đang ở trong phần tệp trang web WordPress của trang web, hãy nhấp vào Chức năng chủ đề [chức năng. php] để mở nó lên
Với các chức năng. tệp php hiện đã được mở, đơn giản thêm đoạn mã sau vào tệp[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
hàm wpb_first_and_last_menu_class[$items] {
$items[1]->classes[] = ‘đầu tiên’;
$items[count[$items]]->classes[] = ‘last’;
trả lại các mặt hàng $;
}
add_filter[‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’];
[/ht_message]
Sử dụng Bộ chọn CSS
Một tùy chọn khác để tạo kiểu cho menu và thêm các lớp CSS WordPress là sử dụng bộ chọn CSS. Các bộ chọn này sẽ hoạt động trong hầu hết [nếu không phải tất cả] các trình duyệt hiện đại. Thêm các bộ chọn này nếu bạn muốn thực hiện chức năng theo cách này. [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
ul#yourmenuid > li. con đầu lòng { }
ul#yourmenuid > li. con cuối cùng { }
[/ht_message]
Chỉ cần thay thế “yourmenuid” bằng ID menu thực tế và bạn đã hoàn tất
Xin lưu ý rằng nếu bạn đang sử dụng Internet Explorer [đặc biệt là phiên bản cũ hơn], thì có thể bạn sẽ muốn sử dụng tùy chọn đầu tiên, vì tùy chọn bộ chọn CSS có thể sẽ không hoạt động bình thường
Tôi hy vọng bài viết này đã chỉ cho bạn cách dễ dàng thêm các lớp CSS tùy chỉnh của WordPress vào menu
Bên dưới này, bạn cũng sẽ tìm thấy danh sách các lớp CSS mặc định được tạo bởi WordPress. Danh sách này sẽ hữu ích khi bạn tạo kiểu cho menu WordPress của mình và cả khi tạo kiểu hoặc làm việc với các lớp CSS WordPress trên bảng
Các kiểu lớp cơ thể WordPress CSS mặc định
[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
rtl {}
Trang Chủ {}
Blog {}
lưu trữ {}
ngày {}
Tìm kiếm {}
phân trang {}
tập tin đính kèm {}
lỗi404 {}
postid đơn-[id] {}
tệp đính kèm-[id] {}
tệp đính kèm-[kiểu mime] {}
tác giả {}
tác giả-[user_nicename] {}
thể loại {}
danh mục-[slug] {}
nhãn {}
thẻ-[slug] {}
trang cha {}
trang-con parent-pageid-[id] {}
trang-mẫu trang-mẫu-[tên tệp mẫu] {}
kết quả tìm kiếm {}
tìm kiếm không có kết quả {}
đăng nhập {}
đã phân trang-[số trang] {}
một trang-[số trang] {}
trang-paged-[số trang] {}
danh mục-trang-[số trang] {}
tag-paged-[số trang] {}
date-paged-[số trang] {}
tác giả-trang-[số trang] {}
search-paged-[số trang] {}
[/ht_message]
Các kiểu bài đăng CSS WordPress mặc định
[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
id sau {}
bưu kiện {}
trang {}
tập tin đính kèm {}
dính {}
hentry {}
thể loại linh tinh {}
danh mục-ví dụ {}
tin tức thẻ {}
thẻ-wordpress {}
đánh dấu thẻ {}
[/ht_message]
Định dạng bài đăng CSS WordPress mặc định
[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
định dạng hình ảnh {}
thư viện định dạng {}
định dạng trò chuyện {}
liên kết định dạng {}
định dạng trích dẫn {}
trạng thái định dạng {}
định dạng-video {}
[/ht_message]
Kiểu menu CSS WordPress mặc định
[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
#tiêu đề. menu chính{} // lớp chứa
#tiêu đề. menu chính ul {} // danh sách không có thứ tự đầu tiên của lớp container
#tiêu đề. menu chính ul ul {} // danh sách không có thứ tự trong danh sách không có thứ tự
#tiêu đề. menu chính li {} // mỗi mục điều hướng
#tiêu đề. menu chính li a {} // neo mỗi mục điều hướng
#tiêu đề. menu chính li ul {} // danh sách không có thứ tự nếu có mục thả xuống
#tiêu đề. menu chính li li {} // mỗi mục điều hướng thả xuống
#tiêu đề. menu chính li li a {} // mỗi neo mục điều hướng thả xuống
current_page_item{} // Lớp cho trang hiện tại
current-cat{} // Lớp cho danh mục hiện tại
current-menu-item{} // Lớp cho bất kỳ Mục menu hiện tại nào khác
menu-item-type-taxonomy{} // Lớp cho danh mục
menu-item-type-post_type{} // Lớp cho các trang
menu-item-type-custom{} // Lớp cho bất kỳ mục tùy chỉnh nào bạn đã thêm
menu-item-home{} // Lớp cho liên kết trang chủ
[/ht_message]
Kiểu trình chỉnh sửa WYSIWYG CSS WordPress mặc định
[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
mục nhập nội dung img {}
căn trái, hình ảnh. căn trái {}
đúng rồi, img. sắp xếp đúng {}
căn giữa, img. canh giữa {}
thẳng hàng, img. thẳng hàng {}
chú thích wp {}
chú thích wp img {}
wp-caption p. wp-chú thích-văn bản {}
wp-mặt cười {}
trích dẫn khối. bên trái {}
trích dẫn khối. bên phải {}
thư viện dl {}
thư viện dt {}
thư viện đ {}
thư viện dl một {}
thư viện dl img {}
thư viện-chú thích {}
kích thước đầy đủ {}
cỡ lớn {}
kích thước trung bình {}
kích thước hình thu nhỏ {}
[/ht_message]
Kiểu CSS WordPress Widget mặc định
[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
tiện ích {}
#Form tìm kiếm {}
widget_search {}
màn hình đọc văn bản {}
widget_meta {}
widget_meta ul {}
widget_meta ul li {}
widget_meta ul li a {}
widget_links {}
widget_links ul {}
widget_links ul li {}
widget_links ul li a {}
widget_archive {}
widget_archive ul {}
widget_archive ul li {}
widget_archive ul li a {}
widget_archive chọn {}
tùy chọn widget_archive {}
widget_pages {}
widget_pages ul {}
widget_pages ul li {}
widget_pages ul li a {}
widget_links {}
widget_links li. sau {}
widget_links li. trước {}
widget_tag_cloud {}
widget_tag_cloud một {}
widget_tag_cloud một. sau {}
widget_tag_cloud một. trước {}
widget_calendar {}
#calendar_wrap {}
#calendar_wrap thứ {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-chú thích lịch {}
#wp-lịch a {}
#wp-lịch #today {}
#wp-lịch #prev {}
#wp-lịch #tiếp theo {}
#wp-lịch #tiếp theo {}
#wp-calendar #prev a {}
widget_categories {}
danh mục tiện ích uk {}
widget_categories ul li {}
widget_categories ul ul. bọn trẻ {}
widget_categories một {}
widget_categories chọn{}
widget_categories select#cat {}
widget_categories chọn. biểu mẫu {}
tùy chọn widget_categories {}
widget_categories. cấp 0 {}
widget_categories. cấp độ 1 {}
widget_categories. cấp độ 2 {}
widget_categories. cấp 3 {}
Những ý kiến gần đây {}
#Những ý kiến gần đây {}
#bình luận gần đây li {}
#recentcomments li a {}
widget_recent_comments {}
widget_recent_entries {}
widget_recent_entries ul {}
widget_recent_entries ul li {}
widget_recent_entries ul li a {}
tiện ích văn bản {}
widget_text {}
tiện ích văn bản p {}
[/ht_message]
Kiểu biểu mẫu CSS WordPress mặc định
[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]
/*Đầu ra nhận xét*/
danh sách bình luận. Đáp lại {}
danh sách bình luận. trả lời {}
danh sách bình luận. thay thế {}
danh sách bình luận. số lẻ {}
danh sách bình luận. thậm chí {}
danh sách bình luận. chủ đề thay thế {}
danh sách bình luận. chủ đề lẻ {}
danh sách bình luận. chuỗi chẵn {}
bình luận li ul. bọn trẻ. thay thế {}
bình luận li ul. bọn trẻ. số lẻ {}
bình luận li ul. bọn trẻ. thậm chí {}
danh sách bình luận. vcard {}
danh sách bình luận. trích dẫn vcard. fn {}
danh sách bình luận. nhịp vcard. nói {}
danh sách bình luận. hình ảnh vcard. ảnh {}
danh sách bình luận. hình ảnh vcard. hình đại diện {}
danh sách bình luận. trích dẫn vcard. fn một. url {}
danh sách bình luận. bình luận-meta {}
danh sách bình luận. bình luận-meta một {}
danh sách bình luận. siêu dữ liệu nhận xét {}
danh sách bình luận. siêu dữ liệu bình luận a {}
danh sách bình luận. cha mẹ {}
danh sách bình luận. bình luận {}
danh sách bình luận. bọn trẻ {}
danh sách bình luận. trả lời lại {}
danh sách bình luận. của tác giả {}
danh sách bình luận. bình luận-tác giả {}
danh sách bình luận. bình luận-tác giả-quản trị viên {}
danh sách bình luận {}
danh sách bình luận li {}
danh sách bình luận li p {}
danh sách bình luận li ul {}
bình luận li ul. trẻ em {}
bình luận li ul. trẻ em. thay thế {}
bình luận li ul. trẻ em. bởi người dùng {}
bình luận li ul. trẻ em. bình luận {}
bình luận li ul. trẻ em. độ sâu-{id} {}
bình luận li ul. trẻ em. của tác giả {}
bình luận li ul. trẻ em. bình luận-tác giả-quản trị viên {}
# hủy bình luận-trả lời {}
#cancel-comment-reply a {}
/*Dạng bình luận */
#đáp ứng { }
#reply-title { }
#cancel-comment-reply-link { }
#dạng bình luận { }
#tác giả { }
#email { }
#url { }
#bình luận
#Gửi đi
chú thích-ghi chú { }
yêu cầu { }
bình luận-mẫu-tác giả { }
bình luận-mẫu-email { }
bình luận-form-url { }
comment-form-comment { }
thẻ cho phép biểu mẫu { }
gửi biểu mẫu
[/ht_message]
Suy nghĩ cuối cùng
Thêm một lớp CSS tùy chỉnh vào menu WordPress không khó. Tất cả chỉ là vấn đề biết những gì cần truy cập và mã lớp nào cần thêm vào biểu định kiểu của bạn
Thay đổi màu sắc, kiểu dáng, văn bản, phần đệm, lề và bất kỳ thứ gì khác bạn muốn trong tiêu đề WordPress của mình bằng cách thêm các lớp CSS tùy chỉnh
Tôi hy vọng hướng dẫn này dễ thực hiện và cho bạn thấy bạn có thể đạt được bao nhiêu khi thêm một lớp CSS tùy chỉnh vào menu WordPress
Bạn đã bao giờ thêm các lớp CSS tùy chỉnh vào biểu định kiểu trước đây chưa?