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

WordPress темы, что это от куда их брать

Шаблон для вашего сайта на WordPress можно получить несколькими способами:

• выбрать из общедоступных тем в каталоге wordpress.org;
• купить премиум тему у разработчиков и распространителей;
• заказать собственную тему у программистов;
• создать шаблон самостоятельно.

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

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

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

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

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

Как выбрать и как установить тему WordPress

К статье прилагается видео урок по установке и настройке темы WordPress.

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

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

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

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

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

Темы можно просматривать онлайн и установить к себе в «движок». После установки опять переходим во вкладку «Темы» и найдя скачанную ранее нажимаем активировать.

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

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

Перейдя во вкладку меню «Внешний вид»/ «Настроить» нам откроется наш сайт и с левой стороны от него настройки темы, которые зависят от самой темы и ее функционал может отличаться. Здесь можно по предложенным параметрам, которые зависят от самого шаблона, настроить некоторое отображение в «реальном времени»:

• описание;
• настроить название сайта;
• шрифты;
• ширину экрана;
• корректировать разметку страниц, её цвет;
• навигацию и т.д.

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

Однако такой подход имеет существенный недостаток. При следующем обновлении темы все настройки часто просто «слетают», так как обновление темы перезаписывает файлы таблицы стилей по новому.

В WordPress существует относительно простой механизм, позволяющий избежать этого недостатка — дочерные темы (Child Theme)

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

Почему надо использовать дочерную тему?

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

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

Как создать дочерную тему Вордпресс

Способ 1. С подключением стилей через правило @import

Для создания дочерной темы достаточно создать файл стилей style.css и подключить к нему стили родительской темы с помощью правила @import.
В качестве примера, я создам дочерную тему для темы Twenty Twelve, входящей в «базовый комплект поставки» WordPress. Перво-наперво, у себя на компьютере я создаю новую папку для дочерной темы. Назову ее: / twentytwelve-child/.
В этой папке я создаю файл с именем style.css и заполняю файл информацией, как показано ниже:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://divitheme.space */ @import url("../twentytwelve/style.css"); /* ниже устанавливайте свои настройки элементов темы*/

Строки Theme Name (Имя темы) и Template (шаблон родительской темы) — обязательные, строки Description (Описание), Author (Автор), Author URI (сайт автора) необязательные, и по усмотрению создателя быть им в теме или нет.
Важной частью этого файла являются строка: @import url("../twentytwelve/style.css"); Эта строка идентифицирует родительскую тему и импортирует CSS из нее. Когда ты будешь создавать «дочку» — то должен убедиться, что путь к файлу CSS твоей родительской темы является правильным, и что параметр «Template:» правильно определяет имя твоей родительской темы. Если ты используешь другую тему - настрой соответствующие названия для другой темы.

Обрати внимание — все названия должны быть чувствительны к регистру: название с большой буквы и название с маленькой - это разные названия!

Так как папка моей материнской темы называется «twentytwelve», и она с маленькой буквы, следовательно @import URL учитывает этот фактор.

Способ 2. С подключением стилей кодом в function.php

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

В этом способе для дочерной темы создаеться два файла: в дополнение к style.css в папке дочерной темы нужно создать файл function.php и вставить туда следующий код:

В этом способе запись @import url(‘../twentytwelve/style.css’); в файле style.css дочерной темы совершенно не нужна и файл style.css будет иметь следующий вид:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://divitheme.space*/ /* ниже устанавливайте свои настройки элементов темы*/

Как активировать дочерную тему

После того, как я создал папку дочерной темы и файл style.css в ней, я могу загрузить на сервер и активировать в WordPress вновь созданную дочерную тему. Загрузка и активация дочерней темы ничем не отличается от загрузки и активация обычный темы. Загрузить ее можно через страницу «Внешний Вид» -> «Темы» –> «Добавивть тему» в админпанели WordPress.

Обрати внимание, что перед тем, как загрузить дочерную тему, необходимо сначала создать ZIP-архив ее папки. Это можно сделать с помощью практически любого архиватора.

Да и еще, при активации дочерной темы также убедись, что у тебя в папке тем WordPress загружена родительская тема (в моем примере это тема «Twenty Twelve»).

Модифицикация CSS темы

Теперь я создал дочерную тему для Twenty Twelve и загрузил ее в WordPress. Так как в дочерной теме я импортирую CSS родительской, то при активации дочерная тема будет выглядеть так же, как и родительская. Для настройки своей темы я могу добавить любые изменения в файл CSS дочерной темы ниже строки @import... В этом случае вся новая информация CSS из дочерной темы добавляется после загрузки CSS родительской темы, и потому «дочерная» CSS в выдаче находится ниже CSS из родительской темы, а это значит, что все новые стили CSS будет перезаписывать исходные.
Например, предположим, что в моем примере я хочу изменить заголовок сайта. Сейчас шрифт «жирный» и серый, а я хочу сделать его тоньше и красным. Я могу добавить соответствующую CSS к дочерной теме в файле style.css следующим образом:

/*
* Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://divitheme.space */ @import url("../twentytwelve/style.css");

/* ниже устанавливайте свои настройки элементов темы*/

Site-header h1 a {color: #FF0000; font-weight: 300;}

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

Заходим в административную панель сайта. Переходим в раздел меню “Внешний вид/Темы”. Жмём на кнопку добавить новую.

В поиске набираем название искомой темы, в нашем случае это «Aldehyde». Кликаем на кнопку “установить”, а затем “активировать”. После этого новая тема заработает. Теперь нам нужно настроить её под себя.

Настройка темы на примере шаблона «Aldehyde».

Для того чтобы приступить к настройке темы или шаблона необходимо перейти в меню к пункту “Внешний вид” и кликнуть по кнопке «Настроить».

В разделе Header settings (Настройки шапки):

• в подпункте “title, tagline & logo”необходимо добавить название, логотип и иконку сайта.
• в подпункте “social icons” устанавливаем социальные иконки. Здесь необходимо указать информацию в виде ссылок на соц. сети владельца сайта.
• далее идёт подпункт “изображение заголовка”. Здесь меняется изображение фона шапки.

Во втором разделе Design and layout (Дизайн и оформление) можно выполнить настройку дизайна и макета сайта. В этом разделе можно установить желаемое отображение контента в блоге (одна или несколько колонок). Помимо отображения контента раздел позволяет активировать или отключить на некоторых страницах или даже на всем сайте отображение боковых колонок. Еще в этом разделе можно применять различные таблицы стилей и устанавливать информацию в подвале сайта.

Раздел Design and layout содержит следующие подпункты:

• Blog layout – оформление ленты блога
• Sidebar layout – включение и выключение сайдбара (боковой колонки)
• Custom CSS – правка CSS стилей шаблона для продвинутых пользователей.
• Custom Footer Text – Добавление текста в подвал сайта.
• Theme Skins – выбор цветовой схемы шаблона.
• Цвета. Раздел позволяет выбрать цвет и фон имени и описания ресурса.
• Веб-шрифты Google. Раздел поможет выбрать различные шрифты от компании Google.
• Фоновое изображение. Тут можно закачать необходимое фото или картинку для фона.

В следующем разделе именуемым Main Slider (Основной слайдер) можно выбрать подходящие для него настройки. Но в первоначальной стадии он не является нужным, поэтому не рекомендуется пока обращать на него особое внимание. К недостаткам основного слайдера можно отнести высокую загруженность ресурса. Более того этот компонент можно по праву называть противником мобильных версий сайтов.

Затем идёт раздел Custom showcase (Пользовательская витрина). Здесь вы можете красиво оформить 4 блока с ссылками на важные страницы вашего сайта.

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

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

Настройка отображения и вида меню.

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

1. Необходимо дать меню имя и кликнуть по кнопке «Создать».
2. Добавить туда самые необходимые страницы верхней степени.
3. В настройках такой страницы использовать текст ссылки для последующего его отображения.
4. Необходимо поставить или убрать галочку в пункте автоматического добавления страниц верхней степени.
5. Выбрать место для отображения меню на сайте. Данная тема поддерживает два меню в шапке.

26 Фев 2017

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

Плейлист «Как создать сайт на WordPress»

TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ВИДЕО

В административной панели WordPress зайдите в разделы «Внешний вид» ⇒ «Темы». Именно здесь настраивается внешний вид вашего сайта. По умолчанию в WordPress установлено пять бесплатных тем. Если предложенные темы вас не устраивают, можно загрузить много различных тем прямо из раздела «Темы». Для этого нажимаем «Добавить новую тему»:
Здесь можно загрузить тему для своего сайта. Доступны пять функций поиска тем: избранные, популярные, свежие, любимые и фильтр характеристик:
Фильтр характеристик это расширенный поиск тем в директории wordpress.org по заданным параметрам. Отметьте чекбоксы, которые вас интересуют, и нажмите «Применить фильтры». Например, я хочу синюю тему с гибким дизайном и с миниатюрами записей. Отмечаю соответствующие чекбоксы и нажимаю «Применить фильтры». По заданным параметрам доступно 166 тем. Одну из них я могу установить:
Я рекомендую установить базовую тему, которая называется Responsive (CyberChimps.com). На моем блоге установлена имена эта тема. Внешний вид сайта редактируется без каких-либо проблем. Абсолютно все параметры можно настроить под себя.

Через поиск находите подходящую тему и нажимайте «Установить»:
Затем непосредственно в разделе «Темы» нажимаете «Активировать»:
Все. Тема установлена на наш сайт. Теперь переходим к ее настройке:
Прежде, чем заняться настройкой, хочу подчеркнуть, что все темы разные. Каждая из них имеет свой функционал и поддерживает те или иные опции. То есть, темы одна на другую не похожи.

Сейчас я покажу вам, как легко настраивать темы WordPress на примере Responsive. Первым делом вам необходимо опубликовать на сайте главную страницу. По умолчанию в данной теме на главной странице отображаются последние записи блога. Если у вас не новостной сайт, главную страницу желательно сделать статической. Это положительно скажется на ранжировании сайта. После публикации главной страницы, переходим в разделы «Внешний вид» ⇒ «Настроить». Ищем пункт «Статическая главная страница» (последняя настройка) и под надписью «На главной странице отображать» переключиться с «Ваши последние записи» на «Статическую страницу». Напротив надписи «Главная страница» выберите «Главная» (эта та страница, которую вы опубликовали) и нажмите «Сохранить и опубликовать».
Далее разберем каждый пункт настройки по отдельности.

Свойства сайта – здесь продублированы название и описание сайта, которые мы уже добавили в разделе «Настройки» ⇒ «Общие».Элементы темы – здесь можно включить или отключить 4 опции: отключить список навигатора, отключить кнопку Призыв к действию, включить минификацию css, включить заголовок блога:Главная страница – этот пункт нам не нужен. Здесь настраивается пользовательская главная страница. Поскольку главная у нас другая, снимаем (или закрываем пункт, если галочка не стоит) галочку с чекбокса под названием «Включить пользовательскую главную страницу»:Макеты по умолчанию – здесь настраивается макет статической страницы по умолчанию. Ничего не меняем, поскольку по умолчанию включен правый сайдбар, это то, что нам нужно. В правом сайдбаре будут располагаться различные навигационные материалы. Правый сайдбар жизненно необходим сайту, благодаря которому пользователю будет легче найти нужную информацию. В дальнейших уроках я более подробно расскажу, как оформить и наполнить правый сайдбар, это действительно важно.Стили CSS и Скрипты – данные пункты настройки рекомендую не заполнять. Если нужно исправить стили или добавить скрипт на сайт, лучше всего это сделать через редактор.

Настройки подвала – здесь нужно убрать галочку с чекбокса «Отображать ссылку работает на WordPress»:Цвета – здесь настраивается цвет фона сайта:Социальные иконки – если вы хотите, чтобы в шапке сайта отображались иконки на популярные соц. сети, заполните соответствующие поля:Изображение заголовка — нажав кнопку «Добавить», можно загрузить изображение в шапку сайта, в данной теме оформления рекомендуется заголовок размером 300 × 100 пикселей:Фоновое изображение – данный пункт настроек для тех, кто хочет загрузить фоновое изображение, а не использовать цвет фона. Гибкие настройки позволяют корректно вставить любое изображение. Поиграйте с настройками, для каждого изображения нужен индивидуальный подход.
Меню – в данном пункте настраивается меню сайта. Настраивать меню намного удобней через раздел «Внешний вид» ⇒ «Меню».Виджеты — в данном пункте настраиваются виджеты сайта. Настраивать виджеты намного удобней через раздел «Внешний вид» ⇒ «Виджеты».На этом настройка внешнего вида сайта не заканчивается. В следующих уроках мы разберем, как правильно оформить и настроить фон сайта, меню сайта, сайдбар справа, верхний и нижний виджеты, подвал сайта. Все эти параметры формируют дизайн сайта, от которого напрямую зависит популярность вашего блога.

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

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

Так вот, чтобы у каждого, кто переходит на ваш блог/портал «радовался глаз» и благодаря этому человек задерживался бы на страницах, необходимо настроить шаблон, сделать его красивым, удобным…

Какие варианты решения данной задачи существуют

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

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

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

Это первый вариант — сделать заказ!

Второй вариант — попробовать самостоятельно.

Как именно это провернуть, я расскажу в сегодняшнем выпуске.

Третий вариант — купить готовый шаблон! Но его тоже можно редактировать и настраивать.

Как настроить тему wordpress

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

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

Как бы то ни было сейчас все разберем.

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

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

Итак, откройте поисковик и введите запрос «шаблоны вордпресс». Мне нравится один очень популярный сайт:

http://wp-templates.ru

Перейдите на него, нажмите на кнопку демо под понравившейся темой и посмотрите, как он на вид. Чисто, упал глаз на него или нет. Если да, то смело кликайте по кнопке «Скачать».

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

Опять же, перейдите в административную панель -> внешний вид -> темы -> добавить новую -> теперь найдите любой шаблон, наведите курсор мыши и нажмите просмотреть.

Всё, больше лишних действий не будет. Как можно было заметить, мы работали только со вкладкой «Внешний вид».

Настройка шаблона (темы) wordpress под себя

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

Выше я упомянул про виджеты. Так вот, как же установить тот или иной виджет в сайдбаре?

Все, что возможно разместить в сайдбаре выполняется через виджеты.

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

Что можно расположить в боковой панели?

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

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

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

Как установить виджет?

Наведите курсор мыши на вкладку «Внешний вид», нажмите на «Виджеты».

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