В этой статье я хочу осветить проблему редактирования шаблона WordPress. Казалось бы в чем тут проблема? В интернете бесчисленное множество ресурсов как с платными так и с бесплатными шаблонами WordPress. Можно в свободном доступе скачать любой понравившейся шаблон. Однако это будет тема, которая, очевидно есть уже у многих блоггеров. Ежедневно создаются сотни блогов. В результате Ваш проект потеряет в индивидуальности.
Я соглашусь, что можно сделать популярным сайт с абсолютно любым оформлением, однако приятный глазу дизайн, удобная навигация по сайту во многом поспособствуют улучшению поведенческих факторов. Тут конечно дело вкуса, но это мое мнение.
Как самостоятельно отредактирвать шаблон wordpress?
В начале, когда я только знакомился с CMS WordPress я понятия не имел даже как счетчик от LiveInternet поставить. На помощь пришли поисковые системы Яндекс и Google. И я с азов начал изучать язык гипертекстовой разметки HTML а также каскадные таблицы стилей CSS. Для тех, кто возможно не знает, что такое HTML я поясню, дабы не заставлять читателя поднимать тонны информационной материи чтобы найти ответ на простой вопрос.
HTML — язык гипертекстовой разметки, своего рода каркас на котором построено содержание документа. А CSS — это в дословном переводе с английского каскадная таблица стилей, созданная с целью разделить код страницы и ее внешний вид. Более подробно о функциях и основах CSS я напишу в последующих постах.
Итак, Вы установили WordPress на хостинг, выбрали понравившуюся тему и встал вопрос с чего начать редактирование шаблона? Большим специалистом в области веб-дизайна, верстки и т.д. Вам быть не нужно. Необходимо знание основ CSS и HTML. Скажу сразу, что в ВордПресс возможно без помощи плагинов немного индивидуализировать шаблон.
В некоторых темам присутствует функция замены фона сайта на изображение или же заливка сплошным цветом. Также вы можете сменить хедер (шапку) блога. Однако, я думаю и этого будет мало. Вся информация о стилях шаблона обычно хранится в файле style.css. Здесь как раз таки и открывается возможность творить чудеса с вашим сайтом.
Браузерные плагины для упрощения редактирования стилей сайта
Вот мы и подошли к самому интересному: редактирование файла style.css. Прежде чем начинать редактировать этот файл, позаботимся о том, чтобы у нас стояли необходимые плагины в браузере, которые помогут нам определять разметку документа.
Для Хрома от Google уже предуствановлена эта возможность по умолчанию. Необходимо всего лишь кликнуть правой кнопкой мыши по элементу на странице и выбрать «просмотр кода элемента» как сразу появится панель внизу.
Где 0 — область для предредактирования и просмотра стилей документа. Здесь Вы можете в режиме реального времени изменить стили оформления и увидеть результаты редактирования прямо в браузере. Ко всему этому есть возможность добавить селекторы, свойства, определить строчку файла style.css, где расположено то или иное правило.
1 — Блок, в котором расположен HTML код документа. В этом поле есть возможность выбрать нужный элемент для редактирования, просмотреть его внутренние (padding) и внешние (margin) отступы. Отступы как правило подсвечиваются разными цветами, в результате у Вас есть возможность видеть границы элементов. Активировав нужный элемент документа в правой части плагина, в левой тут же отобразятся скомпилированные стили этого элемента, что даст Вам возможность мгновенно приступить к редактированию.
Для браузера Mozilla FireFox существует специальный плагин, который называется FireBug.
Функционал этого плагина для FireFox лишь не многим отличается от «Хромовского» редактора. Я думаю не составит особого труда разобраться в его настройках.
Для браузера Opera последней 11 версии как и в Хроме уже есть похожая функция. Для вызова окна редактирования необходимо всего лишь навести курсор мыши на нужный элемент документа (web-страницы) и кликнуть правой кнопкой мыши, в появившемся выпадающем списке выбрать пункт «Проинспектировать элемент». Дальнейшие действия аналогичны описанным выше.
Для браузера Internet Explorer 8 и выше при нажатии на клавишу F12 появляется окно с названием»Средства разработчика». Функции аналогичны.
Благодаря вот таким не хитрым инструментам мы можем во много облегчить себе жизнь. Если Вам вдруг понравилось оформление другого сайта или блога, Вы можете посмотреть с помощью этих плагинов их оформление и что-то для себя позаимствовать. Плюс ко всему этому изучать CSS таким способом гораздо проще, наглядней и быстрее.
Несколько способов редактирования файла Style.css
Для редактирования файла style.css можно воспользоваться двумя способами:
- Использовать встроенные в движок WordPress редактор и вносить изменения непосредственно на сервере.
- Использовать для редактирования удобный и многофункциональный текстовый редактор NotePad C++.
На мой взгляд пользоваться первым вариантом не всегда разумно. Дело в том, что отменить сохраненные изменения в файле и вернуть его в изначальный вид будет довольно таки проблематично. Этот метод хорош в том случае, когда у Вас нет времени или специального софта под рукой. Такой способ хорош, если Вы зашли в интернет-кафе и хотите немного подправить внешний вид своего детища.
Интерфейс WP интуитивно прост, и Вы без особого труда сможете в течение трех минут дать жизнь новой идее, относительно оформления Вашего сайта.
Второй способ, немного сложнее, но его освоение даст Вам ряд преимуществ. Процесс редактирования через NotePad C++ обладает рядом следующих возможностей:
- В любой момент Вы можете отменить последнее или ряд последних действий и привести документ в первоначальный вид.
- Возможность правки файлов непосредственно на хостинге через встроенный в редактор FTP-клиент.
- Подсвеченный синтаксис CSS, что довольно-таки удобно.
- Еще масса удобностей, в которых не сложно разобраться.
В заключение статьи хочу показать Вам видео, которое наглядно показывает функционал NotePad C++
P.S А какими инструментами для изменения оформления сайта пользуетесь Вы? Поделитесь своими мыслями в комментариях!!!
