Как изменить нижний колонтитул на витрине — 3 простых метода

Хотите знать, как изменить нижний колонтитул в теме StoreFront? Этот пост для вас. В этом руководстве мы покажем вам 2 разных способа сделать это.

Знакомство с Storefront

Storefront — одна из лучших тем WooCommerce, широко используемая в магазинах электронной коммерции. Эта тема была разработана Automattic и доступна как в репозитории WordPress.org, так и на официальном сайте WooCommerce.

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

Зачем менять нижний колонтитул вашего сайта WordPress?

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

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

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

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

Как изменить нижний колонтитул в магазине

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

1. Из панели управления WordPress
2. С плагином
3. Программно

Давайте посмотрим на эти методы.

1. Измените нижний колонтитул на витрине магазина с панели инструментов WordPress.

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

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

Давайте посмотрим, как сделать каждую из этих вещей шаг за шагом.

1.1. Изменить цвета нижнего колонтитула в витрине

Чтобы изменить нижний колонтитул в Storefront с помощью живого настройщика, выберите « Внешний вид» > «Настроить» . Вы будете перенаправлены в живой настройщик WordPress.

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

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

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

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

1.2. Изменить виджеты нижнего колонтитула в витрине

Помимо изменения цвета, вы можете настроить виджеты нижнего колонтитула. В Storefront вы можете сделать это из 2 разных подменю. Вы можете открыть вкладку « Виджеты » в меню « Внешний вид» > «Настроить» или перейти в « Внешний вид» > «Виджеты» .

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

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

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

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

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

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

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

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

Сделав это, перейдите в раздел « Внешний вид» > «Редактор тем», откройте вкладку для файла functions.php и вставьте следующий фрагмент.

 add_action('init', 'custom_remove_footer_credit', 10);
функция custom_remove_footer_credit () {
    remove_action('storefront_footer', 'storefront_credit', 20);
    add_action('storefront_footer', 'custom_storefront_credit', 20);
}

функция custom_storefront_credit() {
?>
<div class="информация о сайте">
Quadlayers<?php echo get_bloginfo('имя') . ' ' . get_the_date('Г'); ?>
</div><!– .сайт-информация –>
<?php
}

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

2. Измените нижний колонтитул на витрине с помощью плагина

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

Вы, наверное, знаете, что Storefront совместим с широким спектром плагинов WordPress. Но это не все. Существуют плагины, специально разработанные для настройки различных областей темы Storefront. Одним из лучших плагинов является Change Storefront Footer Copyright Text. Как следует из названия, этот инструмент позволяет редактировать текст об авторских правах в нижнем колонтитуле Storefront.

Чтобы использовать этот плагин, вам нужно установить и активировать его, поэтому сначала перейдите в « Плагины»> «Добавить новый» и найдите его. Затем нажмите «Установить сейчас» , а затем «Активировать ». Если у вас есть какие-либо проблемы, ознакомьтесь с нашим руководством, в котором объясняется, как устанавливать плагины WordPress вручную.

Затем перейдите в « Настройки»> «Нижний колонтитул витрины» , и у вас будет возможность добавить любой текст или ссылки в нижний колонтитул авторского права с помощью текстового редактора. Кроме того, вы можете изменить параметры шрифта или выравнивание с помощью визуального текстового редактора или написать немного кода в предварительно отформатированном текстовом представлении.

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

3. Измените нижний колонтитул на витрине магазина программно

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

ПРИМЕЧАНИЕ. Поскольку мы будем редактировать основной файл, перед началом мы рекомендуем вам сделать полную резервную копию вашего сайта и использовать дочернюю тему. Если вы не знаете, как вы можете научиться создавать его или использовать любой из этих плагинов.

3.1. Удалить кредиты Storefront

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

 add_action('wp', 'ql_remove_credits_storefront' );
функция ql_remove_credits_storefront () {
remove_action('storefront_footer', 'storefront_credit', 20);
}

3.2. Настроить текст об авторских правах

Теперь предположим, что вы хотите отредактировать текст об авторских правах в нижнем колонтитуле. Для этого мы создадим новую текстовую строку с надписью Copyright + year + by QuadLayers следующим образом:

 add_filter('storefront_copyright_text', 'ql_customize_storefront_footer_copyright_text' );
функция ql_customize_storefront_footer_copyright_text () {
$text = Дата "Авторское право" ("Г" ). 'от QuadLayers';
вернуть $текст;
}

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

Бонус: добавьте ленту Instagram в нижний колонтитул

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

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

Как добавить ленту Instagram в нижний колонтитул

Самый простой способ добавить ленту Instagram в нижний колонтитул — использовать плагин. Для этой демонстрации мы будем использовать ленту галереи социальных сетей (ранее известную как лента галереи Instagram ). Это бесплатный плагин, который имеет бесплатную версию с базовыми функциями и 3 премиальных плана, стоимость которых начинается от 19 долларов США (единовременный платеж).

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

Здесь вам нужно добавить свою учетную запись Instagram. Вы можете добавить личную учетную запись или бизнес-аккаунт.

После этого перейдите на вкладку « Ленты » и нажмите « +Лента », чтобы создать ленту Instagram.

Здесь вы можете выбрать и отредактировать любой элемент ленты: макеты, количество отображаемых изображений и так далее. После внесения всех необходимых изменений нажмите Сохранить .

Чтобы добавить ленту Instagram в нижний колонтитул, перейдите в меню « Виджеты » на панели инструментов или выберите « Внешний вид» > «Настроить» . Затем выберите столбец нижнего колонтитула, в который вы хотите включить ленту Instagram, и добавьте виджет «Галерея социальных лент». После того как вы добавите заголовок и идентификатор галереи для фида, нажмите « Готово » .

Кроме того, вы можете использовать шорткоды, представленные на вкладке « Лента », чтобы добавить ленту Instagram на свой веб-сайт.

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

Чтобы узнать больше об альтернативах и более подробном объяснении, ознакомьтесь с нашим руководством по интеграции WordPress с Instagram.

Вывод

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

• Из панели администратора WordPress
• Использование специального плагина
• Программно

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

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

Вы редактировали нижний колонтитул в Storefront? Какой метод вы использовали? Есть ли какой-либо другой вариант, который мы должны добавить? Дайте нам знать в комментариях ниже.

Если вы нашли это руководство полезным, эти статьи также могут вас заинтересовать:

• Как редактировать шапку в WordPress
• Лучшие плагины Instagram Feed для WordPress
• Лучшие плагины для WooCommerce (бесплатно + платно)