Настройка шаблона Wordpress .Редактируем тему оформления
Опубликовано: 01.09.2018
После того как мы в прошлом уроке установили на наш сайт тему оформления , пришло время немного познакомиться с ее структурой, и принципами редактирования элементов нашей темы. Тут мы не будем разбирать такие настройка на админ. панели как Фон, цвет текста размер шрифта и прочее.
Думаю раз вы дошли до этой ступени, то уже имеете представление о WordPress, и сможете разобраться с кнопками, на которых все написано по русски ???? Мы же пойдем на чуть более продвинутый уровень настройки шаблона wordpress .
Для чего нужно изменять шаблон, думаю, все понимают. Кроме вас его наверняка скачали тысячи людей ( особенно бесплатные темы ), и нам бы не хотелось, что бы наш сайт был похож на чей-то чужой, правда же? ????
Как изменить внешний вид сайта на WordPress?
Кроме того возможно в выбранной вами теме оформления есть какие-то элементы, которые вам мешают и их нужно убрать, либо же вы что-то хотите поменять местами. В общем, причин довольно много, и я не думаю, что найдется хоть один человек, который не хотел бы внести какие-то изменения в скачанный шаблон.
WordPress настройка шаблона.
Каким образом происходит настройка шаблона WordPress?
Как мы помним на статических сайтах для настройки внешнего вида нам достаточно открыть нужную страницу, скажем index.html и привязанные к ней css-файлы в текстовом редакторе(или html редакторе) , и просто внести необходимые изменения в коде страницы.
Но в CMS WordPress страницы нашего сайта динамические , т.е. они генерируются сервером при помощи PHP-программы, непосредственно после запроса пользователя из браузера. Другими словами мы не можем просто взять и изменить готовую страничку, т.к. готовой странички нет ????
Но у такой динамической страницы есть своя структура, зная которую можно вносить изменения в ее настройки. Я не знаток php и целенаправленно его не изучал, но для общей настройки шаблона для WordPress глубоких знаний и не нужно, достаточно будет немножко вникнуть в тему, так что сильно не пугайтесь)
Из чего состоит тема оформления для WordPress?
Главным образом из php-файлов, css-файлов, изображений и скриптов, используемых в теме. Все эти файлы находятся в папке \wp-content\themes\название_вашей_темы\
Список php-файлов а так же основной css стиль темы можно так же увидеть перейдя в админ. панель на вкладку Дизайн — Редактор, там же можно и редактировать их. Однако для серьезных изменений советую использовать Notepad++ он заметно облегчает работу с кодом. При сохранении не забывайте ставить кодировку файла utf_8
Я буду рассматривать структуру на примере своей темы, у вас детали могут отличаться, но общий принцип думаю поймете..
На этом скриншоте я разбил тему на 4 условных составляющих, за генерацию которых отвечают свои php-файлы. Очень похоже на блоковую модель статичных страничек, не так ли. Однако есть свои нюансы.
Шапка сайта.
За шапку в стандартизированных темах отвечает файл header.php В состав шапки обычно входят такие элементы как Меню, Название сайта, логотипы, баннеры, может входить навигация, поиск, слайдшоу и т.д. Все зависит от конкретного шаблона. Так же там прописываются доктайпы, меты и прочие значения тэга html странички.Основной контент
Далее идет центральная часть сайта в котором и содержится основной контент. В него входит приличный список php-файлов, в моем случае это:
404.php который отвечает за вывод страницы с ошибкой 404. archive.php который отвечает за страницы с архивами такими как рубрики, метки, календарь и т.д. index.php — главная страница сайта page.php отвечает за вывод страницы «Страницы» пардон за каламбур) ее вы видите если кликаете у меня вверху на «Об авторе», «Карта сайта» «Гостевая» и т.д. single.php отвечает за вывод конкретной записи, наподобие той, которую вы читаете в данный момент ???? comments.php нетрудно догадаться отвечает за блок с комментариями recent-comments.php недавние комментарии и т.д.Далее у каждой темы могут быть свои индивидуальный настройки и php файлы но думаю вы поняли смысл.
Боковая колонка (sidebar)
За вывод боковой колонки нашего блога отвечает sidebar.php . В некоторых темах их может быть несколько, у меня одна. Сайдбар это важная часть сайта, в нее как правило помещают виджеты, баннеры, навигацию, и прочую полезную информацию которая должна быть у посетителя всегда на виду, вне зависимости на какой бы он странице не открыл ваш сайт. В моей теме так же на боковой панели находится поиск. search.php и searchform.php отвечают за поиск и все что с ним связано.
Подвал сайта (footer)
footer.php отвечает за вывод нижней части сайта — подвала. Там обычно находятся копирайты, информация о создателях и дизайнерах, счетчики, и т.д. иногда туда помещают какой-то функционал сайта, который не стали помещать в верхние части сайта, что бы он не отвлекал внимания посетителя.
Особняком стоит functions.php в нем перечислены различные функции вашего сайта, в том числе и доступные только администратору.
Как вы заметили, на всех страницах нашего сайта присутствуют футер, хэдер и сайдбар, куда бы вы не перешли. И лишь содержание основного контента постоянно меняется, в этом и есть смысл динамических страниц.
Надеюсь вы теперь в общих чертах поняли структуру вашего шаблона , и если захотите что-то убрать или наоборот добавить, то будете знать где искать нужный элемент)
Кстати о поисках нужного элемента — рекомендую использовать браузер Mozilla Firefox с установленным на него плагином Firebug.
Пост получился довольно большой, поэтому о CSS-стилях темы и картинках я напишу в следующем уроке . Там же мы и посмотрим как Firebug облегчает работу с кодом страниц.
Тема довольно сложная для новичка, поэтому если есть какие-то вопросы или что-то осталось непонятным, то не стесняйтесь,задавайте вопросы в комментариях.