Главная › Интернет › Редактирование темы WordPress. Pinegrow WP — веб-редактор для создания WordPress шаблонов

Редактирование темы WordPress. Pinegrow WP — веб-редактор для создания WordPress шаблонов

» мы продолжили обзор инструментов TemplateToaster и рассмотрели новшества, которые появились в 5-й версии программы по сравнению с 4-й.

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

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

Область Подменю . Настройка «макета» и «реакции» подменю.

Click . Открытие подменю по нажатию на кнопку пункта меню.
Hover . Открытие подменю при наведении курсора мыши на кнопку пункта меню.

Переключаясь между инструментами Мега , Вертикальный и Вы меняете «макет» подменю. На рисунках ниже приведены примеры подменю в зависимости от выбранного инструмента (согласно порядку, в перечне выше).

В зависимости от выбранного инструмента (Мега , Вертикальный и ) будут доступны другие. Например, если выбрать Мега , то можно настроить Область подменю, Пункт меню и Заголовок подменю . Если выбрать Вертикальный или , то только Область подменю и Пункт меню .

Область Подменю, инструмент Область подменю . Можно настроить задний фон (цвет, градиент или изображение), границу (стиль, толщину, радиус скругления или цвет) и тень.

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

Высота.
Ширина.
Задний фон.
Граница.
Граница при наведении курсора.
Тень.
Тень при наведении.
Разделитель.
Отступ. Внешний.
Отступ. Внутренний.
Иконка. Нормальное и наведённое состояние.
Типография. Лучше «типографика» - настройка шрифтов. Нормальное и наведённое состояние.

На вкладке (рисунок ниже) расположены инструменты для настройки боковых колонок шаблона.

Инструмент Позволяет указать, сколько боковых панелей должно быть, и где они должны располагаться (рисунок ниже).

Нет. Без боковых панелей.
Слева боковая панель. Одна боковая панель слева от области (колонки) содержимого.
Справа боковая панель . Одна боковая панель справа от области содержимого.
Слева Слева боковая панель. Две боковые панели слева от области содержимого.
Слева справа боковая панель . Одна боковая панель слева от области содержимого, одна - справа.
Справа Справа боковая панель. Две боковые панели справа от области содержимого.

Все инструменты в областях Задний фон, Макет, Эффекты, были рассмотрены ранее в статьях.

Область Высота. Позволяет задать, какой должна быть высота боковых панелей. Или 100% от высоты основной области страницы (контентной) – опция Высота 100% или боковая колонка должна подстраиваться под высоту содержимого, которое в ней размещается. Опция Эквивалентно содержимому .

На данной вкладке (рисунок ниже) Вы найдёте инструменты, при помощи которых можно настроить внешний вид модулей. Редактор шаблонов TemplateToaster 5 Professional предоставляет Вам для этого ряд инструментов. Обратите внимание, что вкладка появляется только тогда, когда Вы активируете использование одной или двух боковых панелей на вкладке , инструмент .

Причём, инструменты разделены на области, соответствующие областям модулей (рисунок ниже).

Контейнер . Зелёная рамка на рисунке ниже.
Хэдэр . Голубая рамка на рисунке ниже.
. Красная рамка на рисунке ниже.

Область Контейнер, инструмент Свойства контейнера . Вы сможете настроить внешний, внутренний отступы, границы (стиль, толщина, радиус скругления, цвет) и тень. Все эти опции уже рассматривались ранее, также, как и инструмент Задний фон .

Область Хэдэр. Все инструменты данной области, включая Свойства верхнего колонтитула (иконки, внешний и внутренний отступы, тип заголовка), уже рассмотрены в предыдущих статьях.

Область Инструмент Задний фон уже рассматривался. Инструмент (рисунок ниже) помимо рассмотренных ранее настроек позволяет сконфигурировать новые элементы.

Активная ссылка, Наведённая ссылка, Посещённая ссылка. Вы можете задать оформление текста, по аналогии с другими текстовыми объектами (стиль, размер, цвет и так далее), рассмотренными ранее, для трёх различных состояний гиперссылок.
Текст . Для этого элемента добавлена опция Отступ , которая позволяет настроить абзацный отступ (не путать с междустрочным интервалом).
Заголовки . Визуальный редактор шаблонов позволяет задать стиль, размер шрифта (кегль), семейство (гарнитуру), цвет, отступ, эффекты, выравнивание, оформление (подчёркнутый, зачёркнутый). Причём, это можно сделать для заголовка каждого уровня (H1-H6) отдельно.
Нумерованный список . Настройка оформления нумерованного списка. Помимо уже знакомых настроек шрифта можно выбрать стиль. Например: 1, 2, 3; a, b, c и так далее.
Неупорядоченный список. Настройка оформления маркированного списка. Только настройки шрифта.

Инструмент . Содержит набор предварительно установленных вариантов оформления модулей (рисунок ниже).

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

Хочу только привести варианты оформления меню (рисунок ниже), в зависимости от выбранного «типа» расширяемого горизонтально подменю: Мега, Вертикальный, Горизонтальный .

В этой вкладке (рисунок ниже) редактор шаблонов Joomla предоставляет Вам ряд возможностей по настройке внешнего вида самого главного, что есть на любом сайте – содержимого (контента). Большинство инструментов и их настроек уже рассматривались ранее. Не будем их затрагивать, а только остановимся на новых.

Примеры предварительно установленных стилей оформления (прессетов) контента показаны на рисунке ниже.

Область инструмент . Помимо уже знакомых опций позволяет настроить высоту строки в пикселях (аналог междустрочного интервала).

Хочу обратить Ваше внимание, что для контента доступно задание нескольких границ:

Синяя сплошная линия на рисунке ниже. Область , инструмент – Граница .
Чёрная сплошная линия на рисунке ниже. Область Публикация , инструмент Свойства публикации – Внутренняя рамка – Граница .
Красная сплошная линия на рисунке ниже. Область Публикация , инструмент Свойства публикации – Граница контента.
Зелёная пунктирная линия на рисунке ниже. Область Публикация , инструмент Граница.

Область инструмент Списки . В отличие от списков в модуле, для маркированных списков (неупорядоченных) можно указать иконку маркера и её цвет.

Область инструмент Таблица . При помощи настроек данного инструмента (рисунок ниже) редактор шаблонов сайтов позволяет Вам настроить внешний вид таблиц сайта (не путать с CSS-таблицами).

Table background. Фоновый цвет таблицы.
Table Margin. Отступ от верхнего, правого, нижнего, левого края таблицы до окружающих объектов.
Table Padding. Отступ от верхнего, правого, нижнего, левого края ячейки до внутреннего содержимого ячейки.
Table Header. Настройка цвета фона и текста заголовка таблицы.
Тип рамки. Одинарная или двойная обводка.
Граница. Стиль, толщина и цвет границы таблицы.

Для тех, кто делает сайты на Джумла предлагаю ознакомиться со статьёй «Обзор Droptables. Создание прайс листа в Joomla », в которой описано расширение позволяющее сделать красивые и функциональные таблицы без знаний программирования.

Область Публикация, инструмент . Здесь (рисунок ниже) собраны настройки по управлению содержимым области контента, которую можно условно разделить на «заголовок», «содержимое» и «метаданные».

На рисунке ниже заголовок обведён синим, содержимое – красным, а метаданные – зелёным.

Настройки, доступные для этих областей (рассмотрим только новые настройки):

Показывать метаданные . Отображает\скрывает метаданные.
Внутренняя рамка . Возможно задать рамку для заголовка и\или метаданных. Можно изменить тип, цвет, ширину и радиус скругления рамки, добавить тень, изменить задний фон и внутренний\внешний отступы.
Поля от контента и Отступ содержания (лучше «Отступ содержимого»). Отступ от контента до границы области содержимого и отступ от границы области содержимого до контента (почти одно и то же).
Изображение публикации. Позволяет добавить изображение к материалу и настроить внешний вид обрамляющей его рамки.
Пост на главной. Это своего рода управление макетом страницы типа «Блог категории» (в Joomla). Пример такой страницы – страница категории с обзорами . Можно выбрать значение «0» – не отображать в верхней части страницы статью во всю ширину (за исключением тех случаев, когда для опции Колонки выбрано «1»), «1» – отображать в верхней части страницы статью во всю ширину.
Колонки. Доступно отображение контента в 1, 2, 3 или 4 колонки. По аналогии с газетными колонками.

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

Заголовок .
Title Hover . Заголовок, на который наведён курсор мыши.
Метаданные .
Мета-ссылка. Гиперссылка в области метаданных.
Наведённая мета-ссылка. Гиперссылка в области метаданных, на которую наведён курсор мыши.

Область Публикация, инструмент . Редактор шаблонов сайтов позволяет Вам задать иконку для таких элементов:

Заголовок публикации.
Автор.
Дата.
Печать.
эл. Почта.

Эти иконки отображаются над материалом (например, на этом сайте вверху есть иконка печати). Вы можете выбрать одну из доступных иконок в библиотеке TemplateToaster 5 Professional, задав ей цвет, или указать своё собственное изображение.

В следующей статье «Обзор TemplateToaster Professional. Генератор HTML шаблонов » мы рассмотрим позиции модулей, настройки внешнего вида различных элементов управления и футэр (подвал сайта или нижний колонтитул).

Тем, кто только начал знакомство с CMS Joomla всегда хочется изменить внешний облик сайта по своему усмотрению. Стандартный шаблон перестает устраивать и хочется чего-то нового.

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

В этом уроке я покажу, как отредактировать шапку для нашего сайта на примере стандартного шаблона «Protostar». Что нам для этого потребуется:

FTP-клиент , например FileZilla для удобства доступа к файлам на сервере хостинг провайдера (для тех, у кого сайт расположен на хостинге)
Текстовый редактор (notepad ++, sublime text и т.п.)
Графический редактор (например, Photoshop)
Веб браузер (Google chrome, Firefox и т.п.)

Конечно, можно обойтись и без них (за исключением интернет браузера), но данные программы значительно упростят работу.

Учимся работать с файлами стилей в Joomla

Первым делом стоит научиться «правильно» пользоваться интернет браузером, другими словами научиться просматривать код страницы и выделять в нем нужные для работы строки.

Для просмотра кода страницы в разных браузерах есть специальные команды, но в большинстве случаев для этих целей служит клавиша F12 . В браузерах подобных Google chrome для просмотра кода определенной части страницы можно ткнуть правой кнопкой мыши по этому элементу и в выпадающем окне выбрать пункт «Посмотреть код»:

После этих действий в нижней (или правой) части страницы браузера мы увидим код страницы и стили оформления всех элементов, а искомый элемент будет подсвечен:

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

, внутри которого находится ссылка с текстом «Дополнительные поля в Joomla».
На данном этапе нас интересуют стили оформления тех или иных элементов страницы, будь то заголовок, меню, изображение или обычный текст.
Как определить css файл содержащий стили шаблона
Стили применимые к каждому элементу можно увидеть в правой части браузера, а чуть правее показан css файл, который содержит данный код и строка кода, в которой можно найти данные стили:
В моем случае стили для ссылок содержатся в файле с именем template.css в строке 219, а стили для заголовков

в том же файле в строке 7220 (смотрите на скриншот выше и все станет понятно). Если навести курсор мыши на название файла стилей, то можно увидеть путь до этого файла, у меня данный файл лежит в папке templates/protostar/css/template.css . Если его открыть, то можно в этом убедиться:
После того как мы выяснили место расположения файла стилей можно приступать к его редактированию по своему усмотрению, тем самым мы сможем поменять оформление нашего шаблона по своему усмотрению. В дальнейшем для тех, кто не знаком с основами CSS будет создан специальный раздел, а пока просто запоминаем, что и где искать для дальнейшего редактирования.
Хочу отметить, что гораздо удобнее предварительно применять стили прямо в браузере и если результат устроит, то переносить их в файл. В качестве примера я прямо в браузере изменю, цвет ссылок на странице и размер заголовка, вот что у меня получилось в итоге:
Со стилями разобрались, теперь осталось выяснить, какой файл отвечает за структуру сайта и как с ним работать.
Файл структуры сайта - index.php
В любом шаблоне Joomla за его структуру отвечает определенный файл, в большинстве случаев это файл index.php который расположен в корне папки шаблона. В шаблоне Protostar индексный файл находится в папке templates/protostar/index.php именно он отвечает за расположение тех или иных элементов на страницах сайта.
Данный файл состоит из 220 строк кода написанных на языках PHP и HTML (в некоторых и JavaScript), которые выглядят следующим образом:
В самом начале файла идет код, который отвечает за подключение дополнительных файлов (стилей, скриптов), проверку предустановленных настроек шаблона и многое другое. Сама же разметка страницы начинается со строк (126 строка кода):
Изменив код данного файл можно кардинально изменить шаблон сайта, изменить место вывода позиций модулей и их количество, изменить шапку сайта, футер и так далее.
Вносить какие либо изменения в код мы не будем, этому будут посвящены следующие уроки, сейчас же мы просто добавим несколько строк кода, которые позволят нам подключить собственный файл стилей в наш шаблон Joomla.
Подключение собственных файлов стилей в шаблон Joomla
Прежде чем начать подключать собственные CSS файлы в наш шаблон, давайте определимся, для чего это может понадобиться. Причин тому может быть несколько:
Защита от потери данных - вы используете стандартный шаблон и вносите изменения в существующие файлы стилей, после обновления CMS эти файлы заменяются новыми, и вы теряете все ранее внесенные изменения.
Разграничение обязанностей - для каждого отдельно взятого элемента можно создать отдельные файлы, которые будут отвечать только за его оформление. Но тут важно не переусердствовать, не стоит создавать слишком много файлов.
Разные устройства - сейчас для доступа в интернет используют не только компьютеры, но и телефоны, планшеты и даже часы. Таким образом, можно для каждого отдельно взятого устройства создать и подгружать только тот файл стилей, который для него предназначен.
Как бы то ни было научиться создавать и подключать собственные файлы стилей в готовые шаблоны всегда полезно.
Создание собственного css файла
Для начала нам необходимо создать новый файл стилей в предназначенной для них папке, обычно это папка под именем «css». Файл создается стандартным способом, его имя не имеет значение, главное чтоб у него было расширение «.css», я свой новый файл назвал «mycss.css».
Добавляем строки кода в файл index.php
Теперь нам необходимо подключить вновь созданный файл, другими словами сказать шаблону, что у нас появился новый файл, и мы будем его использовать. Для этого открываем индексный файл шаблона (index.php), в строке кода под номером 15 находим следующий код:
$user = JFactory::getUser();
Сразу за ним дописываем новую строку:
$doc = JFactory::getDocument();
Должно получиться примерно следующее:
На данном этапе мы только объявили переменную, при помощи которой будем подключать наш новый файл стилей. Теперь нам надо написать еще одну строку кода, которая будет непосредственно отвечать за само подключение CSS файла.
// Add Stylesheets
После него дописываем наш код для подключения css файла:
$doc->addStyleSheetVersion($this->baseurl . "/templates/" . $this->template . "/css/mycss.css");
У меня получилось вот так:
Как проверить подключен ли наш файл стилей
Чтобы убедиться в том, что наш файл стилей действительно подключен, нам снова потребуется открыть код страницы, но на сей раз несколько иначе. Жмем в окне браузера правой кнопкой мыши в любом месте страницы и в выпадающем списке выбираем пункт «Просмотр кода страницы» или нажать сочетание клавиш Ctrl+U .
В открывшемся окне находим строки кода, начинающиеся на
Если в списке его нет, то возможно потребуется перезагрузить страницу с очисткой кэша (комбинация клавиш Ctrl+F5)
На этом урок считаю завершенным, мы разобрали общие вопросы касательно редактирования шаблонов на Joomla, научились работать с кодом страницы, а так же создавать и подключать собственные файлы стилей.
В следующем уроке мы более детально разберем процесс редактирования шаблона и

Неумелое редактирование шаблона WordPress может привести к плачевным последствиям. Удаление даже одной строки из кода темы может сделать ее полностью неработоспособной. Поэтому в этом вопросе нужно разбираться досконально.

Особенности шаблонов для WordPress

Шаблоны для любого движка радикально отличаются по своей структуре от стандартных шаблонов, созданных на основе css и html . Шаблоны для WordPress также называют темами. Благодаря им можно легко и быстро поменять внешний вид сайта. Также легко, как человеку сменить рубашку:

В состав темы входит несколько основных групп файлов:

CSS файлы – как и в обычном шаблоне, несут в себе стилевые описания всех элементов;

Шаблонные файлы – каждый из них отвечает за вывод информации в определенной части сайта. Данные шаблоны имеют расширение php ;

functions.php – файл дополнительной функциональности, который реализует интеграцию темы в движок;

Изображения – рисунки, которые используются в качестве фона.

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

Все установленные темы доступны для просмотра через интерфейс админки сайта. Для этого нужно перейти в раздел бокового меню «Внешний вид » — «Темы». Некоторые параметры внешнего вида шаблона можно установить в пункте «Theme Options »:

Поменять цвет меню;

Установить цвет ссылок;

Выбрать один из вариантов структуры сайта;

Задать расположение меню;

Установить цвет фона для контента.

Список параметров, доступных в «Theme Options», может быть разным для каждой из тем.

Для продвинутых пользователей в панели администрирования WordPress имеется встроенный редактор шаблонов. Он также доступен в разделе меню «Внешний вид »:

На диске (или хостинге ) файлы всех установленных тем хранятся в папке wp-content/themes/ . В редакторе тем админки все файлы шаблона перечислены справа. После нажатия на имя файла его содержимое станет доступным для правки в окне редактора:

Чтобы лучше понять, как редактировать шаблон WordPress , разберем на примере создание темы для сайта.

Создаем новую рубашку для своего сайта

Создавать тему будем пошагово:

1) Заходим в директорию wp-content/themes/ и создаем папку theme_test . В ней будут храниться все файлы будущей темы;
2) С помощью любого редактора создаем файл css . Хотя лучше сразу использовать специализированное программное обеспечение. Например, программу Dreamweaver . Внутри комментариев прописываем название темы:

/Theme Name: Theme_test/. /**** Defaults /

Так мы даем понять WordPress , что это стилевой файл новой темы;

3) Создаем с помощью того же редактора файл index.php . Вставляем в него код:

Документ без названия

Заголовок

Контент

Подвал

Сохраняем файл в папке нашей темы. Теперь здесь два файла, предназначенных для создания шаблона WordPress :

На данном этапе новая тема уже видна через админку сайта в списке установленных:

Если активировать тему, то в окне браузера сайт будет выглядеть вот так:

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

За структуру подвала отвечает шаблон footer.php.

Так что перед тем, как сделать шаблон для WordPress , нужно все это понимать. Теперь разделим html код файла index.php по шаблонам. Для этого создаем два файла: header.php и footer.php . Затем разнесем по ним код одноименных частей страницы.

Содержимое footer.php :

Содержимое header.php :

Документ без названия

Здесь строкой

Вот таким образом мы создали одностраничный шаблон для блога.

Более легкий способ

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

Приложение доступно в платной и бесплатной версиях. Оно поддерживает создание шаблонов для нескольких популярных CMS . Также можно загрузить уже готовые темы:

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

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

Какой вариант создания шаблона выбрать?

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

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

Самое важное – не бойтесь. Редактировать что-либо обычно всегда проще, чем создавать с нуля. Это справедливо и для wordpress шаблонов. Чтобы разобраться, как его изменять, необходимо для начала определить его структуру. Итак, шаблон или тема состоит, по сути, из двух вещей:

Непосредственно php-файлы, которые и формируют содержимое сайта + css-файл style.css, в котором описаны все стили

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

PHP-файлы и их редактирование

Чтобы полноценно редактировать php-файлы в wordpress-темах, вы должны владеть хотя бы основами этого языка. То есть хотя бы понимать базовый синтаксис языка, самые простые понятия. Ну или как минимум вы должны уметь пользоваться справочником. Например, по функциям wordpress есть хороший справочник – wp-kama.ru.

Собственно, давайте начнем с более простого – самой структуры шаблона. Его формируют разные php-файлы. Вообще сядьте сейчас и подумайте, что есть на любом сайте (ну или почти на любом)? Во-первых, это шапка. То есть верхняя часть, где обычно располагается логотип, заголовок, описание проекта и прочая информация. Во-вторых, это основная часть для вывода контента. В-третьих – боковая колонка. Или даже несколько колонок. В-четвертых, подвал сайта.

Так вот, если все это понимать, уже становится легче, потому что в wordpress шаблоне все php-файлы тоже разбиты по частям сайта или определенным. То есть:

Это именно структурные части. Ну а что же с контентной? Ну тут нужно понимать, что в основной области может располагаться запись, страница, список записей, результаты поиска и т.д. Соответственно, для каждого есть свой шаблон:

single.php – шаблон для одиночной записи;

page.php – одиночная страница;

archive.php – вывод архивных записей;

index.php – вывод главной страницы сайта.

search.php – вывод результатов поиска.

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

Тут можно выделить еще 2 файла:

404.php – отвечает за вывод страницы с ошибкой 404.

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

Важное дополнение

Все, что мы рассмотрели, это лишь основные php-файлы, которые создаются при разработке любого wordpress-шаблона. Но никто не мешает разработчику добавить свои шаблоны, и вот они уже могут называться как угодно. Хотя обычно толковый разработчик называет эти файлы так, что по названию примерно понятна задача файла. Например, content-meta.php. По названию можно догадаться, что в файле содержиться мета-информация о контенте. То есть это может быть имя автора, время публикации, кол-во просмотров и комментариев и т.д.

Что-то стало вам понятней? Ну хотя бы то, что если вам нужно изменить что-то в шапке, то лезть нужно в header.php, а если добавить какую-нибудь форму подписки после каждой статьи, то в single.php. Ну и конечно, любые изменения внешнего вида уже существующих и новых элементов производятся через таблицу стилей – style.css. Но для этого нужно хотя бы немного разбираться в css.

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

Изменение внешнего вида уже имеющихся элементов

Например, в шапке у вас заголовок, и вы хотите сделать его синим, а не зеленым, допустим. Что делать? Открываете сайт в браузере Yandex Browser или Google Chrome, далее жмете F12. Перед вами появится отладчик. Раскрываете там структуру сайта. Отладчик подсвечивает вам блок на сайте, к которому относится тот или иной тег.

Приведу пример с главной страницей нашего сайта. Допустим, захочется нам изменить 4-й блок навигации – наши курсы. Как это сделать?

Заходим на главную, жмем F12, появляется отладчик. Начинаем раскрывать нужный тег. Для этого нажимайте на треугольник. Базовые знания html тут вам, конечно, тоже пригодятся. Например, вы должны понимать, что все содержимое сайта лежит в теге body. Короче, вы должны найти искомый элемент.

Все, когда эта информация найдена, вам остается открыть style.css, нажать Ctrl + F для поиска и ввести там название класса. В нашем случае nav4. Конечно, с webformyself это сделать не получится, потому что у вас просто нет доступа к сайту, но вот со своим шаблоном без проблем.

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

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

Если говорить вкратце, то это то, как выглядит изменение элементов. Теперь давайте рассмотрим другую сторону редактирования шаблона.

Редактирование php-файлов, добавление или удаление элементов

В принципе, что-то удалить обычно проще, чем что-то добавить. До удаления можно додуматься чисто интуитивно. Например, выводиться у вас перед статьей дата публикации, а вы хотите ее перенести под статью. Вы даже чисто интуитивно можете открыть single.php и найти там блок, в котором будут слова вроде date, time и т.д. Выделить его, вырезать и вставить после вывода статьи.

А вот чтобы что-то добавить, вам нужно чуть-чуть лучше знать html и php. Или хотя бы уметь пользоваться справочником по wordpress-функциям и общим справочником по html-тегам.

& lt ; p & gt ; Авторпоста: & lt ; ? php the_author () ; ? & gt ; & lt ; / p & gt ;

Пример я как раз взял из справочника. Вам необязательно знать заранее название функции, вы можете просто ввести в поле поиска в справочнике что-то вроде “выводит имя” и вот уже справочник сам подсказывает нам подходящие функции:

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

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

Чем открыть шаблон WordPress?

Хочу сразу отметить, что если вы ничего не понимаете в кодах, CSS и HTML, то лучше не пытаться ничего делать. Ваши пробы редактирования шаблона могут привести к полной не функциональности сайта. Совсем другое, если какой-то урок четко прописывает действия и этапы выполнения, где написано откуда скопировать и куда вставить. Однако, подстрахуйтесь и сделайте бэкап данных (резервная копия), чтоб в любой момент восстановить сайт в изначальном виде.

Как менять шаблоны WordPress?

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

Редактирование шаблона WordPress

Откройте админку WordPress.

Далее выберите Внешний вид-Редактор .

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

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

Редактирование файлов используя файловый менеджер хостинга

Имея хороший хостинг с отличным файловым менеджером и дружелюбным интерфейсом, можно редактировать шаблон в нем. Этот способ также не требует запускания дополнительных программ, настройки подключений и копирования информации на ПК. А самое главное, подсвечивается код.

Файлы , которые редактируются, размещены в папке: /wp-content/themes/название_вашего_шаблона/. Открываете ее и ищете необходимый для редактирования файл.

Редактирование темы на ftp

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

Запустите свой клиент ftp . Можно использовать Total Commander или же FileZilla для подключения клиента ftp . Проверьте соединение с вашим сайтом и откройте папку вашего шаблона: /wp-content/themes/название_вашго_шаблона/

Файл, который планируете редактировать, скопируйте на локальный диск.

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

Будет лучше, если тестовый вариант сайта был установлен локально. Это позволит без риска внести изменения и уже полностью отредактированным переносить на хостинг. Для редактирования файлов предлагаю использовать бесплатный Notepad++ редактор, имеющий подсветку синтаксиса. С ним вы сможете легко копаться одновременно во всех файлах темы.

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

Выводы

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

Определитесь какой сложности будет проводиться модернизация темы и определите самый удобный способ редактирования. Но, на всякий случай, сделайте резервную копию, чтоб не потерять рабочий шаблон совсем. При неудачном завершении редактирования, вы сможете восстановить все данные и запустить тему в работу в изначальном виде.