Настройка шаблона wordpress: Как редактировать шаблон wordpress самому? Десятка лучших

Содержание

Как редактировать шаблон wordpress самому? Десятка лучших

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

Для начала о том, зачем нужна настройка шаблона WordPress опытному веб-мастеру и новичку:

Практически все настройки блога завязаны на редактировании кода – чаще всего css или html. Во многих руководствах по ВордПрессу специалисты рассказывают, что для достижения результата нужно отредактировать файл темы. Если вы не совсем понимаете, о чем идет речь, как редактировать тему WordPress, самое время осваивать новый материал.
Создавая или редактируя блог, вы установили загруженный шаблон. Все бы хорошо, но он криво встал и нуждается в небольшой доработке. Как добавить или убрать функциональные блоки, новые элементы дизайна? Знаний CSS, HTML маловато или вообще нет – с чего начинать работу? Знакомство со структурой позволит понять, как работает сайт изнутри, какие функции выполняет каждый элемент.

Разбираем структуру по кирпичикам

Если изобразить HTML-код как один большой квадрат, шаблон можно разбить на несколько частей: шапку сайта, контентную область, сайдбар, футер.

Структура

Часто приходится редактировать такие файлы:

index.php. Он позволяет вывести главную страничку.
header.php. Шапка сайта или его верхняя часть. Независимо от того, на какую именно страницу переходит посетитель сайта, шапка остается неизменной.
style.css. Стилевой элемент, используемый для настройки внешнего вида шаблона WordPress.

Мы назвали 3 элемента, которые редактируют чаще остальных. Кроме них, есть другие:

single.php – демонстрация записей.
page.php – статическая web-страница.
sidebar.php. Сайдбар с виджетами.
functions.php – php-функции.
footer.php. Он же подвал сайта, остается неизменным.
category.php. Отвечает за вывод страничек по конкретной категории.
tag.php. Вывод по тегу.
archive.php. Записи за год или месяц.
search.php. Поиск WordPress. Когда посетителю нужно найти конкретный материал, статью или файл, search.php в шаблоне помогает искать контент.
comments.php. Аудитория сайта может дискутировать между собой, оставлять комментарии и отзывы. Чтобы настроить отображение комментариев, используют файл php.
php. Еще один важный файл, отвечающий за ошибку 404.

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

Редактируем шаблон самостоятельно

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

Есть три варианта настройки темы или шаблона WordPress:

Через админку.

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

Админка

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

В файловом менеджере хостинга.

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

Хостинг

Как работает редактор тем WordPress? Вам нужно открыть папку по адресу /wp-content/темы/название_темы/файл. Если файлового менеджера нет, есть смысл задуматься о смене хостинга.

Редактируем шаблон по

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

Достаточно выполнить три простых действия:

Запустить клиент, воспользоваться FileZilla, Total Commander. Установив соединение, нужно открыть папку темы ВордПресс по адресу: /wp-content/темы/название_темы/
Скопировать файл, внести изменения.
Открыть его в Dreamwaver, Notepad++, любой другой толковой программке, предназначенной для редактирования. Выбирайте ПО, с которым действительно удобно работать. Недостаточно просто загрузить тему в WordPress – нужно найти программку для редактирования с удобной подсветкой кода, нумерацией строк.

Как выглядит настройка в админке ВордПресса?

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

Хостинг

Открываем раздел «Внешний вид», переходим в «Настроить».
В открывшемся окошке прописываем название вашего сайта, делаем его краткое описание. Когда вы нажмете «Сохранить», эта информация отобразится в шапке сайта. Меняйте цвет фона, фоновое изображение – это и многое другое можно делать в настройках.
Большинство изменений производятся в категориях «Внешний вид», «Имя темы», загружается фавикон, логотип. Опций действительно много, и для тех, кто не хочет (не умеет) работать с кодом, это просто находка.

Настройки внешнего вида

ТОП-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. Благодаря ему, посетители вашего сайта смогут смотреть новости в удобном формате, оставлять комментарии. Тема привлекает сочным интерфейсом, удобными виджетами.

Заключение

На этом все – мы разобрали 3 основных способа редактирования тем WordPress и 10 лучших шаблонов для сайта. Выбирайте тот, который по душе и как раз соответствует вашей тематике. Желаем успехов!

Поделитесь со своими друзьями

Как настроить шаблон WordPress — Создать свой сайт бесплатно

После установки и активации темы главный вопрос: как всё сделать красиво? Имеется два вида настроек темы:

Настройка из кастомайзера — Customizer
Настройка из панели темы

Theme Customizer

Как его найти? В админке вкладка Внешний вид — Настроить.

Вы попадёте во все настройки темы, раздел Customizer. В нём в зависимости от шаблона может быть разное количество настроек. Есть стандартные, одинаковые для всех:

Settings General

Site Title + название сайта, ваш бренд, Tagline — логин, короткое описание чем занимаетесь.

Logo — логотип сайта, в разных темах разные размеры.

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

Цвета — цвет фона страниц, меню.

Фоновое изображение — фотография фона и настройки расположения, повтора. Website Layout — ширина страниц. Full Width во всю ширину экрана. Boxed — ширина страницы, когда видно фон по бокам.

Header Settings

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

Front Page Sections

Настройки главной страницы. Предварительно надо выбрать у страницы шаблон Front Page. Тут можно выбрать какие блоки будут выводится на главной. Отключить блоки, выбрать какие страницы или категории будут показываться. Или заменить демо текст на свой. Что именно и как смотрите в документации.

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

Виджеты

Чтобы расширить возможности и вид используют widget. Вы выбираете какие установить в выбранный сайдбар. Количество зависит от количества установленных плагинов.

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

Дополнительные стили

Легко поменяйте дизайн ваших страниц используя CSS-стили.

Настройка из панели темы

Если тема сложная у неё будет отдельная панель настроек. Обычно появляется вкладка с названием темы. Дальше вы настраиваете все вкладки. На рисунке я показываю панель от PARABOLA, эта панель появляется после установки плагина Cryout Serious Theme Settings. https://wordpress.org/themes/parabola/

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

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

Рекомендую:

Темы wordpress
Журнальные шаблоны для WordPress

Темы WordPress под AdSense

Landing WordPress

Как перевести шаблон

Как настроить тему WordPress (Руководство для начинающих)

Хотите узнать, как настроить дизайн темы WordPress?

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

В этой статье мы покажем вам, как легко настроить тему WordPress и сделать ее индивидуальной.

Ниже приведен список тем, которые мы рассмотрим в этом руководстве:

Зачем настраивать тему WordPress
Использование настройщика тем по умолчанию
Настроить тему WordPress с помощью полнофункционального редактора сайта
Использование устаревшего настройщика тем в WordPress
Настроить тему WordPress с полным доступом
Настроить отдельные страницы с помощью SeedProd90 Page 12
Создайте собственную тему WordPress

Готовы? Давайте начнем.

Зачем настраивать тему WordPress

Темы WordPress предназначены для общих ниш веб-сайтов. Например, есть темы для различных типов веб-сайтов малого бизнеса, фотографов, блоггеров и т. д.

После выбора темы вам необходимо настроить ее в соответствии со своими требованиями.

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

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

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

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

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

Использование настройщика темы по умолчанию

В WordPress 5.9 появилась возможность полноценного редактирования сайта.

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

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

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

Если ваша тема WordPress поддерживает полнофункциональный редактор сайта, вы увидите меню «Редактор» в разделе «Внешний вид» на боковой панели администратора WordPress.

При нажатии на нее запустится полноценный редактор сайта.

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

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

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

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

Вы можете найти их на вкладке Patterns.

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

Чтобы просмотреть больше шаблонов, нажмите «Просмотреть все шаблоны» внизу.

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

Просто щелкните имя шаблона, чтобы открыть его в редакторе.

Шаблон откроется в том же редакторе блоков.

Отсюда вы можете редактировать его как хотите.

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

Полный редактор сайта — это мощный и гибкий способ настройки вашей темы WordPress.

Однако это совершенно новая функция, и многие темы WordPress в настоящее время ее не поддерживают.

Использование устаревшего настройщика тем в WordPress

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

В этом случае вы можете настроить свою тему, перейдя на страницу Внешний вид » Настроить .

Щелкнув по нему, вы запустите Theme Customizer.

В левой части экрана вы увидите параметры настройки, а в правой — предварительный просмотр вашего веб-сайта.

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

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

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

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

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

Настройте свою тему WordPress с полным доступом

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

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

Что делать, если вы хотите дополнительно настроить или даже создать собственную тему WordPress для своего веб-сайта?

Здесь на помощь приходит SeedProd.

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

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

При активации необходимо ввести лицензионный ключ. Вы можете найти эту информацию в своей учетной записи на веб-сайте SeedProd.

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

SeedProd может делать и то, и другое, и мы покажем вам оба подхода.

Настройка отдельных страниц WordPress с помощью SeedProd

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

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

Просто перейдите на страницу SeedProd » Целевые страницы и нажмите кнопку «Добавить новую целевую страницу».

Далее вам нужно выбрать шаблон для вашей страницы.

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

Просто нажмите на шаблон, чтобы продолжить.

Затем SeedProd попросит вас указать название вашей страницы и выбрать URL-адрес.

После ввода необходимой информации. нажмите на кнопку Сохранить и начать редактирование страницы.

Запустится интерфейс компоновщика страниц SeedProd. Это инструмент для создания дизайна с помощью перетаскивания.

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

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

Вы также можете добавлять новые блоки и даже целые разделы в макет из левой колонки.

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

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

Если вы удовлетворены дизайном и макетом страницы, вы можете нажать кнопку «Сохранить» в правом верхнем углу.

Отсюда вы также можете опубликовать страницу или сохранить ее как шаблон.

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

Создание пользовательской темы в WordPress с помощью SeedProd

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

С помощью этого метода вы будете создавать свою собственную тему WordPress с нуля, используя тот же конструктор страниц с перетаскиванием.

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

Чтобы начать, просто перейдите на страницу SeedProd » Theme Bulder и нажмите кнопку «Темы».

Теперь SeedProd покажет вам несколько начальных тем на выбор.

Вы можете полностью изменить каждый аспект этих тем.

После того, как вы выбрали тему, SeedProd сгенерирует все шаблоны тем.

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

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

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

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

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

После внесения изменений в тему не забудьте сохранить изменения.

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

Когда вы закончите, перейдите к SeedProd » Theme Builder и установите переключатель рядом с параметром «Включить тему SeedProd» в положение «Да».

Теперь SeedProd заменит вашу тему WordPress пользовательской темой, которую вы только что создали.

Чтобы узнать больше о конструкторе тем SeedProd для WordPress, ознакомьтесь с нашим руководством о том, как создать пользовательскую тему WordPress без написания кода.

Мы надеемся, что эта статья помогла вам научиться настраивать тему WordPress по своему вкусу.

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

Если вам понравилась эта статья, подпишитесь на наш YouTube канал для видеоуроков по WordPress. Вы также можете найти нас в Твиттере и Facebook.

Как настроить тему WordPress (5 пошаговых способов)

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

Задача состоит в том, чтобы найти правильный способ сделать это.

Мгновенно ускорьте свой сайт WordPress на 20%

Воспользуйтесь преимуществами самых быстрых серверов Google и сети Premium Tier, поддерживаемой более чем 275 CDN Cloudflare по всему миру, для невероятно быстрой загрузки. Входит бесплатно во все планы WordPress.

Начните сегодня

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

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

Варианты настройки темы

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

Вот обзор доступных вам опций:

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

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

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

Вам действительно нужно настроить свою тему?

Иногда вам вообще не нужно настраивать тему: вместо этого вам нужно установить плагин.

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

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

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

Хотел бы я сохранить эту функциональность при смене темы в будущем?

Если ответ положительный, этот код должен быть в плагине, а не в вашей теме.

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

Настройка темы WordPress с помощью экранов администратора WordPress

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

Настройка темы с помощью настройщика

Самый простой способ настроить тему WordPress — использовать настройщик WordPress.

Вы можете получить к нему доступ одним из двух способов:

При просмотре своего сайта (когда вы вошли в систему) нажмите ссылку Настроить на панели администратора в верхней части экрана.
На экранах администратора нажмите Внешний вид > Настроить .

Это приведет вас к Настройщику.

Настройщик WordPress

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

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

Редактор тем (и почему его не использовать)

На экранах администратора вы можете заметить параметр под названием «Редактор тем», доступ к которому можно получить через Внешний вид > Редактор тем .

Редактор темы WordPress

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

Не надо.

Даже если вы умеете писать CSS или PHP, редактирование файлов в вашей теме таким образом — очень плохая идея по двум причинам:

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

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

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

WordPress знает, насколько небезопасно использовать редактор тем: он даже выдает предупреждение при попытке доступа к нему.

Предупреждение о неиспользовании редактора тем WordPress

Так что следуйте совету WordPress: не используйте редактор тем!

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

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

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

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

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

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

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

Одним из самых известных конструкторов страниц является Elementor, но вы можете узнать о некоторых альтернативах в нашем обзоре конструкторов страниц.

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

Ниже я использую конструктор страниц Elementor с темой Hello Elementor, которая совместима с ним.

Интерфейс Elementor

Конструкторы страниц дают вам большую гибкость в макете и дизайне ваших страниц. Если вы привыкли к такому конструктору веб-сайтов, как Wix, они могут упростить переход на WordPress. И если вы предпочитаете интерфейс WYSIWYG для своего контента WordPress, они могут помочь вам быстро спроектировать ваши страницы.

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

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

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

Тема Divi

Рекомендуемая литература: Divi vs Elementor: Сравнение плагинов WordPress Page Builder

Редактирование кода вашей темы WordPress

Если вам удобно редактировать CSS и/или PHP, вы можете отредактировать код в своей теме, чтобы настроить тема.

Это дает вам максимальную степень контроля.

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

Редактирование файлов темы

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

Таблица стилей

Каждая тема WordPress имеет таблицу стилей, которая называется style.css. Он содержит весь код для оформления вашего сайта: макет, шрифты, цвета и многое другое.

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

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

Чтобы узнать, какой CSS влияет на какие элементы на странице, вы можете использовать инспектор в своем браузере для просмотра CSS (Chrome DevTools в этом примере):

Проверка кода на сайте WordPress с помощью Chrome DevTools

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

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

Файл функций

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

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

Хотел бы я сохранить эту функцию, если бы в будущем сменил тему?

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

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

Файлы шаблонов темы

Большинство файлов темы являются файлами шаблонов темы. Это файлы, которые определяют, какой контент WordPress выводит на данной странице, и выбираются в соответствии с иерархией шаблонов.

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

Например, предположим, что в вашей теме есть файл archive.php, который используется для вывода архивных страниц для категорий и тегов. Вы хотите внести изменения в способ вывода тегов. Итак, вы создаете файл с именем «tag.php», который будет основан на archive.php с вашими настройками.

Опять же, будьте осторожны при редактировании файлов: они могут сломать ваш сайт. Всегда сначала проверяйте локальную установку с помощью таких инструментов, как DevKinsta и/или промежуточный сайт WordPress.

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

Настройка сторонней темы с помощью дочерней темы

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

Это потому, что если вы отредактируете тему напрямую, а затем обновите ее (что вы и должны сделать), вы потеряете все сделанные вами изменения.

Создание дочерней темы состоит из четырех шагов:

Создать новую папку в wp-content/themes .
В этой папке создайте таблицу стилей. В этой таблице стилей сообщите WordPress, что это дочерняя тема вашей существующей темы.
Добавьте копии файлов, которые вы хотите редактировать, в дочернюю тему и отредактируйте их там.
Активируйте дочернюю тему на своем сайте.

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

*Narcosis* by STORM