Шпаргалка по CSS, генерируемой WordPress по умолчанию, для начинающих

Вы ищете шпаргалку по CSS, создаваемую WordPress по умолчанию? WordPress автоматически добавляет некоторые классы CSS к различным элементам в большинстве...

Вы ищете шпаргалку по CSS, создаваемую WordPress по умолчанию?

WordPress автоматически добавляет некоторые классы CSS к различным элементам в большинстве тем. Эти классы CSS по умолчанию могут быть использованы для стилизации этих элементов в вашей теме WordPress.

В этой статье мы покажем вам сгенерированную по умолчанию WordPress шпаргалку CSS. Мы также поговорим о том, как легко находить классы CSS и как добавлять пользовательские классы CSS, когда они вам нужны.

Зачем изучать генерируемый по умолчанию WordPress CSS?

WordPress автоматически генерирует и добавляет классы CSS по умолчанию к различным элементам на вашем сайте WordPress.

Разработчики тем WordPress могут использовать эти классы CSS для стилизации общих областей всех сайтов WordPress. Это может включать область контента, боковые панели, виджеты, навигационные меню и многое другое.

Знание этих классов CSS пригодится вам, если вы изучаете разработку тем WordPress или просто пытаетесь создать дочернюю тему для своего сайта.

Она также поможет вам быстро стилизовать определенные элементы в вашей теме WordPress, добавив пользовательский CSS без создания собственной темы.

Примечание: Вам не нужно изучать CSS для того, чтобы изменить стили вашей темы или создать пользовательскую тему. Если вы предпочитаете не изучать код, то вы можете использовать конструктор перетаскивания, например, SeedProd. Мы поговорим об этом подробнее далее в статье.

Итак, давайте посмотрим, какие классы CSS генерируются WordPress по умолчанию.

Стили класса тела по умолчанию

Тег body в HTML содержит всю структуру макета любой веб-страницы, что делает его очень важным в дизайне любой темы WordPress.

WordPress добавляет несколько классов CSS в область body, которые дизайнеры тем могут использовать для стилизации контейнера body.

// Добавляется, когда веб-сайт использует язык с правого на левый e.g. арабский, иврит .rtl <> // Добавляется при отображении домашней страницы .home <> // Добавляется при отображении страницы блога .blog <> // Добавляется при отображении страницы Архива .archive <> // Добавляется, когда отображается архив, основанный на дате .date <> // Добавляется на страницах поиска .search <> // Добавляется, когда включена пагинация .paged <> // Добавляется при отображении вложенной страницы .attachment <> // Добавляется при отображении страницы ошибки 404 .error404 <> // Добавляется при выводе одного поста, включающего идентификатор поста .single postid-(id) <> // Добавляется при отображении одного вложения. Включает идентификатор вложения .attachmentid-(id) <> // Добавляется при отображении одного вложения. Включает mime-тип вложения .attachment-(mime-type) <> // Добавляется при отображении страницы автора .author <> // Добавляется при отображении страницы автора. Включает имя автора. .author-(user_nicename) <> // Добавляется при отображении страницы категории .category <> //Добавляется при отображении страницы категории. Включает метку категории. .category-(slug) <> // Добавляется при отображении страницы тегов. .tag <> // Добавляется при отображении страницы тегов. Включает тег slug. .tag-(slug) <> // Добавляется при отображении родительской страницы. .page-parent <> // Добавляется при отображении дочерней страницы. Включает идентификатор родительской страницы. .page-child parent-pageid-(id) <> // Добавляется, когда страница отображается с использованием шаблона страницы. Включает имя файла шаблона страницы. .page-template page-template-(имя файла шаблона) <> // Добавляется при отображении результатов поиска. .search-results <> // Добавляется, когда поиск не дает результатов. .search-no-results <> // Добавляется, когда обнаруживается вошедший в систему пользователь. .logged-in <> // Добавляется при отображении страницы с пагинацией. Включает номер страницы. .paged-(номер страницы) <> // Добавляется, когда отображается постранично один элемент. Включает номер страницы. .single-paged-(номер страницы) <> // Добавляется при отображении постраничного типа страницы. Включает номер страницы. .page-paged-(номер страницы) <> // Добавляется, когда отображается страница категории, состоящая из страниц. Включает номер страницы. .category-paged-(номер страницы) <> // Добавляется, когда отображается страница с тегом paged. Включает номер страницы. .tag-paged-(номер страницы) <> //Добавляется при отображении архивной страницы, основанной на дате страницы. Включает номер страницы. .date-paged-(номер страницы) <> // Добавляется, когда отображается страница с автором. Включает номер страницы. .author-paged-(номер страницы) <> // Добавляется при отображении постраничной страницы поиска. Включает номер страницы. .search-paged-(номер страницы) <>

Как вы видите, эти классы включают в себя широкий спектр условий, на которые вы можете ориентироваться в стилях CSS.

Например, если вы хотите, чтобы страница категории ‘News’ имела другой цвет фона, то вы можете добавить следующий пользовательский CSS.

.category-news

Нужен простой способ добавления CSS и фрагментов кода в WordPress? Попробуйте бесплатный плагин WPCode для защиты ваших фрагментов кода в будущем.

Классы стилей по умолчанию

Как и в случае с элементом body, WordPress добавляет динамические классы и к элементам post.

Этот элемент обычно является тегом в шаблоне вашей темы. Однако это может быть любой другой тег в зависимости от вашей темы. CSS-классы поста отображаются в вашей теме путем добавления тега шаблона post_class().

Вот список некоторых наиболее распространенных классов CSS, создаваемых функцией post_class():

// Добавляет класс с идентификатором для отдельных элементов .post-(ID) <> // Общий класс post, добавляемый для отдельных записей блога. .post <> // Общий класс страницы, добавляемый при отображении одной страницы. .page <> // Общий класс вложений, добавляемый к страницам вложений. .attachment <> // Добавляет класс для типа поста e.g. type-post .type(post-type)<> // Добавляет класс для формата поста, если тема поддерживает форматы постов. E.g. format-standard .format-(post-format)<> // Добавляется, когда у элемента есть выделенное изображение .has-post-thumbnail<> // Добавляется при отображении липкого поста .sticky <> // Общий класс для отображения записи .hentry <> // Классы с категориями, назначенными посту. E.g. категория-новости категория-фильмы .category-(slug) <> // Классы с тегами, присвоенными посту. e.g. тег-photofriday тег-tgif .tag-(slug) <>

Классы постов позволяют стилизовать посты и страницы блога в соответствии с различными условиями. Например, вы можете по-разному оформить записи блога, отнесенные к определенной категории, с помощью следующего пользовательского CSS:

.category-news

CSS класса поста

Если вы не видите редактор CSS в своей приборной панели WordPress, то следуйте нашему руководству о том, как исправить отсутствующий кастомайзер темы WordPress.

Классы меню навигации по умолчанию

WordPress также добавляет 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 к каждому месту навигационного меню.

Допустим, ваша тема назначает класс primary-menu для меню в области заголовка, тогда вы можете указать его в своем CSS, используя следующие 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 по умолчанию

Виджеты — это простой способ отображения блоков, не относящихся к контенту, в вашей теме 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.дети <> .widget_categories a <> .widget_categories select<> .widget_categories select#cat <> .widget_categories select.postform <> .widget_categories опция <> .виджет_категорий .уровень-0 <> .widget_categories .уровень-1 <> .виджет_категорий .уровень-2 <> .widget_categories .уровень-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 <> .текстовый виджет <> .widget_text <> .textwidget p <>

Однако, поскольку WordPress переходит на блочные области виджетов, теперь вы можете добавлять различные блоки в ваши области виджетов, и каждый из них генерирует CSS классы динамически.

Мы покажем вам, как найти эти CSS-классы далее в этой статье.

Классы формы комментариев по умолчанию

Комментарии являются центром вовлечения для многих сайтов WordPress. Их стилизация поможет вам предоставить пользователям более чистый и увлекательный опыт.

WordPress добавляет следующие классы CSS по умолчанию, чтобы помочь разработчикам тем стилизовать область комментариев.

/*Вывод комментария*/ .список комментариев .ответ <> .список комментариев .ответить a <> .список комментариев .alt <> .список комментариев .нечётный <> .список комментариев .чётный <> .commentlist .thread-alt <> .список комментариев .thread-odd <> .список комментариев .поток-четный <> .список комментариев li ul.дети .alt <> .список комментариев li ul.дети .странный <> .список комментариев li ul.дети .даже <> .список комментариев .vcard <> .список комментариев .цитата из открытки.fn <> .список комментариев .vcard span.says <> .список комментариев .vcard img.фото <> .список комментариев .vcard img.аватар <> .список комментариев .vcard cite.fn a.url <> .список комментариев .comment-meta <> .список комментариев .comment-meta a <> .список комментариев .commentmetadata <> .commentlist .commentmetadata a <> .список комментариев .родитель <> .commentlist .комментарий <> .список комментариев .children <> .список комментариев .pingback <> .список комментариев .bypostauthor <> .список комментариев .комментарий-автор <> .список комментариев .comment-author-admin <> .список комментариев <> .commentlist li <> .commentlist li p <> .commentlist li ul <> .список комментариев li ul.дети li <> .список комментариев li ul.дети li.alt <> .список комментариев li ul.children li.byuser <> .commentlist li ul.дети li.комментарий <> .commentlist li ul.дети li.depth- <> .список комментариев li ul.children li.bypostauthor <> .список комментариев li ul.дети 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 < >.обязательный < >.comment-form-author < >.comment-form-email < >.comment-form-url < >.comment-form-comment < >.form-lowed-tags < >.form-submit

Для более подробной информации смотрите наше руководство о том, как стилизовать комментарии в WordPress.

Поиск классов блоков WordPress

Редактор блоков WordPress динамически генерирует классы CSS для блоков.

Чтобы найти эти классы CSS, вам нужно добавить этот конкретный блок в пост или страницу. После этого нужно нажать на кнопку Preview, чтобы увидеть блок в действии.

На вкладке предварительного просмотра подведите курсор к блоку, который вы только что добавили, и выберите инструмент Inspect, щелкнув правой кнопкой мыши.

Поиск CSS-классов для блоков

В консоли разработчика вы увидите HTML, сгенерированный блоком. Отсюда вы можете увидеть CSS-классы, добавленные блоком.

На скриншоте выше мы смотрим на CSS-классы блока Gallery. Затем вы можете использовать эти CSS-классы для стилизации блока галереи в вашей теме WordPress.

Добавление собственных пользовательских классов CSS в WordPress

Теперь, стандартные классы CSS WordPress достаточно полны. Однако их назначение состоит в том, чтобы предоставить разработчикам тем стандартизированную основу для построения.

Для вашего индивидуального сайта вам может понадобиться добавить пользовательский CSS для тех областей, где вы не сможете найти стандартный CSS-класс.

Аналогично, иногда вы можете просто захотеть внести небольшое изменение в конкретный пост или страницу, не применяя его ко всей теме.

К счастью, WordPress предоставляет вам несколько простых способов добавления CSS-классов в различные области.

Добавление пользовательских CSS-классов к блоку внутри редактора блоков

Если вы хотите быстро добавить пользовательский CSS-класс к определенному посту или странице, то проще всего это сделать с помощью редактора блоков.

Просто отредактируйте пост или страницу, а затем выберите блок, в который вы хотите добавить пользовательский CSS-класс. В настройках блока нажмите на расширенную панель и добавьте имя для вашего CSS класса.

Добавление пользовательских CSS-классов в блок

Не забудьте сохранить изменения, нажав на кнопку Обновить.

Теперь вы можете использовать этот класс для добавления пользовательского CSS кода, который будет влиять только на этот конкретный блок в этом конкретном посте или странице.

В навигационных меню WordPress

Вы также можете добавить пользовательский CSS к пунктам навигационного меню WordPress. Допустим, вы хотите преобразовать пункт меню в кнопку, тогда вам пригодится этот метод.

Просто перейдите к Внешний вид » Меню страницу и нажмите на кнопку Параметры экрана в правом верхнем углу экрана.

Отсюда вам нужно установить флажок напротив опции CSS классы.

CSS-классы меню

Затем прокрутите вниз и щелкните, чтобы развернуть пункт меню, в который вы хотите добавить пользовательский CSS-класс.

Вы заметите поле с надписью CSS классы. Перейдите и добавьте свой пользовательский CSS-класс здесь.

Добавление css-класса к пункту меню навигации

Не забудьте нажать на кнопку Сохранить меню, чтобы сохранить изменения.

Теперь вы можете использовать этот пользовательский CSS-класс, чтобы по-другому оформить этот конкретный пункт меню.

Бонус: Легкий дизайн темы WordPress без написания кода CSS

Обучение стилизации темы WordPress с помощью пользовательского CSS — очень полезный навык. Однако некоторые пользователи могут просто захотеть получить решение для оформления темы WordPress без написания кода CSS.

Для этого вам понадобится SeedProd. Это лучший на рынке инструмент для создания страниц WordPress, который позволяет легко создавать пользовательские темы без написания кода.

Код купона SeedProd Website Builder

SeedProd поставляется с готовыми к использованию темами, которые вы можете использовать в качестве отправной точки.

Вы также можете создать тему с нуля, создав шаблоны вручную.

Стартовые темы SeedProd

Затем вы можете редактировать вашу пользовательскую тему с помощью интуитивно понятного интерфейса создания сайта методом перетаскивания.

Просто добавляйте блоки в свой дизайн для создания собственных макетов.

Конструктор тем SeedProd

Вы также можете легко изменить любой элемент простым нажатием кнопки мыши. Вы можете использовать свои собственные цвета, фон, шрифты и многое другое.

Для более подробной информации смотрите наше пошаговое руководство о том, как легко создать пользовательскую тему WordPress без написания кода.

Надеемся, что эта статья помогла вам найти шпаргалку по CSS, генерируемую WordPress по умолчанию. Вы также можете ознакомиться с нашим руководством по исправлению наиболее распространенных ошибок WordPress или посмотреть наше экспертное сравнение лучших программ для живого чата для малого бизнеса.

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий