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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://wp-templates.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сегодня, я хотел бы поговорить о способах установки тем (themes) на wordpress. Ведь после создания блога и его базовой настройки, нам обязательно нужно сделать ресурс не похожий на другие или с какой-то своей изюминкой, а как это сделать? Конечно установив тему. Но она, по возможности, должна быть уникальной, хотя можно воспользоваться и стандартными шаблонами вордпресс или темами, которые можно найти в сети интернет, в свободном доступе, а также шаблон для блога можно купить. Но самые лучший вариант — это уникальный шаблон, которого нет еще ни у кого, ведь тема нашего сайта — это его лицо, которое посетитель запоминает и может узнать наш блог среди других. А когда она стандартная или часто используемая на многих ресурсах, ваш ресурс будет теряться в этой толпе блогов или сайтов. Поэтому, давайте рассмотрим способы установки тем на wp .

1 способ: Установка темы wordpress, с помощью поиска в вордпресс.

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

С помощью поиска подобрать шаблон довольно просто, достаточно указать нужные вам критерии и нажать на кнопочку «найти темы». С этим проблем не должно возникнуть. После нажатия появятся страницы с темами, которые должны соответствовать вашим критериям. Для каждой будут описания, правда не на русском языке, но сейчас web-браузеры умеют переводить, поэтому проблем, также не должно быть. Еще у каждого шаблона будут две возможности, установка и просмотр. То есть перед тем, как окончательно решиться установить тему на wordpress, у вас будет возможность ее «просмотреть» и более подробно изучить. А после этого, принять решение — устанавливать или нет.

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

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

Вот так просто, можно установить тему для вордпресс , используя поиск.

2 способ: Установка темы wordpress, с помощью загрузки ее из админпанели водпресс.

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

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

А также, в этой вкладке («установить темы») можно посмотреть избранные, свежие и недавно обновленные шаблоны, предлагаемые wordpress.

3 способ: Установка темы wordpress, с помощью загрузки файлов темы на хостинг.

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

1) Установка темы wordpress на локальный сервер : Для установки на сервер, необходимо папку темы скопировать в папку themes. Найти ее можно по следующему пути: C/Webservers/home/localhost/www/ваша папка с установленным движком wp/wp-content/themes . Копируем папку шаблона в папку themes и перезапускаем локальный сервер . После этого, идем в админку wordpress и во вкладке «управление темами», находим наш шаблон. И нажимаем «активировать». Шаблон для вордпресс на локальный сервер установлен.

2) Установка темы вордпресс на хостинг . Здесь зависит от вашего хостинга, который вы используете и ваших предпочтений. На хостинге, который я использую, можно загрузить в нужную папку архив и уже там его распаковать. И после этого, достаточно перейти в «управление темами» и активировать ее. Все очень просто. Но более распространенный способ — это воспользоваться FTP-клиентом, например FileZilla. Это бесплатный FTP-клиент для загрузки или скачивания с FTP-серверов.

Итак, для загрузки темы на хостинг , нужно запустить программу и в поля хост, имя пользователя, пароль и порт вписать ваши данные, предоставленные для работы с FTP, при . После заполнения всех необходимых полей нажимаем на кнопку «быстрое соединение». В правом окне, под названием «удаленный сайт» ищем папку themes. Она должна находится по следующему пути: Ваш домен.ru/public_html/wp-content/themes .

Открываем папку и сюда копируем папку с темой. Я, это делаю просто перетаскиванием. То есть, просто перетаскиваю папку с шаблоном в папку themes в правом окошке FTP-клиента.

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

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

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

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

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

Продолжая цикл статей рубрики « », ниже подробно рассмотрим, как установить и настроить тему для WordPress.

1. Активация предустановленных тем для WordPress

Для работы с темами оформления войдём в консоль WordPress и во вкладке «Внешний вид » выберем раздел «Темы ».

В движке WordPress изначально предустановленно несколько тем оформления, которые можно «примерить» на сайт, нажав кнопку «Посмотреть ». Кнопка «Активировать » применит эту тему к сайту.

2. Больше тем в каталоге WordPress

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

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

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

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

3. Установка сторонних тем для WordPress, скачанных в Интернете

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

Выберем здесь тему и скачаем её, нажав на кнопку «Download ».

Далее скачанный архив темы необходимо распаковать и перенести в папку с темами WordPress. В папке с файлами движка выбираем папку «wp-content», затем – «themes». Если сайт был создан на , этот путь может быть следующим:

С:\inetpub\wwwroot\имя-сайта\wp-content\themes\

Ну, или если сайт находится на платном хостинге, перемещаем тему в:

public_html/wp-content/themes /

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

4. Настройка тем для WordPress

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

Чтобы внести в тему оформления свои коррекции, во вкладке «Внешний вид » выбираем раздел «Настроить ».

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

Для шапки сайта можно установить свой логотип.

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

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

Для сохранения всех проделанных изменений жмём кнопку «Сохранить и опубликовать ».

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

Установка и настройка тем для WordPress – только часть процесса создания «облика» сайта или блога. Есть ещё два важных вопроса, которые детально рассмотрены в статьях сайта:

Помогла ли Вам данная статья?

Для того чтобы понять, как установить и настроить тему и другие незначительные нюансы будет рассмотрен пример на шаблоне с именем «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. Выбрать место для отображения меню на сайте. Данная тема поддерживает два меню в шапке.

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

В 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;}