Как изменить шаблон на WordPress

Как изменить шаблон на WordPress до неузнаваемости!

Хочу рассказать вам как менять внешний вид шаблона WordPress под себя. Дабы не творить велосипед, можно найти нужный шаблон и изменить его. Просто подобрать скелет – концепцию шаблона , а дальше вперед и с ветром! Начну с того что я решил перенести раздел программирования ASP.NET в отдельный посвященный этой теме блог, вот для него и делал шаблон. Я нашел шаблон The Box От fabiorubioglio. Вот его изначальный вид и вид того что получилось(кликабельно):

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

Точней не то что получилось , а то как я хотел так и сделал. Посмотреть как выглядит переделанный шаблон можно на http://asp blog.ru/. Глобальных переделок я не устраивал , так как в принципе меня вполне устраивали многие моменты шаблона исходника. На самом деле все в большинстве случаев сводится к обычному изменению стилей шаблона. В этой статье я хочу показать как ориентироваться в разметке шаблона WordPress и быстро менять нужный нам участок кода.

Откройте в браузере ваш сайт с макетом The Box, нажмите F12. Откроется инспектор кода , далее все очень просто! Инспектор показывает иерархию кода страницы. Все вложенности, блоки , теги и т.д. Когда вы наводите на определенный участок кода мышь , на сайте подсвечивается блок за который отвечает тег на который вы навели мышь.

Справа от инспектора находится окно стилей, в инспекторе мы видим что header class =”entry-header” а в окне стилей нам открывается стиль entry-header который отвечает за шапку поста.

В окне стилей вы можете напрямую изменять шаблон , при этом все изменения будут онлайн отображаться на сайте но это для предпросмотра, так же отключая галочки к свойствам мы можем наблюдать изменения:

То есть при изменение background-color – результат изменений сразу отобразиться на сайте. Для того что бы закрепить результат , нам надо внести изменения непосредственно в файл стилей шаблона. Откройте в любом html редакторе(я пользуюсь Expression Web) файл style.css который отвечает за вид шаблона(он находится в папке с шаблоном). Как нам находить нужные строки кода быстро? Можно конечно вбить в поиск в редакторе html нужный нам класс или строчку, на скриншоте желтым помечена ссылка, в самом конце этой строки, после двоеточия идет номер строки он та нам и нужен.

Либо нажмите на ссылку,откроется окно редактора css:

Там тоже есть номер строки. Отлично, запомнили номер строки, теперь открываем файл style.css в папке с шаблоном, и быстро там переходим на нужную строк. Кстати у меня строки немного выше нежели на 931 месте, у меня эта строчка 945, ну все равно рядом. Я не знаю почему , или Expression Web плохо считает либо инспектор браузера пьян. Ну суть остается сутью – приблизительно одинаково :)

Вот теперь в редакторе меняем что хотим и сохраняем. Учить вас CSS не буду , почитайте литературу. Ничего сложного , азы быстро схватите. Теперь таким образом я сделал следующее :

Создал фоновый рисунок в виде логотипа Visual Studio:

Рисунок достаточно большой и качественный , сохранил его в PNG8 , размер получился 39 кб. Не так уж и много. С учетом того что в шаблоне WordPress далее все только через CSS будет реализовано, такой фон вполне допустим.

В style в body добавил строку фонового рисунка и строки которые ставят фон по центру вверху и не повторяют его на странице background-image:url('images/bg2.jpg'); background-repeat:no-repeat; background-position:center top;

Точно так же но без позиционирования я нарисовал подвал и разместил в css.

Цвет меню поменял на фиолетовый:

.main-navigation > div > ul { background-color: #83208A;

}

Вообщем на все вместе с рисованием фона ушло не больше 10 минут. Текст получается какой то тяжелый , большой… ну на самом деле все делается очень быстро.

Подключение Google Font к WordPress

Я подключил шрифт от гугла к шаблону вордпресc. Для этого идем на сервис Гугл шрифтов, выбираем нужный шрифт, жмем Add collection, внизу в окне коллекции жмем Use. Теперь код из первой строчки вставляем в head. Для этого идем в панель управления, дизайн, редактор. В редакторе выбираем header.php. Сразу после открывающего тега <head> вставляем первую строку с Гугл Фонт.

Вторую строчку с именем шрифта прописываем в CSS в нужном месте, я сделал для логотипа , изменил размер, цвет и сам шрифт в h1.site-title { font-size: 5em; /* 28px */ font-family: 'Bree Serif', serif;

Вроде все. По такому принципу вы можете менять все, меню, блоки, размеры и т.д. Зависит от ваших желаний и фантазии. Всех благ!

comments powered by HyperComments

Оставьте мне собщение