Дополнительные стили CSS
Сегодня мы поговорим про дополнительные стили CSS в WordPress, что это такое и как их можно использовать. Расскажу вам о возможностях CSS.
Что такое CSS? CSS — это каскадная таблица стилей (если мы будем гуглить ответ на этот вопрос). Знаю, что мало о чем скажет обычному пользователю. Поэтому выражусь проще:
CSS — стилизует наш сайт, добавляет визуальную оболочку абсолютно всему, чему вы только пожелаете. То, что было красным, может стать зеленым. Там, где был белый фон — стал красный. Большой шрифт стал меньше и т.д.
Стили CSS в записях
Начнем с самого простого, поменяем стили абзацу. Установим ему новый фон и цвет. В своей записи выберите любой абзац и справа в колонке выберите «Дополнительно». Спуститесь ниже до графы «Дополнительные классы CSS».
Далее мы переходим в настройки нашей темы.
Здесь в самом низу мы видим графу «Дополнительные стили«, она то нам и нужна!
Откроется редактор и справа будет доступна его визуальная часть. Для удобства, вы можете перейти в вашу запись и смотреть, как она меняется у вас на глазах.
background-color: rgb(157, 229, 175); — Задаем фоновый цвет.
color: rgb(97, 96, 153); — Задаем цвет текста.
padding: 15px; — Добавляем немного отступов со всех краев, чтоб текст не прилипал.
У вас мог возникнуть вопрос, откуда вам брать цвет, который вам нужен?
Есть множество сервисов и готовых решений. Самый простой способ — это ввести в поисковой системе «Подобрать цвет». У вас откроется цветовая палитра, можете начинать.
В CSS поддерживаются и HEX и RGB цвета, выбирайте на свой вкус.
Зачем вам это?
У вас может возникнуть подобный вопрос. Зачем изменять фон и цвет столь «сложным» способом, если это можно сделать редактируя саму запись. И вы будете абсолютно правы!
Дополнительные стили — это нечто большее, чем просто редактирование фона и цвета текста в записях. Хотя и здесь можно придумать что-то, чего нельзя сделать обычным редактированием. Например, можно выбрать красивую картинку и сделать её фоном вашего блока.
Дополнительные стили CSS имеют преимущество над вашими остальными стилями, вы можете переназначать параметры ваших стилей с помощью этой функции. Например, если вы пожелали текст всех ваших абзацев сделать больше — не проблема: p
Это работает абсолютно со всеми элементами, что вы видите на своём сайте! Вы можете придумывать свои виджеты, задавать им свой внешний вид, а можете изменять вид текущим виджетам.
Изменяем стили виджетам
Допустим, мы хотим изменить заголовки всем виджетам, для этого нам необходимо узнать их класс. Нажимаете на любой заголовок виджета ПКМ (правая кнопка мыши), затем «Просмотреть код».
Конечно, так лучше не делать, лучше задавать всем виджетам дополнительный класс и его стилизовать.
Я показал вам это — исключительно для наглядности. Чтоб вы понимали, какую силу имеют «Дополнительные стили».
Задаем класс для виджетов
Первым делом, вам необходимо установить и активировать плагин «Widget CSS Classes» (как установить плагин на wordpress). Далее мы уже идем в привычное нам меню с виджетами.
Далее выберите любой существующий виджет или добавьте новый, а затем откройте его параметры. У вас должно появится новое пустое поле «Классы CSS».
Только один заголовок окрасился в красный
Редактируем мы именно виджет «Свежие записи», потому что именно ему мы задали дополнительный класс. Если мы хотим применить наши действия ко всем виджетам, необходимо задать такой же класс и всем остальным.
Можем придумать что-то еще, например, добавить иконку в меню сайта или конкретному заголовку. Можно делать абсолютно всё, что вы пожелаете. Всё зависит только от вас и вашей фантазии.
В общем и целом, вариантов развития много, то, как стилизовать ваш блог — решать вам, я лишь показал, как это легко и доступно! Удачи!
Все о WEB программировании
WEB программирование от А до Я
Заказать сайт:
Социальные сети:
Партнеры:
Классы и индентификаторы CSS генерируемые WordPress
Доброго времени суток. В данной статье я хочу поговорить о CSS классах и индентификаторах генерируемых WordPress. Зачем? — спросите Вы. Ведь CSS классы и индентификаторы зависят от темы WordPress. И Вы будете правы. Но есть такие классы CSS и индентификаторы, которые генерирует сама CMS WordPress. И, если Вы хотите создать тему WordPress для публичного релиза, то Вы должны использовать их. Кстати, в моем блоге Вы можете почитать уроки по созданию темы для WordPress
И цель данной статьи помочь начинающим веб-мастерам создавать темы для WordPress используя CSS классы и индентификаторы, которые являются стандартом для WordPress.
Основные CSS классы WordPress
Как мы уже знаем одна из основных вещей, которые делают WordPress популярной CMS является его настраиваемость. Мы можем настроить WordPress так, как захотим с помощью CSS. А все это происходит за счет добавления пользовательских классов для различных элементов. Вот список основных CSS классов, которые добавляет WordPress:
Основные стили в посте
Также WordPress добавляет свои классы для постов и вот список основных:
Основные стили меню
Также с помощью генерируемых классов WordPress мы можем стилизировать меню. Вот некоторые классы:
Стили WISIWYG редактора
Вот некоторые классы CSS, которые генерирует WordPress для WISIWYG редактора:
CSS классы для виджетов
Виджеты – это еще один важный аспект WordPress. И стилизация виджетов является одной из приоритетных задач. Для того, чтобы как-то стандартизировать отображение виджетов WordPress генерирует следующие CSS классы:
CSS классы для формы комментариев
Комментарии являются одной из составляющих любого блога. Комментарии – это одна из форм взаимодействия с читателями блога. Поэтому стилизации комментариев следует уделить особое внимание. И WordPress помогает нам в этом, генерируя следующие CSS классы:
Мы с Вами рассмотрели основные CSS класы и индентификаторы, которые генерирует WordPress. Это позволяет нам настроить любой сайт на движке WordPress просто и удобно при помощи CSS стилей.
Работа с классами и идентификаторами, генерируемыми WordPress
В этой статье я покажу три способа, с помощью которых это можно сделать, и проиллюстрирую каждый из них практическими примерами.
Я буду работать с тремя областями применения:
Я поясню, как это работает для каждой из областей применения, а затем приведу для наглядности несколько примеров.
Что вам потребуется для выполнения этого урока
Для выполнения практических заданий из этого урока, вам потребуются:
Классы и идентификаторы, сгенерированные для изображений, загруженных через медиа-аплоадер
При загрузке изображения через медиа-аплоадер, вам предоставляется возможность задать его выравнивание, как это показано на скриншоте.
Вы также можете указать, в каком масштабе нужно выводить изображение: миниатюра, средний, большой или полный размер.
На основе вашего выбора WordPress присваивает тегу загруженных изображений различные классы.
Классы выравнивания могут быть следующими:
Для размера изображения добавляются следующие классы:
Вы можете использовать их, чтобы определять стиль изображений каждого доступного размера.
Большинство тем включает в себя CSS-стили каждого из этих классов соответственно.
Например, тема Twenty Twelve включает в себя следующую таблицу стилей:
Как визуально выглядят эффекты от применения данных классов, вы можете видеть на скриншоте, приведенном ниже.
Первое изображение выравнивается по правому краю; второе — по центру, оно выводится в оригинальном размере:
Добавляем собственные стили, используя данные классы и идентификаторы
Как и при установке выравнивания и отступа, вы можете использовать данные классы, чтобы задать дополнительные стили.
Первое изображение на приведенном скриншоте выравнено по правому краю.
Если же размер экрана изменяется, размер самого изображения остается неизменным. Тогда текст обтекает его не слишком аккуратно:
Теперь, когда страница просматривается на меньшем экране, изображение уже занимает меньшее пространство:
Аналогично, как и CSS для выравнивания или размера, вы можете добавить к изображениям, которые выравниваются определенным образом, декоративный стиль.
Чтобы добавить декоративный стиль для изображений, имеющих выравнивание по центру и выводимых в оригинальном размере, добавьте следующие строки в таблицу стилей:
Данный код добавляет рамку к изображению и уменьшает его в размере:
Использование тегов шаблонов для добавления классов и идентификаторов
Классы и идентификаторы, которые мы рассмотрели, генерируются для изображений самой системой WordPress. Другие классы и идентификаторы могут быть добавлены с помощью тегов шаблонов вашей темы.
Тег шаблонов body_class()
Хорошо проработанная тема для WordPress должна содержать следующий тег в файле header.php :
Вот примеры некоторых из них:
Если вы хотите добавить для тега дополнительные классы, которые не генерируются WordPress, вы можете это сделать.
Например, для добавления класса « hello » существует следующий код:
Разделяя записи пробелами, вы можете добавить столько классов, сколько захотите.
Стили этого шаблона страницы описаны в коде, который приводится чуть ниже.
Таким образом, чтобы задать стили для элементов страницы с помощью этого шаблона, вам нужно добавить следующие строки в таблицу стилей:
Как выглядит такая страница, показано на скриншоте ниже:
Теги шаблонов post_class() и post_ID()
С помощью данного кода генерируется ряд классов, связанных с категорией и типом записи, а также идентификатор, связанный с числовым идентификатором поста.
Например, для сообщения в моем демо-сайте, относящегося к категории ‘red’ будут сгенерированы следующие классы и идентификаторы:
Для назначения таких стилей добавьте в таблицу стилей темы следующий CSS-код:
Результат показан на скриншоте:
Использование классов и идентификаторов для виджетов и меню
Когда в теме регистрируются виджеты (иногда они создаются плагинами), используемые при этом функции могут включать в себя код, который указывает WordPress сгенерировать классы и идентификаторы, основываясь на названии, типе и ID виджета.
Когда регистрируется меню, WordPress может создавать классы на основе названия меню, расположении элементов в нем или месте размещения меню на странице. Вы можете использовать все эти функции, чтобы задать собственные стили для виджетов и меню.
Классы и идентификаторы для виджетов
Чтобы зарегистрировать область виджета, вы используете функцию register_sidebar () файла functions.php вашей темы.
Она может принимать следующие параметры:
Два из этих параметров генерируют класс и/или идентификатор:
Параметр «class» позволяет вручную задать класс для области виджета. Настройки для параметра ‘before_widget» указывают WordPress создать уникальный идентификатор для каждого виджета в области виджетов, а также ряд классов, которые будут зависеть от типа конкретного виджета.
Например, в моем демо-сайте я добавила два виджета — перечень записей и перечень страниц.
Для перечня записей выводится следующий HTML-код:
Для перечня страниц код будет выглядеть так:
Вы можете использовать это для установки стиля виджета, который выводит перечень записей.
Для этого нужно добавить следующий CSS-код в таблицу стилей темы:
Данным кодом в виджет перечня записей добавляется рамка, как это показано на скриншоте ниже:
Классы и идентификаторы для меню
Один из них добавляет классы и идентификаторы для каждого их элементов меню:
Данным кодом добавляется идентификатор и набор классов для каждого пункта. Классы назначаются на основании класса самого меню и его расположения на странице.
Вы можете использовать это, чтобы добавить стиль пунктам меню текущей страницы.
Например, чтобы добавить подчеркивание, добавьте в таблицу стилей следующие строки:
Как будут выглядеть ссылки вы можете увидеть на скриншоте, приведенном ниже (кроме подчеркивания, здесь также в рамках родительской темы задано изменения цвета):
Заключение
Как вы убедились, существует ряд способов, с помощью которых в WordPress можно генерировать классы и идентификаторы для элементов сайта.
Некоторые из них создаются самим WordPress, другие используют теги шаблонов или параметры функции, чтобы задать классы и идентификаторы для вывода разных элементов.
Вы можете применять их для назначения стилей страниц, меню, виджетов, списков постов и других элементов вашего дизайна.
Есть целый ряд других способов, с помощью которых вы можете использовать эти классы и идентификаторы, чтобы задавать стили элементам вашего проекта.
Возможности ограничены только вашим воображением!
WordPress.org
Русский
Рубрики
Внешний вид — меню
Раздел меню позволяет пользователю создать собственное меню (также известное как панель навигации, меню навигации или главное меню). Это раздел сайта, который помогает посетителям перемещаться по сайту. В зависимости от используемой темы обычно на сайте будет одно меню навигации, а некоторые темы могут включать дополнительные меню или меню подвала сайта. Важно иметь аккуратное и упрощенное меню навигации, чтобы не сбивать с толку посетителей.
По умолчанию WordPress автоматически добавляет все опубликованные страницы в меню. Однако возможна настройка меню, например добавление ссылки на категорию или на внешний сайт, изменение порядка ссылки меню или создание подменю.
Раздел меню доступен через Внешний вид > Меню консоли.
Настройки экрана # Настройки экрана
Настройки экрана позволяют вам выбрать, какие элементы будут отображаться или не отображаться в соответствующем разделе. При нажатии на вкладку «Настройки экрана» отображается список возможных элементов и параметров с флажком рядом с каждым. Установите флажок для каждого элемента или параметра, который вы хотите отобразить, или снимите флажок, чтобы этот модуль не отображался. Нажмите на вкладку Настройки экрана еще раз, чтобы закрыть ее.
Некоторые элементы, например записи, по умолчанию скрыты.
Создание меню # Создание меню
Добавление пунктов в меню # Добавление пунктов в меню
Вы можете добавлять в меню различные типы элементов, такие как страницы, рубрики или даже произвольные ссылки. Они разделены между панелями слева от меню, которое вы редактируете. Пример того, как добавить ссылку на страницу:
Ваше пользовательское меню теперь сохранено.
Примечание. Настройки экрана позволяют вам выбирать, какие элементы вы можете использовать для добавления в меню. Некоторые элементы, например метки, по умолчанию скрыты.
Удаление пункта меню # Удаление пункта меню
Создание многоуровневых меню # Создание многоуровневых меню
При планировании структуры вашего меню полезно думать о каждом пункте меню как о заголовке в формальном отчетном документе. В формальном отчете заголовки основных разделов (заголовки уровня 1) расположены ближе всего к левому краю страницы; заголовки подразделов (заголовки уровня 2) смещены немного дальше вправо; любые другие подчиненные заголовки (уровень 3, 4 и т. д.) в том же разделе имеют еще больший отступ вправо.
Редактор меню WordPress позволяет создавать многоуровневые меню с помощью простого «перетаскивания». Перетащите элементы меню вверх или вниз, чтобы изменить порядок их отображения в меню. Перетаскивайте элементы меню влево или вправо, чтобы создать подуровни в вашем меню.
Чтобы сделать один пункт меню подчиненным по отношению к другому, вам нужно расположить «дочерний элемент» под его «родителем», а затем перетащить его немного вправо.
Добавление меню на ваш сайт # Добавление меню на ваш сайт
Если ваша текущая тема поддерживает настраиваемые меню, вы сможете добавить новое меню в одну из Область отображения.
Если ваша текущая тема не поддерживает настраиваемые меню, вам нужно будет добавить новое меню через виджет «Пользовательское меню» в разделе виджетов.
Перестановка, настройка пунктов меню # Перестановка, настройка пунктов меню
После того, как элемент добавлен в меню, эти элементы меню можно изменить. Поместив курсор мыши на заголовок пункта меню, когда курсор мыши изменится на 4 стрелки, удерживайте левую кнопку мыши нажатой, перетащите модуль в то место, где вы хотите его разместить, затем отпустите кнопку мыши (это называется перетаскиванием). Помните, что вы можете перетащить элемент меню немного вправо от элемента меню над ним, чтобы создать иерархические отношения (родительский/дочерний) в меню.
У каждого пункта меню есть стрелка конфигурации справа от заголовка пункта меню, при нажатии на которую открывается окно конфигурации. Кликните на стрелку второй раз, чтобы закрыть окно конфигурации. Если вы не видите «Цель ссылки», «Классы CSS», «Отношение к ссылке (XFN))» и «Описание», то в разделе Настройки экрана убедитесь, что эти флажки установлены, чтобы их можно было здесь увидеть.
Затем выбор конфигурации:
Текст ссылки
Текст для этого конкретного пункта меню
Атрибут, используемый при отображении метки
Открывать в новой вкладке
Отметте флажком, если вы хотите, что бы страница открывалась в новом окне.
Классы CSS (необязательно)
Классы CSS для этого пункта меню
Отношение к ссылке (XFN)
Позволяет автоматически создавать атрибуты XFN, чтобы вы могли показать, как вы связаны с авторами/владельцами сайта, на который вы ссылаетесь.
Описание
Описание будет отображаться в меню, если текущая тема его поддерживает.
Разработка меню в WordPress и работа со стилями
При разработке информационного продукта (сайта, форума, блога) учитывается заранее все его содержимое и отображается в виде навигационного меню. Если вы собираетесь строить свой сайт самостоятельно, по крупицам, без использования только лишь стандартных шаблонов, то данная статья будет вам интересна. В ней будет подробно описан процесс создания меню, а именно по части оформления в своем стиле.
В CMS WordPress реализована удобная и простая система разработки меню навигации по сайту. При помощи нее вы можете самостоятельно создавать шапку сайта с нужными разделами, подразделами и выпадающими списками.
Для начала нужно разобраться с моментом регистрации нашего меню в структуре конкретной темы, чтобы потом мы могли вносить определенные параметры и стили оформления. В этом нам поможет функция register_nav_menu (), через которую мы сможем задать свойства заголовка меню, а также его местоположение на странице. Данные действия мы выполняем в файле functions.php:
[php]register_nav_menus(
array(
‘header-menu’ => __( ‘Header Menu’ ),
‘Top-menu’ => __( ‘Top Menu’ )
)
);[/php]
После данного действия указываем как будут располагаться пункты нашего меню, воспользовавшись соответствующей опцией.
Теперь нам следует вынести меню в конкретном месте (файлы index.php, header.php или др.)
Итак, мы сформировали и вывели наше меню, однако мы не сделали ничего еще с его внешним видом (стиль оформления, стиль при наведении на пункт меню, стиль активного пункта меню). Нужно сделать так, чтобы наше меню вписалось в общее оформление блога или сайта. Сделать все необходимое для этого можно при помощи базовых знаний языков гипертекстовой разметки CSS и HTML.
Наше меню представляется в виде списка, структура которого хранится в контейнере, который создается вызовом функции wp_nav_menu. Непосредственно оформление данного списка мы можем сделать, изменив структуру файла style.css. Вот пример навигационного меню с многоуровневой выпадающей структурой:
В данном случае текущая страница будет выделена подсвеченным разделом меню.
Применяя на деле функции классов, которые используются контейнером функции wp_nav_menu, вы сможете настроить оформление своего меню конкретно под свой сайт или блог. Вот основной их перечень и функции, за которые они отвечают:
1. Главный класс, через который происходит оформление каждого раздела меню.
2. Класс для разделов меню, которые являются ссылкой на страницу, метку, категорию и т.д.
[php]
#access.menu-item-object-category; //категория
#access.menu-item-object-tag; //тег
#access.menu-item-object-page; //страница
[/php]
3. Класс, применимый ко всем элементам меню, в котором вместо
[css] #access.menu-item-type-
[php] #access.menu-item-type-post_type; // постоянная страница, любой тип записи
#access.menu-item-type-taxonomy; // метка, категория или любая таксономия [/php]
4. Класс, который присвоен текущей странице.
[css] #access.current-menu-item; [/css]
5. Класс, при помощи которого происходит отображение меню главной страницы.
[css] #ac1cess.menu-item-home; [/css]
6. Класс, непосредственно указывающий на некий индекс страницы, например, на ее ID
[css] #access.page_item; [/css]
[css] #access.page-item-$ID;
#access.current_page_item; [/css]
Пользуясь возможностями данных классов, вы можете настроить внешний вид своего навигационного меню под себя и ваш сайт или блог. Для более эффективной и результатной работы с такого рода классами и стилями, можно воспользоваться готовыми темами под WordPress, а именно заглянув в содержание файла style.css данных тем. Таким образом, вы можете использовать данные темы в будущем как почву для экспериментов и, отталкиваясь от их стиля оформления, найти свой подходящий и уникальный стиль навигационного меню.
Напишите ответ
Для отправки комментария вам необходимо авторизоваться.
