Каталог Статей
54930 авторов, размещено 44027 статей, сейчас на сайте пользователей: 19 Статистика
Аватар 448

Редактирование WordPress шаблонов.

Категория:  Компьютеры и Интернет  | Автор:  448 | Опубликовано: 08.07.2009
В этой статье не будет написано как из бесплатной убогой темы сделать супер крутую, да и написать такую статью не возможно. Здесь я опишу как можно сделать небольшой «косметический» ремонт шаблона.

Наверника многие блогеры сталкивались с тем что их что-то не устраивает в с теме своего блога, и надо исправить какую-то мелочь. Для людей которые хорошо разбираются в 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

После установки всех параметров Firebug автоматически добавит в html код в левой части окна все стили(сам html файл он не правит). Для того чтобы применить все изменения осталось собрать все сделанные изменения, у меня получилось

style="font-size:15px; font-weight:bold; padding-top: 12px; padding-left: 10px;"


и добавить их в нужное место в шаблоне или добавить в файл стилей.

Всё я показал Вам как легко редактировать шаблоны без глубоких знаний html и опыта вёрстки. Firebug имеет очень большой функционал, и с его помощи очень легко как разрабатывать сайты так и править уже готовые, спасибо за внимание.
Посмотреть как всё получилось можете на моём блоге 448dmg.ru, может найдёте ещё чего-нибудь интересное. Домашняя страниця Firebug'а
Комментарии
К этой статье пока нет комментариев. Станьте первым! У нас гости не могут комментировать статьи. Пожалуйста авторизуйтесь или зарегистрируйтесь, чтобы прокомментировать.
Интересные статьи по теме
Аватар shuraarh
"Чистая комната" или ламинарный бокс? Что больше подойдет для органиации ремонта жестких дисков? Когда жесткий диск получает физическое повреждение, процесс восстановления данных и ремонт диска требует высокую степень внимательности и опыта. Процесс восстановления включает в себя удаление диска и...
Категория: Компьютеры и Интернет | Автор: shuraarh | Добавлено: 20.08.2013
Аватар forum-orion
Гей форумы, гей знакомства и общение, жизнь геев Статья о гей форумах и гей сайтах рунета, о жизни геев...
Категория: Компьютеры и Интернет | Автор: forum-orion | Добавлено: 12.03.2011
Аватар Евченко Тарас
Плюсы и минусы виртуального общения Статья посвящена проблеме виртуального общения, ставшей столь актуальной в последние годы....
Категория: Компьютеры и Интернет | Автор: Евченко Тарас | Добавлено: 14.12.2009
Аватар illureal
Как выбрать б.у. ноутбук Если рассматривать рынок б.у. ноутбуков, то экономия выходит вполне значительная. Ноутбук – изначально не дешевая вещь. Бывший в употреблении ноутбук стоит не более 60% от стоимости аналогичного новог...
Категория: Компьютеры и Интернет | Автор: illureal | Добавлено: 20.04.2010
Аватар V_I_G_O
Сравнение планшетного, планетарного и сканера на основе цифровых фотоаппаратов Перевод книги и любого другого сшитого документа в электронный вид предполагает решение нескольких задач: непосредственно сканирование, обработка полученных изображений, их последующая компоновка в фа...
Категория: Компьютеры и Интернет | Автор: V_I_G_O | Добавлено: 09.03.2010
Рекомендуем
Собственный мощный VPN сервер за $5/мес. Простота настройки. Скидка для наших пользователей 25% по коду KATALOGPROMO.
Интернет должен быть свободным!
ПОПРОБОВАТЬ >>
Лучшие авторы
Аватар Seofox
На самом деле самого дела нет. В самой деятельност...

Читать

Аватар Цифровая Витрина
Цифровая Витрина - это Ваш собственный магазин кни...

Читать

Аватар atntrans
Компания ЕООД "АТН-ТРАНС" работает на рынке трансп...

Читать

Аватар vip.grafika
Сами знаете.

Читать

Аватар Deep Power
ООО «Свитотрейд», торговая марка «Deep Power» - ин...

Читать

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

Читать

информативная статья, благодарю

Читать

Интересные цифры, но кажется совсем дешево для капитального ремонта

Читать

Для общего развития можно не только игрушки покупать. Мы часто покупае...

Читать

Мдаа, меня как в детстве к стоматологу было не затащить, так и сейчас....

Читать

Напишите нам