WordPress — Как создать интернет магазин (Часть 2)

WordPressМы уже установили тему для WordPress, установили нужные для работы плагины, настроили WooCommerce. Теперь расскажу как изменить внешний вид темы «AccessPress Store», добавим нужные нам элементы.

Как создать интернет магазин (Часть 2).

Оглавление:

  1. Изменим вид шапки сайта
  2. Отредактируем промо-ленту
  3. Добавим поле с контактами в шапку
  4. Изменим внешний вид виджетов
  5. Изменим логотип темы
  6. Добавим иконку сайта (favicon.ico)
  7. Изменим подпись в футоре (подпись в конце сайта)

Перейдём к третьему шагу, и начнём улучшать внешний вид нашей темы и добавлять нужные нам элементы.

Шаг 3. Редактируем внешний вид темы «AccessPress Store».

Сейчас наша тема выглядит так:

WordPress- тема AccessPress Store

WordPress- тема AccessPress Store

Давайте немного поковыряемся в настройках данной темы (Официальная документация по теме находится тут). Заходим в онлайн редактор темы «Внешний вид» -> «Настроить»

WordPress Внешний вид - настроить

WordPress Внешний вид — настроить

Изменим вид шапки сайта.

  1. У данной темы есть два вида шапки сайта:
    WordPress AccessPress Store Первый вид шапки

    WordPress AccessPress Store
    Первый вид шапки

    WordPress AccessPress Store Второй вид шапки

    WordPress AccessPress Store
    Второй вид шапки

  2. В онлайн редакторе заходим в «Header Layout Settings»

    WordPress - настройка шапки темы

    WordPress — настройка шапки темы

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

    WordPress - настройка шапки темы

    WordPress — настройка шапки темы

Отредактируем промо-ленту.

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

WordPress- найтройка ленты тикетов

WordPress- наcтройка ленты тикетов

В том же онлайн редакторе заходим в «General Settings» -> «Ticker Setting». В поле «Ticker Title» указываем название, например «Скидки». В полях «Ticker Text 1» указываем текст который необходимо выводить, например «Плюшевые игрушки даром! Скидки 50% на всё!», можно указать несколько, они будут динамически меняться. Если тикеры Вам не нужны выбираем в поле «Enable Disable Ticker» кнопку «Disable». Не забываем нажимать «Сохранить и опубликовать».

WordPress настройка промо-ленты (тикеров) темы

WordPress настройка промо-ленты (тикеров) темы

Добавим поле с контактами в шапку.

Необходимо, что бы клиенты легко находили информацию о контактах магазина. Добавим контакты в шапку.

  1. В онлайн редакторе находим «Виджеты», дальше находим «Header Call To Box» и нажимаем «Добавить виджет». В списке выбираем виджет «Текст»

    WordPress добавляем контакты в шапку

    WordPress добавляем контакты в шапку

  2. В поле содержимого вставляем HTML код, либо просто текст. Например такой:

    В результате получаем такой вид:

    WordPress добавляем контакты в шапку

    WordPress добавляем контакты в шапку

    Не забываем нажимать «Сохранить и опубликовать».

Изменим внешний вид виджетов.

Как и с шапкой у темы есть два выбора.

Первый:

Wordpress первый вариант виджетов

WordPress первый вариант виджетов

Второй:

Wordpress второй вариант оформления виджетов

WordPress второй вариант оформления виджетов

Для выбора необходимо в онлайн редакторе темы перейти во вкладку «Widget Title Layout Settings» и выбрать понравившейся. Я выбрал первый. Не забываем нажимать «Сохранить и опубликовать».

Wordpress выбор варианта оформления виджетов

WordPress выбор варианта оформления виджетов

Изменим логотип темы.

Если вас не устраивает текст в шапке заместо логотипа, то вы можете добавить свою картинку. Для этого переходим в «General Settings», далее выбираем «Header Logo». Добавляем наше изображение, и видим, что логотип появился, но текст не пропал.

WordPress некорректное отображение логотипа

WordPress некорректное отображение логотипа

Для того, что бы это исправить нам необходимо опять зайти в «General Settings» и выбрать «Свойства сайта», убираем галочку «Отображать название и описание». Вы так же можете удалить только название сайта (не убирая галочку), тогда под логотипом останется короткое описание. Рекомендуемый размер логотипа 300 × 70.

WordPress исправляем некорректное отображение логотипа

WordPress исправляем некорректное отображение логотипа

Добавим иконку сайта (favicon.ico).

Заходим в «General Settings» -> «Свойства сайта», внизу нажимаем «Выбрать изображение». Рекомендуемый размер не менее 512 × 512 пикселей.

WordPress добавляем иконку (favicon)

WordPress добавляем иконку (favicon)

В итоге иконка будет отображаться во вкладке браузера. Не забываем сохранить.

WordPress иконка (favicon)

WordPress иконка (favicon)

Изменим подпись в футоре (подпись в конце сайта).

Что бы изменить копирайты в футоре, необходимо открыть в онлайн редакторе вкладку «General Settings» -> «Footer Copyright», в поле «Copyright Text» вводим наш текст.

WordPress изменяем копирайты в футоре

WordPress изменяем копирайты в футоре

Но как видите после нашей надписи ещё остаётся ссылка на тему. Что бы убрать лишнее, необходимо отредактировать файл шаблона «footer.php». Заходим в панель администратора WordPress «Внешний вид» -> «Редактор»

WordPress редактор шаблона

WordPress редактор шаблона

В правом части находим нужный файл «footer.php»

WordPress редактируем footer.php

WordPress редактируем footer.php

Ищем поиском фразу (crtl+f)

Далее необходимо закомментировать строку (комментируем добавляя перед строкой «<!—» и после «—>»)

В итоге должен получиться следующий код:

В результате на сайте будет следующее

WordPress изменяем копирайты в футоре

WordPress изменяем копирайты в футоре

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

Читайте продолжение: WordPress — Как создать интернет магазин (Часть 3)

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

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

CrazyKing

Печенько-кодер :Р

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