Рубрики: WordPress

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

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

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

Оглавление:

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

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

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

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

WordPress- тема AccessPress StoreWordPress- тема AccessPress Store

WordPress- тема AccessPress Store

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. В поле содержимого вставляем HTML код, либо просто текст. Например такой:
    <a href="icon link here"><i class="fa fa-phone"/></i>+7 (999) 999-99-99 </a>|<a href="icon link here"><i class="fa fa-envelope"></i>test@mail.ru</a>

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

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

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

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

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

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

Первый:

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

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

Второй:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress иконка (favicon)WordPress иконка (favicon)

WordPress иконка (favicon)

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

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

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

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

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

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

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

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

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

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

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

<div class="site-info">

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

<?php printf( __( 'WordPress Theme : %1$s by %2$s', 'accesspress-store' ), 'AccessPress Store', '<a href="'.esc_url('https://accesspressthemes.com/wordpress-themes/accesspress-store/' ).'">AccessPress Themes</a>'  );  ?>

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

...
<div class="site-info">

          <?php
           $copyright = get_theme_mod('accesspress_store_copyright');
            if(!empty($copyright)) :
                echo $copyright;
            else : 
              printf(__('&copy; %1$s %2$s', 'accesspress-store'), get_the_time("Y"), get_bloginfo('name'));
            endif;
          ?> <!--- <?php printf( __( 'WordPress Theme : %1$s by %2$s', 'accesspress-store' ), 'AccessPress Store', '<a href="'.esc_url('https://accesspressthemes.com/wordpress-themes/accesspress-store/' ).'">AccessPress Themes</a>'  );  ?>-->
        </div><!-- .site-info -->
...

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

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

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

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

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

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

0

Автор публикации

не в сети 4 часа

CrazyKing

0
Печенько-кодер :Р
Комментарии: 52Публикации: 73Регистрация: 30-03-2017
CrazyKing

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

Поделиться
Опубликовал
CrazyKing

Новаястатья

SQL – получаем активные соединения

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

2 недели назад

Готовые шаблоны/шапки YouTube PSD #5

Здравствуйте, уважаемые читатели! Было принято решение 12 числа каждого месяца специально для вас делать ежемесячный…

2 недели назад

HTML – IMG

Всем привет дорогие читатели. В этом посте мы с вами узнаем как вставить картинку в…

2 недели назад

CSS – Отступы

Сегодня мы поговорим про отступы в CSS. В предыдущих статьях неоднократно они использовались для примеров,…

2 недели назад

JavaScript – меняем CSS

Немного отойдем от изучения powershell и добавим JavaScript. Сегодня мы научимся менять CSS на странице…

2 недели назад

Powershell – Операторы сравнения

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

2 недели назад
Авторизация
*
*

Login form protected by Login LockDown.


Регистрация
*
*
*
Пароль не введен
Генерация пароля