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

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

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

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

Содержание:

  1. Где взять тему WordPress
  2. Как выбрать тему WordPress
  3. Как установить тему WordPress
  4. Как настроить тему WordPress

Где взять тему WordPress

После установки WordPress на сайт установлена тема Twenty Seventeen. Вполне рабочая тема (Рис 1).

По умолчанию тема Twenty Seventeen. Блог Андрея Дубина
Рис. 1. По умолчанию тема Twenty Seventeen.

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

Админ-панель. Самый простой и распространенный способ – зайти в админ панель ″Внешний вид″ – ″Темы″.
Вашему вниманию представлен список установленных на сайте тем. При наведении мышкой на тумбинашку темы появляется кнопка ″Настроить″ на активной теме, или ″Активировать″ ″Просмотреть″ на неактивной теме. В верхней части экрана есть кнопка ″Добавить новую″ для загрузки тем из стандартного каталога (Рис 2).

Добавить новую тему. Блог Андрея Дубина
Рис. 2. Добавить новую тему.

Мы видим список тем, которые можно установить. Вверху страницы меню. Переходим к закладке ″Популярные″, тут тем видимо-невидимо, 2454 штук, переходим к ″Свежие″, и тут тем еще больше – 4692 (Рис 3).

Выбрать тему WordPress. Блог Андрея Дубина
Рис. 3. Выбрать тему WordPress.

Поиск в интернете. Самый банальный поиск в поисковике выдаст несметное количество официальных, полуофициальных и неофициальных сайтов с огромным количеством платных и бесплатных тем. Выбираете любую и качаете себе архив с темой. Я для примера вбил в Яндексе ″темы wordpress″ и зашел на первый сайт в выдаче wp-templates.ru. Немного полистал и взял для примера понравившуюся тему ″Catch Box″. Кстати, неплохой сайт, можно демо любой темы сразу посмотреть. Качаем архив (Рис 4).

Скачать тему WordPress. Блог Андрея Дубина
Рис. 4. Скачать тему WordPress.

Как выбрать тему WordPress

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

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

Catch Box на весь экран монитора. Блог Андрея Дубина
Рис. 5. Catch Box на весь экран монитора.

А теперь берем за правый край браузера, и потихоньку начинаем уменьшать ширину браузера, и наблюдаем, как ведет себя сайт. В определенный момент наша тема стала другой (адаптировалась под размер). Так выглядит наш сайт на планшете (Рис 6).

Catch Box как на экране планшета. Блог Андрея Дубина
Рис. 6. Catch Box как на экране планшета.

Продолжайте уменьшать ширину окна до предела. Теперь видим, как тема выглядит на телефоне (Рис 7).

Catch Box как на экране телефона. Блог Андрея Дубина
Рис. 7. Catch Box как на экране телефона.

Посмотрите на внешний вид, попробуйте поработать с ним, всё ли удобно, всё ли красиво, всё ли понятно. Обратите внимание на меню. Оно стало совершенно другим. Попробуйте походить по пунктам меню. Теперь попробуйте посмотреть на тему с телефона и планшета.

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

Админ-панель. Если Вы выбрали тему через админ-панель, то для установки темы достаточно навести мышкой на понравившуюся тему и нажать на появившейся кнопочке ″Установить″. А после установки на том же месте нажать на кнопочку ″Активировать″, чтобы тема применилась на сайт (Рис 8).

Скопировать папку. Если Вы скачали архив с темой, то его необходимо распаковать. Закачать папку с темой в каталог wp-content/themes с помощью FTP-клиента. После этого тема появится в списке установленных тем. Нужно лишь кликнуть по кнопочке ″Активировать″ (Рис 8).

Загрузить через админ-панель. Тему можно загрузить через админ-панель. Для этого зайдите ″Внешний вид″->″Темы″->″Добавить новую″->″Загрузить тему″. Выбираем файл (архив) с темой и кликаем ″Установить″. Тема так же появится в списке установленных. Остается только активировать ее (Рис 8).

Установить тему WordPress. Блог Андрея Дубина
Рис. 8. Установить тему WordPress.

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

Когда тема установлена и активирована, остается ее только настроить. Перейти к настройке можно двумя способами. Первый – в списке тем навести мышку на активированную тему, и появится кнопка ″Настроить″ (Рис 9).

Настроить тему WordPress. Блог Андрея Дубина
Рис. 9. Настроить тему WordPress.

Второй способ – перейти на страницу блога (при этом залогинившись в админ-панеле). В верхней части экрана есть панель WordPress. Именно через нее удобно быстро переходить к настройкам темы. Достаточно перейти по ссылке ″Настроить″ (Рис 10).

Настроить тему WordPress. Блог Андрея Дубина
Рис. 10. Настроить тему WordPress.

Мы попадем в настройки темы. Список настроек зависит от конкретной темы (Рис 11). Тут же у нас просмотр получаемого результата.

Настройки темы WordPress. Блог Андрея Дубина
Рис. 11. Настройки темы WordPress.

Коротко пройдусь по настройкам темы Catch Box:

  • Свойства сайта. Изменение заголовка и описания сайта. Можно установить иконку сайта (favicon).
  • Цвета. Изменение цветовой палитры сайта.
  • Изображение заголовка. Можно установить изображение в шапку сайта. Можно даже несколько и способ их отображения.
  • Фоновое изображение. Можно установить изображение на задний план сайта.
  • Меню. Можно сделать несколько меню и расположить их в разных областях сайта.
  • Виджеты. Управление виджетами. Настройка где и какие блоки отображать.
  • Статическая главная страница. Блог можно настроить на главной странице, а можно и на какой-нибудь другой.
  • Дополнительные стили. Если нужно руками прописать стили, вот здесь это легко сделать.

Обратите внимание на 3 маленькие кнопочки ниже списка настроек. С их помощью можно увидеть, как выглядит настроенный сайт на соответствующем устройстве (Рис 12).

Режимы просмотра темы. Блог Андрея Дубина
Рис. 12. Режимы просмотра темы.

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

Ссылки разработчиков. Блог Андрея Дубина
Рис. 13. Ссылки разработчиков.

В теме, которую установил я, эта информация содержится в файле footer.php. Нужно удалить код:

<div class=″powered″>
<a href=″<?php echo esc_url( __( ‘http://wordpress.org/’, ‘catchbox’ ) ); ?>″ title=″<?php esc_attr_e( ‘Powered by WordPress’, ‘catchbox’ ); ?>″ rel=″generator″>
<?php printf( __( ‘Powered by %s’, ‘catchbox’ ), ‘WordPress’ ); ?></a>
<span class=″sep″> | </span>
<a href=″<?php echo esc_url( __( ‘http://catchthemes.com/’, ‘catchbox’ ) ); ?>″ title=″<?php esc_attr_e( ‘Theme Catch Box by Catch Themes’, ‘catchbox’ ); ?>″ rel=″designer″>
<?php printf( __( ‘Theme: %s’, ‘catchbox’ ), ‘Catch Box’ ); ?></a>
<span class=″sep″> | </span>
<a href=″http://wp-templates.ru/″>WordPress шаблоны</a>
</div>

В разных версиях может быть по-разному. Найдите текст в файлах темы class=″powered″, этот блок отвечает за вывод информации о разработчиках.
Всем удачи в поисках и настройках новых тем!

Автор: Андрей Дубин.

9 thoughts on “Как установить тему WordPress

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

  2. Я всегда говорил, что тема или внешний вид для сайта это лицо вашего сайта, и правильно составленная тема, залог вашего успеха.

  3. хорошо, что есть у кого поучиться… Жду статьи о резервном копировании!

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

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

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

  6. Мне раньше казалось, что установить новую тему — это примерно как в космос слетать 🙂 Надо быть прямо супер программистом или дизайнером. А потом выяснилось, что не так уж всё сложно и страшно, за выходные вполне можно установить и настроить 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*