Как настроить CSS для стилизации контента с помощью тегов шаблонов WordPress
Изучение разработки WordPress — это не просто знания программирования PHP.
Вам также понадобятся навыки HTML и CSS для того, чтобы созданные вами сайты, темы и / или плагины будут работали хорошо.
В этом уроке я покажу невероятно полезную функцию WordPress, которая сочетает код PHP с некоторым простым CSS. Это простой в использовании, но мощный метод позволит больше управлять визуальным отображением вашего контента.
Особенность, о которой я говорю, это теги body_class () , the_ID () и post_class () . Если вы правильно интегрируете их в файлы шаблонов (или в файлы вашего цикла), они сгенирируют классы CSS, которые затем можно использовать для четкого кода стилизации вашего контента.
В этом уроке я покажу вам, куда добавить теги, как потом написать стилизацию CSS, используя генерируемые классы и идентификаторы.
Добавляем в шаблон тег body_class ()
Первый тег — body_class () . Как вы могли догадаться, он относится к элементу body .
В файле header.php вашей темы найдите строку, которая открывает ваш элемент body:
Чтобы добавить тег шаблона, отредактируйте его так, чтобы он читался следующим образом:
body_class(); ?>>
Сохраните файл и закройте его. Теперь откройте сайт и взгляните на базовый код ваших страниц.
Вот несколько примеров кода, сгенерированного на моем демо-сайте.
Во-первых, главная страница:
class="home page-template page-template-page-full-width page-template-page-full-width-php page page-id-7">
Из кода можно понять несколько вещей о странице:
- Это домашняя страница.
- Она использует шаблон страницы.
- Это страница на полную ширину.
- Это страница (а не пост или комментарий).
- Её идентификатор — 7.
Этой информации даже больше, чем достаточно. Теперь посмотрим на архив категорий:
Это говорит нам о том, что мы находимся в архиве, что это архив категорий, и более конкретно, что это архив для «базовых» категорий с ID 154.
Скорее всего вы задаетесь вопросом, зачем все эти классы нужны: для чего нужно знать, например, класс архива, а также класс категории? Причина в том, что вы можете настроить CSS так, как вам нужно. Если вы хотите стилизовать все страницы архива, вы должны использовать archive класс. Для стилизации категории архива, используйте класс category , а вы хотите стилизовать определенную категорию, нужно назначить slug или ID.
Ну и наконец, давайте посмотрим один пост из блога:
class="post-template-default single single-post postid-3522 single-format-standard">
Теперь мы имеем еще больше информации:
- Используется по умолчанию шаблон публикации..
- Это один пост по типу публикации.
- Его ID — 3522.
- Он использует стандартный шаблон.
Напоминаю, вы можете присвоить любой тег на любом уровне: отдельные посты любых публикаций (включая страницы и другие настраиваемые посты), отдельные посты типа публикации, посты с использованием заданного формата или даже этот пост, который я создаю.
Позже в этом уроке я продемонстрирую, как правильно назначить эти классы. Но сначала давайте посмотрим, как можно добавить еще один тег, используемый для стилизации.
Добавляем теги post_class и the_ID к шаблону вашей темы
Помимо присвоения классов для всей страницы, вы можете добавить класс для каждого поста. Для одного поста или страницы нужно присвить один набор классов, но на странице архива вы пропишите разные классы для каждого поста, который есть в архиве.
Вы добавляете этот код в цикл, открывая тег article для каждого поста.
Код без тегов шаблона выглядит так:
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Как стилизовать отдельные категории в WordPress
Каждый раз, когда я захожу на сайт The New Yorker, я сразу перехожу в категорию «Художественная литература и поэзия », чтобы прочитать последний рассказ. Прокрутки домашней страницы нет. Не нужно изучать самые популярные статьи недели. Я то, что они называют «не подписчиком», поэтому я не могу выделить ни одного из шести бесплатных слотов для статей в месяц на документальную литературу.
Чтобы посетители могли так же легко и быстро найти нужный контент на вашем сайте WordPress, вы можете организовать свои сообщения по категориям, например, на веб-сайте The New Yorker. Затем каждый раз, когда зритель нажимает ссылку на одну из категорий на вашем сайте, он попадает на страницу со списком сообщений из этой конкретной категории.
По умолчанию большинство тем WordPress имеют только один шаблон для страниц категорий. Это не идеально, если вы разбиваете свой контент на несколько категорий.
Представьте, если бы страница категории «Кроссворды» в журнале New Yorker выглядела так же, как страница «Новости», которая выглядела бы так же, как страница «Мультфильмы» и т.д. Один шаблон не может подходить для всех типов контента – некоторые страницы будут выглядеть хуже или труднее ориентироваться, чем другие.
Вот почему The New Yorker использует собственные шаблоны для каждой категории. Например, страница «Новости» представляет собой макет из одной колонки. Таким образом, посетители могут четко просматривать изображение, название, дек, автора и дату каждой статьи, чтобы решить, какие статьи читать, прокручивая страницу вниз.
С другой стороны, страница «Кроссворды» представляет собой многоколоночный макет, поэтому посетители могут быстро просмотреть дату, чтобы выбрать тот, который они еще не пробовали.
Если вы хотите изменить то, что видит посетитель при нажатии на каждую из страниц категорий вашего сайта, вы можете создать собственные шаблоны или изменить таблицу стилей CSS страницы на панели инструментов. Ниже мы обсудим эти два способа.
Как стилизовать разные категории в WordPress
У вас есть два варианта изменения стиля страниц отдельных категорий на вашем сайте WordPress. Вы можете редактировать файлы темы в cPanel своей учетной записи хостинга, чтобы создать свои собственные страницы пользовательских категорий, или вы можете добавить собственный CSS в модуль Additional CSS на панели инструментов WordPress.
Поскольку оба этих метода включают кодирование, настройка страниц категорий в WordPress рекомендуется только пользователям, имеющим некоторый опыт веб-разработки. Пользователям без навыков программирования может потребоваться проконсультироваться с разработчиком или нанять его.
Давайте начнем с шагов по созданию пользовательских шаблонов в cPanel вашей учетной записи хостинга.
Создайте стиль отдельных категорий в WordPress с помощью пользовательских шаблонов
Если вы хотите создать полностью уникальное представление для любой категории на вашем сайте, вы можете создать шаблоны файлов для определенных категорий.
Во-первых, вам нужно войти в свою учетную запись хостинга. Затем нажмите File Manager в разделе Files вашей cPanel.
Теперь щелкните папку public_html в левой части экрана. Щелкните папку wp-includes и найдите файл category.php. (В некоторых темах этот файл будет называться archives.php.) Щелкните правой кнопкой мыши, чтобы отредактировать его.
Скопируйте содержимое файла category.php. Теперь перейдите в папку wp-content. Щелкните папку с надписью «themes». Затем щелкните папку с названием вашей темы.
В этой папке создайте новый файл шаблона категории и назовите его category-categoryname.php, заменив «categoryname» категорией, которую вы хотите стилизовать.
Щелкните правой кнопкой мыши, чтобы отредактировать этот новый файл, и вставьте содержимое из файла category.php.
Теперь вы можете вносить изменения в этот шаблон, которые будут отображаться только в ярлыке определенной категории. Вы можете включить обзор вверху страницы, добавить боковую панель, изменить цветовую схему или практически все, что захотите, введя различные команды PHP.
Например, если вы хотите включить текст, который представляет сообщения в категории, вставьте следующий код в файл category-categoryname.php:
This is some text that will display at the top of the Category page.
Вы хотите, чтобы вставить этот фрагмент кода выше Петля раздел файла шаблона. Цикл – это PHP-код, используемый WordPress для отображения сообщений. Его можно найти в index.php вашей темы и в любых других шаблонах, используемых для отображения информации о публикациях. Цикл в этих папках может выглядеть по-разному – иногда он будет содержать десятки строк кода, а иногда всего несколько. Базовый цикл выглядит так:
Для получения дополнительных вариантов отображения для страниц категорий, в том числе для отображения полных сообщений или отрывков сообщений, ознакомьтесь с этой документацией из Кодекса WordPress.
Вы можете повторить эти шаги, чтобы создать на своем сайте столько пользовательских шаблонов категорий, сколько захотите.
Стиль отдельных категорий в WordPress с помощью CSS
Прежде чем создавать десятки шаблонов, вы захотите подумать, требуют ли изменения, которые вы хотите внести на каждую страницу категории, создания совершенно нового шаблона. Если вы хотите внести только одно или два небольших изменения, например, изменить цвет заголовков сообщений на странице категории, вы можете добавить условные теги в дополнительный модуль CSS на панели инструментов WordPress.
Для начала вам нужно узнать ID категорий, которые вы хотите стилизовать. Затем вы будете использовать этот идентификатор для ссылки на страницы отдельных категорий в объявлениях CSS.
Чтобы узнать идентификатор категории, вы можете проверить страницу категории на панели инструментов WordPress. После входа в личный кабинет перейдите в «Сообщения» > «Категории». Затем наведите указатель мыши на категорию, которую хотите изменить, и нажмите «Просмотр». На скриншоте ниже я проверю категорию «Без категории».
Щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить» в раскрывающемся меню.
Откроется новое окно, в котором будут показаны выходные таблицы стилей HTML и CSS. Ничего страшного, если ты не все понимаешь на странице. Просто найдите CSS-класс category-categoryname, который содержит идентификатор категории в теге body (который начинается с
Теперь предположим, что вы хотите изменить цвет заголовка на странице «Без категории» на красный. Затем вы должны перейти в «Внешний вид» > «Настроить», чтобы запустить интерфейс настройщика тем WordPress. Щелкните вкладку Additional CSS на панели инструментов.
Скопируйте и вставьте следующую строку кода:
.category-1 .l-titlebar-content h1
Обязательно нажмите кнопку «Сохранить и опубликовать», когда закончите.
Существуют и другие фрагменты кода CSS, которые можно использовать для настройки цвета фона, размера шрифта и других свойств страниц категорий для создания уникального сайта.
Взять под контроль внешний вид вашего сайта
Следуя любому из описанных выше методов, вы можете настроить страницы категорий на своем сайте WordPress, чтобы каждая точка взаимодействия посетителя на вашем сайте была уникальной. Это может показаться небольшим изменением, но оно может сильно повлиять на то, как пользователи видят ваш веб-сайт и, соответственно, вашу компанию.
Создаем крутые страницы рубрик в WordPress
Насколько важную роль играют страницы рубрик на вашем сайте? Или вы не задумывались над ними, пока не наткнулись на эту статью? Какие они – унылые и неинтересные? Только представьте себе – они могут быть более полезными (как для вас, так и для ваших посетителей)! Разве нельзя их сделать чуточку круче, как мачо с картинки ниже?
Если вы являетесь обычным пользователем WP, то, скорее всего, ваши страницы рубрик находятся в том же самом состоянии, что и на момент создания сайта. Более чем вероятно – они просто содержат в себе ссылки на ваши записи, представленные либо в виде цитат, либо в полном виде.
Возможно, что они выглядят так, как страница рубрик в стандартной теме Twenty Twelve.
Подходим со всей серьезностью к страницам рубрик
Почему бы нам не проявить большую заботу о страницах рубрик? Почему бы не сделать их своеобразной интродукцией к рассматриваемому вопросу – т.е. теме вашей рубрики?
Вместо стандартного списка ссылок можно сделать что-то такое:
Или вот такое, чуть попроще:
Ведь это будет гораздо удобнее для ваших посетителей! Не думали ли вы над тем, что такие страницы рубрик отлично подходят для наращивания ссылок и снискания «любви» поисковых систем?
Как разнообразить страницу рубрик
В примерах выше показаны некоторые варианты макетов, предлагающих дополнительные возможности посетителям сайта. Вы легко можете соорудить что-то подобное сами, и в этой статье вы узнаете, как это сделать.
Если вы настраивали или редактировали когда-нибудь рубрику в WP, то вы, вероятно, видели, что на странице присутствует поле «Decription» («Описание»).
Большая часть тем уже настроена таким образом, чтобы все то, что вы введете в поле Decription, выводилось в самой вершине страницы рубрики.
Если в вашей теме это не работает, вы можете легко подключить эту возможность путем размещения следующего кода в шаблоне, отвечающем за рубрики — category.php. Если у вас в теме нет такого шаблона, тогда воспользуйтесь archive.php.
Тотальное улучшение страницы рубрик
WYSIWYG-редактор позволит вам легко стилизовать область описания на странице рубрики, чтобы она получила тот вид, который вам требуется. И, пожалуй, одна из изюминок плагина – вы можете легко вставлять шорткоды любых других плагинов.
Так, к примеру, вы можете легко вставить слайдер в самый верх страницы, используя соответствующий шорткод. Вы можете добавлять набор вкладок, как это показано в примере выше.
В том же самом примере вы можете видеть, что возле вкладок имеется некоторый текст. Я смог вывести эти два элемента рядом при помощи использования шорткодов для колонок, разбив область на две зоны – одна под вкладки (примерно две трети страницы), другая под текст (одна треть страницы).
Сразу под вкладками, естественно, идет фотогалерея. Вы также можете добавлять изображения, видео, ссылки, делать все, что захочется.
Проявив немного фантазии, вы можете сделать из страниц рубрик настоящие посадочные страницы. К тому же, этот путь является достаточно неплохим в плане SEO.
Важные замечания
1. Шорткоды
По различным причинам некоторые шорткоды (включая фотогалереи) отказываются работать в редакторе. Правда, для этого есть решение.
Поместите следующий код в файл темы functions.php:
add_filter( 'category_description', 'do_shortcode' );
Другая возможная проблема – некоторые кнопки для шорткодов не отображаются в редакторе. Если это случилось, вы можете просто открыть новую запись и сделать там все необходимые действия, после чего скопировать и вставить полученный код в поле с описанием рубрики.
2. Страницы рубрик с навигацией.
Необходимо заострить внимание на том, что при выводе определенного количества записей страницы рубрик будут получать навигацию, то есть разбиваться на подстраницы. Проблема заключается в том, что ваше описание для страницы рубрик будет повторяться на каждой подстранице. Естественно, вам это не требуется, поэтому мы покажем вам путь к предотвращению такого повторения.
Откройте шаблон вашей рубрики (category.php) и поместите в него код, отвечающий за вывод описания (базовый вывод описания должен стоять в середине):
Сюда вставьте код для вывода описания рубрик ?>
Помните, мы указали на то, что вызов описания для рубрики обычно имеет следующий вид:
Однако он может несколько отличаться в зависимости от используемой темы.
В стандартной теме Twenty Twelve, к примеру, этот код имеет несколько иной вид:
И вот как будет выглядеть готовый код, который понадобится вставить в category.php для указанной темы:
3. Все это работает и для меток.
Заключительный штрих – данная техника работает и для меток. Таким образом, если у вас есть важные страницы меток, вы можете несколько переработать их. Успехов вам на этой ниве!
Рубрики в WordPress
Рубрики в WordPress позволяют пользователю разделить содержимое на разделы. Разные публикации на одном веб-сайте можно разделить на различные категории. Это поможет читателю лучше ориентироваться на сайте и быстрее находить нужную информацию.
Для доступа к разделу рубрики нажмите Записи> рубрики.
Как добавить рубрики
Посмотрите на снимок выше, здесь четыре поля, которые необходимо заполнить при добавлении новой категории.
Название — название категории, которое должно быть уникальным.
Ярлык (Slug) — используется в URL для отображения вашей категории. Заполнять ярлык нужно только латинскими буквами, использовать нижнее подчеркивание или дефис в качестве разделителя.
Родительская рубрика — здесь можно добавить подкатегории в категорию. Это необязательно.
Описание — описания необязательны, хотя для оптимизации можно добавить краткое описание.
После заполнения всех вышеуказанных записей, нажмите на кнопку Добавить новую рубрику. В правой части страницы будет добавлена новая категория.
Посмотрите на снимок выше, наша новая рубрика добавлена в список справа.
Как редактировать категорию
Чтобы изменить категорию, выберите Записи> рубрики. Наведите указатель мыши на категорию, которую требуется изменить и нажмите кнопку Изменить (см. рисунок выше).
Здесь вы можете изменить название рубрики, ярлык, родителя и описание.
Как удалить рубрику
Вы также можете удалить категории нажав соответствующую кнопку. При удалении рубрики ее записи не будут удалены, а будут перенесены в категорию по умолчанию (если эта запись не будет указана ни в одной другой категории).
Помните, что вы не можете удалить категорию по умолчанию, сначала вам нужно присвоить статус по умолчанию какой-либо другой категории.
Для этого перейдите в Настройки> написание и выберите нужную рубрику рубрикой по умолчанию.
Localhost нужен для того, чтобы абсолютно бесплатно и спокойно создать Read more
Итак, вы создали свой сайт, выбрали подходящую тему, но не Read more
Не у всех есть технические навыки, чтобы создать рабочий веб-сайт. Read more
Вы можете совершать множество изменений на своем сайте WordPress, не Read more
wp-config.php — это файл конфигурации, который является обязательным для всех Read more
Существует два способа с помощью которых можно установить wordpress тему: Установка Read more