Default WordPress Generated CSS Cheat Sheet สำหรับผู้เริ่มต้น
เผยแพร่แล้ว: 2022-08-05คุณกำลังมองหาแผ่นโกง CSS ที่สร้างโดย WordPress เริ่มต้นหรือไม่?
WordPress จะเพิ่มคลาส CSS บางคลาสให้กับองค์ประกอบต่างๆ ในธีมส่วนใหญ่โดยอัตโนมัติ คลาส CSS เริ่มต้นเหล่านี้สามารถใช้เพื่อจัดรูปแบบองค์ประกอบเหล่านั้นในธีม WordPress ของคุณ
ในบทความนี้ เราจะแสดงชีตชีต CSS เริ่มต้นของ WordPress ให้คุณดู เราจะพูดถึงวิธีค้นหาคลาส CSS อย่างง่ายดายและวิธีเพิ่มคลาส CSS ที่กำหนดเองทุกครั้งที่คุณต้องการ
ทำไมต้องเรียนรู้เกี่ยวกับ CSS ที่สร้างโดย WordPress เริ่มต้น
WordPress จะสร้างและเพิ่มคลาส CSS เริ่มต้นให้กับองค์ประกอบต่างๆ บนเว็บไซต์ WordPress ของคุณโดยอัตโนมัติ
นักพัฒนาธีม WordPress สามารถใช้คลาส CSS เหล่านี้เพื่อจัดรูปแบบพื้นที่ทั่วไปของไซต์ WordPress ทั้งหมด ซึ่งอาจรวมถึงพื้นที่เนื้อหา แถบด้านข้าง วิดเจ็ต เมนูการนำทาง และอื่นๆ
การรู้จักคลาส CSS เหล่านี้มีประโยชน์หากคุณกำลังเรียนรู้การพัฒนาธีม WordPress หรือเพียงแค่พยายามสร้างธีมย่อยสำหรับเว็บไซต์ของคุณเอง
นอกจากนี้ยังช่วยให้คุณจัดรูปแบบองค์ประกอบบางอย่างในธีม WordPress ของคุณได้อย่างรวดเร็วด้วยการเพิ่ม CSS ที่กำหนดเองโดยไม่ต้องสร้างธีมของคุณเอง
หมายเหตุ : คุณไม่จำเป็นต้องเรียนรู้ CSS เพื่อเปลี่ยนสไตล์ธีมหรือสร้างธีมที่กำหนดเอง หากคุณไม่ต้องการเรียนรู้การเขียนโค้ด คุณสามารถใช้ตัวสร้างการลากและวาง เช่น SeedProd เราจะพูดถึงเรื่องนี้เพิ่มเติมในบทความต่อไป
อย่างที่กล่าวไปแล้ว มาดูคลาส CSS ที่สร้างโดย WordPress เริ่มต้นกัน
สไตล์คลาสร่างกายเริ่มต้น
แท็ก body <body>
ใน HTML มีโครงสร้างเค้าโครงทั้งหมดของหน้าเว็บใดๆ ซึ่งทำให้การออกแบบธีม WordPress มีความสำคัญมาก
WordPress เพิ่มคลาส CSS หลายคลาสในพื้นที่เนื้อหาที่นักออกแบบธีมสามารถใช้เพื่อจัดรูปแบบคอนเทนเนอร์เนื้อหาได้
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
อย่างที่คุณเห็น คลาสเหล่านี้มีเงื่อนไขมากมายที่คุณสามารถกำหนดเป้าหมายในสไตล์ CSS ของคุณได้
ตัวอย่างเช่น หากคุณต้องการให้หน้าหมวดหมู่ 'ข่าวสาร' มีสีพื้นหลังที่แตกต่างกัน คุณสามารถเพิ่ม CSS ที่กำหนดเองต่อไปนี้ได้
.category-news {
background-color:#f7f7f7;
}
ต้องการวิธีง่ายๆ ในการเพิ่ม CSS และข้อมูลโค้ดใน WordPress หรือไม่? ลองใช้ปลั๊กอิน WPCode ฟรีเพื่อพิสูจน์ตัวอย่างโค้ดของคุณในอนาคต
คลาสสไตล์โพสต์เริ่มต้น
เช่นเดียวกับองค์ประกอบเนื้อหา WordPress เพิ่มคลาสไดนามิกให้กับองค์ประกอบโพสต์เช่นกัน
องค์ประกอบนี้มักจะเป็นแท็ก <article>
ในเทมเพลตธีมของคุณ อย่างไรก็ตาม อาจเป็นแท็กอื่นๆ ขึ้นอยู่กับธีมของคุณ คลาสโพสต์ CSS จะแสดงในธีมของคุณโดยการเพิ่มแท็กเทมเพลต post_class()
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
นี่คือรายการของคลาส CSS ทั่วไปบางส่วนที่สร้างโดยฟังก์ชัน post_class():
// Adds a class with ID for single items
.post-(ID) {}
// Generic post claass added for single blog posts.
.post {}
// Generic page class added when a single page is displayed.
.page {}
// Generic attachment class added to attachment pages.
.attachment {}
// Adds a post type class e.g. type-post
.type(post-type){}
// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}
// Added when an item has a featured image
.has-post-thumbnail{}
// Added when a sticky post is displayed
.sticky {}
// Generic class to display an entry
.hentry {}
// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}
// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}
ชั้นเรียนของโพสต์ช่วยให้คุณสามารถจัดรูปแบบโพสต์ในบล็อกและหน้าเว็บที่ตรงกับเงื่อนไขต่างๆ ได้ ตัวอย่างเช่น คุณสามารถจัดรูปแบบโพสต์ในบล็อกที่ยื่นในหมวดหมู่เฉพาะได้โดยใช้ CSS ที่กำหนดเองดังต่อไปนี้:
.category-news {
background-color:#EFEFEF;
}
หากคุณไม่เห็นตัวแก้ไข CSS ในแดชบอร์ด WordPress ให้ทำตามบทช่วยสอนเกี่ยวกับวิธีแก้ไขตัวปรับแต่งธีม WordPress ที่หายไป
คลาสเมนูการนำทางเริ่มต้น
WordPress ยังเพิ่มคลาส CSS ให้กับเมนูการนำทางของคุณ ต่อไปนี้เป็นคลาสเริ่มต้นที่เพิ่มลงในเมนูการนำทางโดยค่าเริ่มต้น
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}
ธีม WordPress ของคุณจะเพิ่มคลาส CSS ให้กับแต่ละตำแหน่งเมนูนำทาง
สมมติว่าธีมของคุณกำหนดคลาสเมนูหลักให้กับตำแหน่งเมนูภายในพื้นที่ส่วนหัว จากนั้นคุณสามารถกำหนดเป้าหมายใน CSS ของคุณโดยใช้คลาส CSS ต่อไปนี้
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำเกี่ยวกับวิธีการจัดรูปแบบเมนูการนำทางใน WordPress
คลาสวิดเจ็ต WordPress เริ่มต้น
วิดเจ็ตเป็นวิธีที่ง่ายในการแสดงบล็อกที่ไม่ใช่เนื้อหาในธีม WordPress ของคุณ โดยทั่วไปจะแสดงในพื้นที่พร้อมวิดเจ็ตโดยเฉพาะหรือแถบด้านข้างในธีม WordPress ของคุณ
WordPress เพิ่มคลาสต่อไปนี้ในวิดเจ็ตดั้งเดิม
.widget {}
#searchform {}
.widget_search {}
.screen-reader-text {}
.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 select {}
.widget_archive option {}
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
.recentcomments {}
#recentcomments {}
#recentcomments 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 {}
.textwidget {}
.widget_text {}
.textwidget p {}
อย่างไรก็ตาม เมื่อ WordPress ย้ายไปยังพื้นที่วิดเจ็ตแบบบล็อก คุณสามารถเพิ่มบล็อกต่างๆ ในพื้นที่วิดเจ็ตของคุณ และแต่ละบล็อกจะสร้างคลาส CSS แบบไดนามิก
เราจะแสดงวิธีค้นหาคลาส CSS เหล่านี้ในบทความนี้
คลาสแบบฟอร์มความคิดเห็นเริ่มต้น
ความคิดเห็นเป็นศูนย์กลางการมีส่วนร่วมสำหรับเว็บไซต์ WordPress หลายแห่ง การจัดรูปแบบจะช่วยให้คุณมอบประสบการณ์ที่น่าดึงดูดยิ่งขึ้นแก่ผู้ใช้
WordPress เพิ่มคลาส CSS เริ่มต้นต่อไปนี้เพื่อช่วยให้นักพัฒนาธีมกำหนดรูปแบบพื้นที่แสดงความคิดเห็น
/*Comment Output*/
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
#cancel-comment-reply {}
#cancel-comment-reply a {}
/*Comment Form */
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit
สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำเกี่ยวกับการจัดรูปแบบความคิดเห็นใน WordPress
ค้นหา WordPress Block Classes
ตัวแก้ไขบล็อก WordPress สร้างคลาส CSS สำหรับบล็อกแบบไดนามิก
หากต้องการค้นหาคลาส CSS เหล่านี้ คุณจะต้องเพิ่มบล็อกนั้นในโพสต์หรือเพจ หลังจากนั้น คุณต้องคลิกที่ปุ่มแสดงตัวอย่างเพื่อดูการทำงานของบล็อก
ในแท็บแสดงตัวอย่าง ให้เลื่อนเมาส์ไปที่บล็อกที่คุณเพิ่งเพิ่มเข้าไป และเลือกตรวจสอบเครื่องมือโดยคลิกขวา
ในคอนโซลนักพัฒนาซอฟต์แวร์ คุณจะเห็น HTML ที่สร้างโดยบล็อก จากที่นี่ คุณสามารถดูคลาส CSS ที่เพิ่มโดยบล็อก
ในภาพหน้าจอด้านบน เรากำลังดูคลาส CSS ของบล็อกแกลเลอรี จากนั้นคุณสามารถใช้คลาส CSS เหล่านี้เพื่อจัดรูปแบบบล็อกแกลเลอรีในธีม WordPress ของคุณ
การเพิ่มคลาส CSS ของคุณเองใน WordPress
ตอนนี้คลาส CSS CSS เริ่มต้นนั้นค่อนข้างครอบคลุม อย่างไรก็ตาม จุดประสงค์ของพวกเขาคือการจัดเตรียมเฟรมเวิร์กมาตรฐานสำหรับนักพัฒนาธีมเป็นหลัก
สำหรับเว็บไซต์แต่ละแห่ง คุณอาจต้องเพิ่ม CSS ที่กำหนดเองสำหรับพื้นที่ที่คุณอาจไม่พบคลาส CSS เริ่มต้นที่จะกำหนดเป้าหมาย
ในทำนองเดียวกัน บางครั้งคุณอาจต้องการทำการเปลี่ยนแปลงเล็กน้อยในโพสต์หรือหน้าใดหน้าหนึ่งโดยไม่นำไปใช้กับธีมทั้งหมดของคุณ
โชคดีที่ WordPress มีวิธีง่ายๆ หลายวิธีในการเพิ่มคลาส CSS ในพื้นที่ต่างๆ
เพิ่มคลาส CSS ที่กำหนดเองให้กับบล็อกภายในตัวแก้ไขบล็อก
หากคุณต้องการเพิ่มคลาส CSS ที่กำหนดเองอย่างรวดเร็วไปยังโพสต์หรือเพจที่ต้องการ วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้ตัวแก้ไขบล็อก
เพียงแก้ไขโพสต์หรือเพจ จากนั้นเลือกบล็อกที่คุณต้องการเพิ่มคลาส CSS ที่กำหนดเอง ใต้การตั้งค่าบล็อก ให้คลิกที่แผงขั้นสูงและเพิ่มชื่อคลาส CSS ของคุณ
อย่าลืมบันทึกการเปลี่ยนแปลงของคุณโดยคลิกที่ปุ่มอัปเดต
ตอนนี้คุณสามารถใช้คลาสนี้เพื่อเพิ่มโค้ด CSS ที่กำหนดเองซึ่งจะมีผลกับบล็อกนี้โดยเฉพาะในโพสต์หรือหน้านี้
ใน WordPress เมนูนำทาง
คุณยังสามารถเพิ่ม CSS แบบกำหนดเองให้กับรายการเมนูการนำทางของ WordPress ได้อีกด้วย สมมติว่าคุณต้องการแปลงรายการเมนูเป็นปุ่ม วิธีนี้ก็สะดวกดี
เพียงไปที่หน้า ลักษณะที่ ปรากฏ » เมนู แล้วคลิกปุ่ม ตัวเลือกหน้าจอ ที่มุมบนขวาของหน้าจอ
จากที่นี่ คุณต้องทำเครื่องหมายที่ช่องถัดจากตัวเลือกคลาส CSS
ถัดไป คุณต้องเลื่อนลงและคลิกเพื่อขยายรายการเมนูที่คุณต้องการเพิ่มคลาส CSS ที่กำหนดเอง
คุณจะสังเกตเห็นฟิลด์ที่มีป้ายกำกับคลาส CSS ไปข้างหน้าและเพิ่มคลาส CSS ที่กำหนดเองของคุณที่นี่
อย่าลืมคลิกที่ปุ่มบันทึกเมนูเพื่อจัดเก็บการเปลี่ยนแปลงของคุณ
ตอนนี้คุณสามารถใช้คลาส CSS ที่กำหนดเองนี้เพื่อจัดรูปแบบรายการเมนูนั้นให้แตกต่างออกไป
โบนัส: ออกแบบธีม WordPress ได้อย่างง่ายดายโดยไม่ต้องเขียนโค้ด CSS
การเรียนรู้การจัดรูปแบบธีม WordPress ด้วย CSS ที่กำหนดเองเป็นทักษะที่มีประโยชน์มาก อย่างไรก็ตาม ผู้ใช้บางรายอาจต้องการโซลูชันในการออกแบบธีม WordPress โดยไม่ต้องเขียนโค้ด CSS เลย
สำหรับสิ่งนี้ คุณจะต้องใช้ SeedProd เป็นเครื่องมือสร้างหน้า WordPress ที่ดีที่สุดในตลาดที่ช่วยให้คุณสามารถสร้างธีมที่กำหนดเองได้อย่างง่ายดายโดยไม่ต้องเขียนโค้ดใดๆ
SeedProd มาพร้อมกับธีมพร้อมใช้งานที่คุณสามารถใช้เป็นจุดเริ่มต้นได้
คุณยังสามารถสร้างธีมตั้งแต่เริ่มต้นได้ด้วยการสร้างเทมเพลตด้วยตนเอง
จากนั้นคุณสามารถแก้ไขธีมที่กำหนดเองได้โดยใช้อินเทอร์เฟซการสร้างไซต์แบบลากและวางที่ใช้งานง่าย
เพียงวางบล็อกลงในการออกแบบของคุณเพื่อสร้างเค้าโครงของคุณเอง
คุณยังสามารถเปลี่ยนรายการใดๆ ได้อย่างง่ายดายด้วยการชี้และคลิกง่ายๆ คุณสามารถใช้สี พื้นหลัง แบบอักษร และอื่นๆ ของคุณเองได้
สำหรับรายละเอียดเพิ่มเติม โปรดดูบทแนะนำทีละขั้นตอนเกี่ยวกับวิธีสร้างธีม WordPress ที่กำหนดเองได้อย่างง่ายดายโดยไม่ต้องเขียนโค้ดใดๆ
เราหวังว่าบทความนี้จะช่วยคุณค้นหาแผ่นโกง CSS ที่สร้างโดย WordPress เริ่มต้น คุณอาจต้องการดูคำแนะนำในการแก้ไขข้อผิดพลาดที่พบบ่อยที่สุดของ WordPress หรือดูการเปรียบเทียบผู้เชี่ยวชาญของเราเกี่ยวกับซอฟต์แวร์แชทสดที่ดีที่สุดสำหรับธุรกิจขนาดเล็ก
หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook