fbpx

Каталог статей

Каталог статей для размещения статей информационного характера

Технології

Редагування шаблонів WordPress.

У цій статті не буде написано як з безкоштовною убогій теми зробити супер круту, так і написати таку статтю не можливо. Тут я опишу як можна зробити невеликий «косметичний» ремонт шаблону.
Наверника багато блогери стикалися з тим що їх щось не влаштовує в з теми свого блогу, і треба виправити якусь дрібницю. Для людей, які добре розбираються в php або html це не викличе жодних проблем. Але я наприклад на стільки сильно забув весь html напевно, зараз не зможу написати просту таблицю без того, щоб не заглянути в який-небудь довідник, а іноді доводиться робити щось дійсно серйозне. Коротше я хочу поділитися з Вами простим способом редагування WordPress тим.
Багато хто вже знають, що таке Firebug, а хто не знає обов’язково відвідайте домашню сторінку фаербага і прочитайте докладніше. Firebug це потужне додаток для браузера Firefox, розроблене спеціально для web-розробників. Встановлюється він в один клік, для його роботи ПОТРІБНИЙ Firefox якщо Ви з якихось причин не користуйтеся firefox’ом, то поставте його. Можливості використання Firebug дуже широкі, але те що нам необхідно це зручний перегляд html коду сторінки, з усіма стилями относящими до певного елемента і редагування розмітки. Зараз я покажу на прикладі як все легко і просто.
Мій приклад.
Перший раз, коли я зіткнувся з необхідністю редагувати шаблон, коли додавав «Хлібні крихти» на свій блог. Після того як я вставив код в мій шаблон хлібні крихти виглядали так.
Мене це не влаштувало і я вирішив внести наступні зміни.
Збільшити розмір шрифту
Пересунути в право і вниз
Ось як це просто робиться пр допомоги фаербага.
Відкриваєте в Firefox е сторінку, яку хочете відредагувати, і запускаєте Firebug (натисніть Інструменти–>Firebug–>Open Firebug або натисніть на картинку жука знизу вікна браузера). Знизу вікна з’являється вікно Firebug, у лівому вікні вибираємо «HTML» в правому «Style». Тепер у лівій частині вікна у Вас буде html код відкритої сторінки а в правій стилі відповідають за той чи інший елемент. У лівій частині вікна переміщаючись по дереву блоків html коду сторінки знайдіть блок, що відповідає за потрібний елемент, в моєму випадку це блок з «хлібними крихтами». Зауважте якщо в коді навести мишкою на тег ( наприклад, div або p), Firebug підсвічує цей елемент на вашому сайті, тому жодних проблем із знаходженням елемента в коді бути не повинно.
Після того як потрібний блок знайдений натисніть на нього і у правій частині вікна Firebug з’явиться всі стилі діючі на цей блок. Тепер щоб збільшити шрифт міняємо значення параметра font-size на 15px та бачимо, як прямо на очах шрифт «Хлібних крихт» змінюється у нас на сторінки. Тек ж натискаємо правою кнопкою мишки поруч із списком параметрів і з контекстного меню вибираємо «New Property» і додаємо новий параметр font-weight зі значенням bold, цим ми поміняли шрифт жирний. Ви, природно, міняєте і ставите свої параметри, що можете змінювати що завгодно, не хвилюйтеся Firebug сам нічого не змінює у вихідному коді сторінки, він змінює тільки сторінку відображається у Вас, пості оновлення сторінки всі змінені налаштування повернуться назад. Картинка кликабельна.
Тепер залишилося розібратися зі зміщенням. Якщо те, що ми зробили я ще можна б зробити і без Firebug, то про існування таких параметрів як padding і margion я й уявлення не мав, ну про все по порядку. Тепер в правій частині вікна Firebug відкриваємо закладку «Layout» з’явиться «шари розмітки» назву це так. Знову ж при наведенні мишки FireBug нам все підсвічує. Методом тику виставляєте потрібне значення так, як Вам треба, в моєму випадку padding-top: 12px; padding-left: 10px; і «Хлібних крихт» зсуваються вниз на 12 пікселів і на 10 вправо. Картинка кликабельна.
Після встановлення всіх параметрів Firebug автоматично додасть в html-код в лівій частині вікна всі стилі(сам html-файл він не править). Для того, щоб застосувати всі зміни залишилось зібрати всі зміни, зроблені у мене вийшло
style=”font-size:15px; font-weight:bold; padding-top: 12px; padding-left: 10px;”
і додати їх у потрібне місце в шаблоні або додати в файл стилів.
Все я показав Вам, як легко редагувати шаблони без глибоких знань html і досвіду верстки. Firebug має дуже великий функціонал, і з його допомогою дуже легко розробляти сайти так і правити вже готові, дякую за увагу.
Подивитися, як все вийшло можете на моєму блозі 448dmg.ru може знайдете ще чого-небудь цікаве.
Домашня страниця Firebug