По умолчанию (сразу после установки чистой версии) в WordPress, в его редакторе блоков Gutenberg мы можем наблюдать давно желанную функцию увеличения изображения по клику без перенаправления, то есть оставаясь на той-же странице.
Добиться этого можно путём выделения нужного изображения и клика по ссылке. Учтите, что выбрав блок Медиа и Текст вы не обнаружите эту возможность (проверял на версии: 6.5.3), вам будет доступно только прикрепления оригинала изображения.
Ниже вы можете наблюдать последовательность прикрепления файла изображения к его миниатюре:
После этого оригинал изображения будет открываться по клику на миниатюру.
Как открывать изображения в лайтбоксе (всплывающее окно)?
Этот трюк, вернее эта возможность доступна с одиночным медиафайлом. Вот я вставляю в контент страницы картинку-миниатюру и повторяю те же самые действия: вначале выделяю её, а потом кликаю на иконку закрепления за этим изображением ссылки
И вот тут-то мы можем наблюдать нужную нам функцию! Она называется Развернуть при нажатии
Выбрав её, наше изображение будет открываться во всплывающем окне, тем самым не перескакивая со страницы на отдельный URL, об этом свидетельствует «крестик» при помощи которого мы можем свернуть обратно наше изображение
Но как же быть, если нам необходимо чтобы текст обтекал изображение справа? Для этого мы можем воспользоваться другим блоком, который называется Колонки
И уже с его помощью реализовать задуманное. Оба изображения из примера ниже будут открываться в лайтбоксе.
Как открывать фото из галереи в лайтбоксе?
Теперь рассмотрим ещё один пример на основе галереи. Вначале добавим блок Галереи на нашу страницу:
После этого загрузим (или выберем из библиотеки файлов) нужные нам изображения и выделив всю галерею справа в её настройках укажем в качестве ссылки Медиафайл.
Что получится? Да то же самое что и в самом первом случае — изображения будут открываться в новых URL . Чтобы задействовать наш лайтбокс нужно присвоить эту функцию каждому изображению в галереи:
Теперь изображения миниатюр галереи будут открываться в лайтбоксе.
Неправильные разрешения к файлам могут привести к неожиданным последствиям, вот одна из них:
Для того чтобы это исправить или не допустить нужно выставить правильные права.
Все каталоги (директории) должны быть 755 или 750
Все файлы должны иметь права 644 или 640. Исключение: wp-config.php должен иметь номер 440 или 400, чтобы другие пользователи сервера не могли его прочитать.
Ни одному из каталогов никогда не следует присваивать номер 777, даже каталогам предназначенным для загрузки.
Как из консоли изменить разрешения на файлы и папки?
sudo find . -type f -exec chmod 644 {} +
sudo find . -type d -exec chmod 755 {} +
sudo chmod 440 wp-config.php
Как изменить владельца у файлов и папок?
sudo chown -R www-data:www-data /var/www/mysite
Пример с wp-cli
Рассмотрим простой пример, когда из корня сайта мы при помощи WP CLI совершаем установку плагина и сразу, второй командой, меняем владельца всех файлов этого плагина
В WordPress уже существует генерация rss-фида, но как мы видим он не соответствует требованиям разметки от Яндекс. Самым простым и быстрым методом будет подключение и создание специального фида через плагин.
Официальный сайт (ссылка в начале поста) предлагает ряд бесплатных решений:
Всё зависит от общего количество записей на вашем сайте и их разбивке. По умолчанию это значение равно 50. Следовательно, если у вас 500 записей, то в итоге вы получите 10 ссылок по 50 записей в каждой.
Теперь осталось добавить их в разделе Яндекс Вебмастер, который мы рассматривали ранее.
После добавления вполне возможно вы можете увидеть предупреждения или ошибки валидации, но это не расстраивайтесь — это поправимо.
Исправление ошибок
Для выявления ошибок нужно перейти в режим отладки:
Далее, прямо в окне постарайтесь исправить разметку и снова перепроверить исправленную версию. В итоге, при правильной корректировке вы должны добиться результата «Без ошибок»
Учтите, что эти изменения просто для выявления ошибок и не для их устранения, то есть что бы исправить ошибки нужно перейти на сайт и постараться через настройки плагина устранить их.
В моём случае валидатор ругался на тег <header>. Я просто исключил этот тег в разделе фильтров:
Это можно было исправить и другим способом. Ошибка была связана с содержимом тега [CDATA[]] найдены закодированные символы
Можно исправить сам тег, например взять его в специальный тег code — это будет правильным решением.
После этого можно убедиться в исходном коде фида на его отсутствие и затем повторить валидацию:
Готово!
Учтите, что в режиме ВКЛ (фид включен) валидация пройдёт не сразу.
Проверка фида может занимать продолжительное время. Наберитесь терпения. Сам Яндекс оповещает о том, что обычно проверка занимает около 2 часов.
Во включенном состоянии переобход источника и перестроение примеров Турбо-страниц в поиске происходит раз в час.
А пока что, если у вас сайт подключен к Яндекс Метрики, то рекомендуется указать ваш счётчик чтобы не утратить аналитику за счет подключения технологии турбо-страниц.
Рекомендуется добавлять квадратное изображение разрешением 512 на 512 пикселей, так как его нарезка будет использоваться на разных устройствах.
Значок сайта который Вы видите во вкладках браузера, строке закладок, и внутри мобильных приложений WordPress. Он должен быть квадратной формы с разрешением не менее 512 × 512 пикселей.
официальная рекомендация из панели управления WordPress
Подробнее о заголовке Last-Modified можно почитать тут. Пожалуй, для SEO добавлю описание:
HTTP заголовок Last-Modified сообщает клиенту (браузеру, поисковому боту) время последнего изменения страницы (объекта). Если клиент получил заголовок Last-Modified, то при следующем обращении к адресу, при условии, что страница (объект) есть в локальном кэше, он добавит заголовок-вопрос If-Modified-Since (не изменилась ли страница после даты, полученной в Last-Modified).
В свою очередь сервер, получив запрос If-Modified-Since должен сверить полученную временную метку с временем последнего изменения страницы и, если страница не изменялась ответить 304 Not Modified.
Как добавить HTTP заголовок Last-Modified на PHP в WordPress?
В целом на официальном сайте уже существует реализация на PHP, которую остаётся немного адаптировать для WP.
Отправка Last-Modified и обработка HTTP_IF_MODIFIED_SINCE на PHP
// время последнего изменения страницы в формате unix time
$lastModified = strtotime('2022-06-18 19:01:58');
// дата последней загрузки, отправляемая клиентом
$ifModified = strtotime(substr($_SERVER['HTTP_IF_MODIFIED_SINCE'] ?? '', 5));
if ($ifModified && $ifModified >= $lastModified) {
// страница не изменилась, отдача http статуса 304
header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified');
exit;
}
header('Last-Modified: ' . gmdate("D, d M Y H:i:s \G\M\T", $lastModified));
// дальнейшая загрузка страницы
Получаем время последнего изменения страницы, проверяем наличие If-Modified-Since, если есть — отдаем 304 Not Modified и останавливаем работу скрипта, иначе генерируем заголовок Last-Modified и отдаем страницу.
Версия для WordPress
Этот готовый код необходимо добавить в functions.php или через плагин. Я рекомендую добавлять этим методом.
/**
* Last-Modified and If-Modified-Since Headers
*/
add_action('wp', poet_'last_if_modified_headers' );
function poet_last_if_modified_headers() {
global $post;
if(isset($post)){
$LastModified_unix = strtotime($post->post_modified);
$LastModified = gmdate("D, d M Y H:i:s \G\M\T", $LastModified_unix);
$IfModifiedSince = false;
if (isset($_ENV['HTTP_IF_MODIFIED_SINCE'])) {
$IfModifiedSince = strtotime(substr($_ENV['HTTP_IF_MODIFIED_SINCE'], 5));
}
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
$IfModifiedSince = strtotime(substr($_SERVER['HTTP_IF_MODIFIED_SINCE'], 5));
}
if ($IfModifiedSince && $IfModifiedSince >= $LastModified_unix) {
header($_SERVER['SERVER_PROTOCOL'] . ' 304 Not Modified');
exit;
}
header('Last-Modified: '. $LastModified);
}
}
Настройки HTTP-сервера Nginx
Если вы используете в качестве веб-сервера Nginx , то есть вероятность столкнуться с проблемой отдачи заголовка. Всё дело в том, если у вашей конфигурации включена директива ssi
Модуль ngx_http_ssi_module — это фильтр, обрабатывающий команды SSI (Server Side Includes) в проходящих через него ответах.
Пример конфигурации при котором разрешается обработка команд SSI в ответах:
location / {
ssi on;
...
}
Следовательно, прицепом к этой директиве необходимо включить еще одну, которая по умолчанию выключена:
location / {
ssi on;
ssi_last_modified on;
}
Позволяет сохранить поле заголовка “Last-Modified” исходного ответа во время обработки SSI для лучшего кэширования ответов.
По умолчанию поле заголовка удаляется, так как содержимое ответа изменяется во время обработки и может содержать динамически созданные элементы или части, которые изменились независимо от исходного ответа.
Самый простой плагин для оптимизации скорости WordPress, который позволяет ускорить работу сайта в несколько кликов, встречайте! Бесплатный плагин — Jetpack Boost.
После установки плагина и его активации в меню появится специальный раздел. Нас интересует ссылка Boost
Чтобы начать использовать функции плагина необходимо выбрать тарифный план. Его бесплатной версии более чем достаточно.
После этого в принципе можно в несколько кликов настроить наш плагин на работу по ускорению нашего сайта. В верхней части страницы настроек вы должны увидеть шкалу оценки производительности. Классно будет, если они у вас сразу будут в зеленой зоне 🙂
Ну а если нет, то давайте улучшим эти показатели.
Оптимизация загрузки CSS
Первая настройка Оптимизация загрузки CSS создаёт критически важные CSS вашей главной страницы, публикаций и других страниц. Это позволяет значительно ускорить отображение контента на экране, в особенности на мобильных устройствах.Подробнее о создании критически важных CSS см. на web.dev
По умолчанию эта настройка включена. Единственное нужно дождаться ее завершения и не покидать страницу.
Кеш страниц
Кеш страниц ускоряет работу сайта, сохраняя страницы в виде статических файлов. Такие файлы быстрее доставляются посетителям, что снижает время загрузки и делает удобнее работу с сайтом.
Включив данную функцию вы значительно снимете нагрузку с вашего сайта, особенно если его одновременно посещает большое количество посетителей.
Обратите внимание, что дополнительно вы можете исключить страницы из кеша. Это справедливо для таких типов страниц, как, например, корзина или страница оформления заказа, где как вы понимаете, кеш абсолютно неуместен.
P.S. Рекомендую включить журнал и проверить работу кеширования. Если проблем на сервере нет, то при включенном страничном кешировании вы должны видеть попадание в кеш посещенных страниц.
Отложенное выполнение второстепенного кода Javascript
Отложенное выполнение второстепенного кода Javascript переносит выполнение ряда задач на время после загрузки страницы. Таким образом важная визуальная информация отображается раньше, а веб-сайт загружается быстрее. Подробнее об отложенном выполнении javascript см. на web.dev
Следующий ряд настроек я бы рекомендовал использовать с осторожностью, так как некоторые из них могут вызвать конфликты, тем самым нарушив работу функций JavaScript.
Объединить и минифицировать CSS и JS
Объединить и минифицировать CSS и JS: объединяет и сжимает ресурсы JavaScript и CSS, чтобы снизить количество и объём запросов к серверу, что позволяет быстрее загружать контент.
Опытные пользователи могут найти для себя полезную настройку — исключений JS:
CDN изображений
CDN изображений позволяет вашему сайту загружать изображения автоматически изменённого размера в современных веб-форматах прямо из всемирной сети доставки контента Jetpack.
Руководство по изображениям — функция, необходимая всем, кому требуется оптимизировать изображения на веб-сайте. С помощью этого руководства вы сможете гарантировать отображение всех изображений на вашем веб-сайте в нужном размере. Это необходимо для удобства пользователей, быстрой загрузки страниц и повышения рейтинга сайта. Следуя советам и методикам, приведённым в руководстве, вы сможете уменьшить размеры файлов изображений и ускорить загрузку вашего веб-сайта.
Ну вот и всё! В несколько кликов мы заложили неплохой фундамент для повышения производительности нашего сайта на WordPress.
Забыли пароль пользователя? Не беда! В этой статье мы его восстановим при помощи командной строки и инструмента WP-CLI (WP Command Line Interface) — это интерфейс командной строки для WordPress.
Откройте терминал, выберите директорию с нужным сайтом и введите первую команду:
wp user list
Эта команда отобразит всех пользователей вашего сайта.
Вы можете защитить свои контактные формы созданные в плагине Contact Form 7 с помощью функций защиты от спама, которые уже присутствуют в Contact Form 7, а это:
Повторю, что эти возможности уже интегрированы в плагин и доступны в разделе Интеграций:
Различные защиты, такие как CAPTCHA созданы для того, чтобы отличать спам-ботов от людей, но если в качестве спамера будет человек, то в этом случае защита окажется бессильной. В отличие от традиционной CAPTCHA (где нужно ставить галочку, решать какие-то головоломки), Akismet работает немного иначе — он проверяет отправленные формы по глобальной базе данных спама; это означает, что Akismet является в некоторых случаях более комплексным решением против спама.
Защита при помощи Akismet
Первым шагом является активация плагина Akismet . Поскольку пакет плагинов Akismet входит в состав WordPress, нет необходимости устанавливать его вручную. Перейдите в меню «Плагины» и просто активируйте плагин под названием Akismet Anti-Spam .
Если по каким-то причинам плагин отсутствует у вас, то его необходимо установить.
Для использования Akismet вам понадобится ключ API. Его можно получить бесплатно.
Как задействовать Akismet в контактной форме?
Принцип работы достаточно простой. Вам нужно для полей по которым будет проходить проверка на предмет СПАМа указать специальную отметку в виде:
akismet:author — указывается для полей в которых отправитель должен вносить имя. Пример: [text* your-name akismet:author]
akismet:author_email — указывается для полей в которых отправитель должен вписать адрес электронной почты. Пример: [email* your-email akismet:author_email]
Теперь, при подключенном и настроенном сервисе Akismet плагин контактной формы будет отправлять данные на проверку на СПАМ данному сервису и в случае, если «Акисмет» подтвердит наличие СПАМа, то плагин Contact Form 7 приостановит отправку электронного сообщения и отобразит уведомление: «Произошла ошибка при отправке вашего сообщения», которое будет в оранжевой рамке 🙂
Как тестировать фильтрацию спама?
Чтобы проверить, правильно ли работает фильтрация спама, попробуйте ввести «viagra-test-123» в поле предназначенное для ввода Имени (опция akismet:author) или «akismet-guaranteed-spam@example.com» в поле предназначенное для ввода адреса электронной почты (пометка akismet:author_email)
Поскольку эти служебные слова зарезервированы специально для тестирования, Akismet должен определить сообщение как СПАМ. и как следствие, вы увидите сообщение об ошибке в оранжевой рамке — это знак того что всё работает должным образом.
После установки и активации плагина, вам будет доступен его раздел в главном меню панели управления и ссылка Настроек в разделе ваших плагинов
Проследовав в раздел настроек плагина вы обнаружите уже предустановленную контактную форму.
Эту контактную форму мы можем уже смело задействовать на страницах нашего сайта. Создадим страницу «Контакты» и в редакторе блоков Гуттенберг найдём нужный блок, например по поисковому слову «контакт» или «contact».
После чего добавить найденный блок Contact Form 7 на вашу страницу. Так как у нас всего одна контактная форма, которая была нам доступна по умолчанию, то выберем её:
Классический редактор
Добавление в классическом редакторе немного трудозатратнее. Вначале необходимо скопировать шорткод нужной нам формы
А после вставить его в область контента
После обновления/публикации страницы, на публичной части сайта этой страницы появится наша контактная форма:
Полдела сделано. Контактную форму мы вывели. Но куда будут прилетать отправленные сообщения? Для этого необходимо нам настроить нашу форму. Если вы желаете чтобы отправленные пользователями сообщения сохранялись внутри вашего сайта, то необходимо установить и задействовать вот это решение.
Для настройки получателей нам необходимо вернуться на страницу всех форм и перейти в нужную форму
Перед нами откроются настройки исключительно выбранной нами формы. То есть, изменения этих настроек затронут только выбранную контактную форму и не затронут другие. Ниже, перед вами экран настроек контактной формы:
Заголовок Контактной формы — его можно менять произвольно, этот заголовок для вас, чтобы вы ориентировались и различали формы между собой.
Шорткод — это специальный механизм в WordPress, который позволяет в произвольных местах сайта вызывать ту или иную функцию. Принцип простой. Вы копируете этот уникальный шорткод и вставляете в то место контента, где хотите видеть вашу форму.
Выше мы рассматривали, как выводить форму в классическом редакторе и редакторе блоков, а вот если требуется вывод контактной формы, например, в сайдбаре (боковая колонка), то механизм тут аналогичный. Просто выбираем нашу контактную форму в той области виджетов где необходимо её вывести
Бывают случаи, когда на сайтах используется классическое представление виджетов (дополнительных областей) , а не блочное, как в примере выше.
В этом случае мы поступаем по аналогии с классическим редактором. То есть копируем шорткод и вставляем, например, в текстовый виджет
В результате получим:
Шаблон формы — это те поля, которые учувствуют в нашей форме. Поля можно создавать произвольно из генератора полей, который находится повыше. Но об этом мы поговорим подробнее при создании новой формы.
Вкладка Письмо — именно здесь мы можем указать получателей при отправке нашей формы.
Настройка получателей
Переходим на вкладку Письмо
Давайте познакомимся с разделами этого экрана:
Почтовые теги (которые генерируются во вкладке Шаблон письма). Важно! Старайтесь сравнивать ваши теги с тегами которые участвуют в шаблоне для получателей. Частой ошибкой бывает отсутствие нужного тега (как правило из-за невнимательности) в шаблоне письма для получателей.
Я специально удалил тег Темы письма и в списке тегов мой тег стал подсвечиваться акцентирующим черным цветом
Это говорит о том, что в шаблоне отсутствует почтовый тег и информацию из него получатель не получит.
Кому — в этом разделе мы можем указать получателя письма. В данном примере указан специальный шорткод, который будет использовать E-mail администратора, который указан при создании сайта. Вобщем, этот E-mail находится в разделе Настройки > Общие вашего сайта, в поле Административный E-mail
Если требуется указать несколько получателей, то перечисляем их адреса через запятую, например так:
От кого — тут вы указываете адрес отправителя. Важно, чтобы он соответствовал домену вашего сайта. То есть, если адрес вашего сайта mysite.com, то в этом поле нужно указать, например, info@mysite.com
Тема письма. Тут я думаю всё понятно. Схема по умолчанию [_site_title] «[your-subject]» выдаст примерно следующее: если ваш сайт называется «Мой магазин», а в теме письма пользователь указал тему «Пожелание», то получим: Мой магазин «Пожелание»
Дополнительные заголовки — лучше их не трогать.
Тело письма — это как раз та информация которую получат получатели. Как правило, в этом теле письма содержится информация полей, которые заполняет пользователь, соответственно все участвующие почтовые теги должны тут присутствовать, в противном случае информация не будет передана в полном объёме.
И в нижней части экрана рассмотрим ещё ряд возможностей:
Отметив этот чекбокс мы исключим вывод строк, если данные не были у тега заполнены пользователем. Это оправдано тогда, когда формы выступают в роли опросного листа и содержат в себе большое количество полей для заполнения
Если чекбокс отмечен, то мы можем использовать в теле письма HTML-теги. Это позволит придать ему читабельный внешний вид выделив заголовки и прочие элементы в письме
Сюда нужно поместить тег (в том случае если он был создан для прикрепления файла*) Если не выполнить это условие, то прикреплённый пользователем файл не будет получен.
Возможность сформировать второе письмо, отличительное содержанием от первого. Это оправдано когда требуется разделить при отправке заполненную пользователем информацию, например, часть для менеджера, а часть в службу доставки и т.п. Или обычно задействуют эту функцию при отправке автоматических ответов.
Вкладка Уведомления при отправке формы позволяет настроить оповещения пользователю при определённых событиях в момент отправки сообщения. Вы можете задать сообщения при разных ошибках отправки формы. В целом значения по умолчанию заполнены удачно, но в некоторых случаях всё равно могут потребовать корректировки.
Ну и последняя вкладка позволяет внести дополнительные настройки, например, JavaScript код, который будет отрабатывать при успешной отправке формы. Зачастую сюда добавляют отправку данных в системы аналитики: Яндекс Метрика или GA.
Как добавить контактную форму через функцию PHP?
Пользователям, которые начинают работать с WordPress на уровне кода, возможно будет полезно познакомиться с функцией do_shortcode() , с помощью которой можно вывести контактную форму в нужном по коду месте. Учтите, что вывод формы за пределами цикла WordPress лишает вас некоторых возможностей, таких как передача служебной информации при помощи специальных тегов Contact Form 7.
Для отображения формы достаточно просто в функцию передать её шорткод:
Задача: Предоставить возможность пользователям прикреплять в форму обратной связи файл и отправлять его в виде почтового вложения получателю.
Решение: Сперва нам необходимо создать форму. Если вы не работали ранее с плагином Contact Form 7, то рекомендую начать с этой заметки.
После создания формы, нам необходимо создать специальное поле для загрузки (прикрепления) файла, которое так и называется Файл.
Перед вами возникнет всплывающее окно с настройками данного поля:
При желании можно заполнить предлагаемые поля настройки поля «файл», возможно полезно будет ограничивать пользователей в размере загружаемого файла или указать разрешенные для загрузки типы файлов, но всё это частные случаи.
Я оставлю все по умолчанию и добавлю в тело формы тег файл
Далее нам необходимо перейти на вкладку Письмо и добавить этот уникальный тег поля файл в специальный раздел для прикреплённых файлов:
Добавляем…
Сохраняем..
Обратите внимание, что в поле Прикреплённые файлы мы указываем шорткод с идентификатором поля, а не целиком, как он выглядел в момент создания!
Готово! Теперь у пользователей нашего сайта появилась возможность прикреплять к почтовому сообщению файл:
Пример посложнее
Задача: Мы ожидаем от пользователя файлы исключительно в формате PDF и размером не превышающим 3 мегабайта.
Решение: Нам нужно вернуться на вкладку Шаблон формы и заново генерировать почтовый тег (шорткод) Файл
Указываем нужные значения и вставляем полностью новый тег или дополняем параметрами ( limit:3mb filetypes:pdf ) старый
Если требуется ограничить размер загружаемого файла, то значения можно указать следующим образом:
limit:1048576 limit:1024kb limit:1mb
Просто цифры — воспринимаются байтами, а если указать постфикс kb или mb, то значения будут восприниматься уже в килобайтах или мегабайтах.
Если вам нужно установить несколько типов файлов, в качестве разделителя используйте | символ вертикальной черты.
Расширения файлов которые можно использовать можно подсмотреть тут:
После того, как пользователь загружает файл через нашу контактную форму плагин Contact Form 7 производит ряд проверок и затем перемещает загруженный файл во временную папку, далее происходит прикрепления файла к почтовому сообщению, его отправка с последующим удалением этого файла из временной папки.
По умолчанию эта временная папка имеет адрес wp-content/uploads/wpcf7_uploads, она создаётся автоматически, но в некоторых случаях может произойти ошибка, как правило связанная с недостаточными правами на запись…
В этом случае стоит определить новое место для загрузки через константу, которую можно объявить в файле wp-config.php
В качестве значения можно указать абсолютный путь или относительный. В случае относительного (как в примере) папка для загрузки будет создана в директории wp-content/
В режиме редактирования Записи или Страницы добавьте новый блок:
В строке поиска напишите запрос «Кнопки»
После добавления блока на страницу напишите название кнопки которое будет отображаться, например, «Отправить сообщение», «Написать нам WhatsApp» и т.п.
В момент когда выделение находится на блоке кнопки нам доступна панель инструментов при помощи которой мы можем позиционировать нашу кнопку
А в разделе справа, когда наш блок выделен, нам доступны его дополнительные настройки. В первой вкладке мы можем задать ширину нашей кнопки.
А вторая вкладка даёт нам намного больше возможностей оформления нашей кнопки, например, мы можем изменить её стиль и сделать обводку, теперь наша кнопка стала менее акцентированной.
Этот блок имеет множество настроек, с помощью которых мы можем придать уникальности (кастомизации) нашей кнопке
Обратите внимание на то, что в области видимости могут отображаться не все доступные настройки. Нажав на троеточие перед нами открываются дополнительные возможности:
Как задать ссылку кнопке?
В момент выделения кнопки, когда нам доступна панель её настроек, выбираем ссылку внутри страниц сайта или указываем произвольно
Как присвоить кнопке ID?
в момент выделения блока кнопки во вкладке настроек блока откройте раздел Дополнительно. Далее в поле HTML-якорь внесите какое-то название на латинице — оно то и будет служить в качестве идентификатора этого элемента.
А вот и результат нашей работы. Кнопка с заливкой по контуру с ссылкой на группу во ВК и с присвоенным идентификатором элементу:
Стандарт Open Graph разработан социальной сетью Facebook. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам.
Например, если страница отображает статью, Open Graph может определить название статьи, автора, изображение и другую важную информацию.
Ниже пример того, как социальная сеть ВК при «шеринге» ссылкой автоматически подтягивает заголовок, картинку и краткое описание при публикации.
Чтобы иметь возможность передавать эти данные нужно включить функцию Данные Open Graph. Переходим в Настройки плагина, раздел Обмен информацией в социальных сетях и включаем:
Данные Open Graph
Данные карты Twitter
Теперь после включения функций в исходном коде странице будет специальный блог с тегами этих микроразметок:
Аналогично работает и другая разметка Twitter , которая позволяет отображать предпросмотр с изображениями и текстовым отрывком, когда делятся ссылкой на ваш сайт, но только уже в социальной сети Twitter.
Разметки можно комбинировать. Поэтому, вполне нормально включение обоих стандартов на ваш сайт.
Как пользоваться Open Graph?
Для каждой странице вашего сайта вы можете создавать уникальные превью. Для этого в режиме редактирования страницы найдите раздел плагина Yoast SEO и перейдите во вкладку Социальные сети
Именно здесь вы можете определите, как ваша публикация будет выглядеть в социальных сетях, таких как Facebook, Twitter, Instagram, WhatsApp, Одноклассники, LinkedIn, ВК и других.
Стоит всего лишь заполнить три основных настройки: изображение, заголовок и краткое описание.
Обратите внимание, что для разметки Twitter существует подобный раздел и если стоит задача оформить под социальную сеть Twitter, как то иначе ваше превью ссылки на страницу, то в этом разделе нужно указать отличительные характеристики страницы.
Рассмотрим простой пример. Предположим, мы разрабатываем коммерческий сайт и у нас есть страница Контактов, которую менеджеры в основном отправляют в качестве ссылки партнёрам и клиентам. Вот так по умолчанию выглядит ссылка когда её делятся, например, в WhatsApp
Теперь дополним её осмысленной информацией, например, это может быть брендированная картинка или схема проезда, вместо заголовка Контакты, что то позначимей, а кратком описании, для удобства можно передать номера телефонов.
Заполняем данные…
Теперь если мы поделимся ссылкой на нашу страницу Контактов, то можем увидеть насколько привлекательнее стало её превью:
Согласитесь, больше полезной информации в сравнении с первым случаем — по умолчанию.
Протестировать настройки вашей разметки и посмотреть как это будет выглядеть можно вот тут.
