Редактирование темы вордпресс. Добавление рабочей области Work Area

Инструмент 22.04.2019
Инструмент

Неумелое редактирование шаблона 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 .

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

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

Из чего состоит шаблон Joomla 3

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

  • index.php – индексный файл, он определяет структуру сайта
  • templateDetails.xml – данный файл содержит всю информацию о шаблоне и служит для установки шаблона через панель управления
  • Файлы стилей (.css) – с их помощью определяется оформление страниц

Кроме того шаблоны могут содержать файлы скриптов (.js), изображения, языки и многое другое. На скриншоте ниже представлен набор файлов, из которых состоит стандартный шаблон «Protostar»:

Какие бывают шаблоны

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

  • Шаблоны для сайта – меняют облик и дизайн сайта
  • Шаблоны для панели управления – данный вид шаблонов предназначен именно для панели управления, на сайт они никак не влияют.

Работа с шаблонами Joomla 3

С разновидностями, местом хранения и файлами шаблонов разобрались, теперь поговорим о том, как работать с шаблонами при помощи панели управления. Для начала давайте перейдем в раздел «Шаблоны: Стили (Site)» («Расширения» -> «Шаблоны») и посмотрим, какие шаблоны уже присутствуют в базовой сборке CMS Joomla:

На странице «Шаблоны: Стили (Site)» видно, что в нашем распоряжении имеется два шаблона Beez3 и Protostar , последний установлен по умолчанию для всех страниц сайта, обратите на это внимание ведь в Joomla один и тот же сайт может состоять из нескольких шаблонов. И для различных разделов сайта можно назначить свой собственный шаблон, тем самым сделать сайт более привлекательным.

Давайте откроем один из шаблонов для редактирования и посмотрим, что и как можно отредактировать:

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

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

И последняя вкладка - «Привязка к меню» именно с её помощью можно назначить шаблон для всего сайта или для определенных разделов. Просто отмечаем те пункты меню, для которых будет определен данный шаблон:

Позиции модулей в шаблоне Joomla 3

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

Как узнать или где посмотреть позиции модулей в Joomla 3 ? Для этого в Joomla предусмотрен специальный предварительный просмотр, но по умолчанию он недоступен (выключен) и его необходимо включить в настройках.

Для того чтобы включить отображение позиций модулей в Joomla 3 необходимо на странице «Шаблоны: Стили (Site)» нажать на кнопку «Настройки». После этого мы попадем на страницу «Настройки менеджера шаблонов», на которой выставляем переключатель «Просмотр позиций модулей» в положение «Включено»:

После этого снова переходим на страницу менеджера шаблонов – «Шаблоны: Стили (Site)» и жмем на иконку с изображением глаза расположенную чуть левее названия шаблона:

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

Создание собственных позиций модулей

Просматривать уже существующие позиции модулей мы уже научились, но как быть, если в шаблоне нет именно той позиции, которая нам нужна? В этом случае можно создать собственную позицию для модулей в готовом шаблоне Joomla. Процесс не сложный, но требует редактирования определенных файлов шаблона – index.php и templateDetails.xml .

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

Переходим от слов к делу, для начала открываем файл templateDetails.xml , который находится в корневом каталоге шаблона. Вникать в его суть сейчас нет смысла, нас интересуют только позиции для модулей, они объявлены между строчками <position >имя-позиции-модуляposition > (строки 28-47 шаблона Protostar). По умолчанию их 18 штук:

Для того чтобы объявить свою позицию модулей добавляем дополнительную строку (либо несколько строк) такого вида:

my-module-position

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

Теперь открываем файл index.php и добавляем в него новый блок DIV, который будет являться контейнером для новой позиции модулей. Я для примера решил создать новую позицию для модулей в футере сайта. Пишем в футер следующий код:

Div>

Вот и все, позиция создана, можно зайти в раздел «Менеджер шаблонов» и проверить её наличие. Код индексного файла у меня получился таким:

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

Type="modules"

Теперь необходимо указать имя позиции модуля, которое мы указали в файле templateDetails.xml:

Name="my-module-position"

За стиль кода модуля отвечает параметр style, который имеет несколько вариантов оформления, по умолчанию «none», в этом случае заголовок модуля не будет выводиться на страницах сайта.

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

Вот таким образом можно создавать собственные позиции модулей абсолютно в любом шаблоне Joomla 3. Процесс как видите совершенно не сложный.

Расширенные параметры шаблона Joomla 3

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

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

Следующая вкладка, которая нас интересует это вкладка «Создать переопределение». Тут мы можем переопределить модули, компоненты либо макеты сайта, а в дальнейшем изменять их по своему усмотрению не внося изменений в оригинальные файлы:

О том, как создавать переопределение, подробно написано в статье «Переопределение в Joomla 3 », а на данном этапе нам просто необходимо понимать, где и что редактируется в шаблоне.

На последней вкладке «Описание шаблона» написана небольшая информация по данному шаблону, данная вкладка нам не интересна.

Когда-то я рассматривал интересный проект — визуальный редактор для создания WordPress шаблона непосредственно из админки. Сегодня расскажу о похожем, но более функциональном и мощном продукте — . Это отдельная версия профессионального десктопного веб-редактора Pinegrow, который используется при создании сайтов с адаптивностью, скриптами, Bootstrap’ом и другими фишками. Так вот Pinegrow WP — это специальное дополнение, позволяющее создавать именно WordPress шаблоны.

Основные функции Pinegrow WP:

  • Преобразование статических HTML макетов в WordPress темы — выделяете те или иные элементы шаблона и выбираете для них соответствующие параметры.
  • Создание WP шаблонов с нуля с помощью визуального редактора — просто добавляете на страницу нужные элементы (сайдбар, список постов и т.п.)
  • Поддержка 175 WordPress тегов — позволяет быстро найти для элементов HTML макета нужные значения (заголовок поста, дата, имя автора).
  • Поддержка плагинов и PHP функций — в качестве параметров элементов можно выбирать не только WordPress теги, но и задавать переменные, добавлять PHP функции.
  • Просмотр в реальном времени создаваемой WordPress темы позволяет увидеть что получается после ваших настроек.
  • Просмотр генерируемого PHP кода для макета.

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

Вот небольшое видео как работает Pinegrow WP:

Вы можете потестировать данный софт самостоятельно. Для этого скачиваете программку с официального сайта (есть версии для Windows, Mac и Linux). После установки запрашиваете бесплатный временный лицензионный ключ (на 7 дней). Вводите пароль, что приходит на почту и попадаете в систему.

В настройках (значок шестеренки) Framework & Plugin Manager for index.html отмечаете WordPress, после чего загружаете какой-то HTML шаблон. Далее кликаете по определенным элементам макета и выбираете для них соответствующие WordPress функции. Например: для картинки — the_post_thumbnail, для заголовка — the_title, для даты — the_date и т.п. То есть пользователю не нужно знать как именно в WordPress задавать тот или иной элемент, просто ищите его в имеющихся функциях и добавляете в макет. Задав всем блокам на странице соответствующее значение, в итоге получите работающий WordPress шаблон для экспорта. Алгоритм приблизительно такой, хотя с программой Pinegrow WP придется разбираться детальнее (там очень много разных функций и настроек).

В целом, Pinegrow WP — штука очень мощная, но не бесплатная. Персональная лицензия (на 3 компьютера) стоит 99 долларов. Вы можете использовать ее для скольких угодно проектов! Есть лицензии для компаний и команд разработчиков. В принципе, именно для этих целей программа и нужна — если вы или ваша компания профессионально занимается созданием сайтов (в том числе и на WordPress), то этот софт пригодится.

Быстрый старт с CMS Webdirector :


Для определения внешнего вида страниц web сайта создаются страничные шаблоны. Любая страница может быть выведена в любом из имеющихся html шаблонов. При назначении некоторой странице другого шаблона вся страничная информация (тексты, заголовки, картинки) сохранится, но внешний вид страницы изменится в соответствии с новым шаблоном (цвет и размер текста, выравнивание, структура экрана, "шапка" страницы и ряд других элементов).

В большинстве CMS шаблоны представляют собой HTML код с вставками макроязыка придуманного разработчиками конкретной CMS. Для написания такого кода необходимо быть программистом и разобраться в командах конкретной CMS.

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

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

Сначала, при помощи визуального web редактора, разработчик включая и выключая флаги задает из каких информационных зон будет состоять страница на данном страничном шаблоне (всего может быть 9 зон). Затем, для каждой зоны, при помощи визуального html редактора, разработчик выбирает в выпадающем списке информационное наполнение (меню, страничный текст, заголовок - есть много вариантов). Так же есть возможность выбрать пункт "произвольное наполнение", позволяющий вставить в зону произвольный HTML, JS, PHP код или комбинацию из автоматически генерируемых элементов и произвольного кода.

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

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

Для руководителей дизайн-студий этот инструмент дает возможность существенно сократить время на верстку шаблонов по утвержденному дизайну.

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

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

Внимание! Использование визуального редактора для редактирования шаблона сайта недоступно в версиях с 14.0. В более ранних версиях необходимо быть очень внимательным: возможны непредвиденные искажения кода. Рекомендуется редактировать шаблон в режиме HTML-кода.


С помощью визуального редактора возможно изменение шаблона сайта.

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

Внимание! В шаблоне дизайна сайта крайне не рекомендуется использовать комплексные компоненты.

Примечание: Чтобы использовать визуальный редактор при редактировании шаблона в версиях до 14.0 отметьте опцию Использовать визуальный редактор для редактирования шаблонов сайта в настройках Главного модуля (Настройки > Настройки продукта > Настройки модулей > Главный модуль ):

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

Для редактирования шаблона сайта выполните следующие действия:


В обоих случаях откроется форма редактирования выбранного шаблона:


Теперь можно переходить непосредственно к редактированию шаблона сайта.

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

Редактирование служебных областей шаблона

На панели редактирования шаблона располагается кнопка Редактировать служебные области шаблона () , при нажатии на которую открывается форма редактирования:

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

Добавление рабочей области Work Area

Для добавления рабочей области Work Area в шаблон сайта служит кнопка - Разделитель шаблона #WORK_AREA# . При нажатии на нее в рабочую область редактора, в которой отображается внешний вид шаблона, будет добавлен ярлык . Размещение этого ярлыка и определяет расположение рабочей области страниц сайта.

Примечание : Без Work Area шаблон сохранить невозможно.

Предпросмотр шаблона

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

Работа с кодом

Отметим некоторые особенности использования php-кода в коде шаблона. Есть некоторые тонкости при прерывании html-кода php-скриптом. Например, можно писать так:

" title="Посетите сайт">OurSite

Аналогично, и с рисунками (тег img).

Перечислим атрибуты, которые обрабатываются для ссылок и рисунков:
для тега атрибуты: href, title, class, style
для тега атрибуты: src, alt, class, style
Т.е. вместо этих атрибутов можно вставлять

Код таблицы тоже можно прерывать php-скриптом:










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



Рекомендуем почитать

Наверх