текст Leave a Comment заменить на

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

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

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

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

Меню

Для настройки внешнего вида меню редактор шаблонов предоставляет целый ряд инструментов на одноимённой вкладке (рисунок ниже).

Область PresetGroup, инструмент Пресеты . Данный инструмент (рисунок ниже) содержит готовые стили оформления меню.

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

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

• 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 шаблонов » мы рассмотрим позиции модулей, настройки внешнего вида различных элементов управления и футэр (подвал сайта или нижний колонтитул).