Как настроить шаблон wordpress

Создаем минимально возможную тему WordPress

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

Чтобы приступить к созданию темы, откройте на компьютере папку с WordPress. Например,

C:\Prog\UwAmp\www\wordpress\wp-content\themes

Создаем там папку для нашей темы. Например, назовем ее tema1. 

Откройте редактор кода Geany — он находится по адресу C:\Prog\Geany\GeanyPortable.exe 

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

Создание темы WordPress

/*
Theme Name: tema1
Theme URI: my-test-theme.example.com
Author: User 1
Author URI: user1.example.com
Description: Testing WordPress.
Version: 0.1
Text Domain: my-test-theme
*/

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

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

Все вместе теперь выглядит так: 

Стартовый файл темы WordPress

/*
Theme Name: tema1
Theme URI: my-test-theme.example.com
Author: User 1
Author URI:
user1.example.com
Description: Testing WordPress.
Version: 0.1
Text Domain: my-test-theme */

body {
margin: 0;
padding: 0;
}
section#header {
background: lightgray;
font-family: Verdana, sans-serif;
font-size: 400%;
border-bottom: solid 1px #cc0000;
margin-bottom: 30px;
padding-left: 20%;
width: 60%;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header ul li {
display: inline;
font-size: 10pt;
margin: 0;
padding: 0;
}
.content {
padding-left: 20%;
}
.content div.card {
border: solid 1px #cc0000;
margin-bottom: 3px;
width: 60%;
}
.content div.card img {
max-width: 100%;
}

Сохраняем наш файл:

Файл -> Сохранить как 

Выберите путь к папке с нашей темой: C:/Prog/UwAmp/www/wordpress/wp-content/themes/tema1/ 

Вбейте название файла — style.css (менять название нельзя, иначе его не увидит WordPress).

Выберите папку в левой части окна

В той же папке нужно создать еще один файл — index.php. Пока он будет пустым.

Теперь движок WordPress видит нашу тему, и мы можем ее включить. Для этого зайдите в админку. В меню слева: Внешний вид — Темы.

Среди тем появится tema1 (или другое название, если вы его меняли в файле). Наведите на нее курсор мыши и нажмите «Активировать».

Добавление нового функционала в дочернюю тему

В интернете можно найти много руководств по копированию и вставке кусков кода в файл темы functions.php.

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

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

Я уже создал изображение хедера и миниатюру, редактируя стандартное изображение в хедере темы Twenty Thirteen. Следующий шаг – загрузить их в дочернюю тему по адресу
inside/images/headers/folder .

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

functions.php:

<?php
function wpbdemo_custom_header_setup() {

add_theme_support( ‘custom-header’, array( ‘default-image’ => ‘%s/images/headers/circle-wpb.png’ ) );

register_default_headers( array(
‘caramel’ => array(
‘url’ => ‘%2$s/images/headers/circle-wpb.png’,
‘thumbnail_url’ => ‘%2$s/images/headers/circle-wpb-thumbnail.png’,
‘description’ => __( ‘Caramel’, ‘Caramel header’, ‘twentythirteen’ )
),
) );

}
add_action( ‘after_setup_theme’, ‘wpbdemo_custom_header_setup’ );
?>

Зайдите в консоли админки во Внешний вид » Header, и вы увидите изображение, которое мы задали использовать по умолчанию.

Вы можете вставить в файл functions.php любой пользовательский код, который только хотите.

Изменить страницу 404

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

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

<h1 class="page-title"><?php _e( 'Not Found', 'twentyfourteen' ); ?></h1>
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyfourteen' ); ?></p>

Замените текст в кавычках (не там, где twentyfourteen, а другой) на свой и получите видоизменённую страницу 404.

Категории, или рубрики сайта

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

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

Название рубрики будет отображаться на сайте.

Ярлык обязательно напишите латиницей. Это то, как рубрика будет называться в гиперссылках, в адресной строке браузера, в названиях файлов WordPress и в нашем коде. Давайте для примера создадим две рубрики — Рыбалка (впишите ярлык fishing) и Охота (впишите ярлык hunting).

Создайте побольше постов в каждой рубрике — это понадобится для теста.

Как привязать пост к рубрике во время его создания или редактирования:

Как быстро изменить рубрику поста:

Цветовая схема

Цветовая схема является неотъемлемой частью любого дизайна, и возможность ее изменения дает вам возможность персонализировать ваш сайт в значительной степени.

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

Откройте Внешний вид => Шрифты и цвета и выберите «Цветовые схемы» . Вы можете видеть, что Cloe Brooks поставляется с двумя стандартными цветовыми схемами, светлой и темной. Они полезны, если вы хотите быстро изменить внешний вид своего сайта и хотите, чтобы он сохранил исходные цветовые решения дизайнера.

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

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

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

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

После того, как вы настроили свою цветовую схему, установите ее в Внешний вид => Параметры темы => Настройка.

Все возможные способы: от простого к сложному

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

Где найти места, в которых можно редактировать главную страницу сайта, как и остальные другие страницы:

• админ панель;
• файловый менеджер хостинга;
• по ftp-клиент (для больших и серьезных объемов работ).

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

Стандартные настройки

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

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

Файл style.css — таблица стилей

Начинать редактирование главной страницы сайта стоит с файла style.css. Его найти достаточно просто. Сперва нужно войти в админ панель своего Вордпрес. В консоли находим вкладку Внешний вид и переходим к файлу style.css. Это достаточно большой текстовый файл.

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

Итак, строка Description отвечает за описание темы, там же указываются и версия, автор, тэги, которые будут использоваться дальше. Чуть ниже по файлу style.css находится список значений, использующихся во всех страницах сайта: заголовки, отступы полей, списки.

В WordPress после тэга body можно вносить свои изменения:

• цвет фона;
• размер, цвет, стиль шрифта;
• наличие прокрутки фона;
• форма и размер отображаемой страницы.

Например:

При этом значение «#2c2b2b» означает цвет, который будет иметь текст.

Все значения, которые определяются наподобие: background: url(images/sprite_master.png) используют для редактирования изображений. Это могут быть совершенно различные варианты png: от кнопок, до рисунков и фонов. Графические файлы должны быть загружены в каталог хранилища и уже оттуда берутся на них ссылки, вставляемые вместо «sprite_master.png» как в нашем примере.

К примеру, блок custom_header отвечает за создание рисунка в шапке главной страницы. Он может обозначаться как default_header.jpg. Методика его изменения описана выше. Допустимо изменить также и размер изображения. Например, если было 2500 х 1600 пикселей, то для эффективного отображения лучше поставить 1800 х 600.

Статическая страница

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

Метод 1: Как установить WordPress тему из WordPress.org

Тему, найденную на ресурсе WordPress.org скачать проще. Загружать файлы не нужно, процесс установки запускается из панели управления. Открыв панель, следует пройти по такой цепочке – внешний вид→темы→добавить. Кнопка «добавить» расположена на боковой панели. После этих действий откроется список тем, из него надо выбрать ту, которая должна быть загружена, и дальше весть процесс будет осуществлен автоматически.

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

Post Type Builder

Установить плагин

Проверенный временем инструмент WP. Post Type Builder был опубликован в 2015 году, а крайнее обновление состоялось 15 декабря 2018 года. Это универсальный плагин, который точно стоит своей цены. Он имеет широкий функционал, позволяющий реализовать любую задумку, касающуюся оформления статьи. Причем настройка выполняется в интуитивно понятно админ-панели, поэтому тратить много времени на освоение плагина в ВордПресс не потребуется.

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

• Дополнения. В комплекте поставляется 5 инструментов, добавляющих полезные функции на сайт, например, возможность отображения в статьях карты с определенными координатами.
• Гибкая настройка публикации. Вы сможете указывать, какие из стандартных функций, таких как заголовок, категория, авторы, теги, нужны вам. Это касается и таксономий — вы просто ставите и убираете галочки на нужных параметрах, чтобы настроить пост требуемым образом.
• Meta Box Builder. Позволяет подготовить заготовки для метаданных любого формата, чтобы при использовании шаблона в будущем, вам нужно было лишь заполнить форму перед публикацией статьи, а не настраивать ее заново.
• Конструктор шаблонов. Работает по принципу перетаскивания, поэтому мгновенно осваивается даже новичками в ВордПресс. Позволяет сделать любое количество заготовок, чтобы затем мгновенно применять их при оформлении новых статей.
• Генератор шорткодов. Работает полуавтоматически, экономя время вебмастера.
• Функция импорта/экспорта. Упрощает работу сразу с несколькими сайтами, если на них нужно использовать одни и те же шаблоны для оформления статей.
• Совместимость с плагином WPML. Обеспечивает возможность создания многоязычных статей — у пользователя будет возможность выбрать язык, на котором ему комфортно изучать информацию, нажав соответствующий флаг.

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

Как поменять фон сайта WordPress?

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

Обычно данный фрагмент располагается в самом начале файла style.css и в моем случае выглядит следующим образом (некоторые характеристики темы скрыты):

Скажу сразу, что в моем случае фон для сайта уже реализован с применением многократно повторяющейся (как по горизонтали, так и по вертикали) картинки, за что отвечает свойство:

1

background url(images/background.jpg) repeat;

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

В представленном фрагменте кода прописан путь (относительно директории с шаблоном) до изображения, которое используется в качестве фона. В свою очередь значение repeat отвечает за повторение изображения по горизонтали и по вертикали таким образом, чтобы данным изображением заполнялся полностью весь фон (аналогично свойству «замостить» в настройках рабочего стола Windows).

Справедливости ради стоит добавить, что существует возможность задать повторение изображения только по горизонтали (repeat-x вместо repeat) или только по вертикали (repeat-y вместо repeat).

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

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

Теперь рассмотрим как сделать однотонный цветной фон.

Делается в данном случае все крайне просто, нужно лишь прописать для класса body следующее свойство:

1

background #шестизначный_номер_цвета;

Для примера я взял цвет #123456, результат следующий:

Номер цвета можно подобрать с помощью палитры цветов Photoshop, а также с помощью онлайн-сервисов, которые не составит труда найти в интернете по поисковому запросу «палитра цветов html».

Не забудьте поставить перед номером цвета символ «#».

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

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

1

background url(путь к файлу изображения) no-repeat top fixed;

На примере своего сайта я реализовал и данный способ, вот скриншот:

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

Прописываем для body в style.css свойство:

1

background #123456 url(путь к файлу изображения) no-repeat top fixed;

Результат на скриншоте:

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

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

Чем заменить редактор тем

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

Есть три задачи, которые возникают перед вебмастером, для решения которых приходится обращаться к редактору тем: изменение CSS кода, добавление кода в перед/после тега head, добавление кода в файл function.php. К счастью, для всех этих задач есть альтернативы редактора тем, и необходимость изменять файлы темы пропадает.

Для того чтобы внести свой код CSS для изменения той или иной части дизайна, можно использовать встроенный в тему редактор CSS. Он находится в разделе “Внешний вид”, подразделе “Настроить”, в блоке “Дополнительные стили”. Здесь нужно просто вставить свой код и он применится на сайте. Можно менять существующие правила CSS, заданные темой, так как код, внесённый в этот редактор, будет приоритетнее, и перекроет CSS темы.

Для того чтобы добавить какой-то код до или посте тега head, можно использовать плагин Insert Headers and Footers или аналогичный. Он позволяет интегрировать код не только до или после тега head, но и в других местах сайта.

Для добавления кода в файл темы function.php также нет необходимости лезть в редактор темы и интегрировать код напрямую. Для этого можно использовать плагин My Custom Functions.

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

ТОП-10 бесплатных шаблонов

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

Avada

Минималистичная, универсальная тема WordPress с регулярными обновлениями. Есть русификатор. Рекомендуем ее для создания, дальнейшего администрирования магазинов, инфосайтов.

• Поддерживает адаптивный дизайн.
• Имеет удобную панель.
• Можно работать с Avada сразу же после ее установки. Дизайн чистый, можно менять оформление.

Nitro

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

Sydney

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

Allegiant

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

Riba Lite

Как упростить ведение блога, сделать процесс увлекательнее и разнообразнее? Попробуйте установить тему Riba Lite! Это идеальный вариант для тех, кто практикует создание текстового контента в таких жанрах, как путешествия, красота и здоровье, стиль жизни. Доступен большой выбор цветовых схем, поддержка версий для всех мобильных платформ. За счет использования Retina Ready получаем отличную производительность.

ColorMag

Если вы давно подыскивали хорошую тему для онлайн-журнала, портала новостей, попробуйте ColorMag. Все посты закрепляются на странице сайта как отдельные блоки. 100% кастомизация интерфейса вплоть до смены логотипа.

eStore

Клевый WooCommerce макет, который идеально подходит для создания онлайн-магазина. Совместим с плагинами Wishlist.

Ascent

Зачетная тема, которая выглядит симпатично на любом десктопе и мобильном устройстве. Имеет простой и минималистичный дизайн, работает с технологиями CSS, HTML 5.

Onetone

Шаблон сайта-одностраничника Onetone стал настолько популярным, что его установили себе десятки тысяч веб-мастеров. Позволяет организовать ресурс любой тематики. Создан с использованием CSS3, HTML5.

Awaken

Нет лучшего решения для «открытого журнала», чем Awaken. Благодаря ему, посетители вашего сайта смогут смотреть новости в удобном формате, оставлять комментарии. Тема привлекает сочным интерфейсом, удобными виджетами.

Прописать копирайт

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

За «ноги» сайта, как мы знаем, отвечает хранящийся в корне активной темы файл footer.php, и искать отвечающий за копирайт код следует именно в нём.

Например, тема flat-white вспомогательную информацию прячет в следующих строках этого файла:

<?php _e('- Powered by ', 'flat-white'); ?>
<a href="<?php echo esc_url( 'http://wordpress.org/'  ); ?>
" title="
<?php esc_attr_e( 'WordPress' ,'flat-white' ); ?>"><?php _e('WordPress' ,'flat-white'); ?></a>
<?php _e(' and ', 'flat-white'); ?>
<a href="<?php echo esc_url( 'http://invictusthemes.com/' ); ?>">
<?php _e('Invictus Themes', 'flat-white'); ?></a>