Как заполнить данные на wordpress

Делаем свою контактную форму на WordPress с нуля

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

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

Свой функционал – это определенный опыт. Вы всегда будете знать, что именно он делает, какие задачи помогает решить. К тому же, вы сможете закрепить свои навыки, и впоследствии реализовать что-то более сложное.

Почему просто не воспользоваться плагинами?

Плагины выступают не самым подходящим решением для простых контактных форм по следующим причинам:

  • Плагин несет в себе гораздо больше возможностей, чем вы нуждаетесь;
  • Использование пользовательского интерфейса для создания простой контактной формы является излишним;
  • Понимание всех деталей создания формы очень важно для вашего опыта и вашего мышления;
  • Стандартные стили надоели до тошноты;

Этот список при желании можно продолжить.

Я ненавижу громоздкий пользовательский интерфейс. Я ненавижу плохой опыт взаимодействия, и особенно ненавижу перебор с функциональностью. «Ненавижу» — сказано слишком сильно, но посмотрите сами: сегодня плагины, предлагающие создание контактных форм, словно соревнуются между собой за звание самого полнофункционального решения. И в итоге мы имеем следующие результаты:

Но мне нужны все эти настройки!

Неужели? Это уже не Web 2.0. Комплексные формы отпугивают клиентов.

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

Что является самым важным?

Имя, адрес электронной почты, сообщение и проверка на спам. Правда, мне кажется, было лишним это объяснять.

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

Если люди захотят оставить свой телефонный номер и адрес, они могут сделать это и в самом сообщении.

Создавать все с нуля – это так сложно!

Нет, естественно. Если вы будете терпеливы, то чтение всего руководства (и усвоение материала) займет у вас максимум полчаса. Нам понадобится создать:

  1. Произвольный шаблон.
  2. Немного PHP-кода.

Этого будет достаточно. Мы зададим отображение формы, установим проверку на спам, реализуем уведомление администратора по почте, а также поблагодарим клиента за его сообщение. Вот сам итог.

Первые шаги

Как и всегда, я начну со свежей сборки WP. Придерживаясь хорошей практики, я создам дочернюю тему TwentyTwelve, содержащую только таблицу стилей и шаблон произвольной страницы. Вы можете вытащить произвольный шаблон страницы, вставить его в любую из ваших существующих тем, и он будет прекрасно работать (кроме некоторых CSS модификаций).

В wp-content/themes создадим новую папку contact-form. В ней создадим два файла — style.css и page-contact-us.php.

В файл style.css вставим следующее:

Закомментированные строки можно изменить по своему выбору.

Теперь нам нужно активировать тему на тестовом сайте.

Следующий шаг – создание страницы с названием «Contact Us». Эта страница напрямую связана с шаблоном page-contact-us.php, который мы создали ранее. Такое решение взято не из головы — оно основано на структуре шаблонов WP. Файл page-about-us.php будет автоматически использоваться для вывода на экран страницы About Us. Очень удобно!

Если вы создали шаблон page-contact-us.php и оставили его пустым, то при посещении вашей новой страницы Contact Us вы… ничего не увидите! Будет красоваться чистая страница.

Все в порядке! Внесите в шаблон следующий код, чтобы Contact Us выглядела как обычная страница:

Теперь у нас есть базовая страница. Самое время поместить на нее простую форму.

Читайте также:  10 ошибок когда вы принимаете душ

Замените параграф FORM CODE GOES HERE следующим кодом:

Извините меня за встроенные стили! Они используются только для вывода сообщений об ошибочном/успешном выполнении, и для удобства мы их разместили в одном файле. Поместите стили в свой файл style.css.

Что мы делаем в данном фрагменте кода? Сначала мы выводим переменную $respond, которую мы рассмотрим чуть позже.

Затем идут обычные теги формы. Обратите свое внимание на то, атрибут value этих тегов заполняется через переменную $_POST. Это нужно для того, чтобы данные не терялись даже в случае некорректного ввода каких-либо полей формы пользователем.

Также имеется скрытый элемент input, который позволяет проверять, отправил пользователь что-нибудь или нет. Я рассмотрю это позже.

Я добавил звездочки рядом с каждым полем, чтобы показать, что эти поля являются обязательными для заполнения.

Если вы сохраните этот код и обновите страницу, то получите красивую контактную форму.

Логика

Логика, положенная в основу отправки данных формы, довольно проста. Есть несколько действий, которые надо реализовать:

  1. Генерация ответа и сообщения (основанная на валидации).
  2. Валидация.
  3. Отправка электронного письма.

Генерация ответа

Чтобы сохранить чистоту и ясность PHP-кода, мы поместим переменную $response в форму. Тем самым мы постараемся отделить логику от представления.

Мы должны написать функцию, которая внесет в переменную $response фидбэк, полученный на этапе валидации.

В вершину файла page-contact-us.php перед get_header() вставим следующее:

Отлично. Пока что данная функция довольно ограничена в плане своих действий. Если у вас есть некоторые знания в области PHP, то вы поймете, что она: а) создает пустую переменную $response, б) заполняет ее тем, что было передано в переменной $message, в зависимости от состояния $type, которое будет либо ошибкой, либо успехом.

Теперь, когда мы создали валидацию, мы можем вызывать generate_response() в любом случае (не важно, успех это или ошибка), передавать сообщение (скажем, недопустимый Email), и это сообщение будет выдано сразу над формой.

Некоторые переменные, которые нам понадобятся

Для создания качественной контактной формы нам нужны три группы переменных:

  • Переменные для сообщений валидации
  • Переменные для элементов ввода формы
  • Переменные для функции PHP mail()

Процесс валидации будет использовать все эти группы для проверки правильности ввода, отправки электронного письма и уведомлении пользователя об отправленном сообщении.

Под функцией generate_response() введем следующие 12 переменных:

Предназначение этих групп понятно. Группа Response Message хранит в переменных все наши сообщения обратной связи.

Переменные User Posted Variables хранят данные, полученные из полей формы. Переменная $_POST содержит в себе всю информацию, переданную через форму.

Наконец, мы задаем несколько переменных, которые требуются функции mail() для указания некоторых данных при отправке письма.

Валидация

Это самый сложный момент. Нам необходимо проверить наличие всех возможных проблем самым коротким и быстрым способом. Для этого нужно использовать нескольких вложенных if/else операторов.

Проверяем по порядку:

  1. Передал ли пользователь форму (используя скрытое поле).
  2. Если нет, то проверяем, прошел ли он проверку (правильно ли он выполнил математическое действие).
  3. Если все передано, проверяем email адрес.
  4. Если все передано, проверяем присутствие имени и сообщения (ибо они требуются).
  5. Если все предыдущее верно, отправляем email.

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

Человеческая проверка

Это достаточно простой шаг. Если пользователь может правильно ввести результат математического действия, значит он является человеком, а не ботом. Если вы посмотрите на нашу форму, то увидите поле с уравнением: ? + 3 = 5. Очевидно, если значение не равно 2, пользователь должен получить ошибку. Если оно равно 2, то тогда идем дальше. После групп переменных вставьте следующее:

Если человеческая проверка не равна нулю, то мы генерируем соответствующий ответ. Если она равна нулю, то ввод был некорректен. Последняя строка проверяет, было ли отправлено скрытое поле, и если это было сделано, то тогда выдается другая ошибка.

Здесь мы тестируем два случая: пустой контент и человеческая проверка.

Если вы попробуете отправить пустую форму, то получите сообщение об ошибке.

Хорошо! Если вы введете что-то, кроме 2, в строку проверки на спам, то вы также получите ошибку.

Следующая часть валидации – проверка email. Теперь мы знаем, что форму заполнял человек, а не бот, потому нам надо убедиться, что почтовый адрес представлен правильно.

Для простой реализации данного шага мы будем использовать PHP-функцию filter_var(), которая имеет несколько валидационных моделей. Мы будем использовать модель FILTER_VALIDATE_EMAIL.

Заменим три строки с комментариями в середине нашей валидации следующим кодом:

Здесь мы проверяем переменную $email, является ли она корректным email-адресом. В противном случае выдаем на экран ошибку.

Читайте также:  Как активировать nulled тему wordpress

Проверяем присутствие имени и сообщения. Для этого мы будем использовать PHP-функцию empty(), которая возвращает true или false в зависимости от того, пуста или нет переданная ей переменная.

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

Заменим комментарий send email следующим кодом:

Готово! Теперь у вас есть полнофункциональная контактная форма.

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

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

Источник

Заполняем данными сайт на WordPress (большим количеством постов) и комментариев (для тестирования)

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

Вот код, ставить который можно в любимый function.php :

Объяснять подробно не буду что и зачем. В двух словах о том, как это работает:

Чтобы заполнить блог постами

Дописываем в УРЛ, нечто такое

где, 3000 — сколько постов добавятся. cats=1|3 — посты будут случайно добавляться в категорию 1 или 3. tags=tag1|tag2|tag3 — постам будут приписана одна из меток (использовать кириллицу нельзя, указываем слаги).

У постов также заполняется произвольное поле views, куда пишутся просмотры. Отредактируйте функцию fill_db_with_metadata_add_views(), чтобы изменить добавление произвольных полей.

Чтобы заполнить комментариями

Дописываем в УРЛ, нечто такое

Комментарии будут «оставляться» к случайным постам, открытым для комментирования. 3000 — количество комментариев.

Что касается того, где это можно применить? Где угодно — заполняем блог и тестируем его скорость, при 100к постов явные «болячки» всплывают на ура. Тестить можно шаблоны, функции и отдельные запросы к БД или что-нибудь еще.

Тестирование отображения контента для темы

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

Для импорта этого файл используйте специальный плагин WordPress Importer.

Для тестирования отображения виджетов создан простой плагин Monster Widget. Плагин дает возможность быстро и легко добавить все существующие виджеты в боковую панель для тестирования.

Источник

Блоки » Блок «Формы»

Благодаря блоку «Форма» читатели могут связываться с вами через веб-сайт. Блок «Форма» позволяет добавлять формы различного типа, включая контактную форму, форму бронирования на определённое время, форму регистрации событий, форму обратной связи и многое другое!

Обучающее видео

Добавление блока «Форма»

Чтобы добавить блок «Форма», щёлкните значок + Вставка блоков и выполните поиск по ключевому слову «форма». Щёлкните его, чтобы добавить его в запись или на страницу.

Вы можете ознакомиться с подробными инструкциями по добавлению блоков.

Чтобы быстро добавить новый блок «Форма», можно также набрать /form в новой строке и нажать Enter.

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

Выбрав тип формы, проверьте настройки справа, чтобы задать ключевые настройки:

  • Адрес электронной почты для отправки уведомлений (подробности)
  • Тема письма (подробности)
  • Что происходит, когда кто-то отправляет форму (подробности)

Если вас устраивает вид формы, щёлкните Опубликовать или Обновить чтобы изменения вступили в силу (блок «Форма» не будет работать на странице, которая является неопубликованным черновиком). Либо ознакомьтесь со сведениями о дальнейшей настройке формы перед публикацией.

Панель инструментов блока

Если щёлкнуть блок «Форма», появится следующая панель инструментов с опциями:

На панели инструментов блока «Форма» доступны следующие опции:

  • Изменение типа блока.
  • Перетаскивание блока.
  • Перемещение блока выше или ниже.
  • Редактирование настроек формы.

Настройка формы

Вы можете управлять полями в форме и настраивать их. При первом добавлении блока «Форма» вы увидите несколько полей формы, с которых можно начать, например «Имя» и «Адрес электронной почты».

Чтобы добавить новое поле в форму, щёлкните значок + Вставка блоков, который отображается под последним полем, как показано здесь:

Читайте также:  Как отправить файл с принтера на компьютер

Щёлкните Просмотреть все и прокрутите вниз, чтобы увидеть все поля формы, которые можно выбрать:

  • Название
  • Электронная почта
  • Веб-сайт
  • Текст
  • Выбор даты
  • Сообщение
  • Номер телефона
  • Флажок
  • Группа флажков
  • Согласие
  • Переключатель
  • Выбор

Можно также добавить другие блоки, не относящиеся к формам, например «изображение» или «текст».

Настройки поля

Добавив все поля в форму, щёлкните любое поле, чтобы внести дальнейшие изменения, в том числе следующие:

  • Переместить поле вверх или вниз с помощью кнопок со стрелкой.
  • Сделать поле обязательным (это означает, что такое поле необходимо заполнить до отправки формы). Чтобы сделать поле обязательным, нажмите кнопку * или Обязательное поле на панели справа.

Настройки блока в блоке «Форма».

Можно также настроить ширину поля с помощью настройки Ширина поля, размещённой справа. Если для двух последовательных полей задать ширину 50 %, они будут отображаться на одной строке.

Настройки блока «Форма»

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

Изменение адреса электронной почты для отправки сообщений

По умолчанию сообщения будут отправляться на тот же адрес электронной почты, который задан в настройках учётной записи. Если вы хотите изменить адрес электронной почты для отправки сообщений формы, выполните следующее:

  1. Нажмите кнопку Список в верхней части экрана (выглядит как три горизонтальные линии). Она отмечена цифрой 1 на изображении справа.
  2. Выберите «Форма» (отмечена цифрой 2 на изображении справа.)
  3. В правой части экрана в разделе «Настройки формы» появится поле Адрес электронной почты для отправки. Введите здесь адрес электронной почты.
    • Вы можете указать через запятую нескольких получателей электронных уведомлений.
  4. После этого нажмите Обновить, чтобы сохранить изменения.

Тема письма

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

При отправке

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

  • Показывать итог по отправленным полям.
  • Показывать текстовое сообщение, которое вы можете написать.
  • Перенаправлять на другую веб-страницу (можно использовать для переадресации посетителей на другую страницу вашего или любого другого сайта).
Заголовок сообщения

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

Просмотр всех сообщений

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

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

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

Нежелательные сообщения и спам

Чтобы защитить форму от спама и нежелательного содержимого, в раздел Запрещённые комментарии можно добавить ключевые слова, имена пользователей, IP-адреса, адреса электронной почты и многое другое. Для доступа к этому разделу выберите Настройки → Обсуждение.

Отзывы, в которых используются слова, добавленные в разделе «Запрещённые комментарии», будут сразу отправляться в корзину в разделе «Отзыв».

Полезные советы

  • Этот метод не безопасен. Форма не защищает персональную информацию, в частности номера кредитных карт и банковских счетов, имена и пароли пользователей и т. д., поскольку для передачи информации используется электронная почта. Для получения платежей используйте блок «Платежи» или аналогичную службу обработки платежей, которая надёжным образом обрабатывает финансовые транзакции.
  • Встроенный фильтр спама. Мы фильтруем отправляемые данные при помощи Akismet для борьбы со спамом, а затем вносим их в область управления отзывами, которая доступна редакторам и администраторам вашего веб-сайта. Мы также отправим вам копию по электронной почте.
  • Доступность на WordPress.org. Если вы работаете с собственной копией WordPress.org, используйте плагин Jetpack, чтобы получить те же возможности.
  • Ответ. Для ответа при отправке контактной формы потребуется использовать ваш персональный адрес электронной почты. Вы можете использовать для ответа специальный адрес электронной почты, создав учётную запись в одной из служб, указанных здесь.

Дополнительно

На вкладке дополнительных настроек можно добавить к блоку класс CSS, что позволяет записывать пользовательские CSS и настраивать стиль блока по своему усмотрению. Дополнительные сведения.

Разнообразие тарифных планов и ценовых предложений

Бесплатно

Оптимальный вариант для студентов

Personal

Оптимальный вариант для представления своего хобби

Источник

Поделиться с друзьями
КомпСовет
Adblock
detector