Когда-то я рассматривал интересный проект — визуальный редактор для создания 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), то этот софт пригодится.

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

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

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

Конструктор тем для Вордпресс lubith.com

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

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

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

Шаблон изготавливается примерно за 15 минут, а как только решите, что все нужное было сделано, нажмите на кнопку «Download», после чего на ваш диск загрузится архив со всеми нужными файлами. Ну а чтобы поставить эту тему на свой сайт, будет достаточно закачать архив на хостинг. Данный генератор тем для Вордпресс условно бесплатен, поэтому «free версия» не лишена недостатков: вы не сможете повторно подкорректировать шаблон, не сможете отредактировать вид комментариев, не сможете создать более одной темы (т.е. обновить шаблон не получится).

Генератор вставляет свои ссылки, но это некритично, ведь они не закодированы. Просто перейдите в файл footer.php и найдите код, где упоминается слова «Wordpress Theme Generator» или сайт www.lubith.com. Блок, где расположена ссылка – можно удалить полностью или изменить ссылки на свои. Теперь ваш шаблон обретет «девственность», но нужно рассмотреть все немного детальней для возможности править все, что душе угодно (включая текст).

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

  • Wrapper – фоновый блок, содержит все остальные;
  • Container – блок с главными содержательными площадки;
  • Header – шапка сайта;
  • Site-title – блок названия сайта;
  • Site-description – блок описания сайта;
  • Access (Menu) – блоки меню, расположенные под шапкой сайта;
  • Content – блок контентной части ресурса (там, где располагаются посты);
  • Primary – отвечает за виджет, расположенный справа;
  • Entry-title – блок с данными о публикации и авторе;
  • Entry-meta – блок с рубриками поста;
  • Widgettitile – заголовок одного виджета;
  • Textwidget – тело виджета.

Дополнительно также есть блоки, которые можно изменить: footer (подвал), link (вид ссылок), comments (вид комментариев и их авторов), home.sticky (вид прикрепленных записей на главной), primary (отвечает за виджет справа), secondary (отвечает за виджет слева), blockquote (оформление цитат). Вот собственно и все.

Плагин «Бесплатный конструктор онлайн шаблонов»

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

  • конструктор изначально имеет предустановленных 6 тем оформления (их можно обновить), но все-таки лучше создать собственную;
  • вкладка «Макет» дает возможность (количество колонок, их размещение);
  • вкладка «Шаблоны» позволяет изменить отображение домашней страницы, страницы записей, отдельной страницы, а также можно менять даты, метки, рубрики, поиск;
  • вкладка «Шапка» отвечает за отображение верхней части темы (можно изменять текст главной);
  • вкладка «Настройка контента» позволяет изменить вид ссылки на страницу автора, списки категорий, меток, отображение комментариев, а также иконки соц. сетей;
  • есть возможность изменить миниатюры комментариев;
  • настройка «футера» (можно вставить любой текст или код);
  • настройка шрифтов (текст можно изменять по размеру и цвету);
  • можно изменить цвета и прозрачность;
  • дизайн блоков;
  • правка CSS-кода (можно обновить по своему усмотрению);
  • настройка изображений, вставка картинок в нужное место;
  • настройка слайдера, который будет показан в верхней части ниже шапки (текст слайдера можно изменить на свой).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

Внимание! Использование визуального редактора для редактирования шаблона сайта недоступно в версиях с 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: