Тег body_class() - надаємо оригінальний дизайн сайту, MnogoBlog
як створити сайт на wordpress, налаштувати та оптимізувати wordpress
Дуже цікава функція WordPress дозволяє легко створювати індивідуальне оформлення для сторінок, записів, архівів, також дозволяє змінювати дизайн сайту для зареєстрованих користувачів та багато іншого.Завантажити вихідні статті для статті можна нижче
Як користуватися body_class ()?
Якщо коротко, то вам потрібно зайти у файл header.php вашої теми та поміняти в його коді тег на тег >.
Після цього у файлі стилів style.css вашої теми прописати параметри оформлення для класів, які використовуватиме тег > під час відображення сторінок вашого сайту.
Тепер докладніше і на прикладі розглянемо вищезазначені дії.
Крок 1. Змінюємо тег на >
Для цього заходимо в панель керування вашим сайтом, вибираємо в лівому меню пункт "Зовнішній вигляд", далі підпункт "Редактор" та праворуч у списку шаблонів вибираємо файл header.php.
Знаходимо в його коді тег і замінюємо його на
Можливо, у вашій темі вже зроблено дану дії і замість тега вже стоїть тег > .
Далі зберігаємо зміни (тиснемо кнопку “Оновити файл”).
Щоб побачити і зрозуміти, що змінилося з вашим сайтом після вищевказаної заміни тегів body,достатньо відкрити вихідний код сторінки вашого сайту.
Відкриваємо сторінку вашого сайту наприклад у браузері Firefox і тиснемо комбінацію клавіш Сtrl+U або в меню вибираємо пункт "Інструменти" - "Розробка" - "Вихідний код сторінки".
І ви побачите, що тег змінюватиметься з кожною новою відкритою сторінкою.
Наприклад дляголовної сторінки він виглядатиме так:
Для цієї ж головної сторінки, але з виконаним входом (користувач ввів логін та пароль для входу на сайт) так:
Як бачите тег body у першому випадку використовує один клас "home blog", а в другому вже три класи для відображення сторінки: "home blog", "logged-in", "admin-bar". Як ви вже помітили поділ класів відбувається за допомогою звичайного пропуску.
Якщо ж ми відкриємо іншу сторінку сайту, то побачимо таке:
Тут тег body надав для цієї сторінки 3 класу: "page", "page-id-2", "page-template-default".
Клас "page-id-2" - прив'язаний тільки до цієї сторінки (дана сторінка має ідентифікатор 2).
Взагалі кількість класів, які використовує тег> наступне (але можна створити і свій клас): rtl home blog archive date search paged attachment error404 single postid-(id) single-(post_type) page-id-(page_id) attachmentid-(id) attachment-(mime-type) author author- (user_nicename) category category-(slug) tag tag-(slug) page-parent page-child parent-pageid-(id) page -template page-template-(template file name) search-results search-no-results logged-in paged-(page number) single-paged-(page number ) page-paged-(page number) category-paged-(page number) tag-paged-(page number) date-paged-(page number) author- paged-(page number) search-paged-(page number) tax-(taxonomy name) (since 3.1) term-(term name) (since 3.1) admin-bar ( since 3.1) custom-background (since 3.3)
Що за що відповідає і як створити свій клас можна прочитати тут:
англійською: http://codex.wordpress.org/Function_Reference/body_class
українською: http://wp-kama.ru/function/body_class
Крок 2. Надамо класам тега> своє оригінальне оздоблення.
Для цього заходимо в панель управління вашого сайту, у лівому меню вибираємо пункт "Зовнішній вигляд", підпункт "Редактор", зліва у списку шаблонів знаходимо файл style.css і додамо наприкінці його коду наступне:
Тим самим для зареєстрованих користувачів (що увійшли на сайт під своїм логіном та паролем) ми змінили розмір шрифту на 20 px і колір шрифту на червоний.