СкачатьИСХОДНЫЙ ФАЙЛ

Демо-версияСМОТРЕТЬ ОНЛАЙН

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

У цій статті я покажу три способи, за допомогою яких це можна зробити, і проілюструю кожен з них практичними прикладами.

Я буду працювати з трьома областями застосування:

  • Класи і ідентифікатори, згенеровані для зображень, які ви завантажуєте в WordPress за допомогою менеджера медіа-файлів;
  • Теги шаблонів, які використовуються в файлах шаблонів теми для створення класів та ідентифікаторів на основі контенту сайту та сторінки, яка в даний момент проглядається;
  • Параметри, які можна налаштувати під час створення віджетів і меню (або які вже будуть встановлені за замовчуванням для глибоко опрацьованої теми). Вони будуть генерувати класи і ідентифікатори, що відносяться до конкретних типів віджетів, окремих віджетів і пунктів меню.

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

Що вам буде потрібно для виконання цього уроку

Для виконання практичних завдань з цього уроку, вам потрібно:

  • Встановлена і налаштована система WordPress;
  • Тема WordPress, яку ви зможете редагувати.

Класи і ідентифікатори, згенеровані для зображень, завантажених через медіа-аплоадер

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

Ви також можете вказати, в якому масштабі потрібно виводити зображення: мініатюра, середній, великий або повний розмір.

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

Класи вирівнювання можуть бути наступними:

  • .alignnone
  • .aligncenter
  • .alignright
  • .alignleft

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

Для розміру зображення додаються наступні класи:

  • .size-full
  • .size-large
  • .size-medium
  • .size-thumbnail

Ви можете використовувати їх, щоб визначати стиль зображень кожного доступного розміру.

Більшість тем включає в себе CSS-стилі кожного з цих класів відповідно.

Наприклад, тема Twenty Twelve включає в себе наступну таблицю стилів:

.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
margin: 12px 24px 12px 0;
margin: 0.857142857 rem 1.714285714 rem 0.857142857 rem 0;
}
img.alignright {
margin: 12px 0 12px 24px;
margin: 0.857142857 rem 0 0.857142857 rem 1.714285714 rem;
}
img.aligncenter {
margin-top: 12px;
margin-top: 0.857142857 rem;
margin-bottom: 12px;
margin-bottom: 0.857142857 rem;
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
max-width: 100%;
height: auto;
}

CSS-код, наведений вище, вирівнює через класи .alignleft, .alignright або .aligncenter будь-який елемент (не тільки зображення). Тобто, крім зображень, ви можете використовувати ці класи також для стилю контенту.

Він також додає до зображень з цими класами відступ і забезпечує, щоб зображення у великому і оригінальному розмірах не виходили за межі батьківського контейнера: для цього використовується параметр max-width: 100%.

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

Перше зображення вирівнюється по правому краю; друге — по центру, воно виводиться в оригінальному розмірі:

Робота з класами і ідентифікаторами, що генеруються WordPress

Додаємо власні стилі, використовуючи дані класи і ідентифікатори

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

Перше зображення на цьому скріншоті показано з правого краю.

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

Робота з класами і ідентифікаторами, що генеруються WordPress
img.alignright {
max-width: 50%;
}

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

Робота з класами і ідентифікаторами, що генеруються WordPress

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

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

img.size-full.aligncenter {
width: 75%;
padding: 5px;
border: 2px dotted #ccc;
}

Даний код додає рамку до зображення і зменшує його в розмірі:

Робота з класами і ідентифікаторами, що генеруються WordPress

Використання тегів шаблонів для додавання класів та ідентифікаторів

Класи і ідентифікатори, які ми розглянули, генеруються для зображень самою системою WordPress. Інші класи і ідентифікатори можуть бути додані за допомогою тегів шаблонів вашої теми.

Примітка: Якщо ви не знайомі з тегами шаблонів, прочитайте розділ Кодексу Теги шаблонів.

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

Тег шаблонів body_class()

Добре опрацьована тема для WordPress повинна містити наступний тег у файлі header.php:

Він замінює стандартний тег . Тег шаблонів body_class() вказує WordPress призначити класи для тега на підставі сторінки, яка в даний момент проглядається і файлу шаблону, який використовується в активній темі.

Перелік класів, які можуть бути згенеровані, являє собою доволі довгий список. З ним ви можете ознайомитися в Кодексі WordPress.

Ось приклади деяких з них:

  • .home для головної сторінки;
  • .single-postid-{ID} коли проглядається одиночна запис, в якій ідентифікатор є числовим ідентифікатором поста;
  • .archive для сторінок архівів;
  • .page-template-{filename}-php коли використовується користувальницький шаблон сторінки.

Якщо ви хочете додати тег додаткові класи, які не генеруються WordPress, ви можете це зробити.

Наприклад, для додавання класу «hello» існує наступний код:

Розділяючи записи пробілами, ви можете додати стільки класів, скільки захочете.

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

Наприклад, у моїй дитячій темі я створила шаблон сторінки під назвою page-full-width-with-sidebar.php, в якому контент виводиться по всій ширині сторінки, а сайдбар розміщується під контентом зі зміщенням в праву сторону.

Стилі шаблону сторінки описані в коді, який наводиться трохи нижче.

Використовуючи тег body_class(), WordPress генерує для тега клас .page-template-page-full-width-with-sidebar-php (у числі інших класів).

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

/* структура стилів шаблону сторінки з висновком контенту по всій ширині і сайдбаром */
.page-template-page-full-width-with-sidebar-php .site-content,
.page-template-page-full-width-with-sidebar-php .widget-area {
width: 100%;
clear: both;
}
.page-template-page-full-width-with-sidebar-php #secondary.widget-area .widget {
width: 48%;
margin: 0 1%;
float: left;
}

Цей код визначає ширину основного змісту та бічній панелі (#secondary) 100% , а також встановлює вирівнювання віджетів бічній панелі.

Як виглядає така сторінка, показано на скріншоті нижче:

Робота з класами і ідентифікаторами, що генеруються WordPress

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

Теги шаблонів post_class() і post_ID()

Дані теги працюють так само, як і тег body_class(), але вони використовуються не в об’єкті , а в окремих повідомленнях циклу.

Наприклад, у темі Twenty Twelve для кожного поста циклу, укладеного в елемент , застосовується ці теги:

// тут розташовується контент

За допомогою цього коду генерується ряд класів, пов’язаних з категорією і типом запису, а також ідентифікатор, пов’язаний з числовим ідентифікатором посту.

Наприклад, для повідомлення в моєму демо-сайті, що відноситься до категорії ‘red’ будуть згенеровані наступні класи і ідентифікатори:

// вміст

Ви можете використовувати ці класи, щоб задати індивідуальний стиль для записів, що відносяться до різних категорій. В моєму демо-сайті є три такі категорії: ‘red’, ‘blue’ і ‘important’.

Для призначення таких стилів додайте в таблицю стилів теми наступний CSS-код:

/* стиль постів в категорії ‘red’ */
.category-red {
border-top: 2px solid #cc0000;
}
/* стиль постів в категорії ‘blue’ */
.category-blue {
border-top: 2px solid #3366ff;
}
/* стиль постів в категорії ‘important’ */
.blog .category-important {
padding-top: 2em;
margin-left: 2em;
}
.category-important:before {
content: ‘READ THIS POST! IT IS IMPORTANT’;
}

Даний код додає стилі для кожної з категорій: кольорова рамка для кожної з різнокольорових категорій і додатковий відступ для категорії ‘important’.

Тут також використовується псевдо-елемент для вставлення додаткового тексту перед кожним постом в категорії ‘important’.

Результат показано на скріншоті:

Робота з класами і ідентифікаторами, що генеруються WordPress

Використання класів та ідентифікаторів для віджетів і меню

Коли в темі реєструються віджети (іноді вони створюються плагінами), що використовуються при цьому функції можуть включати в себе код, який вказує WordPress згенерувати класи і ідентифікатори, грунтуючись на назву, тип і ID віджета.

Коли реєструється меню, WordPress може створювати класи на основі назви меню, розташуванні елементів у ньому або місці розміщення меню на сторінці. Ви можете використовувати ці функції, щоб задати власні стилі для віджетів і меню.

Класи і ідентифікатори для віджетів

Щоб зареєструвати область віджета, ви використовуєте функцію register_sidebar () файлу functions.php вашої теми.

Вона може приймати наступні параметри:

__( ‘Sidebar name’, ‘theme_text_domain’ ),
‘id’ => ‘unique-sidebar-id’,
‘description’ => ‘ ‘,
‘class’ => ‘ ‘,
‘before_widget’ => ‘

  • ‘,
    ‘after_widget’ => ‘
  • ‘,
    ‘before_title’ => ‘

    ‘,
    ‘after_title’ => ‘

    ‘);
    ?>

    Два з цих параметрів генерують клас і/або ідентифікатор:

    • ‘class’ => ‘ ‘
    • ‘before_widget’ => ‘id=»%1$s»>’

    Параметр «class» дозволяє вручну задати клас для області віджета. Параметри ‘before_widget» вказують WordPress створити унікальний ідентифікатор кожного елемента в області віджетів, а також ряд класів, які будуть залежати від типу конкретного віджета.

    Наприклад, в моєму демо-сайті я додала два віджету — перелік записів і перелік сторінок.

    Для переліку записів виводиться наступний HTML-код:

    // вміст віджета

    Для переліку сторінок код буде виглядати так:

    // вміст віджета

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

    Для цього потрібно додати наступний CSS-код в таблицю стилів теми:

    /* стиль конкретного елемента */
    aside.widget_pages {
    border: 1px solid #3366ff;
    padding: 5px;
    }

    Даним кодом віджет переліку записів додається рамка, як це показано на скріншоті нижче:

    Робота з класами і ідентифікаторами, що генеруються WordPress

    Примітка: Це працює в моєму демо-сайті, тому що він використовує дитячу тему, розроблену на базі теми twenty twelve, в якій коректно зареєстровані бічні панелі. Якщо ви створюєте власну тему, то повинні будете додати тег register_sidebar () з зазначеними вище параметрами. Як це зробити ви можете прочитати у відповідному розділі Кодексу.

    Класи і ідентифікатори для меню

    Навігаційні меню виводяться за допомогою тега wp_nav_menu ( ) у файлі header.php вашої теми. Він може мати ряд параметрів, про що докладніше написано в статті wp_nav_menu.

    Один з них додає класи і ідентифікатори для кожного їх елементів меню:

    ‘items_wrap’ => ‘

      %3$s

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

    Наприклад, коли користувач переглядає сторінку сайту, пункти меню навігації будуть мати клас .current_page_item.

    Ви можете використовувати це, щоб додати стиль пунктів меню поточної сторінки.

    Наприклад, щоб додати підкреслення, додайте в таблицю стилів наступні рядки:

    /* стиль посилань в поточній сторінці */
    .main-navigation .current_page_item a {
    text-decoration: underline;
    }

    Як будуть виглядати посилання ви можете побачити на скріншоті, наведеному нижче (крім підкреслення, тут також в рамках батьківського теми задано зміни кольору):

    Робота з класами і ідентифікаторами, що генеруються WordPress

    Примітка: Так як я використовую дитячу тему twenty twelve, мені не потрібно окремо додавати тег wp_nav_menu (), він вже присутній у батьківській темі.

    Висновок

    Як ви переконалися, існує ряд способів, за допомогою яких в WordPress можна генерувати класи і ідентифікатори елементів сайту.

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

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

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

    Наприклад:

    • Ви можете створити сайт з декількома окремими розділами, використовуючи класи, згенеровані тегом thebody_class ( ). При цьому зміст кожного розділу може візуально відрізнятися від інших розділів;
    • Шляхом присвоєння ідентифікаторів, згенерованих тегом the_ID ( ), ви можете задати стиль списку окремих записів відмінний від стилю сторінок архівів;
    • Ви можете виділити активні пункти в меню навігації, створивши ефект кнопки за допомогою зображень, фонів, градієнтів і так далі;
    • Ви можете використовувати поєднання вище наведених способів, щоб задати різні стилі для віджетів, що знаходяться в різних областях віджетів;

    Можливості обмежені тільки вашою уявою!

    Переклад статті «Working with Classes and IDs Generated By WordPress» був підготовлений дружною командою проекту Сайтостроение від А до Я.