Wp шаблон: Русские шаблоны WordPress. Бесплатные уникальные темы для сайтов. WP-Templates.ru

Как задать Свой шаблон для записей в WordPress в 3 шага

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

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

Шаг 1. Устанавливаем плагин Single Post Template для отображения своих шаблонов записей

Установим плагин Single Post Template из директории плагинов WordPress. Скачиваем и активируем плагин в панели администрирования.

Устанавливаем плагин Single Post Template для отображения своих шаблонов записей

Шаг 2. Создаем свой шаблон для записей в WordPress

Идем в папку с нашей темой. У меня это тема twentytwelve. По умолчанию для отображения всех постов вначале задействуется файл «single.php», далее в этот файл обычно подгружаются другие шаблоны но сейчас нам это не нужно. Итак, копирую файл «single.php» и называю его своим именем нового шаблона «single-custom-tamplate-for-posts.php». Вы можете назвать файл как угодно, главное сохранив в названии конструкцию «single-ваше-название.php», то есть чтобы в начале имени файла было написано «single-«.

Создаем свой шаблон для записей в WordPress

Открываю созданный файл шаблона и в начале файла добавляю следующий код:

/*
 Single Post Template: single-custom-tamplate-for-posts
 Description: This part is optional, but helpful for describing the Post Template
 */

То что написано после «Single Post Template:» — и будет именем данного шаблона, которое будет отображаться в админке.

Вот что у меня получилось:

Создаем свой шаблон для записей в WordPress

Вы можете заметить что в шаблоне я добавил свои теги:

single-custom-tamplate-for-posts.php
<br><br>
<h2>MY Special Template</h2>

Сделал я это специально, чтобы потом проверить выводится пост по новому заданному шаблону или по стандартному. Должен ведь новый шаблон чем-то отличаться.

Собираетесь в путешествие и выбираете какой сувенир привезти домой? Какие сувениры привезти из Таиланда или как выгодно делать покупки на Бали? Смотрите все о сувенирах на сайте http://suvenirfest.ru. Сайт Сувенир Фест — расскажет вам все о сувенирах и покупках во всех странах мира.

Шаг 3. Активируем новый шаблон для поста в WordPress

Заходим в редактирования записи, для которой нужно изменить шаблон, не экране должен был появиться блок с названием «Single Post Template» — это блок плагина который мы установили. Если его нет, перейдите в настройки Настройки экрана и включите его отображение.

Создаем свой шаблон для записей в WordPress

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

Создаем свой шаблон для записей в WordPress

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

Создаем свой шаблон для записей в WordPress

Готово!)

Итак, подытоживая данный урок мы создали шаблон для записи, и с помощью плагина заставили запись выводиться по этому шаблону.

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

обзор 2021 года, особенности и функции темы

Тема WordPress Consultup

Тема WordPress Consultup создана для бизнес-сайтов самого различного содержания для продаж по всему миру:

• консалтинг
• юридические
• финансовые
• спортивные
• медицинские
• интернет-агенства
• организаторы свадеб
• фрилансеры
• электронная коммерция
• портфолио

Consultup оптимизирована для SEO. Подходит под любые устройства и операционные системы. Тема имеет библиотеку иконок, библиотеку шрифтов Google Fonts. У Consultup множество опций для форматирования: семейство шрифтов, размер, цвет, высота строки, межбуквенный и междустрочный интервал. Тема имеет несколько шаблонов страниц и несколько типов заголовков, а также разнообразную палитру цветов. С помощью Google API можно указать свое местоположение и создать собственные карты. Тема WordPress Consultup поможет повысить позицию сайта в поисковых системах. Откройте свой бизнес с помощью Consultup.

Рейтинг темы на оф. сайте: 🔥🔥🔥🔥🔥 98% (голосов: 14)

Посмотреть демо-сайт

Возможности темы

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

Разметка шаблона

Две колонки

Одна колонка

Три колонки

Шаблон на всю ширину

Настройки темы

Закрепленные посты

Стили для редактора

Настройки внешнего вида

Возможность установить свой логотип

Настраиваемая миниатюра

Настройки цветов

Произвольный фон

Перевод, поддержка языков

Поддерживает перевод

Поддержка языков справа-налево

Другие возможности

Скачать тему

У темы Consultup в официальном репозитории уже 227 тыс. скачиваний.

Посмотреть демо-сайт Скачать тему

Проверено! Никаких скрытых ссылок, вредоносного кода и пр.
Все ссылки на скачивание с официального каталога WordPress.org

Шаблоны страниц в WordPress — WP Magazine

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

Что такое шаблоны страниц

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

Выбор шаблона страницы в WordPress

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

Шаблоны страниц можно использовать более чем для одной страницы, а некоторые темы создают вполне специфические шаблоны, предназначенные для использования всего один раз. Как например шаблон избранного содержимого в стандартной теме Twenty Eleven:

Шаблон избранного содержимого в Twenty Eleven

Этот шаблон отображает прилепленные записи с их миниатюрами в небольшом слайдере. Страницу с таким шаблоном можно легко использовать вместо главной страницы сайта, изменив настройки в разделе Параметры → Чтение.

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

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

Шаблоны страниц в темах WordPress это отдельные файлы, которые могут находится как в корневой директории темы, так и в субдиректории. Название файла шаблона может быть любым, но мы советуем избегать зарезервированных префиксов, как например page-*.php и single-*.php, которые могут конфликтовать с другими файлами.

Для простоты рекомендуем использовать префикс template-*.php и/или хранить все шаблоны страниц в субдиректории, например:

• my-theme/templates/full-width.php
• my-theme/templates/front-page.php
• my-theme/templates/left-sidebar.php

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

<?php
/**
 * Template Name: My Custom Template Name
 */

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

После специального заголовка вы можете писать произвольный код PHP и HTML, который будет использоваться для вывода страниц с вашим шаблоном. Для соблюдения структуры сайта (заголовок, подвал, боковые колонки) за основу можно взять шаблон page.php вашей темы.

Для примеров советуем также просмотреть шаблоны contributors.php и full-width.php стандартной темы Twenty Fourteen, и front-page.php стандартной темы Twenty Twelve.

Дочерние темы

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

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

Когда не следует использовать шаблоны страниц

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

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

/* Спрятать боковую колонку на странице 123 */
body.page-id-123 #secondary {
    display: none;
}

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

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

WP Better Emails: HTML-шаблон для отправляемых писем.

WP Better Emails это плагин, который оборачивает отправляемые WordPress имейлы в красивый HTML-шаблон. Плагин применяет шаблон ко всем отсылаемым WordPress письмам – например, письма от плагина Subscribe to Comments тоже будут приходить, обернутые в определенный вами шаблон.

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

1. Распаковываем архив.

2. Копируем папку wp-better-emails в /wp-content/plugins/.

3. Заходим в админку блога на вкладку «Плагины» и активируем плагин.

Настроить плагин и HTML-шаблон вы сможете в «Параметрах\WP Better Emails«. Но прежде, чем заходить в настройки плагина убедитесь, что у вас включен визуальный редактор – без него плагин будет работать некорректно.

По умолчанию в предпросмотре шаблон выглядит так:

А в редакторе шаблон будет выглядеть так:

В шаблоне можно использовать следующие переменные:

%content%

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

Для предпросмотра шаблона нажмите на кнопку «Live Preview«:

Чтобы увидеть ваш шаблон с уже замененными переменными — отошлите тестовое письмо на указанный имейл:

В шаблоне по умолчанию я бы поменял следующие вещи:

%blog_description% – описание блога может быть большим и текст банально не влезет в одну строчку. Так что, либо уберите эту переменную или замените ее уже готовым текстом (на скриншоте в начале статьи я передвинул ее под название блога).

Иконка WordPress – она совсем не в кассу, лучше всего там прописать favicon.ico вашего блога. Просто зайдите в редактирование картинки и пропишите там путь до вашей иконки.

Впрочем, никто не мешает вам вообще удалить этот шаблон и заменить его чем-то своим, в стиле шаблона вашего блога. Или заменить табличную верстку письма на блочную. Например, можно сделать такой шаблон:

Код данного шаблона будет таким:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>%blog_name%</title>
  </head>
  <body>
    <div>
      <div>
	  <span> %blog_name% </span></div>
    </div>
    <div>
      <h2>%blog_url%</h2>
      <p>%content%</p>
      <p>С уважением,<br /> Администрация сайта %blog_name%</p>
      <div>
	  <small> Вы получили это письмо потому, что вы 
	  или кто-то другой указал этот email при регистрации на нашем сайте.</small></div>
    </div>
  </body>
</html>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html> <head> <title>%blog_name%</title> </head> <body> <div> <div> <span> %blog_name% </span></div> </div> <div> <h2>%blog_url%</h2> <p>%content%</p> <p>С уважением,<br /> Администрация сайта %blog_name%</p> <div> <small> Вы получили это письмо потому, что вы или кто-то другой указал этот email при регистрации на нашем сайте.</small></div> </div> </body> </html>

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

WP Better Emails
Автор плагина: Nicolas Lemoine
Рассматриваемая версия: 0.2.4 от 05.12.2011
Текущая версия: 0.4 от 05.10.2020
Совместимость с версией WordPress: 4.8 и выше
Активных установок плагина: 20 000+
Скачать плагин версии 0.4 (всего скачено 226 909 раз)

Как использовать wp.template, метод шаблона WordPress Underscore.js

Как и у многих агентств разработчиков, у нас несколько разных аудиторий, включая клиентов (текущих и потенциальных) и других разработчиков. Наша цель — обслуживать всю нашу аудиторию, обладающую широким спектром технических знаний. Даже если вы не являетесь профессиональным разработчиком, мы знаем, что многие из вас все еще изучают технологии, используемые на вашем сайте, и мы хотим помочь! Если мы расскажем о чем-то, чего вы не понимаете (или о чем-то, о чем вы хотели бы, чтобы мы рассказали, что касается WordPress, даже 101!), Сообщите нам об этом.Нет глупых вопросов.

Тем не менее, давайте погрузимся в кое-что интересное: шаблонный метод WordPress Underscore.js, wp.template.

Если вы еще не знакомы, wp.template () — это небольшая классная служебная программа для JavaScript, которая предоставляется вместе со скриптом «wp-util» ядра WordPress. По своей сути он использует метод Underscorejs .template () .

WordPress использует эту утилиту для загрузки шаблонов для всех представлений магистрали, но магистраль для ее использования не требуется.Сначала я продемонстрирую использование wp.template () с небольшим количеством jQuery для вывода некоторых данных JavaScript в шаблон HTML, а затем в качестве бонуса мы перестроим wp.template () как наш собственный. модуль с некоторыми дополнительными функциями.

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

По умолчанию для этого метода требуется тег скрипта с идентификатором tmpl-my-template-name . Поскольку весь WordPress использует этот метод / систему шаблонов, вам нужно убедиться, что вы правильно указали префиксы своих идентификаторов, чтобы не конфликтовать с другим шаблоном, который может быть загружен на страницу. Этот тег скрипта также должен иметь тип « текст / шаблон ».

Приступим:

Итак, теперь у нас есть соответствующий тег шаблона сценария, готовый для использования в функции PHP, с уникальным идентификатором tmpl-zao-item-status .Как видите, это не 100% стандартный HTML. Вы можете видеть, что мы используем переменные данных в стиле Mustache, а также логические блоки Underscorejs.

Из Кодекса:

WordPress определяет свои собственные теги интерполяции, используя _.template (options) , чтобы избежать несовместимости в некоторых конфигурациях PHP с включенным asp_tags . Синтаксис интерполяции, специфичный для WordPress, основан на синтаксисе шаблонов Mustache:

• Интерполированный (без экранирования): {{{}}}
• Интерполятор (экранированный): {{}}
• Оценить: <# #>

Важным моментом для понимания является <# и #> , который сигнализирует об открытии / закрытии необработанного вывода JavaScript, поэтому вы можете выполнять такие действия, как логические операторы (например, оператор if в приведенном выше примере).Вы также можете видеть, что мы используем неэкранированную интерполяцию, когда выводим параметры data.open и data.close , поскольку они будут содержать HTML, и мы не хотим, чтобы это экранировалось.

На этом этапе давайте подключимся к WordPress, чтобы увидеть это в действии.

Добавьте этот фрагмент в файл functions.php вашей темы или в собственный плагин:

Если вы перейдете на экран новой публикации или пост-редактирования, вы должны увидеть что-то вроде этого:

Это мало для нас.Нам понадобится настройка JavaScript, чтобы получить наш обновленный статус и обновить разметку статуса. Для упрощения мы просто подделаем запрос AJAX, установив небольшую задержку. Вы также можете использовать что-то вроде Zao Mock API для имитации некоторых запросов / ответов API.

JavaScript:

Комментарии к коду не требуют пояснений, но можно повторить:

1. Вызов wp.template () с идентификатором тега скрипта, который мы создали ранее минус префикс tmpl-
2. Подделать запрос API, установив задержку в одну секунду
3. Сгенерируйте объект данных и передайте его нашей новой функции шаблона, которая возвращает скомпилированный HTML
4. Возьмите этот HTML и замените существующий.

Теперь у нас есть вывод JavaScript в функции PHP, которую мы можем вставить в нижний колонтитул. У нас есть почти все, что нужно для работы, поэтому давайте обновим нашу анонимную функцию edit_form_after_title :

При этом мы должны увидеть, что статус изменился с желтого («Подождите…») на зеленый («Успех!»).

Надеюсь, этот базовый пример поможет вам начать использовать wp.template () в вашей собственной работе, но если у вас есть какие-либо вопросы, оставляйте комментарии ниже.

Полный вывод для этого фрагмента примера можно найти здесь.

Если вы все еще со мной: теперь, когда мы рассмотрели основы утилиты WordPress, вас может заинтересовать аналогичная утилита на основе wp.template () , которую я создал, _templatize. Этот сценарий немного упрощает описанные выше шаги, комбинируя получение шаблона и отправку данных, а также предоставляет функцию, которая позволяет создать шаблон, передав ему строку HTML (вместо привязки к тегу сценария tmpl- в dom ).В качестве бонуса вы можете увидеть, что приведенный выше фрагмент обновлен для использования здесь _templatize.

Продажа тем и плагинов WordPress

Вам сказали: «Вы можете продать это!» когда вы демонстрируете свои собственные темы и плагины WordPress? Хотя это лестно, выяснение того, как начать работу с премиальными темами WordPress и плагинами, может показаться слишком сложным для того, что может быть неопределенным вознаграждением.

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

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

Зачем продавать темы и плагины WordPress?

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

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

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

Как продавать темы WordPress

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

Шаг 1. Выберите нишу и создайте свою тему

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

Один из способов найти нишу, в которой может появиться место для новых тем, - это использовать такой инструмент, как Google Trends, чтобы понять, что люди ищут:

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

Шаг 2. Разработайте свою тему, используя принципы адаптивного дизайна

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

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

Шаг 3. Следуйте рекомендациям по программированию WordPress

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

WordPress делают все возможное, чтобы в этом отношении все были на одной странице. Справочник по коду охватывает CSS, PHP, JavaScript и HTML применительно к фреймворку WordPress.

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

Шаг 4. Включите соответствующие шаблоны тем

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

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

Шаг 5. Создание удобных для пользователя параметров темы Страница

Страница «Параметры темы» - это место, где пользователи могут копаться и настраивать части вашей темы. Без него пользователям пришлось бы самостоятельно вникать в кодирование CSS или PHP. Поэтому важно, чтобы эта страница была чистой, организованной и простой в использовании.

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

Шаг 6. Создание четкой документации по теме

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

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

Шаг 7. Выберите тематический рынок

Вы прошли через все предыдущие шесть шагов - теперь пора выбрать тематическую площадку, которая лучше всего соответствует вашим потребностям. Для многих разработчиков каталог WordPress.org остается лучшим бесплатным выбором на рынке.

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

Шаг 8: Оцените свою тему и начните продавать

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

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

Где продавать темы WordPress

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

1. Creative Market

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

Одно из преимуществ Creative Market - его гибкость. Вы не будете привязаны только к этой торговой площадке, поскольку сохраните за собой право продавать свой продукт на своем собственном сайте или в другом месте.Вы также будете получать 70% прибыли от своих тем и можете свободно устанавливать для них цену по своему усмотрению.

2. ThemeForest

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

Разница существенная. Неисключительные комиссионные за продажу могут превышать 55%. Если вы решите быть эксклюзивным продавцом на Envato, чем больше вы продаете, тем меньше становятся сборы.У этой торговой площадки есть несколько невероятных историй успеха, и она может стать хорошим местом для получения вашей первой крупной победы.

3. Кодер

Codester - это простая торговая площадка, которая может быть лучше для плагинов, но также предлагает дом для тем и других цифровых продуктов. Лучшее в Codester - это стандартная, повсеместная доля прибыли в размере 70% для всех.

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

4. TemplateMonster

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

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

5. Торговая площадка MOJO

MOJO Marketplace насчитывает 5,8 миллиарда пользователей. И хотя Mojo Marketplace устанавливает свои собственные цены на темы, вы можете получать фиксированные 50% от продаж для неэксклюзивных предметов или воспользоваться увеличивающимся масштабом эксклюзивных предметов. Как эксклюзивный продавец на MOJO Marketplace, чем больше вы продаете, тем больше зарабатываете.

Еще одно преимущество MOJO - это доступ к партнерам. Эта торговая площадка подключена к нескольким службам хостинга и предоставляет клиентам немедленный доступ к своим темам во время настройки хоста.

6. CSSIgniter

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

Если пользователи темы (вы ссылаетесь) решат продлить подписку, например, вы получите комиссию. Однако стоит отметить, что вам необходимо хранить в банке не менее 100 долларов в месяц, чтобы они могли выплачивать вам платеж через PayPal.

7. Каталог тем WordPress

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

Так как это бесплатный каталог, вам нужно включить сюда «облегченную» версию своей темы. Затем вы можете направить клиентов к полной премиум-версии, которую вам нужно будет разместить в другом месте. Это может быть немного сложнее, но это позволяет потенциальным клиентам опробовать вашу тему без риска.

На каком рынке вы должны продавать свои темы?

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

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

Узнайте больше с WP Engine и StudioPress

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

Однако вам не захочется идти в одиночку. WP Engine предлагает множество ресурсов для разработчиков и может помочь вам создать невероятный цифровой опыт для ваших клиентов, создав темы премиум-класса с помощью Genesis Framework. Наши планы предусматривают множество вариантов, поэтому вы, несомненно, найдете то, что вам подходит! Кроме того, бесплатно включены темы Genesis Framework и StudioPress.

Как преобразовать любой шаблон HTML5 в отличную тему WordPress

Что вы делаете, если не можете найти идеальную тему WordPress? Скорее всего, вы обратитесь к фреймворку темы. Однако время от времени у вас, вероятно, возникает такая мысль: «Мне нужно просто написать шаблон HTML5 и преобразовать его в тему WordPress».

Но это же несбыточная мечта, верно? Давайте будем реалистами.

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

Зачем конвертировать HTML-шаблон в тему WordPress?

Есть несколько веских причин, по которым вы можете захотеть взяться за этот проект.

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

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

Настройка среды разработки

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

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

• Локальный сервер для работы WordPress: Есть много вариантов, которые стоит рассмотреть. Мы подробно рассказали, как использовать XAMPP, MAMP, WAMP, VVV и Vagrant. Выберите один и заставьте его работать.
• Локальная установка WordPress: Лучше создавать тему WordPress, когда у вас активировано как можно меньше плагинов, поэтому либо создайте новую установку, либо используйте существующую установку после деактивации как можно большего количества плагинов.
• Репозиторий git для отслеживания ваших изменений: Хотя это не является технически требованием, это хорошая идея. Я использовал GitHub для отслеживания моих изменений и размещения готового продукта и Sourcetree для обслуживания простого в использовании графического интерфейса для git.

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

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

Шаг 1. Найдите шаблон или создайте собственный

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

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

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

Для этого урока я остановился на шаблонах Blog Post и Blog Home из Start Bootstrap.

Эти шаблоны бесплатны, минималистичны, легко переводятся в WordPress и созданы с помощью Bootstrap. Идеально.

После того, как вы выберете идеальные шаблоны или создадите собственный код, вы готовы перейти к следующему шагу: превращению шаблона в тему WordPress.

Шаг 2. Превратите шаблон HTML5 в тему WordPress

На этом этапе у вас должен быть шаблон HTML5. Он должен состоять из каталога, который включает файл index.html и подкаталоги для ресурсов CSS и JavaScript. Скопируйте весь каталог темы в каталог wp-content / themes / вашего сайта разработки WordPress.

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

• Переименовать index.html как index.php .
• Добавьте файл style.css с правильно отформатированным заголовком файла темы в каталог темы.

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

Если хотите, то сейчас самое время добавить снимок экрана темы в каталог тем.

После того, как вы внесете эти изменения, ваша тема WordPress будет доступна для активации, когда вы перейдете в Внешний вид> Темы в области администрирования WordPress. Идите вперед, активируйте свою тему WordPress и просмотрите интерфейс своего сайта.

На этом этапе ваша тема WordPress будет выглядеть некрасиво. Вот как выглядел мой сайт в этот момент:

Дело в том, что все ресурсы CSS и JavaScript вашей темы содержатся в каталоге тем, но шаблон HTML настроен на поиск файлов, относящихся к домену вашего сайта.Другими словами, ресурсы темы WordPress расположены в http://yourdomain.com/wp-content/themes/your-theme-directory/ , но шаблон вашего сайта ищет эти ресурсы в http: // yourdomain. com .

Очевидно, не находит. Итак, следующий шаг - добавить ресурсы CSS и JavaScript в нашу тему WordPress таким образом, чтобы WordPress их нашел.

Шаг 3. Правильно поставьте скрипты и стили в очередь

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

Теперь взгляните на ресурсы CSS и JavaScript, связанные с вашим шаблоном HTML. Ресурсы CSS будут добавлены в заголовок шаблона, а сценарии могут быть добавлены либо в заголовок, либо непосредственно перед закрывающим тегом тела.

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

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

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

• wp_head : должен быть добавлен непосредственно перед закрывающим тегом в index.php .
• wp_footer : необходимо добавить непосредственно перед закрывающим тегом в index.php .

Вот пример того, как должен выглядеть ваш файл index.php с добавленными тегами:

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

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

Шаг 4. Создание частей шаблона

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

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

В большинстве случаев вам нужно создать как минимум три части шаблона:

• header.php
• footer.php
• sidebar.php

Создать заголовок

Создайте новый файл в корневом каталоге вашей темы WordPress и назовите его header.php . Файл вашей темы header.php будет включать объявление типа документа, открывающий тег HTML, весь элемент заголовка, открывающий тег тела и навигацию по вашему сайту - короче говоря, все, что вы хотите, чтобы отображалось в верхней части каждой страницы твой сайт.

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

Когда у вас есть заголовок файла, скопируйте весь код заголовка из index.php в header.php . Затем удалите весь код заголовка из index.php и замените его функцией WordPress get_header () , например:

Создать боковую панель

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

Когда вы закончите, index.php должен начинаться с заголовка файла и get_header и заканчиваться get_sidebar , за которым сразу следует get_footer .Между этими тремя функциями должно быть основное содержимое вашей страницы.

Вот упрощенный взгляд на то, как index.php должен выглядеть на этом этапе:

Шаг 4: Добавьте петлю

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

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

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

Вот как выглядит цикл WordPress:

Конечно, комментарий в этом фрагменте кода должен быть заменен функциями WordPress для генерации контента и HTML-тегами для правильной визуализации этого контента.

Цикл должен учитывать страницы, отдельные сообщения, страницу блога, домашнюю страницу, страницы архива, а также страницы 404 и поиска. В результате собрать все в одном файле - непростая задача. По этой причине большинство общедоступных тем прерывают цикл из index.php и помещают его в несколько отдельных файлов с такими заголовками, как content.php , content-single.php , content-page.php и т. Д. вперед.

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

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

Углубленное рассмотрение цикла выходит за рамки данного руководства. Однако это тема, которую мы уже обсуждали ранее, и вы можете узнать о ней все, прочитав «Разработка WordPress для промежуточных пользователей: запросы и циклы».

Шаг 5. Замените содержимое файла шаблона функциями WordPress

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

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

• Взгляните на файлы шаблонов хорошо закодированной темы WordPress, такой как Twenty Sixteen, и скопируйте то, что они делают. Twenty Sixteen - это GPL, копирование - это нормально - даже приветствуется!
• Используйте Google, чтобы найти соответствующие функции в кодексе WordPress, выполнив поиск по таким словам, как «функция кодировки WordPress».

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

Настройка меню заголовка

Добавление меню заголовка - это двухэтапный процесс:

• Добавьте расположение заголовка в тему WordPress, добавив функцию в файл functions.php .
• Вставьте меню в header.php , стараясь дублировать классы и идентификаторы, используемые шаблоном HTML.

Вам нужно будет использовать функцию register_nav_menus , чтобы добавить место меню в ваш WordPress гем.В случае с примером темы WordPress я поместил следующую функцию в functions.php :

Затем вам нужно использовать функцию wp_nav_menu в header.php для создания вашего меню. Обратите особое внимание на классы и идентификаторы, применяемые к меню в вашем шаблоне HTML. Вам нужно будет продублировать эти селекторы, чтобы CSS шаблона был применен к вашему новому меню. К счастью, функция WordPress упрощает это. Вот как выглядит код, который добавляет меню в заголовок моей темы WordPress.php выглядит:

Обратите внимание, что я добавил два класса в само меню, nav и navbar-nav , а также идентификатор и два класса в контейнер меню. Я просто скопировал эти селекторы из HTML-шаблона. Это гарантирует, что меню подберет стили шаблона.

Настройка областей виджетов

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

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

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

Зарегистрировав область виджетов, мы можем добавить ее в sidebar.php с dynamic_sidebar . Функция dynamic_sidebar принимает идентификатор области виджета, который мы зарегистрировали с помощью register_sidebar в функциях .php .

Вот как выглядит код, добавляющий область виджетов в sidebar.php в моей теме:

Эти две функции работают вместе для создания области виджетов боковой панели моей темы. Область виджетов будет содержаться в div с классом col-md-4 . Кроме того, каждый виджет будет содержаться в div с классом и , и каждый заголовок виджета будет вложен в элемент заголовка четвертого уровня.

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

1. Создайте другую функцию register_sidebar с уникальным идентификатором для каждой области виджетов. Вы можете объединить все свои функции register_sidebar внутри одной пользовательской функции, а затем инициализировать их все сразу, используя ловушку widgets_init .
2. Используйте функцию dynamic_sidebar и уникальный идентификатор области виджета, чтобы загрузить область виджета в любом месте: на боковой панели, в верхнем или нижнем колонтитуле.

Следующие шаги…

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

Я следовал тому же процессу, чтобы создать эту тему WordPress:

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

Хотя вы, несомненно, довольны тем, чего достигли, есть большая вероятность, что вы не полностью удовлетворены тем, что создали.Следующие шаги, которые вы, вероятно, захотите предпринять, включают:

• Создание пользовательских шаблонов и циклов для отдельных сообщений, страниц, результатов поиска и шаблона страницы 404.
• Добавление раздела комментариев к вашим отдельным сообщениям и страницам.
• Создание пользовательских виджетов, соответствующих стилю виджетов, показанных в вашем шаблоне.