Установка и настройка темы WordPress

Здравствуйте, друзья!

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

Теперь вы начинаете с волнением установку выбранной вами темы на своем сайте WordPress.

Но … что ты делаешь? Как установить тему WordPress? И что вы делаете после этого, чтобы на самом деле настроить все?

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

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

В конце этого руководства вы узнаете, как:

  • Установите как бесплатные, так и премиальные темы WordPress
  • Сделать свой сайт похожим на великолепный демонстрационный сайт, который вы видели
  • Создать статическую домашнюю страницу
  • Настроить свою тему с помощью WordPress Customizer или панели настроек темы
  • Добавить меню навигации на ваш сайт
  • Добавить полезные виджеты в боковые панели и подвал сайта
  • Сделать расширенные изменения CSS-стилей и кода
  • Обновить свою тему
  • Помочь с вашей темой, когда все пойдет не так

Это длинный путеводитель, и я знаю, что вы очень рады, что сайт WordPress запущен и работает, поэтому давайте перейдем к тому, как установить тему WordPress!

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

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

Существует два основных источника:

  • Каталог тем WordPress.org — этот массивный каталог, который содержит исключительно бесплатные темы WordPress. На нем вы можете просматривать тысячи бесплатных тем, где код каждой проверяли члены сообщества WordPress.org.
  • Сторонние источники — вы можете получать темы от независимых сторонних разработчиков, таких как ElegantThemes или массовые тематические рынки WordPress, такие как Theme Forest.

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

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

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

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

Чтобы начать работу, войдите в свою панель управления WordPress (то есть перейдите на страницу yourdomain.ru/wp-admin). Затем перейдите «Внешний вид» — «Темы» на боковой панели и нажмите кнопку «Добавить»:

Затем найдите имя темы, которую вы хотите установить и нажмите кнопку «Установить»:

WordPress автоматически установит тему на вашем сайте. По завершении процесса установки вы можете активировать тему, нажав кнопку «Активировать»:

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

Метод 2: Как установить тему WordPress из ZIP-файла

Если вы приобрели Премиум тему WordPress или загрузили бесплатную тему из источника, отличного от WordPress.org, вам необходимо установить ее, вручную загрузив .zip-файл в программу установки темы.

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

После этого перейдите во «Внешний вид» — «Темы» и нажмите «Добавить новую»:

Затем нажмите кнопку «Загрузить тему»:

Используйте кнопку «Выбрать файл», чтобы выбрать .zip-файл вашей темы, затем нажмите «Установить сейчас»:

WordPress автоматически установит тему для вас. Затем вам просто нужно нажать «Активировать», чтобы активировать тему:

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

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

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

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

Если вам нужно установить необходимые плагины для использования темы, после активации темы вы увидите окно сообщения, как показано ниже:

Все, что вам нужно сделать, это нажать «Начать установку плагинов».

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

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

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

Как заставить WordPress Theme выглядеть как демо (необязательно)

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

Совсем не похоже на демо!.

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

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

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

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

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

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

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

Как настроить основные параметры вашей темы

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

Как выбрать в вашей теме статическую домашнюю страницу

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

Но если вы предпочитаете показывать статическую страницу на своей домашней странице, вы всегда можете изменить эту функциональность, выбрав «Настройки» — «Чтение» на панели инструментов WordPress.

Затем на странице «Главная страница» выберите параметр «Статическая страница» и выберите страницу, которую вы хотите использовать в качестве вашей первой страницы, а также страницу, на которой вы хотите отображать свои последние сообщения:

Если у вас нет страниц на выбор, вы можете перейти вовкладку «Страницы» — «Добавить новую», чтобы создавать новые страницы. Назовите их что-то вроде:

  • Домашняя страница
  • Блог

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

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

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

По этой причине, это хорошее место для начала при настройке вашей темы.

Чтобы получить доступ к Настройщику WordPress, вы можете либо перейти «Внешний вид» — «Настроить» на панели управления WordPress:

Или, если вы просматриваете общедоступную часть вашего сайта WordPress, вы можете нажать кнопку «Настроить» на панели инструментов администратора:

Использование WordPress Customizer

Внутри WordPress Customizer вы можете перемещаться между различными настройками, выбирая из параметров на боковой панели:

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

Например, если вы хотите изменить «Цвет» вашей темы, вы просто нажмите на параметр «Цвет». Оттуда вы можете выбрать совершенно новую цветовую схему для своей темы и просмотреть изменения в реальном времени, не обновляя страницу:

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

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

Использование панели параметров пользовательской темы для настройки

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

Обычно вы можете найти эти параметры, перейдя в раздел «Внешний вид» вашей панели управления и найдите что-то вроде «Параметры темы»:

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

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

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

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

Как добавить и настроить меню вашей темы

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

Хотя вы можете использовать WordPress Customizer раньше, чтобы настроить свои меню, более удобным для пользователя способом является переход во вкладку «Внешний вид» — «Меню» на панели управления WordPress.

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

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

Как добавить виджеты своей теме в боковую панель и подвал сайта

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

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

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

Чтобы добавить виджеты в новую тему, перейдите во «Внешний вид» — «Виджеты».

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

После перетаскивания виджета вы можете настроить его функциональность, щелкнув маленькую стрелку Expand:

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

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

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

Создание расширенных CSS-стилей и изменение кода вашей темы

Если вы еще не знаете, что такое CSS, вы можете свободно пропустить этот раздел! Этот раздел посвящен специально для немного более продвинутых (и совершенно необязательных) настроек в вашей теме WordPress.

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

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

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

Если вы не чувствуете себя комфортно, обратитесь за помощью к разработчику или пропустите этот раздел. Все это полностью необязательно.

Как добавить пользовательский CSS-код в тему

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

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

Чтобы получить доступ к этой области CSS, откройте «Внешний вид» — «Настроить» и выберите вкладку «Дополнительные CSS» в «Настройщике WordPress»:

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

.blog-post-read-more a {
background: #6ab999;
}

Затем вы увидите цвет кнопки в режиме реального времени:

Как и раньше, ни одно из изменений CSS, которые вы делаете, не будет применяться к вашему текущему сайту, пока вы не нажмете кнопку «Сохранить и опубликовать».

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

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

Как создать дочернюю тему для изменения кода

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

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

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

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

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

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

Как только вы установите и активируете плагин Childify Me, перейдите в WordPress Customizer, зайдите «Внешний вид» — «Настройка». Затем нажмите кнопку «Childify Me» внизу, чтобы автоматически создать дочернюю тему:

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

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

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

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

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

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

Всякий раз, когда ваша тема имеет доступное обновление, WordPress предупредит вас, показывая красное число рядом с параметром «Обновления» на боковой панели вашей админки:

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

WordPress будет обрабатывать остальную часть процесса обновления за вас!

Как получить помощь по теме WordPress

Если вы следовали этому полному руководству и все еще боретесь со своей темой WordPress, не волнуйтесь! У вас все еще есть много возможностей получить помощь от настоящего человека.

Вот несколько способов получить помощь по теме.

Использование Форума поддержки WordPress.org

Если вы используете бесплатную тему с сайта WordPress.org, попробуйте обратиться за помощью к разработчику с помощью встроенных форумов поддержки WordPress.org. Чтобы получить доступ к форумам, перейдите на страницу листинга темы на WordPress.org и нажмите кнопку поддержки форума «Просмотр»:

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

Немедленно обратитесь к разработчику за помощью

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

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

Возьмите Freelance WordPress Developer или Maintenance Service

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

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

Вы теперь эксперт по теме WordPress!

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

Теперь вы готовы взять и начать создавать потрясающий контент для своего сайта!

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

На этом все. До скорых встреч!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
4 комментария к статье "Установка и настройка темы WordPress"
  1. Юрич: 21.09.2019 в 17:58

    Не за что)
    Обращайтесь

  2. Людмила: 21.09.2019 в 17:47

    Юрич!
    Спасибо огромное за помощь! Я бы ещё долго пыхтела над редактированием. Такая задача не для моего мозга.
    Пойду дальше изучать на Вашем сайте всевозможные полезности, о которых Вы так здорово пишите!

  3. Юрич: 21.09.2019 в 15:04

    Здравствуйте, Людмила!
    Хорошо что обратились)))
    Присылайте мне ваш адрес сайта, хорошо бы и доступы к FTP и где и что нужно изменить — я вам помогу) Не переживайте!

    И совет: если не знаете где и что править — лучше тему не редактировать, а если знаете — вопросов нет))

  4. Людмила: 21.09.2019 в 15:01

    У меня к Вам вопрос — очень важный для меня. Цвет кнопки удалось поменять, а заменить текст с английского на русский — никак не получается.
    Меняла текст в редакторе темы, так меня так культурненько отшивают и очень обидную фразу выдают: «был сделан откат изменений в PHP-коде. Вам нужно загрузить измененный PHP файл другим способом, например через FTP или SFTP».
    Есть подозрение, что неправильно прописываю код в Дополнительных стилях, без вмешательства в редактирование темы.

Заказать сайт