Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Як налаштувати CSS для стилізації контенту за допомогою тегів шаблонів WordPress

by
Difficulty:IntermediateLength:MediumLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

Final product image
What You'll Be Creating

Вивчення розробки WordPress - це не просто знання програмування PHP.

Вам також знадобляться навички HTML і CSS для того, щоб створені вами сайти, теми і / або плагіни будуть працювали добре.

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

Особливість, про яку я говорю, це теги body_class(), the_ID() і post_class(). Якщо ви правильно інтегруєте їх у файли шаблонів (або в файли вашого циклу), вони сгеніріруют класи CSS, які потім можна використовувати для чіткого коду стилізації вашого контенту.

У цьому уроці я покажу вам, куди додати теги, як потім написати стилізацію CSS, використовуючи генеруються класи і ідентифікатори.

Додаємо в шаблон тег body_class()

Перший тег - body_class(). Як ви могли здогадатися, він відноситься до елементу body.

У файлі header.php вашої теми знайдіть рядок, яка відкриває ваш елемент body:

Щоб додати тег шаблону, внесіть необхідні зміни так, щоб він читався наступним чином:

Збережіть файл і закрийте його. Тепер відкрийте сайт і погляньте на базовий код ваших сторінок.

Ось кілька прикладів коду, згенерованого на моєму демо-сайті.

По-перше, головна сторінка:

З коду можна зрозуміти кілька речей про сторінку:

  • Це домашня сторінка.
  • Вона використовує шаблон сторінки.
  • Це сторінка на повну ширину.
  • Це сторінка (а не пост або коментар).
  • Її ідентифікатор - 7.

Цієї інформації навіть більше, ніж достатньо. Тепер подивимося на архів категорій:

Це говорить нам про те, що ми знаходимося в архіві, що це архів категорій, і більш конкретно, що це архів для «базових» категорій з ID 154.

Швидше за все ви ставите питанням, навіщо всі ці класи потрібні: для чого потрібно знати, наприклад, клас архіву, а також клас категорії? Причина в тому, що ви можете налаштувати CSS так, як вам потрібно. Якщо ви хочете стилізувати всі сторінки архіву, ви повинні використовувати archive клас. Для стилізації категорії архіву, використовуйте клас category, а ви хочете стилізувати певну категорію, потрібно призначити slug або ID.

Ну і нарешті, давайте подивимося один пост з блогу:

Тепер ми маємо ще більше інформації:

  • Використовується за замовчуванням шаблон публікації.
  • Це один пост типу post.
  • Його ID - 3522.
  • Він використовує стандартний шаблон.

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

Пізніше в цьому уроці я продемонструю, як правильно призначити ці класи. Але спочатку давайте подивимося, як можна додати ще один тег, який використовується для стилізації.

Додаємо теги post_class і the_ID до шаблону вашої теми

Крім присвоєння класів для всієї сторінки, ви можете додати клас для кожного поста. Для одного поста або сторінки потрібно присв один набір класів, але на сторінці архіву ви пропишіть різні класи для кожного поста, який є в архіві.

Ви додаєте цей код в цикл, відкриваючи тег article для кожного поста.

Код без тегів шаблону виглядає так:

Але коли ви додасте теги шаблону, це буде виглядати ось так:

Тут є два тега шаблону:

  • Тег the_ID () додає ідентифікатор повідомлення як ідентифікатор в CSS, а значить, що він буде унікальним.
  • Тег post_class() додає список класів в залежності від властивостей поста, body_class() - від властивостей сторінки.

Давайте подивимося на код, який вони генерують.

По-перше, на головній сторінці:

Це нам дає:

  • ID post-7, використовуючи ID поста.
  • Аналогічний клас post-7.
  • Клас page дає нам зрозуміти, що це сторінка (а не пост).
  • type-page говорить нам, що це тип поста «page».
  • status-publish повідомляє, що ця сторінка була опублікована.
  • has-post-thumbnail каже, що у цієї сторінки є мініатюра (або позначене зображення) - ви можете їх використовувати для стилізації постів зі слайдами і без них таким чином, щоб вони по-різному відображалися в темі.
  • hentry - це клас, розроблений для стилізації в RSS-каналах.

Це ті класи, які ви б могли використовувати!

Тепер давайте подивимося на пост зі сторінки архіву, про яку говорилося раніше:

Вау! Там багато чого можна використовувати.

Я не збираюся докладно перераховувати весь список, але, якщо вобщем, у вас є класи, які стосуються ID поста, його типу, його статусу, категорії, мініатюрі поста, категоріям, в яких він знаходиться, і призначеним тегами.

Нарешті, окремий пост:

Це дуже схоже на повідомлення на сторінці архіву і означає, що якщо ви хочете стилізувати окремі пости, ви не чіпаєте ці класи, а використовуєте клас single, згенерований за допомогою body_class.

Використовуємо згенеровані стилі у файлі CSS

Коли ви дізнаєтеся, що таке створені стилі і класи, ви можете почати їх використовувати для стилізації вашого контенту.

Загальним прикладом є різний стиль постів з різних категорій.

Ось сторінка блогу на моєму демо-сайті:

A blog page with blue styling for titles and black for content

Ви, мабуть, помітили, що вгорі в меню навігації я використовував різні кольори для кожної з основних категорій. В кожній сторінці архіву категорії я цього досягаю шляхом присвоєння класів до тегу body_class().

Ось CSS для категорії демо-сайту:

Цей код стилізують заголовки і кордони блакитним відтінком на сторінці архіву категорій:

Я також стилізував опис категорії, вказавши синій фон і білий колір шрифту:

Я використовував клас .archive-meta для тексту і шаблону, щоб всі архіви категорій були в одному стилі. Колір фону я додаю тільки для .category-basics. archive-meta.

Зверніть увагу, що в обох випадках я націлений на класи, що виводяться тегом body_class(), оскільки я хочу стилізувати всі записи в архіві категорій.

Але що, якщо б я хотів стилізувати пости за категоріями в основному блозі? Я б присвоїв класи, створені тегом post_class().

Тому, щоб додати синій стиль до посту на головній сторінці блогу, я б додав такий код:

Тут призначення два класи, згенеровані нашими тегами шаблону:

  • клас blog, доданий до елементу body тегом body_class()
  • клас category-basics, доданий до елементу статті тегом post_class()

Після такої стилізації сторінка блогу виглядає так:

the blog page with cyan styling added to a post from the basics category

Я міг би піти далі і прописати колір для кожного поста в блозі за категоріями. В даному випадку я від цього утримаюсь, бо багато моїх пости знаходяться в різних категоріях. Але якщо на вашому сайті пости суворо відсортовані за категоріями, використання цих класів категорій може стилізувати кожну категорію окремо.

Поєднання тегів шаблону WordPress і стилів CSS надають великі можливості

Тепер ви знаєте, як додати в свою тему теги body_class(), post_class() і the_ID() для генерації класів і ID ваших сторінок, архівів і постів.

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

Спробуйте подумати про те, як ви можете це обіграти, щоб розширити можливості дизайну для вашого сайту.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.