Уроки по установке и настройке WordPress от Александра Грузова

03.01.201414.03.2016

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

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

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

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

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

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

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

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

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

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

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

Список существующих форм доступен в разделе «Contact Forms»:

Тут же можно скопировать нужный шорткод для вставки на страницу или в запись:

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

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

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

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

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

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

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

После этого появится текстовое поле, в котором введём название с описанием:

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

Как только страница обновится, вы увидите следующее сообщение:

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

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

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

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

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

«Звёздочка» возле кода элемента означает что это поле обязательное и пока клиент не введёт какое-то значение, форма не будет отправлена:

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

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

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

При нажатии вывалится огромный список возможных дополнительных полей:

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

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

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

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

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

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

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

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

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

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

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

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

И вставить в текстовое поле ниже в «Шаблон письма»:

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

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

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

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

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

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

Ну и дальше вам останется лишь привести в порядок шаблон самого письма:

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

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

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

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

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

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

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

Не увидели? А я покажу поближе:

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

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

Заключение

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

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

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

16.12.201320.06.2016

Как убрать заголовок виджета в 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;
}

Всё! Думали будет сложнее? :-)

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

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

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

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

27.10.201324.01.2015

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

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

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

27.10.201327.10.2013

Аудит сайта madam-internet.com

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

В данном видео рассматривается сайт Мадам Интернет — Советы опытной дамы и волшебный бумеранг. Очень интересный и живой сайт, рекомендую всем к ознакомлению!

Открывайте видео на полный экран, чтобы не пропустить особо важные моменты и детали.

P.S. В ближайшее время подготовлю дополнительные инструкции в своём блоге, чтобы владельцы сайтов на WordPress могли самостоятельно применять полученные знания из видео без привлечения сторонних специалистов.

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

19.10.201311.07.2019

Как подогнать изображение под размер записи в WordPress

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

В идеальном варианте, широкоформатное изображение должно точно вписаться по ширине:

А бывает и вот такая неприятность (выявлено в плагине wPPage):

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

Как же это исправить?

Есть два варианта: изменить масштаб изображения в самом WordPress, либо изменить фактический размер изображения в графическом редакторе.

Уверен, что большинство людей скажут, что первый вариант наиболее удобный, потому что быстрый и не требует особых знаний и каких-либо временных затрат. Я соглашусь с этим, но есть нюанс: ваши пользователи со временем станут вас ненавидеть.

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

Я рекомендую изменять размер изображения под нужный вам, используя любой удобный графический редактор. Это может быть Adobe Photoshop, GIMP, Paint.Net или какой-нибудь другой.

Как узнать требуемый размер?

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

Рассмотрим на примере браузера Google Chrome, в остальных (Opera, Mozilla Firefox, Яндекс.Браузер) всё делается абсолютно аналогично.

Нажимаем правой кнопкой мыши на любом элементе на странице и в появившемся меню выбираем «Инспектировать элемент»:
Откроется отладчик:
Пугаться его вида не стоит — он не такой страшный, как кажется.
В нашем случае был выделен и подсвечен тот элемент, на котором я нажал правой кнопкой мыши.
Теперь нам нужно определить контейнер, в котором выводится наш контент, собственно.
Для этого перещёлкиваем по всем элементам древовидной структуры, снизу вверх:
Обращаем внимание на то, что при выборе какого-либо элемента, он будет подсвечиваться на самой странице сайта:
Ваша цель — найти такой элемент, который бы был по размерам с шириной страницы.
В моём случае это элемент ps_content:
Как я узнал, что это именно он? Смотрите на скриншот, вы поймёте сразу:
Обратили внимание, что именно эта ширина и нужна мне для картинки?
Теперь остаётся лишь найти эти самые размеры ширины контейнера. Вот они:

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

Есть вопросы? Задайте их в комментариях! :-)

17.10.201310.07.2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Изменяем её на da_DK:

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

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

Плагин WP Native Dashboard

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

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

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

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

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

Заключение

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

13.10.201320.11.2013

WordPress SEO by Yoast — настройка и использование

Практически все блоггеры, которые используют WordPress для управления своим сайтом, пользуются плагином All in One SEO Pack (далее по тексту — AIOSP), оно и понятно — это самый популярный, известный и стабильный плагин из всех существующих решений для поисковой оптимизации сайта.

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

Имя его — WordPress SEO by Yoast.

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

Перед тем как начать, нам необходимо установить сам плагин из репозитория WordPress.

Импорт настроек из AIOSP

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

Для переноса настроек существует специальный плагин, который называется SEO Data Transporter. Устанавливается он так же просто, как и все плагины в WordPress. После импорта его можно будет удалить.

Рассмотрим его использование.

Заходим в меню «Инструменты» — «SEO Data Transport»:
В левом списке выбираем из какого плагина или источника выполняем импорт:
А в правом, куда или во что конвертируем:
После этого проведём анализ того, что удастся перенести с помощью плагина.
Для этого нажмём кнопку «Analyze»:
Теперь нажимаем на кнопку «Convert» и дожидаемся результата операции:
А вот и он, кстати:

После этого заходим в плагины и удаляем «All in One SEO Pack», он больше не нужен.

WordPress SEO by Yoast — настройка

Предлагаю пробежаться по необходимым настройкам плагина, не трогая сомнительные пункты. Всё разделы находятся в меню «SEO» главного навигационного меню панели управления вашего WordPress.

Заголовки и метаданные

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

Вкладка «Общие»

В этой вкладке вносил изменения только в раздел «Очистка от ссылок секции <head>»:

Все остальные параметры со снятыми чекбоксами.

Вкладка «Главная страница»

Был изменён формат вывода заголовка главной страницы. Оставил только название сайта и номера страниц. Не вижу смысла выводить на каждой странице в TITLE название моего блога.

Вкладка «Типы записей

Записи:

Остальные настройки не трогал.

Вкладка «Остальное»

Изменил только это:

Все английские фразы переименовал на русские варианты. Блог-то на русском :-)

Социальные сети

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

Я же выбрал для себя использование плагина Open Graph.

XML карта сайта

А вот и первая ощутимая польза от этого SEO плагина — возможность отказаться от использования плагина Google XML Sitemaps, либо его аналогов. Теперь эта возможность имеется в»WordPress SEO by Yoast «из коробки». Более того, стоит заметить, что наш плагин создаёт карту сайта гораздо богаче по возможностям, чем её аналог.

Для активации этой настройки необходимо нажать соответствующую галочку:

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

Так как у меня блог однопользовательский и я против того, чтобы в индекс залетали какие-либо данные об авторе, активирую следующую настройку на текущей странице плагина:

Однозначно не лишним будет установить и следующие галочки:

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

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

Ну и, последняя настройка, это количество записей на странице в карте сайта. Я поставил 100:

Постоянные ссылки

Ещё одна отличная возможность избавиться от дополнительного плагина. В данном случае, первая опция даёт вам возможность с чистой совестью удалить плагин No Category Base, если вы пользуетесь им.

Для тех, кто не знает что это, расскажу: эта опция удаляет слово «category» из URL-адресов ваших записей. Я считаю что в тех блогах, которые не используют страницы рубрик как отдельные страницы для продвижения по каким-либо запросам, можно смело устанавливать эту галочку, либо закрывать в robots.txt индексацию рубрик.

Следующая настройка актуальна для тех, кто не использует плагин «.html on PAGES», добавляющий расширение html для всех страниц. Ну, либо же для записей, если вы используете аналогичный плагин.

Если же вам принципиально важно использовать какой-то суффикс в ваших URL — отключайте эту опцию обязательно!

Следующие три опции я включил, руководствуясь здравым смыслом и логикой :-)

В последней настройке выбираем тот протокол, который используется у вас. На 99.9% это будет HTTP:

Хлебные крошки

Они же breadcrumbs. Очень полезная штука для создания дополнительной навигации по вашему сайту.

На сайте выглядит следующим образом:

Для создания хлебных крошек у меня используются встроенные возможности в теме, поэтому здесь я лишь приведу пример из настроек нашего плагина:

RSS

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

Я использовал его для анонса своего бесплатного курса «WordPress для чайников».

Делается это очень просто: вставляем нужный нам HTML код в соответствующую область и радуемся:

Кстати, если вы ещё не подписаны на обновления моего блога, самое время подписаться здесь! :-)

Обновляем метаданные рубрик

Так как для вывода метаданных рубрик у меня используется плагин Category SEO Meta Tags, то мне пришлось вручную переносить данные из этого плагина в WordPress SEO by Yoast. Делается это очень просто.

Заходим в раздел «Записи» — «Рубрики»
Нажимаем на нужные нам рубрики:
Копируем значения из конфигурации плагина:
И вставляем их в настройки WordPress SEO by Yoast:
Не забываем сохранить настройки кнопкой «Обновить».

Эту операцию необходимо проделать со всеми рубриками на сайте. Долго, неприятно, но надо. Как только закончите — можно смело удалять плагин Category SEO Meta Tags.

Заключение

Вот с помощью таких нехитрых и простых шагов мы избавились от трёх плагинов в пользу одного. Надеюсь материал был полезным для вас. Буду рад комментариям и вопросам :-)