Как самостоятельно изменить оформление шаблона WordPress

Автор:
15 Ноябрь, 2017

В этой статье я хочу осветить проблему редактирования шаблона WordPress. Казалось бы в чем тут проблема? В интернете бесчисленное множество ресурсов как с платными так и с бесплатными шаблонами 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 можно воспользоваться двумя способами:

  1. Использовать встроенные в движок WordPress редактор и вносить изменения непосредственно на сервере.
  2. Использовать для редактирования удобный и многофункциональный текстовый редактор NotePad C++.

На мой взгляд пользоваться первым вариантом не всегда разумно. Дело в том, что отменить сохраненные изменения в файле и вернуть его в изначальный вид будет довольно таки проблематично. Этот метод хорош в том случае, когда у Вас нет времени или специального софта под рукой. Такой способ хорош, если Вы зашли в интернет-кафе и хотите немного подправить внешний вид своего детища.

Интерфейс WP интуитивно прост, и Вы без особого труда сможете в течение трех минут дать жизнь новой идее, относительно оформления Вашего сайта.

Второй способ,  немного сложнее, но его освоение даст Вам ряд преимуществ. Процесс редактирования через NotePad C++ обладает рядом следующих возможностей:

  1. В любой момент Вы можете отменить последнее или ряд последних действий и привести документ в первоначальный вид.
  2. Возможность правки файлов непосредственно на хостинге через встроенный в редактор FTP-клиент.
  3. Подсвеченный синтаксис CSS, что довольно-таки удобно.
  4. Еще масса удобностей, в которых не сложно разобраться.

В заключение статьи хочу показать Вам видео, которое наглядно показывает функционал NotePad C++

P.S А какими инструментами для изменения оформления сайта пользуетесь Вы? Поделитесь своими мыслями в комментариях!!!

Читайте также:


Комментарии:

Комментарии