Как создать шаблон wordpress: 3 способа создать шаблон страницы в WordPress

Создать шаблон WordPress, Joomla в программе Artisteer самому не зная HTML

Азбука SEO  Анализ — Оптимизация — Продвижение

 Качественный недорогой хостинг

SEO ОПТИМИЗАЦИЯ

Настройка CMS

01 марта 2020

Программа Artisteer. Создание шаблонов сайта

В статье представлена программа Artisteer, в которой можно визуально создать красивый дизайн сайта без знания HTML и стилей CSS

для различных бесплатных популярных систем управления контентом (CMS), таких как Joomla, WordPress, Drupal, DotNetNuke, Blogger, Tumblr самостоятельно, в которой каждый сможет создать свой индивидуальный шаблон и экспортировать для выбранной системы управления контентом. Продвижение сайта, созданного в Artisteer, проходит без замечаний.

Многие желающие создать свой сайт ищут бесплатный шаблон Joomla, шаблон WordPress или другие варианты для бесплатных движков, но найденные варианты дизайна не полностью удовлетворяют, так как на вкус и цвет товарищей нет, плюс во многих заранее вшита открытая ссылка на изготовителя, что является минусом с точки зрения SEO оптимизации. Программа Artisteer позволяет самостоятельно создать шаблон Joomla, шаблон Wordpress и других бесплатных движков без знания Photoshop, Dreamweaver, языка HTML и стилей CSS. Без труда самостоятельно можно создать красивый дизайн и  экспортировать шаблон Joomla, шаблон Wordpress или в другую выбранную систему управления сайтом. Программа Artisteer в настоящее время является наверное единственным и лучшим инструментом для того, чтобы создать свой дизайн к множеству CMS (системам управления контентом) таких как Joomla, WordPress, Drupal, DotNetNuke, Blogger.

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

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

Программа Artisteer. Описание

Набор готовых исходников

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

Состав шаблона

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

Макет

Вкладка МАКЕТ является начальным этапом создания шаблона сайта, в которой задается расположение основных элементов (шапки, меню, блоков), ширины, стилей и количество колонок.

Стили страниц

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

Содержимое страниц (статьи, посты)

 Вкладка СОДЕРЖИМОЕ предназначена для редактирования стилей контента статей (показано на примере варианта блога): стили верхнего и нижнего колонтитулов статьи, текста, изображений, ссылок, таблиц, заголовков, цитат.

Главное меню

Горизонтальное, главное МЕНЮ. Редактирование расположения меню, стилей фона элементов меню, кнопок и пр.

Верхний колонтитул (шапка, header)

Вкладка ВЕРХНИЙ КОЛОНТИТУЛ содержит инструменты для редактирования шапки сайта. С помощью них можно поставить в шапку выбранное изображение как из коллекции Artisteer, так и собственные с компьютера, установить логотип, надпись, слайдер, различные эффекты и изменять ее размер и положение.

Вертикальное меню

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

Настройки и экспорт в Artisteer

Экспортировать готовый дизайн сайта в выбранный формат CMS: Tumblr, Joomla, WordPress, Drupal, DotNetNuke, Blogger. В окне экспорта ставим галочку АРХИВ и дизайн экспортируется в формате Zip, готовом для загрузки в соответствующую CMS. Загружаем архив в свой движок, устанавливаем этот шаблон и получаем готовый сайт со своим дизайном, который остается наполнять контентом.

Для того, чтоб в футере не показывалась ссылка на Artisteer в окне НАСТРОЙКИ экспорта открываем пункт СНОСКА и снимаем галочку Обратная ссылка на SMC (Joomla, WordPress и др. ) и Artisteer.

 

• Проверка позиций сайта в Яндекс и Гугл
• Как посмотреть код страницы сайта в Андроид

Популярное

Новости

Как сделать шаблон wordpress

3 способа создать шаблон страницы

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

В WordPress можно создавать страницы (page) и записи (post). Отличаются они тем, что записи: попадают в ленту на главной странице; для записей указываются категории; записи не могут быть древовидными, а страницы: используются для такого содержимого как «Обо мне», «Контакты», «Карта сайта»; не имеют категорий, а имеют древовидную структуру. Записи обычно предназначены для хронологической информации (по времени добавления), а страницы для древовидной структуры не зависимой от времени. Для примера, эта статья опубликована как «запись» в рубрике «Кодекс», а ссылки в меню шапки ведут на страницы: Функции.

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

Создание страниц в WordPress

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

• Способ 1: шаблон страницы через файл с произвольным названием (классический способ)
• Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)
• Способ 3: шаблон страницы через фильтр «template_include» (коддинг)
• Еще Примеры

Способ 1: шаблон страницы через файл с произвольным названием (классический способ)

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

Теперь при создании страницы в админ-панели в блоке «Свойства страницы» мы сможем выбрать «шаблон»:

С версии WordPress 4.7. такие шаблоны страниц можно создать для любого типа записи, а не только для page. Для этого дополните комментарии строкой: Template Post Type: post, page , где post, page — это названия типов записей к которым относится шаблон.

Преимущества:

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

Недостатки:

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

Как это работает:

Когда вы заходите в админ-панель на страницу редактирования записи древовидного типа, WordPress просматривает все .php файлы в корневой папке темы и в всех вложенных папках (просматривается один уровень) на наличие следующей строки (строка может располагаться где угодно и как угодно в файле):

Все файлы с подобными строками собираются и выводятся в выбор шаблона в блок «Атрибуты страницы».

При публикации страницы, в произвольное поле _wp_page_template записывается название файла шаблона или default , если шаблон не указан:

_wp_page_template = default
_wp_page_template = tpl_my-page.php

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

Поиском подходящих файлов шаблона занимается метод это делает метод WP_Theme::get_post_templates().

Локализация названия шаблона

Название задается в php комментариях, поэтому нет возможности перевести эту строку обычным способом: через функцию перевода, заключенного в теги <?php . ?> . Однако WP сам пытается перевести эту строку при выводе, используя подгруженные данные перевода. Таким образом, для перевода нам нужно как угодно добавить эту строку в список переводов темы. Сделать это удобнее всего сразу после заголовка — так всем будет понятно зачем нужен такой странный вызов функции переводов __() :

my-theme — это ID перевода — параметр Text Domain: , который указывается в заголовках темы и при подключении файла перевода, см. load_theme_textdomain().

Способ 2: шаблон страницы через файл с конкретным названием (иерархия файлов шаблона)

Этот способ подразумевает создание файла в папке темы с конкретным названием: page-<слаг-страницы>.php или page-.php . Подробнее смотрите по этой ссылке.

При создании страницы ей устанавливается ярлык (слаг, альтернативное название). Он используется в УРЛ страницы. И его можно изменить:

Изменение слага страницы

Для создание шаблона этим способом, вам нужно узнать слаг страницы и создать файл в папке темы. Допустим, наш слаг как на картинке равен contacts , тогда создадим в теме файл page-contacts.php . и заполним его нужным кодом (можно скопировать содержимое из файла шаблона page.php и отредактировать под себя). Все, теперь при посещении страницы мы должны увидеть новый шаблон. Аналогично можно взять ID (пусть 12) страницы и создать файл page-12.php .

Достоинства:

Нет необходимости заходить в админ-панель и устанавливать файл шаблона. Шаблон начинает работать сразу после создания файла. Удобно при разработке.

Недостатки:

Шаблон создается только для одной, конкретной страницы. Зависит от слага страницы, если он изменится шаблон работать не будет. Если использовать ID, то зависимость от слага пропадает, но становится непонятно в файла темы, к какой странице относится шаблон (если несколько шаблонов с ID).

Практически бесполезен при написании шаблонов, а тем-более плагинов. Его можно использовать, когда правишь свой сайт, в котором слаг или ID страницы известны заранее.

Как это работает:

WordPeress подбирает какой файл использовать в следующем порядке (файлы должны быть в корне темы):

• <любое_название>.php (когда используется шаблон страницы)
• page-<ярлык_записи>.php
• page-.phpзаписи>
• page.php
• singular.php
• index.php

Способ 3: шаблон страницы через фильтр «template_include» (коддинг)

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

Рассмотрим на примере:

Такой код нужно разместить в файл темы functions.php , в плагин, или подключить как-то еще.

Как видно из примера во время фильтра template_include уже работают условные теги, установлены глобальные переменные: $wp_query , $post .

Достоинства:

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

Как создать свой шаблон в WordPress?

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

Навигация по статье:

Для чего вам может это понадобится?

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

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

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

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

Шаг 1. Скачиваем файл шаблона к себе на компьютер

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

1. Подключаемся к нашему сайту и заходим в папку с активной темой:

Шаг 2. Вносим необходимые правки

После того, как файлы скачаны, переходим к следующему этапу, это переименование этих файлов и внесение в них определенных правок.

1. 4. Переименовываем файл шаблона WordPress и открываем его в каком-либо редакторе кода типа Sublime Text, Notepad++ или любом другом.
2. 5. Первое, что нам нужно сделать, это внести правки в описание, которое находится в самом верху.

Создаем простой шаблон для WordPress за 7 шагов

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

Популярное программное обеспечение для ведения блогов и создания сайтов благодаря поддержке тем (шаблонов) позволяет быстро настроить внешний вид сайта или блога по вашему вкусу. Темы состоят из двух основных элементов (index.php и style.css), содержащих информацию о структуре и облике сайта. «Скелеты» этих элементов, которых хватит для грубого построения собственной темы WordPress, можно скачать здесь. Важный дополнительный элемент носит название loop.php. Этот кусочек кода отвечает за адаптацию поста под тему.

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

1 Создаем новую папку для темы

Обратитесь к выделенному вам веб-серверу по файловому протоколу ftp или через веб-сервис для работы с файлами вашего провайдера. Перейдите к директории, в которой установлен WordPress, и найдите папку «\wp-content\themes\». Создайте в ней вложенную папку для вашей собственной темы с любым произвольным названием. Вы также можете установить WordPress локально на свой ПК. Под Windows воспользуйтесь для этого программным пакетом XAMPP, пользователи Apple Mac могут обратиться к утилите MAMP, предварительно скачав ее из Mac App Store.

В папке для вашей темы создайте два пустых текстовых файла и присвойте им имена «index.php» и «style.css».

2 Планируем структуру темы

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

3 Наполняем файл «index.php»

Скачайте архив с учебными файлами, извлеките из него «HTML-chip.txt», откройте этот фаил в текстовом редакторе и скопируйте содержимое в свой файл «index. php».

4 Наполняем файл «style.css»

Теперь откройте файл «style.css». Скопируйте в него содержимое файла «stylecss-chip.txt» или же вручную введите код, представленный на скриншоте ниже. Замените наши сведения об авторе и веб-страницы на свои и настройте цвета по своему вкусу.

5 Тестируем тему в WordPress

Теперь войдите в панель управления WordPress, указав при этом имя пользователя и пароль администратора. На Консоли в разделе «Внешний вид | Темы» вы увидите свою тему. Ее можно протестировать, нажав кнопку «Просмотреть». Однако смотреть пока еще особо не на что, поскольку в ней отсутствуют графические элементы.

Как создавать шаблоны с многоразовыми блоками в WordPress?

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

Создание многоразовых блоков

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

• Убедитесь, что у вас включен редактор Гутенберга для создания сообщений. Это настройки по умолчанию, если вы не установили плагин Classic Editor.
• Перейдите в меню «Сообщения> Добавить», чтобы открыть редактор блоков Гутенберга.
• Вам не нужно давать никакого названия. Просто щелкните значок + и добавьте блок «Заголовок».
• Добавьте текст-заполнитель внутри заголовка, например «Это первый заголовок».
• Нажмите на кнопку с тремя точками и выберите «Добавить в блоки многократного использования».

Добавить в повторно используемые блоки

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

Сохранить многоразовый шаблон

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

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

Преобразование многоразового блока в шаблон

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

• Щелкните значок ⊕ в правом верхнем углу редактора.
• Прокрутите вниз до раздела «Многоразовые» и нажмите ссылку «Управление всеми повторно используемыми блоками».

Управление многоразовыми блоками в WordPress

• WordPress предложит вам подтвердить выход из редактора сообщений, поскольку вы не сохранили содержимое публикации. Нажмите кнопку «Выйти», чтобы подтвердить выход.

Подтвердите выход из редактора

• Это перенесет вас в раздел скрытых многоразовых блоков, где вы сможете просмотреть все ранее созданные повторно используемые блоки на своем сайте.
• WordPress сохраняет повторно используемые блоки как пользовательский тип записи «wp_block». По сути, это означает, что ваш многоразовый блок — это сообщение, которое может содержать различные элементы блока, такие как обычное сообщение или страница на вашем сайте.

Редактировать многоразовый блок для создания шаблона

• Наведите указатель мыши на повторно используемый блок, который вы создали «Повторно используемый шаблон 1», и нажмите ссылку «Редактировать».
• Это вернет вас обратно в редактор Gutenberg, где вы сможете добавлять элементы в свой шаблон.

Добавление элементов в шаблон

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

Добавить блоки для создания шаблона

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

Вставка шаблона и редактирование содержимого

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

Преобразование шаблона в обычный блок

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

Редактирование содержимого шаблона как отдельного элемента

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

Предложение SEO: Оптимизируйте свой сайт с помощью специальной 14-дневной бесплатной пробной версии SEMrush Pro.

Альтернативный вариант с использованием группы

Если описанный выше метод для вас длительный, есть альтернативный вариант.

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

Создать групповой многоразовый блок

• Теперь нажмите кнопку с тремя точками и выберите «Добавить к многоразовым блокам».

Добавить многократно используемый групповой блок

• Укажите имя, например «Повторно используемый шаблон 2», и нажмите кнопку «Сохранить», чтобы сохранить повторно используемый блок.

Сохранить многоразовый шаблон с групповым блоком

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

Заключительные слова

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

Похожие записи

Прокрутить вверх

Как разработать собственную тему WordPress

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

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

Введение в разработку темы WordPress

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

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

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

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

Мы проведем вас через процесс создания вашей первой темы. Для начала вам понадобятся две вещи:

• Ваш собственный сайт WordPress
• Качественный хостинг

Вам также будет полезен опыт работы с локальными промежуточными средами, поскольку вы будете использовать их для создания своей темы. Некоторое понимание CSS и PHP также будет полезно (если не обязательно).

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

Что такое стартовая тема (и почему вы должны ее использовать)

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

Существует множество отличных тем для начинающих, включая Underscores, UnderStrap и Bones (и это лишь некоторые из них).

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

Как разработать свою первую тему WordPress (за 5 шагов)

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

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

Шаг 1. Настройка локальной среды

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

Есть много способов создать локальную среду, но мы будем использовать Local. Это быстрый и простой способ бесплатно установить локальную версию WordPress, совместимый как с Mac, так и с Windows:

Чтобы получить запущен, выберите бесплатную версию Local, выберите свою платформу, добавьте свои данные и загрузите установщик. Когда установка будет завершена, вы можете открыть программу на своем компьютере.

Здесь вам будет предложено настроить новую локальную среду:

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

Шаг 2. Загрузите и установите начальную тему

Как и большинство начальных тем, с Underscores очень легко начать работу. Фактически, все, что вам нужно сделать, это зайти на веб-сайт и назвать свою тему:

Если хотите, вы можете нажать Дополнительные параметры , чтобы настроить базовую тему дальше:

Здесь вы можете заполнить дополнительную информацию, например имя автора, и дать описание темы:

Также есть _sassify! , который добавит файлы Syntactically Awesome StyleSheets (SASS) в вашу тему. SASS — это язык предварительной обработки для CSS, который позволяет использовать переменные, вложение, математические операторы и многое другое.

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

После установки темы вы можете предварительно просмотреть свой сайт, чтобы увидеть, как он выглядит. Это очень просто прямо сейчас, но это не будет иметь место в течение долгого времени!

Шаг 3: Узнайте о различных компонентах темы WordPress

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

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

Например, header.php используется для создания заголовка, а comments.php позволяет отображать комментарии.

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

Например, если вы посетите URL-адрес http://example.com/post/this-post , WordPress будет искать следующие файлы шаблонов в следующем порядке:

1. Файлы, соответствующие слагу, например this-post
2. Файлы, соответствующие идентификатору сообщения
3. Общий файл одиночного сообщения, например single.php
4. Файл архива, например archive.php
5. файл index. php

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

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

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

Получите содержимое, доставленное прямо в ваш почтовый ящик

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

Шаг 4. Настройка темы

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

Добавление функциональности с помощью «хуков»

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

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

• wp_head() — Добавлено в элемент в header.php . Он включает стили, сценарии и другую информацию, которая запускается сразу после загрузки сайта.
• wp_footer() — Добавлено в footer. php прямо перед тегом . Это часто используется для вставки кода Google Analytics.
• wp_meta() — обычно появляется в sidebar.php для включения дополнительных скриптов (таких как облако тегов).
• comment_form() — Добавлено в comments.php непосредственно перед закрывающим тегом

 a {
цвет: королевский синий;
} 

 a {
красный цвет;
} 

 a:visited {
цвет: фиолетовый;
}