Мы уже установили тему для WordPress, установили нужные для работы плагины, настроили WooCommerce. Теперь расскажу как изменить внешний вид темы «AccessPress Store», добавим нужные нам элементы.
Как создать интернет магазин (Часть 2).
Оглавление:
- Изменим вид шапки сайта
- Отредактируем промо-ленту
- Добавим поле с контактами в шапку
- Изменим внешний вид виджетов
- Изменим логотип темы
- Добавим иконку сайта (favicon.ico)
- Изменим подпись в футоре (подпись в конце сайта)
Перейдём к третьему шагу, и начнём улучшать внешний вид нашей темы и добавлять нужные нам элементы.
Шаг 3. Редактируем внешний вид темы «AccessPress Store».
Сейчас наша тема выглядит так:
WordPress- тема AccessPress Store
Давайте немного поковыряемся в настройках данной темы (Официальная документация по теме находится тут). Заходим в онлайн редактор темы «Внешний вид» -> «Настроить»
WordPress Внешний вид — настроить
Изменим вид шапки сайта.
- У данной темы есть два вида шапки сайта:
WordPress AccessPress Store
Первый вид шапки
WordPress AccessPress Store
Второй вид шапки - В онлайн редакторе заходим в «Header Layout Settings»
WordPress — настройка шапки темы
- Выбираем нужный нам вид, мне нравится первый. Не забываем нажимать «Сохранить и опубликовать».
WordPress — настройка шапки темы
Отредактируем промо-ленту.
В самом верху шапки есть так называемые тикеры (лента с рекламой), её можно отредактировать или убрать.
WordPress- наcтройка ленты тикетов
В том же онлайн редакторе заходим в «General Settings» -> «Ticker Setting». В поле «Ticker Title» указываем название, например «Скидки». В полях «Ticker Text 1» указываем текст который необходимо выводить, например «Плюшевые игрушки даром! Скидки 50% на всё!», можно указать несколько, они будут динамически меняться. Если тикеры Вам не нужны выбираем в поле «Enable Disable Ticker» кнопку «Disable». Не забываем нажимать «Сохранить и опубликовать».
WordPress настройка промо-ленты (тикеров) темы
Добавим поле с контактами в шапку.
Необходимо, что бы клиенты легко находили информацию о контактах магазина. Добавим контакты в шапку.
- В онлайн редакторе находим «Виджеты», дальше находим «Header Call To Box» и нажимаем «Добавить виджет». В списке выбираем виджет «Текст»
WordPress добавляем контакты в шапку
- В поле содержимого вставляем HTML код, либо просто текст. Например такой:
1<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 второй вариант оформления виджетов
Для выбора необходимо в онлайн редакторе темы перейти во вкладку «Widget Title Layout Settings» и выбрать понравившейся. Я выбрал первый. Не забываем нажимать «Сохранить и опубликовать».
WordPress выбор варианта оформления виджетов
Изменим логотип темы.
Если вас не устраивает текст в шапке заместо логотипа, то вы можете добавить свою картинку. Для этого переходим в «General Settings», далее выбираем «Header Logo». Добавляем наше изображение, и видим, что логотип появился, но текст не пропал.
WordPress некорректное отображение логотипа
Для того, что бы это исправить нам необходимо опять зайти в «General Settings» и выбрать «Свойства сайта», убираем галочку «Отображать название и описание». Вы так же можете удалить только название сайта (не убирая галочку), тогда под логотипом останется короткое описание. Рекомендуемый размер логотипа 300 × 70.
WordPress исправляем некорректное отображение логотипа
Добавим иконку сайта (favicon.ico).
Заходим в «General Settings» -> «Свойства сайта», внизу нажимаем «Выбрать изображение». Рекомендуемый размер не менее 512 × 512 пикселей.
WordPress добавляем иконку (favicon)
В итоге иконка будет отображаться во вкладке браузера. Не забываем сохранить.
WordPress иконка (favicon)
Изменим подпись в футоре (подпись в конце сайта).
Что бы изменить копирайты в футоре, необходимо открыть в онлайн редакторе вкладку «General Settings» -> «Footer Copyright», в поле «Copyright Text» вводим наш текст.
WordPress изменяем копирайты в футоре
Но как видите после нашей надписи ещё остаётся ссылка на тему. Что бы убрать лишнее, необходимо отредактировать файл шаблона «footer.php». Заходим в панель администратора WordPress «Внешний вид» -> «Редактор»
WordPress редактор шаблона
В правом части находим нужный файл «footer.php»
WordPress редактируем footer.php
Ищем поиском фразу (crtl+f)
|
1 |
<div class="site-info"> |
Далее необходимо закомментировать строку (комментируем добавляя перед строкой «<!—» и после «—>»)
|
1 |
<?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>' ); ?> |
В итоге должен получиться следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... <div class="site-info"> <?php $copyright = get_theme_mod('accesspress_store_copyright'); if(!empty($copyright)) : echo $copyright; else : printf(__('© %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 — Как создать интернет магазин (Часть 3)
Надеюсь данная статья оказалась Вам полезной, не забывайте подписываться на наш Канал и группу в ВК. Всем гору печенек и удачи!