Главная › Новости

Основные файлы WordPress для редактирования темы

Опубликовано: 23.08.2018

Установка и настройка шаблона WordPress. Как поставить нормальный шаблон wordpress? #2

Чтобы редактировать файлы WordPress воспользуйтесь редактором Notepad++   и FTP клиентом для передачи файлов на сервер. Лучше всего, для этих целей, использовать файловый менеджер Total Commander 

Файлы WordPress всегда можно быстро скопировать на свой жесткий диск, внести в них изменения и загрузить обратно на сервер. Этот вариант для редактирования является предпочтительным, тем более учитывая то, что некоторые хостеры ограничивают, в целях безопасности, доступ к файлу theme-editor.php -  редактору темы оформления. Этот файл находится по адресу:  wp-admin/theme-editor.php, а все файлы шаблона WordPress по адресу: wp-content/themes/twentytwelve - это папка в которой хранятся файлы темы оформления WordPress Twenty Twelve, которая поставляется вместе с движком.

Произвольные Шапка и Подвал (Header и Footer) сайта с Elementor

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

Настройка новой темы WooCommerce за 10 минут - Урок 14

Подключение тем оформления

Вначале нужно научиться менять темы оформления, для этого к движку WordPress, который отвечает за функционал, за правильную работу сайта, подключаются файлы шаблона или темы оформления. Они отвечают за внешний вид страниц, за дизайн. Для того чтобы поменять тему оформления нужно зайти в панель администрирования WordPress: Внешний вид - Темы - Управление темами. Выбрать нужную тему, нажать ссылку: Активировать.

Вы всегда можете установить новую тему оформления. Либо указать путь к архиву в котором находиться папка с файлами темы в формате ZIP. Либо вы можете пометить разархивированную папку с файлами темы, например vasha-tema, непосредственно на сервер, по FTP, в директорию: wp-content/themes. Получится wp-content/themes/vasha-tema

Доступ к файлам WordPress через редактор темы

После того, как файлы темы для WordPress установлены, а тема активирована, нужно получить доступ к этим файлам, которые лежат в папке с названием темы. Проверьте сами, активируя разные темы оформления, набор файлов будет разный, свой для каждого шаблона. Однако есть необходимый минимум файлов для оформления сайта, созданного на WordPress. Об этих основных файлах и пойдет речь.

Чтобы зайти в редактор файлов WordPress нужно в панели администрирования выбрать: Внешний вид - Редактор.

Если ваш хостер установил запрет на пользование встроенным редактором файлов WordPress, то тогда воспользуйтесь файловым менеджером с функцией FTP клиента. Таким, как Total Commander.

В обоих случаях доступны для редактирования одни и те же файлы. Только способ доступа к ним разный. И в первом, и во втором случае, прежде чем вносить изменения в любые файлы WordPress сделайте резервное копирование, для этого достаточно сохранить исходный файл или скопировать его содержимое, html и php код в обычный текстовый файл.

Структура темы оформления WordPress

Прежде чем вносить изменения в файлы WordPress нужно разобраться в том, из каких структурных блоков состоит тема оформления и как файлы темы связаны друг с другом. WordPress генерирует, собирает, любую из  страниц сайта каждый раз заново. Для этого и служат файлы темы оформления, они выступают в роли строительных блоков.

Существует набор файлов на диске, из которых, по определенным правилам, написанным на языке программирования PHP нужно собрать готовый документ. Если присмотреться, то можно увидеть, что каждая страница сайта состоит из одинаковых элементов:

Верхняя часть, заголовок - файл header.php Средняя часть, содержание - файл index.php Нижняя часть, подвал - файл footer.php Боковая часть - файл saidebar.php Комментарии - файл comments.php

И это только самые основные строительные блоки. С их помощью можно создать только одну главную страницу с комментариями. Файлов WordPress, которые понадобятся для редактирования шаблона немного больше. В этот список нужно добавить:

Статические страницы - файл page.php Записи - файл single.php Страница рубрик - файл category.php Страница для архивов - файл archive.php Страница с результатами поиска - файл search.php Страница для ошибки 404 - файл - 404.php

Эти файлы выводят разметку содержание на каждую страницу WoprdPress, а за оформление отвечает таблица стилей:

Таблица стилей - файл style.css

В папке с темой размещен еще один важный файл:

Функции темы - файл functions.php

Можно сказать, что он отвечает за согласованную работу всех файлов темы оформления WordPress. Из набора файлов выстраивается четкая блочная структура. Нужную информацию о файлах WordPress можно узнать на страницах:   и это информация с официального сайта WordPress.org

Эта структура едина для всех страниц сайта и может различаться в разных темах оформления. Поэтому меня шаблон или, иначе говоря, тему WordPress можно оформить контент множеством разных способов. Внешний вид сайта меняется полностью. Для показа баннеров и блоков контекстной рекламы нужно выбрать наиболее подходящую тему оформления и еще дополнительно доработать этот шаблон:

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

К счастью, для WordPress создано много тем оформления. Выберете нужную из панели администрирования: Внешний вид - Темы - Установить темы. На этой станице можно выбирать оформление для сайта по критериям, по фильтру характеристик:

Цвета Колонки Ширина Функции Тема

Нас интересуют, в первую очередь, два пункта:

Колонки Ширина

Выбирайте шаблон с двумя, лучше с тремя колонками. Ширину берите фиксированную, чтобы шаблон не растягивался по всему широкоформатному экрану. Цвета для контента лучше брать светлые, лучше читать с экрана темный шрифт на светлом фоне.

Проще всего на практике отобрать и протестировать в работе понравившиеся вам темы. Главный критерий - совместимость с основными плагинами и возможность быстро отредактировать файлы WordPress. Ищите простые и удобные в управлении темы оформления для своего коммерческого сайта.

На примере схем размещения, которые наиболее популярны для рекламных блоков, рассмотрим несколько вариантов оформления:

#1 и #3 - две колонки; #2 и #4 - три колоки.

#1 - две колонки и #2 три колонки позволяют наилучшим образом разместить блоки контекстной рекламы.

 Сборка файлов темы WordPress в коде страницы

Хорошо известно, что чем ближе код рекламного объявления к началу страницы, тем выше стоимость за клик. Посмотрите код любой из страниц сайта, который сделан на WordPress, Вам нужно понять в какой последовательности выводятся файлы шаблона непосредственно в коде готовой страницы. Для этого внимательно рассмотрите начало и конец кода каждого из файлов WordPress для конкретной, вашей темы оформления. Обычно начало и конец каждого структурного блока помечены примечаниями, например так: <!-- HEADER START -->  <!-- END START --> в файле header.php  или <!--Start Footer--> <!--End Footer--> в файле footer.php

Нужно понимать, что каждый автор темы может по-разному обозначать начало и окончание для структурного блока. Определив начало и окончание, ищите эти строчки в исходном коде страницы. Используйте для работы с кодом браузер Mozilla Firefox - Инструменты - Веб-разработка - Исходный код страницы. Для поиска текста на странице с кодом используйте комбинацию клавиш Ctrl+F. Сборка файлов шаблона WordPress обычно происходит в следующей последовательности:

header.php sidebar.php index.php comments.php footer.php

Обратите внимание на то, что содержимое виджетов, которые размещены в боковой колонке в коде странице могут быть размещены после кода комментариев. Обязательно нужно проанализировать код для всех типов страниц на вашем сайте. Разобравшись со структурой страницы в WordPress, с тем, как она формируется из отдельных файлов шаблона, можно подробнее рассказать о каждом из них.

Таблица стилей. style.css

Таблица  оформления стилей для всего сайта. Важно понять, что каждый файл WordPress, который участвует в сборке страницы, в свою очередь, собран из отдельных блоков DIV. Каждому такому блоку можно задать свой стиль, написать правила для оформления в файле style.css

Например, файл header.php может заключать в себе два блока. Один из них отвечает за вывод на страницу названия блога, а другой, за вывод главного меню сайта. Понятно, что и шрифт, и отступы, и поля для каждого из блоков должны быть разные. Поэтому так удобно задать оформление для всех многочисленных элементов, которые размещены на странице сайта, в одном файле style.css. В этом файле записаны правила для оформления заголовков от H1, H2 до H6, блоков DIV и даже отдельных абзацев P. В первую очередь нужно обратить внимание на следующие параметры и их значения:

Ширина блоков. Отступы и поля. Цветовая гамма. Стиль и размер шрифта. Оформление ссылок.

Благодаря блочной верстке мы можем легко добавлять или удалять блоки в любом из файлов шаблона. Задавать для каждого нового блока свой собственный стиль, добавляя его в уже подключенную к сайту таблицу стилей. Для того, чтобы быстро редактировать любой файл шаблона WordPress нужно обязательно научиться работать с блоками , освоить блочную верстку страниц сайта. Блоки составляют основу сайта, с помощью PHP выводиться нужный контент в каждый из блоков, стиль оформления задается отдельно. Так, в общих чертах, происходит сборка каждой из страниц.

Главная страница. index.php

В папке с файлами темы WordPress должен находиться файл index.php. Это основной файл шаблона, он отвечает за вывод Главной страницы сайта. Главная страница может быть статической или содержать список анонсов и ссылок на последние записи. Можно сделать тему оформления, которая будет состоять только из двух файлов:

К файлу index.php подключаются заголовок header.php, подвал footer.php, боковая колонка sidebar.php, комментарии comments.php. Существует иерархия по которой WordPress выводит ту или иную страницу, если ни одна из записей и страниц не будет найдена, то будет выведен файл index.php.

Отображение главной страницы происходит в следующей последовательности; пользователь переходит по адресу сайта, например, vash-sait.ru, WordPress ищет файл home.php, если такого файла нет, то будет использован шаблон index.php:

home.php index.php

Одиночная запись single.php

Вначале WordPress ищет файл шаблона, который отвечает за формирование записи определенного типа, если такой файл не найден, то будет использовано файл single.php, если и такого файла нет в папке с файлами темы, то  будет использован файл index.php:

single-post_type.php single.php index.php

Можно создать шаблоны для любого количества типов записей с разным оформлением. Например, single-product.php - для описания продукции, single-news.php - для публикации новостей.

Статическая страница page.php

page-slug.php page-id.php page.php index.php

Вы можете создать шаблон для статической страницы с дополнением в названии, page-free.php для бесплатных предложений, к примеру, или просто с номером page-01.php. Если WordPress не найдет файл page.php, то будет использован файл index.php.

Рубрики или категории. category.php

category-id.php category.php archive.php index.php

Файл WordPress category.php отвечает за вывод страницы со списком записей, которые принадлежат одной рублике, и ссылок на них. Это лишь способ сортировки записей. Шаблоны для страниц рубрик могут быть разными, например category-01.php и category-02.php, два разных шаблона. Если WordPress не найдет в папке с файлами темы оформления такие нумерованные файлы категорий, то он будет искать файл category.php. Если не найдет его, то будет использовать файл archive.php. Если и такой файл не будет обнаружен, то WordPress выведет файл index.php.

Метки или теги. tag.php

tag-slug.php tag.php archive.php index.php

Сортировать записи можно не только по категориям, а и по меткам или тегам. Это еще один способ разложить записи "по полочкам". Каждой записи можно присвоить несколько меток, ключевых слов, по которым будет осуществлен выбор. Список таких записей будет выведен через шаблон tag.php, который сформирует для каждой метки свою страницу со списком записей. Все так же, как и в случае с категориями.

Автор статьи или записи. autor.php

autor.php archive.php index.php

WordPress позволяет настроить публикации так, что в блог смогут писать разные авторы, таким образом можно сделать коллективный сетевой проект. Все записи можно отсортировать не только по категориям и тегам, а еще и по авторам. Для вывода результатов сортировки на страницу служит шаблон autor.php. Если такой файл не будет найден в папке с темой WordPress, то будут использованы шаблоны archive.php или index.php, в соответствии с иерархией.

Дата публикации. data.php

date.php archive.php index.php

Для отображения результатов сортировки по дате публикации используется шаблон date.php. Если такого файла нет, то тогда WordPress ищет файл archive.php, а затем, если и такого файла нет, то index.php

Архив. archive.php

archive.php index.php

Этот шаблон нужно иметь в списке необходимых файлов для темы WordPress. Поскольку уже видно, что он будет использован для создания страницы с результатами сортировки по многим параметрам, если специальные шаблоны для рубрик, меток, автора и даты не будут найдены. Поэтому файлы style.css, index.php и archive.php должны быть в папке с файлами WordPress.

Результаты поиска. search.php

search.php index.php

Файл search.php используется в качестве шаблона для создания страницы с результатами поиска по ключевому слову. Разумеется, если тема содержит форму для поиска, существуют темы оформления, которые не используют эту функцию. В любом случае, если использовать поиск от поисковой системы, то файл search.php не понадобится.

 Страница 404 (не найдено). 404.php

404.php index.php

Эта страница должна быть обязательно - это важно с точки зрения поискового продвижения. Наличие такой страницы положительно сказывается на формировании доверия к сайту. Если шаблона для такой страницы нет, то будет использован файл index.php.

Если в папке с файлами темы оформления есть все эти фалы, то сайт будет работать, пользователь сможет увидеть центральную часть документа с контентом или результатами сортировки записей. Используя движок WordPress можно делать даже небольшие продающие сайты, даже сайты - одностраничники. Однако, для создания полноценной web-страницы нужны дополнительные служебные разделы. Для этого используются специальные файлы шаблонов.

Шапка сайта или заголовок. header.php

Этот шаблон используется для создания верхней части страницы. Обычно в этом файле размещена разметка для вывода логотипа или названия сайта, в шапку выводится описание сайта. В настройках Параметры - Общие - Название сайта - Краткое описание можно указать название и краткое описание для сайта, обе эти сроки будут выведены в верхнюю часть страницы через файл шаблона  WordPress - header.php.

В верхней части размещается главное горизонтальное меню сайта, с помощью которого можно открывать статические страницы.

Ссылки на ленту RSS и Twitter так же могут быть размещены в файле header.php. В этот шаблон можно добавить код рекламного блока или кнопки социальных сетей, графику, видео и аудио плееры. Можно создать слайд-шоу или меню с выпадающим списком, используя JavaScript. Или же, напротив, убрать из шапки все лишнее, оставить только название сайта и строчку главного меню. Возможности оформления верхней части страницы ограничены только фантазией вебмастера.

Подвал. footer.php

Нижняя часть сайта формируется с использованием файла footer.php. В этом файле обычно размещают служебную информацию, информацию об авторе сайта, знак копирайта. Сюда же добавляют коды счетчиков и коды социальных сетей. Можно разместить в подвале дополнительное, расширенное, главное меню или список рубрик.

Можно вывеси в подвал список последних записей, комментарием или ссылки на самые популярные посты. Дело вкуса и авторского замысла. Бывают очень простые файлы footer.php, а бывают насыщенные кодом, в том числе с использованием JavaScript.

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

Боковая колонка. sidebar.php

Не смотря на то, что файл называется "боковая колонка" это шаблон может быть использован и вверху и внизу сайта. Самый привычный для WordPress случай, кода на странице одна или две боковых колонки. Их может быть больше, например три. И тогда мы получим тему оформления с четырьмя колонками. Три боковых служебных, плис одна центральная с содержанием. Если еще использовать колонки вверху и внизу страницы, то в них можно размещать виджеты в которые выводить дополнительную информацию или иллюстрации.

Такая схема применяется для журнальной верстки новостных сайтов. Чтобы сделать такую тему, достаточно отредактировать файлы WordPress, которые отвечают за вывод на страницу дополнительной информации. Через файл sidebar.php на страницу выводят виджеты, блоки, которые позволяют вставлять произвольный контент, в том числе и рекламный код.

В боковой колонке всегда можно найти список рубрик и меток. Все готовые виджеты можно найти в настройках WordPress: Внешний вид - Виджеты - Доступные виджеты. На этой же странице отображены все боковые колонки в которые можно добавить любой из виджетов. Поэтому  удобнее удалять и добавлять информацию в боковую колонку через настройки, без редактирования файла sidebar.php. Если добавлять рекламный блок, то вначале нужно посмотреть в кокой последовательность выводятся в коде страницы файлы шапки, записи, боковой колонки, комментариев и содержимое виджетов.

Комментарии. comments.php

Комментарии можно выводить, как на любой стационарной странице, так и на страницах с записями. Параметры - Обсуждение - Настройка обсуждения. За работу с комментариями отвечает файл WordPress - comments.php

Поскольку этот файл содержит форму для ввода данных и ведет диалог с пользователем, следует перевести все фразы на русский язык. Это можно сделать непосредственно  в файле comments.php. В коде этот файл выводиться вслед за постом. Если в вашей теме это так, то такой факт нужно учитывать при размещении блоков контекстной рекламы.

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

Функции темы function.php

Этот файл также находится в папке с темой WordPress и отвечает за сборку элементов темы. В этом файле прописаны правила для корректной работы всех структурных блоков. Некоторые плагины для работы нуждаются в том, чтобы в файл function.php были добавлены строки кода. Это очень важный файл WordPress поэтому прежде чем его редактировать нужно обязательно сделать резервную копию.

Вообще плагины широко используются для автоматического редактирования файлов темы оформления. Например, для вставки рекламных блоков . Если использовать комплексный подход; редактировать файлы темы с помощью плагинов, вручную и создавать дополнительные файлы шаблонов WordPress, то можно создать очень интересный и многофункциональный сайт на основе блогового движка.

Следите за кодом

Все дело в том, что информация размещенная на странице, та которую видит пользователь, и информация в коде страницы, та которую анализирует робот, мягко говоря отличаются друг от друга. Для примера разберите исходный код этой или любой другой страницы: Mozilla Firefox - Инструменты - Веб-разработка - Исходный код страницы.

Внимательно рассмотрите, в какой очередности следуют файлы шаблонов WordPress.

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