Форма обратной связи с помощью плагина Contact Form 7

В сентябре 2013 года я рассматривал процесс создания формы обратной связи на WordPress с помощью плагина Contact Form. Но со временем пришло понимание того, что возможностей этого плагина явно не достаточно и самый большой минус — он позволяет создать лишь одну форму обратной связи.

Вроде бы и проблемы-то нет, на самом деле. Но некоторым владельцам сайтов необходимо больше одной формы обратной связи, которые могут располагаться не только на странице «Обратная связь» или «Контакты», но и на любых других страницах или записях.

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

Форма обратной связи с помощью плагина Contact Form 7

Описание плагина

Плагин Contact Form 7 позволяет создавать множество разных форм для отправки результатов на ваш электронный ящик. Настройке поддаётся абсолютно всё — внешний вид формы, порядок полей, название надписей, формат электронных сообщений, выбор получателей ответов. В общем, плагин действительно очень функциональный и классный.

Кроме этого, вы можете подключить к нему плагин Akismet для защиты от спама, реализовать сбор и хранение данных в базе вашего сайта, а так же использовать мультиязычность. Это, на мой взгляд, круто! :-)

Установка плагина Contact Form 7

Плагин устанавливается стандартным способом в WordPress. Заходим в раздел «Плагины» — «Добавить новый», вводим название Contact Form 7 и устанавливаем его из репозитория. Не забываем активировать сразу после установки.

Настройка Contact Form 7

После активации плагина в главном меню WordPress появится новый пункт «Контакты (CF7)», это основное место настроек ваших форм обратной связи. Количество форм ничем не ограничено.
Форма обратной связи с помощью плагина Contact Form 7

Список существующих форм доступен в разделе «Contact Forms»:
Форма обратной связи с помощью плагина Contact Form 7

Тут же можно скопировать нужный шорткод для вставки на страницу или в запись:
Форма обратной связи с помощью плагина Contact Form 7

Добавление новой формы обратной связи

Как видите, каких-то особых дополнительных пунктов в меню нет, поэтому перейдём к созданию самой формы обратной связи. Для этого выбираем пункт «Добавить новую» в главном меню.

Первым делом нам предлагается выбрать язык интерфейса формы, которая будет создаваться. WordPress определяет установленную версию на вашем сайте и предлагает выбрать её по умолчанию:
Форма обратной связи с помощью плагина Contact Form 7

Но вы можете выбрать из списка любой доступный язык:
Форма обратной связи с помощью плагина Contact Form 7

После нажатия на кнопку «Добавить новую» появится конструктор формы.

Изменяем название формы

Первым делом нужно ввести название нашей формы, чтобы не потеряться в списке форм, когда их будет слишком много. Для этого достаточно нажать мышкой на слово «Заголовок» в верхней области экрана:
Форма обратной связи с помощью плагина Contact Form 7

После этого появится текстовое поле, в котором введём название с описанием:
Форма обратной связи с помощью плагина Contact Form 7

И нажмём кнопку «Сохранить».

Как только страница обновится, вы увидите следующее сообщение:
Форма обратной связи с помощью плагина Contact Form 7

Можно скопировать предложенный шорткод и вставить на нужную нам страницу.
Но вы можете сделать это и позже, как только настроите форму. Выбор за вами.

Изменяем шаблон формы

Шаблон формы — это обычный HTML-код, который формирует внешний вид вашей формы. По умолчанию он содержит 4 поля (имя, электронный адрес, тему и сообщение) и кнопку отправки формы. Выглядит это следующим образом:
Форма обратной связи с помощью плагина Contact Form 7

Вы можете менять блоки местами, просто вырезая и вставляя их код в любое место.
Например, мы можем поменять местами поле электронного адреса и имя клиента:
Форма обратной связи с помощью плагина Contact Form 7

Или же можем удалить поле «Тема», чтобы оно не высвечивалось в нашей форме. Для этого достаточно удалить соответствующий блок текста в нашем шаблоне:
Форма обратной связи с помощью плагина Contact Form 7

«Звёздочка» возле кода элемента означает что это поле обязательное и пока клиент не введёт какое-то значение, форма не будет отправлена:
Форма обратной связи с помощью плагина Contact Form 7

[subscribe_form button=»Я хочу получать материалы рассылки!»]

Как добавить новое поле в форму

Представьте, что вам необходимо в стандартную форму добавить поле с адресом сайта. Конструктор формы этого плагина позволяет безо всяких проблем реализовать задуманное. Достаточно воспользоваться кнопкой «Сгенерировать тэг»:
Форма обратной связи с помощью плагина Contact Form 7

При нажатии вывалится огромный список возможных дополнительных полей:
Форма обратной связи с помощью плагина Contact Form 7

Вам останется лишь выбрать тип нужного поля и выполнять ещё ряд простых действий.
Форма обратной связи с помощью плагина Contact Form 7

Не пугайтесь. Настройки хоть и выглядят устрашающе, но на деле очень простые :-)

Признак «Обязательное поле» позволяет установить дополнительную проверку и пока это поле будет оставаться пустым или иметь некорректное значение, форма не будет отправлена. Эта настройка есть практически у всех типов полей:
Форма обратной связи с помощью плагина Contact Form 7

Кроме этого, многие поля нашей формы имеют одинаковые настройки имени, указания ID элемента и класса CSS, через которые можно изменять внешний вид этих полей. Они присутствуют практически во всех полях:
Форма обратной связи с помощью плагина Contact Form 7

Поле «Имя» самое важное, именно оно используется и в шаблоне формы, и в шаблоне письма.

Но за время пользования этим плагином мне ни разу не приходилось менять или устанавливать значения этих атрибутов. Скорее всего и вам не понадобится. Но рассказать и познакомить с ними я обязан :-)

Все текстовые поля в нашем конструкторе формы имеют дополнительные поля с размером самого поля и максимальной длиной значения, вот они:
Форма обратной связи с помощью плагина Contact Form 7

Так же специфические поля, типа URL или каких-то других, отличных от обычных текстовых, имеют свои особенные настройки. Например, наше поле URL имеет дополнительную настройку:
Форма обратной связи с помощью плагина Contact Form 7

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

Теперь нам нужно добавить код этого поля в форму шаблона формы.
Для этого необходимо скопировать предложенный код и вставить его в форму слева:
Форма обратной связи с помощью плагина Contact Form 7

Например, я хочу разместить поле с адресом сайта после имени клиента. Мне необходимо будет ввести код по аналогии с другими полями, то есть добавить абзац, перенос строки и вставить шорткод этого нового поля:
Форма обратной связи с помощью плагина Contact Form 7

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

И вставить в текстовое поле ниже в «Шаблон письма»:
Форма обратной связи с помощью плагина Contact Form 7

По аналогии добавляются и другие поля. Всё просто и понятно :-)

Адресат и шаблон письма

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

В первую очередь необходимо указать адресата, на чью электронную почту будут приходить сообщения с нашей формы. По умолчанию сюда подставляется электронный адрес из настроек WordPress.
Форма обратной связи с помощью плагина Contact Form 7

Я думаю вы уже обратили внимание что в этих формах используются непонятные коды, типа [your-name], [your-email]. Так вот, это то самое поле «Имя» из генератора поля, которое я рассматривал выше:
Форма обратной связи с помощью плагина Contact Form 7

Напоследок я бы рекомендовал вам установить опцию «Использовать HTML-формат письма», так вы можете сделать ваши сообщения с сайта более информативными, используя HTML при вёрстке шаблона.
Форма обратной связи с помощью плагина Contact Form 7

Ну и дальше вам останется лишь привести в порядок шаблон самого письма:
Форма обратной связи с помощью плагина Contact Form 7

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

P.S. В настройках этого плагина есть довольно интересная возможность — указать второго адресата сообщения. Честно говоря я сходу не могу придумать зачем это может понадобиться, но раз возможность есть, то кто-то её в любом случае воспользуется.
Форма обратной связи с помощью плагина Contact Form 7

Настройка сообщений

Ну и какой же это плагин отправки сообщений, если он не позволяет изменить текст уведомлений или надписей? И плагин Contact Form 7 не исключение. Он позволяет перевести любую надпись или сообщение об ошибке:
Форма обратной связи с помощью плагина Contact Form 7

Не забудьте сохранить все изменения нажатием на кнопку «Сохранить», она в самом верху страницы :-)

Известные проблемы

Бывает так, что при использовании нестандартных контролов, типа email или url, внешний вид отдельных элементов на странице будет отличаться. Например, обратите внимание на поле «Адрес вашего сайта» в самой форме:
Форма обратной связи с помощью плагина Contact Form 7

Не увидели? А я покажу поближе:
Форма обратной связи с помощью плагина Contact Form 7

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

Тут есть два варианта решения. Первое — добавить соответствующие стили в файл style.css вашей темы, либо изменить в шаблоне формы тип url на text, тогда всё будет нормально:
Форма обратной связи с помощью плагина Contact Form 7

Заключение

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

Конечно, обязательно появится кто-то, у кого либо что-то не получится, либо захочется предложить к рассмотрению какой-то другой, аналогичный плагин. Я всегда рад вопросам и предложениям! Не стесняйтесь задавать их в комментариях :-)

Если вы хотите поблагодарить меня за материал — можете сделать это здесь :-)

Как убрать заголовок виджета в WordPress

Зачем может понадобится сокрытие заголовка виджета? Я вижу только одну причину — он не несёт какой-либо смысловой нагрузки, либо не вписывается в общий дизайн вашего сайта.

Некоторые могут заметить, что нет ничего проще — достаточно просто указать пустое значение в названии виджета следующим образом:
Как убрать заголовок виджета в WordPress

Только не сработает это… Вернее, сработает, но не для всех виджетов.
Пример виджета с пустым заголовком:
Как убрать заголовок виджета в WordPress

Что же делать?

В общем, решение довольно простое и доступно абсолютно любому владельцу сайта на WordPress. Сводится оно к добавлению кода в файл functions.php, который находится в директории с вашей темой и небольшим трюком в именовании виджета.

  • Подключаемся к FTP вашего хостинга и заходим в директорию с темой.
  • Открываем файл functions.php и добавляем в конец файла следующие строки кода:
    add_filter( 'widget_title', 'hide_widget_title' );
    function hide_widget_title( $title ) {
        if ( empty( $title ) ) return '';
        if ( $title[0] == '!' ) return '';
        return $title;
    }
  • Всё! Думали будет сложнее? :-)

Заходим в раздел «Внешний вид» — «Виджеты» и теперь в том виджете, заголовок которого вы хотите скрыть на сайте, достаточно первым символом добавить восклицательный знак, либо оставить его пустым.

Например, скроем заголовок виджета «Облако меток»:
Как убрать заголовок виджета в WordPress

И наслаждаемся результатом на сайте у виджета «Облако меток»:
Как убрать заголовок виджета в WordPress

Если в каком-то из ваших виджетов этот код не сработает — напишите в комментариях, будем вместе разбираться :-)

Добавление карты сайта в Яндекс.Вебмастер

Совершенно упустил из виду в уроке «WordPress SEO by Yoast» о необходимости добавлении информации о карте сайта (sitemap) в инструменты вебмастера от Яндекса и Google.

Сегодня вспомнил и подготовил короткий ролик на этот счёт :-)

Как изменить язык сайта на WordPress

Во время прохождения обучения работе с WordPress через Skype, у одного из учеников возник вопрос: как можно тренироваться на русскоязычной версии WordPress, а затем перевести его на другой язык. В этом случае был датский язык.

Давайте рассмотрим процесс изменения языка вашего сайта на WordPress.

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

Смена языка WordPress вручную

Этот путь сводится к простым шагам: скачать файлы на ваш компьютер, загрузить на хостинг, изменить конфигурационный файл WordPress. Приступим?

Скачиваем необходимые файлы

  • Заходим на сайт WordPress в раздел языковых файлов
  • Находим нужный язык и в скобках будет указан код, который нужно запомнить:
    Как изменить язык сайта на WordPress

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

  • Теперь необходимо зайти на страницу с языковыми файлами и найти нужную нам директорию по международному коду языка:
    Как изменить язык сайта на WordPress
  • Переходим по ссылке «trunk»:
    Как изменить язык сайта на WordPress
  • Затем заходим в «messages»:
    Как изменить язык сайта на WordPress
  • Находим файлы, который оканчиваются на «.mo»:
    Как изменить язык сайта на WordPress
  • И сохраняем их на компьютер:
    Как изменить язык сайта на WordPress

Отлично, первую часть работы выполнили. Не устали? :-)

Загрузка файла на FTP

Теперь необходимо загрузить скачанные файлы на ваш хостинг в директорию /wp-content/languages/.

Если вы не знаете, как это сделать, воспользуйтесь инструкцией по работе с FTP.

Активация языка в файле wp-config.php

Аналогично с предыдущим пунктом, заходим в корневую директорию сайта, находим файл wp-config.php и открываем его на редактирование. Нас здесь интересует настройка WPLANG:
Как изменить язык сайта на WordPress

Изменяем её на da_DK:
Как изменить язык сайта на WordPress

Сохраняем файл и загружаем обратно на FTP.

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

Плагин WP Native Dashboard

Для решения той же задачи, существует специальный плагин — WP Native Dashboard.
Как изменить язык сайта на WordPress

Установка и активация стандартная для всех плагинов в WordPress. Поэтому предлагаю сразу перейти к настройке и использованию плагина.

  • Заходим в меню «Параметры» — «WP Native Dashboard»
  • Проставляем все галочки в настройках:
    Как изменить язык сайта на WordPress
  • Выбираем версию вашего WordPress и нажимаем «Check Repository»:
    Как изменить язык сайта на WordPress
  • После этого начнётся процесс загрузки списка доступных языков:
    Как изменить язык сайта на WordPress
  • Теперь остаётся выбрать нужный язык и нажать кнопку «Download»:
    Как изменить язык сайта на WordPress

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

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

Заключение

После выполнения этих операций язык вашего сайта на WordPress изменится на нужный вам.
Как изменить язык сайта на WordPress

Контент для тестирования вашего сайта

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

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

Что это за загадочный зверь?

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

Более чем три года назад началась разработка этого монстра и вылилось в http://wptest.io/

Как использовать?

  • Заходим на главную страницу WP TEST и нажимаем кнопку «Download»:
    Контент для тестирования вашего сайта
  • Сохраняете архив на ваш компьютер и извлекаете из него все файлы
  • Из архива нам понадобится файл wptest.xml
  • Теперь остаётся лишь импортировать контент по инструкции.

После этого на ваш сайт будет загружено десятки разных записей, страниц, категорий и прочих полезностей, для успешного тестирования новых тем для сайта. Пользуйтесь! :-)

Как вставить видео с YouTube в блог на WordPress

На момент публикации это последняя запись из цикла статей по интеграции записей с различных веб-сервисов. До этого были рассмотрены: Facebook, Google+, Twitter и Instagram. Ссылки на них вы найдёте в конце этой заметки.

А сейчас мы рассмотрим два способа вставки видео из YouTube: через oEmbed и вставкой HTML-кода.

Подключаем видео через oEmbed

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

Скопировали адрес на нужную вам запись, картинку или статус, добавили на страницу вашего сайта и, вот она уже опубликована. Давайте сделаем то же самое для YouTube, потому что и здесь всё абсолютно идентично.

  • Находим понравившееся видео на страницах YouTube и переходим на него
  • Копируем ссылку из адресной строки:
    Как вставить видео с YouTube в блог на WordPress
  • Вставляем эту ссылку простым текстом в вашу запись на WordPress и сохраняем.

Результат:
http://www.youtube.com/watch?v=NMvENuzJDv4

Если у вас по каким-то причинам не получается использовать этот способ, то вывод один: у вас очень старая версия WordPress. Обновитесь прямо сейчас и не забудьте сделать резервное копирование.

Вставка с использованием HTML-кода

Этот способ железный и подходит в абсолютно всех случаях, без исключений.

  • Заходим на страницу с понравившимся нам видео
  • Под самим видео находим закладку «Поделиться» и выбираем в ней «HTML-код»:
    Как вставить видео с YouTube в блог на WordPress
  • Копируете код, представленный на скриншоте ниже и вставляете его на свой блог:
    Как вставить видео с YouTube в блог на WordPress
  • Если нужно изменить размер — используйте для этого выпадающий список под HTML-кодом

Теперь, после вставки скопированного кода в текст вашей записи или на страницу, вы увидите нужное видео :-)


Похожие записи:

Как вставить запись из Twitter в блог на WordPress

По аналогии с рассмотренными ранее постами о вставке записи из Facebook в WordPress и вставке записи из Google+ в WordPress, рассмотрим сегодня возможность добавления сообщения из сервиса Twitter.

Эта социальная сеть с каждым днём набирает всё большие обороты. Количество пользователей — сумасшедшее, качество контента — высочайшее, поэтому грех не использовать релевантные вашим постам записи из Twitter.

Технология, с помощью которой можно просто и удобно вставлять записи из множества веб-сервисов в WordPress называется oEmbed и введена она была аж в версии 2.9.

Принцип использования очень прост — копируете URL со страницы любого из допустимых сервисов (всего их 17 на сегодняшний день), вставляете без каких-либо кодов в вашу страницу и она автоматически преобразуется в контент связанного типа. Если это видео с YouTube — подставляется видео, если запись из Twitter — формируется красивое окно с сообщением.

Стоит отметить, что Twitter в oEmbed был добавлен совсем недавно, а именно, в версии 3.4. Поэтому, если вы используете старую версию, тогда вам придётся использовать какие-либо внешние плагины, для интеграции своего сайта с этой социальной сетью.

Но я настоятельно рекомендую выполнить обновление WordPress до самой последней версии.

Существуют два варианта вставки: свои и чужие твиты.

Вставка записи из своего аккаунта

Здесь будет ровным счётом три шага, для достижения необходимого результата.

  • Заходим на страниц своего аккаунта и находим запись, которую хотим вставить на сайт.

    Нажимаем на ссылку «Details». В русской вариации будет называться иначе :-)
    Как вставить запись из Twitter в блог на WordPress

  • После этого необходимо скопировать URL открывшей страницы:
    Как вставить запись из Twitter в блог на WordPress
  • И остаётся вставить эту ссылку в нужное нам место в записи на WordPress:
    Как вставить запись из Twitter в блог на WordPress

Результат:

Вставка записи из чужого аккаунта

Бывает, что вам нужно сослаться на чей-то чужой твит, давайте рассмотрим этот случай.

  • Находим интересный твит:
    Как вставить запись из Twitter в блог на WordPress
  • Наводим на него мышкой и в появившейся ссылке «More» выбираем «Embed Tweet».
    В русскоязычном интерфейсе надписи будут другие, не знаю как их правильно перевести для вас :-)
    Как вставить запись из Twitter в блог на WordPress
  • В появившемся окне необходимо скопировать приведённый код и вставить его в свою запись в режиме «Текст»:
    Как вставить запись из Twitter в блог на WordPress

Вот и всё. Таким вот нехитрым способом можно подключить твиты с понравившихся вам аккаунтов на WordPress :-)


Похожие записи: