Создание пользовательского веб-сайта WordPress — параметры

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

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

Распространенным заблуждением является то, что «правильный» шаг при настройке веб-сайта WordPress — сначала создать дочернюю тему. Эта дочерняя тема находится рядом с нашей родительской темой, и именно здесь вносятся любые изменения дизайна (особенно в файлы CSS темы). Без сомнения, создание и использование дочерней темы при настройке стиля вашего сайта или настройке функциональности может быть лучшей практикой. Однако существует множество способов настройки вашего веб-сайта WordPress, которые не требуют от вас этого. Это создает новости, особенно если вы не программист, поскольку дочерние темы усложняют веб-сайт. Приветствуется все, что можно сделать для уменьшения сложности и облегчения редактирования дизайна сайта!

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

Настройщик WordPress

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

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

Теперь давайте немного поиграем с нашими параметрами настройки. Перейдите в «Внешний вид»> «Настроить» в WP-Admin или щелкнув ссылку «Настроить» в черной строке меню, которая появляется на страницах и в сообщениях.

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

Сделав это, мы затем нажали «Цвета» и оттуда изменили цвета фона нашего веб-сайта, а также добавили фоновое изображение текстуры.

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

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

Вот чего мы добились с помощью простого CSS:

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

Настройщики тем

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

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

Одна из наших любимых тем — Astra. Имея более 1 000 000 пользователей, он явно пользуется огромной популярностью благодаря надежному коду, хорошему дизайну и регулярному обновлению.

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

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

Настройка с помощью плагинов CSS

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

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

Чтобы обновить CSS на своем веб-сайте, вам необходимо либо а) напрямую отредактировать файлы CSS, уже присутствующие на вашем сайте, либо б) использовать плагин, который позволяет обновлять CSS. Вариант А сложнее, так как вам нужно использовать FTP-клиент для доступа к файлам CSS вашего веб-сайта, тогда как плагины могут предоставить простой в использовании редактор, доступный прямо из панели администратора WordPress. Давайте рассмотрим несколько вариантов плагинов CSS ниже.

Простой CSS-плагин

Популярным плагином CSS является Simple CSS от Тома Усборна.

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

Простой пользовательский CSS и JS

Simple Custom CSS & JS — еще один отличный CSS-плагин. Он работает аналогично плагину Simple CSS, упомянутому выше, позволяя вам обновлять код CSS (и JS, который является другим языком программирования) на вашем сайте из панели администратора WordPress. Вы также можете указать, должен ли ваш пользовательский CSS печатать код в верхнем, нижнем колонтитуле или основной части вашего веб-сайта, что обеспечивает дополнительную гибкость.

Начните с загрузки и установки. Затем перейдите к новой ссылке Custom CSS & JS в меню и поиграйте. В качестве примера мы добавили HTML-код.

И установите его для отображения в заголовке

Мы также добавили его стиль CSS следующим образом:

А вот так просто!

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

Еще один популярный способ создания пользовательского веб-сайта WordPress — использовать один из конструкторов, доступных для сайтов WordPress. WordPress имеет собственный встроенный конструктор страниц под названием Gutenberg. Сторонние конструкторы страниц включают Beaver Builder и Elementor.

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

Гутенберг

Как уже упоминалось, WordPress предлагает встроенный редактор блоков по умолчанию под названием Gutenberg. Это относительно новый инструмент, представленный в конце 2018 года. Он предлагает простой способ быстрой настройки элементов вашей страницы (страниц) с помощью простого редактора перетаскивания.

Помимо возможности вставлять и стилизовать мультимедийный контент без использования пользовательского кода, Gutenberg также позволяет создавать собственные пользовательские записи и страницы на основе WordPress REST API, JavaScript и React.

Бобровый Строитель

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

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

Элементор

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

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

Если вам интересно узнать, как создать новый веб-сайт для вашего бизнеса с нуля с помощью Elementor, обязательно ознакомьтесь с нашей серией из 8 частей!

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

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

• Редактируйте файлы CSS напрямую
• Измените шаблоны PHP темы
• Отредактируйте файл functions.php
• Добавьте или включите немного JavaScript

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

Вывод

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