СкачатьИСХОДНЫЙ ФАЙЛ
Демо-версияСМОТРЕТЬ ОНЛАЙН
Дуже корисною функцією WordPress є можливість створювати класи і ідентифікатори. Деякі з них генеруються самою системою, в інших випадках ви вставляєте в вашу тему певний PHP-код, і 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%.
Як візуально виглядають ефекти від застосування даних класів, ви можете бачити на скріншоті, наведеному нижче.
Перше зображення вирівнюється по правому краю; друге — по центру, воно виводиться в оригінальному розмірі:
Додаємо власні стилі, використовуючи дані класи і ідентифікатори
Як і при установці вирівнювання та відступу, ви можете використовувати дані класи, щоб задати додаткові стилі.
Перше зображення на цьому скріншоті показано з правого краю.
Якщо ж розмір екрану змінюється, розмір самого зображення залишається незмінним. Тоді текст обтікає його не дуже акуратно:
img.alignright {
max-width: 50%;
}
Тепер, коли сторінка проглядається на меншому екрані, зображення вже займає менший простір:
Аналогічно, як і CSS для вирівнювання або розміру, ви можете додати до зображень, які розташовуються певним чином, декоративний стиль.
Щоб додати декоративний стиль для зображень, що мають вирівнювання по центру і виводяться в оригінальному розмірі, додайте наступні рядки в таблицю стилів:
img.size-full.aligncenter {
width: 75%;
padding: 5px;
border: 2px dotted #ccc;
}
Даний код додає рамку до зображення і зменшує його в розмірі:
Використання тегів шаблонів для додавання класів та ідентифікаторів
Класи і ідентифікатори, які ми розглянули, генеруються для зображень самою системою 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% , а також встановлює вирівнювання віджетів бічній панелі.
Як виглядає така сторінка, показано на скріншоті нижче:
Примітка: Якщо ваша тема є адаптивною, переконайтеся, що медіа-запитах ви можете налаштовувати будь-яку ширину віджетів для пристроїв з вузьким екраном.
Теги шаблонів 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 згенерувати класи і ідентифікатори, грунтуючись на назву, тип і 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;
}
Даним кодом віджет переліку записів додається рамка, як це показано на скріншоті нижче:
Примітка: Це працює в моєму демо-сайті, тому що він використовує дитячу тему, розроблену на базі теми 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;
}
Як будуть виглядати посилання ви можете побачити на скріншоті, наведеному нижче (крім підкреслення, тут також в рамках батьківського теми задано зміни кольору):
Примітка: Так як я використовую дитячу тему twenty twelve, мені не потрібно окремо додавати тег wp_nav_menu (), він вже присутній у батьківській темі.
Висновок
Як ви переконалися, існує ряд способів, за допомогою яких в WordPress можна генерувати класи і ідентифікатори елементів сайту.
Деякі з них створюються самим WordPress, інші використовують теги шаблонів або параметрів функції, щоб вказати класи і ідентифікатори для виведення різних елементів.
Ви можете застосовувати їх для призначення стилів сторінок, меню, віджетів, списків посад та інших елементів вашого дизайну.
Є цілий ряд інших способів, з допомогою яких ви можете використовувати ці класи та ідентифікатори, щоб задавати стилі елементів вашого проекту.
Наприклад:
- Ви можете створити сайт з декількома окремими розділами, використовуючи класи, згенеровані тегом thebody_class ( ). При цьому зміст кожного розділу може візуально відрізнятися від інших розділів;
- Шляхом присвоєння ідентифікаторів, згенерованих тегом the_ID ( ), ви можете задати стиль списку окремих записів відмінний від стилю сторінок архівів;
- Ви можете виділити активні пункти в меню навігації, створивши ефект кнопки за допомогою зображень, фонів, градієнтів і так далі;
- Ви можете використовувати поєднання вище наведених способів, щоб задати різні стилі для віджетів, що знаходяться в різних областях віджетів;
Можливості обмежені тільки вашою уявою!
Переклад статті «Working with Classes and IDs Generated By WordPress» був підготовлений дружною командою проекту Сайтостроение від А до Я.