Стандартні (за замовчуванням) імена CSS-класів у WordPress

Привіт:) WordPress автоматично додає власні класи CSS до різних елементів у більшості тем. Ці CSS-класи за замовчуванням можна використовувати для оформлення цих елементів у вашій темі WordPress.

У цій статті приведу список основних класів ВордПрес за замовчуванням, покажу, як їх знайти та додати власні.

WordPress автоматично генерує та додає класи CSS за замовчуванням до різних сторінок та елементів веб-сайту.

Розробники тем можуть використовувати ці класи для оформлення загальних блоків та секцій в межах всього сайту. Наприклад, область вмісту, бічні панелі, віджети, меню навігації та багато іншого.

Знання назв стандартних CSS-класів стане в нагоді, якщо ви вивчаєте процес розробки ВП-теми або просто намагаєтеся створити дочірню тему.

Це також допоможе швидко оформити певні елементи у вашій темі, додавши у ній власні CSS-правила.

Розглянемо стандартні CSS-класи, згенеровані WordPress за замовчуванням.

до змісту ↑

Класи за замовчуванням для тегу body

Тег <body> містить всю структуру макета будь-якої веб-сторінки. Це робить його важливим в будь-якому дизайні теми WordPress.

WordPress додає кілька класів CSS до цього тегу, які дизайнери теми можуть використовувати для оформлення контейнера тіла сторінок.

/* Додається, коли веб-сайт використовує мову справа наліво, наприклад, Арабська, Іврит */   
.rtl {}
 
/* При відображенні домашньої сторінки */
.home {}
 
/* При відображенні сторінки блогу */
.blog {}
 
/* При відображенні сторінки архіву */
.archive {}
 
/* При відображенні архіву по даті */
.date {}
 
/* Додається на сторінках пошуку */
.search {}
 
/* Якщо увімкнена пагінація */
.paged {}
 
/* При відображенні сторінки вкладення */
.attachment {}
 
/* При відображенні сторінки з помилкою 404 */
.error404 {}
 
/* Якщо відкритий одиничний пост (запис). Включає ID посту */
.single postid-(id) {}
 
/* При відображенні вкладення. Включає ID посту */
.attachmentid-(id) {}
 
/* При відображенні вкладення. Включає його MIME-тип */
.attachment-(mime-type) {}
 
/* Якщо відображається сторінки автора */
.author {}
 
/* Якщо відображається сторінки автора. Включає ім'я автора */
.author-(user_nicename) {}
 
/* При відображенні сторінки категорії */
.category {}
 
/* При відображенні сторінки категорії. Додається слаг категорії */
.category-(slug) {}
 
/* При відображенні сторінки тегів */
.tag {}
 
/* При відображенні сторінки тегів. Додається слаг тегу */
.tag-(slug) {}
 
/* Додається при відображенні батьківської сторінки */
.page-parent {}
 
/* Додається при відображенні батьківської сторінки. Включає її ID */
.page-child parent-pageid-(id) {}
 
/* Якщо відображається сторінка з використанням шаблону сторінки. Включає ім'я файлу її шаблону сторінки */ 
.page-template page-template-(template file name) {}
 
/* При відображенні результатів пошуку */
.search-results {}
 
/* Якщо результати пошуку відсутні */ 
.search-no-results {}
 
/* Якщо користувач увійшов у систему (залогінився) */ 
.logged-in {}
 
/* Додається при відображенні сторінки з розбивкою по сторінках (пагінацією). Включає номер сторінки пагінації */ 
.paged-(page number) {}
 
/* Якщо відображається одиничний пост (запис) з пагінацією. Включається номер сторінки пагінації */
.single-paged-(page number) {}
 
/* При відображенні типу запису Сторінка з пагінацією. Додається номер сторінки пагінації */ 
.page-paged-(page number) {}
 
/* Коли відображається сторінка категорії з пагінацією. Включає номер сторінки пагінації  */
.category-paged-(page number) {}
 
/* Додається, коли відображається сторінка з тегами із пагінацією. Включає номер сторінки пагінації */ 
.tag-paged-(page number) {}
 
/* Якщо відображається сторінка архіву на основі дати з пагінацією. Включає номер сторінки пагінації */ 
.date-paged-(page number) {}
 
/* Додається, коли відображається сторінка автора з пагінацією. Включає номер сторінки пагінації */ 
.author-paged-(page number) {}
 
/* Якщо відображається сторінка пошуку з пагінацією. Включає номер сторінки пагінації */
.search-paged-(page number) {}

Ці класи включають широкий спектр умов, відповідно до яких можна застосовувати власні CSS-правила.

Наприклад, якщо потрібно, щоб сторінка категорії "Новини" мала інший колір тла (бекграунд):

.category-news { 
  background-color: #f7f7f7; 
}
до змісту ↑

Класи за замовчуванням для одиничного посту (запису) і сторінки

WordPress також додає динамічні класи до елементів post.

Зазвичай цей елемент є тегом <article> у вашому шаблоні теми. Однак це може бути будь-який інший тег залежно від вашої теми. Пост-класи CSS відображаються у вашій темі шляхом додавання тегу шаблону post_class().

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Ось список деяких найпоширеніших класів CSS, створених функцією post_class():

/* Клас з ідентифікатором (ID) окремого посту (запису) */
.post-(ID) {}
 
/* Додається загальний клас типу "Запис" для окремих постів */
.post {}
 
/* Додається загальний клас типу "Сторінка" для окремих сторінок */
.page {}
 
/* Додається загальний клас типу "Вкладення" для окремих сторінок вкладень */
.attachment {}
 
/* Клас типу записів */
.type(post-type) {}
 
/* Додає клас для формату публікацій, якщо тема їх підтримує */
.format-(post-format) {}
 
/* Додається, якщо пост має мініатюру */
.has-post-thumbnail {}
 
/* Якщо відображається прикріплений пост */
.sticky {}
 
/* Клас для відображення старих структурованих даних */
.hentry {}
 
/* Класи категорій, до яких відноситься поточний запис. Наприклад, category-news або category-movies */
.category-(slug) {}
 
/* Класи тегів (міток), до яких відноситься поточний запис. Наприклад, tag-news або tag-movies */
.tag-(slug) {}

Ці класи дозволяють стилізувати записи в блозі та сторінки відповідно до різних умов. Наприклад, ви можете задати свій колір тла записам блогу з категорії "Новини":

.category-news { 
  background-color:#EFEFEF; 
}
до змісту ↑

Класи за замовчуванням для меню навігації

ВордПрес також додає власні класи CSS за замовчуванням до навігаційних меню.

/* Клас для поточної Сторінки */
.current_page_item {}
 
/* Клас для поточної Категорії */
.current-cat {} 
 
/* Клас для будь-якого іншого поточного пункту меню */
.current-menu-item {} 
 
/* Клас для таксономій */
.menu-item-type-(taxonomy) {}
 
/* Клас для розрізнення типів публікацій */
.menu-item-type-(post_type) {}
 
/* Клас для будь-якого спеціального елемента, який ви додали */
.menu-item-type-custom {} 
 
/* Клас для посилання на головну сторінку */
.menu-item-home {} 

Ваша тема WordPress також додасть клас CSS до кожної локації (місця розташування) навігаційного меню.

Припустімо, ваша тема призначає клас основного меню для розташування його всередині області заголовка. Тоді ви можете звернутися до нього за допомогою наступних класів:

/* Клас контейнера */
#header .primary-menu{} 
   
/* Перший невпорядкований список класу контейнера */
#header .primary-menu ul {} 
   
/* Невпорядкований список у невпорядкованому списку */
#header .primary-menu ul ul {} 
   
/* Кожен елемент навігації */
#header .primary-menu li {}
   
/* Кожен анкор елементу навігації */
#header .primary-menu li a {} 
   
/* Невпорядкований список, якщо є випадаючі елементи */
#header .primary-menu li ul {} 
   
/* Кожен випадаючий елемент навігації */
#header .primary-menu li li {} 
   
/* Кожен анкор випадаючого елементу навігації */
#header .primary-menu li li a {} 
до змісту ↑

Класи за замовчуванням для віджетів

Віджети — простий спосіб відображення блоків теми 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 {}

Однак, оскільки ВордПрес переходить на блокові області віджетів (тобто на блоки Gutenberg), тепер ви можете додавати різні блоки до своїх областей віджетів, і кожен із них динамічно генерує класи CSS.

Далі в цьому матеріалі ви дізнаєтеся, як знайти ці класи CSS.

до змісту ↑

Класи за замовчуванням для форми коментарів

Через коментарі веб-ресурс взаємодіє зі своїми відвідувачами. Стилізуючи цей блок, ви розширюєте цю взаємодію.

WordPress додає такі стандартні класи CSS, щоб допомогти розробникам тем стилізувати область коментарів.

/* Тіло коментаря */
  
.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 {}
  
/* Форма коментаря */
  
#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
до змісту ↑

Як знайти CSS-класи, які додає редактор Gutenberg для своїх блоків

Новий редактор WordPress динамічно генерує класи CSS для своїх блоків.

Щоб їх знайти:

  • спочатку додайте конкретний блок до публікації чи сторінки і оновити її;
  • у користувацькій частині сайту наведіть курсор миші на потрібний блок і натисніть праву клавішу;
  • у контекстному меню виберіть пункт "Перевірити" або "Дослідити".

На консолі розробника ви побачите HTML-код, створений блоком. Тут ви можете знайти класи CSS, додані блоком. На скріншоті вище ми дивимося на класи блоку "Gallery". Потім ви можете використовувати ці класи CSS для стилізації блоку галереї у своїй темі WordPress.

до змісту ↑

Як у WordPress додати власні CSS-класи

Для конкретного веб-сайту іноді буває необхідно додати свої власні CSS-правила для окремих його областей, але не завжди можливо знайти (використати) класи CSS, що були додані системою за замовчуванням. Також можете просто захотіти внести невеликі зміни в певну публікацію чи сторінку, не застосовуючи їх до всієї теми. На щастя, WordPress пропонує кілька простих способів додавати класи CSS у різні області.

до змісту ↑

До блоку в редакторі блоків

Якщо потрібно швидко додати спеціальний клас CSS до певної публікації чи сторінки, то найпростіший спосіб зробити це — скористатися редактором блоків.

Просто відкрийте на редагування пост або сторінку і виберіть блок, до якого ви хочете додати свій клас. У налаштуваннях блоку клацніть розширену панель ("Advanced" або "Додатково") і додайте назву свого класу CSS.

Не забудьте зберегти зміни.

Тепер ви можете використовувати цей клас, щоб додати спеціальний код CSS, який впливатиме лише на цей конкретний блок у цій конкретній публікації чи сторінці.

до змісту ↑

До навігаційного меню

Також можете додати власний CSS до елементів навігаційного меню WordPress. Скажімо, хочете перетворити пункт меню на кнопку.

  1. Перейдіть у адмін-меню Вигляд > Меню.
  2. Натисніть кнопку Параметри екрану у верхньому правому куті екрана.
  3. Встановіть прапорець поруч із опцією Клас CSS.
  1. Прокрутіть сторінку донизу, виберіть потрібний пункт меню та клацніть на ньому.
  2. У полі CSS класи (необов’язково) додайте назву свого класу.
  1. Збережіть меню.

Тепер ви можете використовувати цей спеціальний клас для стилізації конкретного пункту меню.

Джерело

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *