У нас уже практически готов наш интернет магазин, остались мелкие штрихи. В этой статье я расскажу о том как добавить форму контактов и как исправить непонятные знаки вопросов в тексте, ну и покажи итоги моего творения.
Как создать интернет магазин на WordPress (Часть 8).
Создаём и добавляем форму контактов.
Если вы ставили тему со всеми рекомендуемыми плагинами, то у вас уже есть установленный плагин «Ultimate Form Builder Lite», если же нет, то просто установите его. В панели администратора ищем вкладку «Forms», и там нажимаем кнопку «Add New Form».
WordPress создаём форму контактов.
В появившемся окне вводим название нашей форму, впишите что Вам угодно. Дальше нам необходимо собрать нашу форму. Тут всё просто, из левого меню «Form Elements» выбираем нужные нам элементы, нажимая на них, они попадают в нашу форму и их можно настраивать.
WordPress настраиваем форму контактов.
К примеру наша форма будет состоять из шести пунктов: имя, мыло, номер телефона, текст сообщения, капча и кнопка отправить. Собственно из левой формы переносим «Single Line Textfield» — это будет простое текстовое поле. Справа нажимаем «Settings»
WordPress настраиваем форму контактов.
В поле «Field Label» вводим название нашей форму, например «Введите Ваше имя:». Так же вводим сообщение об ошибке в поле «Error Message», в случае если поле не будет заполнено и является обязательным это сообщение увидит пользователь, например «Пожалуйста, введите Ваше имя». Поставьте галочку в поле «Required», если поле должно быть обязательно заполненным. Ну и ещё можно установить максимальное и минимальное число символов вводимые в строку, поля «Max Characters» и «Min Characters». В моём случае поле обязательно и длина символов не меньше двух.
WordPress настраиваем форму контактов.
По такой же схеме добавляем остальные поля и настраиваем. Я добавил следующие поля:
- «Email Address» — под Email.
- «Single Line Textfield» — для номера телефона взял текстовое поле.
- «Multiple Line Textfield» — Под сообщение взял тоже текстовое поле побольше, которое можно расширять.
- «Capcha» — проверка человек или нет.
- «Submit Button» — кнопка отправить.
Получилось так:
WordPress настраиваем форму контактов
Сохраняем форму. Ещё необходимо настроить сообщения формы, текст после отправки сообщения или в случае ошибки. Переходим на вкладку «Display Settings» и в поля «Form Submission Message» и «Form Error Message» вводим текст. Здесь же можете выбрать визуальный шаблон формы, поле «Form Template». Так же если не хотите что бы название формы отображалось на странице то ставим галочку в поле «Hide Form Title». Сохраняем.
WordPress настраиваем форму контактов
Дальше нам необходимо эту форму вставить на страницу, у меня была создана страница «Form Error Message» туда и добавил наш шорткод. Сам шорткод формы будет сверху в настройках, либо если вернуться назад, во вкладку «Forms».
WordPress настраиваем форму контактов
Просто копируем его и вставляем на нужную страницу. Вот как это выглядит у меня на странице:
WordPress вид формы контактов в итоге.
Дизайн я менял на свой.
Убираем непонятные знаки вопроса (�) в WordPress.
Заключительным штрих, исправляем непонятные знаки вопроса, пример: «..сер�…». Эта проблема возникает там где PHP обрезает часть текста, например в описании товара. Исправляется всё просто, необходимо в проблемном файле заменить функцию с substr на mb_substr.
К примеру у нас в теме такие знаки вопроса есть на главной странице, в кратком описании товара, где происходит сокращение.
WordPress исправляем знаки вопроса
Для поиска нужного файла использовал инструменты разработчика браузера, нашел нужный код строки, далее при помощи TotalCommandera, поиском по файлам, нашел нужный код в файле. В самом файле находим substr и заменяем на mb_substr. В моём случае это был файл «widget-product1.php», необходимые изменения нужно было внести в строку:
|
1 |
<p class="short_desc"><?php $home_exc = strip_shortcodes(substr(strip_tags(get_the_content()),0,32)); echo $home_exc.'…'; ?></p> |
Заменил на это:
|
1 |
<p class="short_desc"><?php $home_exc = strip_shortcodes(mb_substr(strip_tags(get_the_content()),0,32)); echo $home_exc.'…'; ?></p> |
В результате коварные знаки вопроса пропадают.
WordPress убрали знаки вопроса
Итог работы над интернет магазином.
Ну и в конце хочу с вами поделиться скриншотами моей финальной версией данного сайта. Как вы уже наверно заметили я внёс изменения в цветовую схему сайта по средствам CSS, ну и добавил красоты. Так как сайт не в инете, не могу сделать полноценные скриншоты, так что выкладываю по частям. В общем любуйтесь:
WordPress главная страница магазина
WordPress главная страница магазина — 2
WordPress главная страница магазина — 3
WordPress главная страница магазина — футер
wordpress каталог (витрина)
wordpress форма контактов
wordpress оформление заказа
wordpress- вид корзины товара
Собственно на этом всё. Надеюсь Вам пригодились мои уроки. Желаю Вам успехов и удачи. Не забывайте пользоваться кнопками «Поделиться в соц. сетях», так же подписываться на наш Канал и группы в ВК, Twitter, Facebook.