Как создать предварительный просмотр визуальной ссылки в WordPress

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

Вот лишь несколько способов использования этого плагина:

• Добавьте CTA к партнерской ссылке.
• Поддерживайте утверждения, факты и статистику.
• Курируйте контент с других сайтов.
• Включите полезные ресурсы для читателей, чтобы узнать больше.
• Продвигайте продукты своего интернет-магазина.

Кроме того, в своей простейшей форме плагин Visual Link Preview представляет собой более привлекательный способ ссылаться на связанные сообщения и заставлять людей оставаться на вашем сайте дольше.

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

Поиск и установка плагина Visual Link Preview

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

• Войдите в свою панель управления WordPress.
• Выберите плагины на левой боковой панели.
• Выберите «Добавить новый» в подменю, которое появится под «Плагины».
• Введите «Предварительный просмотр визуальной ссылки» в строку поиска в правом верхнем углу страницы.
• Нажмите «Установить сейчас» в правом верхнем углу окна предварительного просмотра плагина.
• После установки нажмите Активировать.

После того, как вы активируете плагин, вы будете перенаправлены на свою страницу плагина, где увидите это уведомление вверху. (Документация по началу работы перенесет вас на эту страницу.)

Начало работы с настройками и настройками

После активации плагина прокрутите список плагинов вниз, чтобы найти его. Под названием плагина щелкните ссылку Настройки - вы будете перенаправлены на эту страницу:

По умолчанию переключатель «Использовать собственный стиль» отключен. Если вы включите его, появится множество вариантов.

Есть настройки для следующего:

• Ширина контейнера, цвет фона и отступ.
• Радиус, ширина, стиль границы (сплошная, пунктирная, пунктирная и т. Д.) И цвет.
• Положение изображения (слева, справа, сверху или снизу), размер и радиус границы.
• Размер и цвет шрифтов заголовков и сводок.

Большинство из них говорят сами за себя, но есть несколько вещей, которые нужно знать о размере изображения. Вы можете установить размер эскиза или собственный размер. Для эскиза стандартными размерами являются «эскиз», «средний» и «большой», поэтому вы просто набираете в поле то, что хотите. Или вы можете установить нестандартный размер в следующем формате: ширина x высота (например, 150 × 150).

А пока я собираюсь оставить все как есть, чтобы посмотреть, как выглядит окно ссылки по умолчанию. Затем я вернусь, чтобы внести изменения.

Использование плагина с редактором блоков Гутенберга

Я вошел в черновик сообщения в блоге и добавил блок под абзацем. Вы найдете блок Visual Link Preview в разделе «Виджеты» или можете просто найти его в верхней части средства выбора блоков.

Вот как выглядит блок Visual Link Preview:

Когда вы щелкаете поле «Выбрать публикацию или страницу», вы не увидите раскрывающегося списка вашего контента; вам придется искать то, что вы хотите. Вы также можете добавить ссылку на внешний URL-адрес (я немного расскажу об этом).

Я выбрал опубликованный пост в блоге. Вот как это выглядит без каких-либо изменений стиля:

Настройки блокировки Visual Link Preview в Гутенберге

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

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

Измените или удалите отображаемое изображение. Если вы удалите отображаемое изображение, визуальная ссылка будет выглядеть так:

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

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

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

Добавление внешней ссылки с помощью Гутенберга

На этот раз я добавляю внешнюю ссылку. Я скопировал и вставил его в правильное поле:

При нажатии кнопки «Использовать этот URL-адрес» происходит то же самое, что и при добавлении внутренней ссылки. Изображение, заголовок и отрывок будут заполнены автоматически, и вы можете внести изменения на правой боковой панели. Вы также можете нажать «Сохранить изображение локально» в разделе «Контент», и отображаемое изображение, полученное плагином из источника URL, будет добавлено в вашу медиатеку WordPress.

Сохранение многоразовых блоков

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

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

Использование плагина с классическим редактором

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

Появится это окно:

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

Добавление внешней ссылки с помощью классического редактора

На этот раз я добавлю внешнюю ссылку. Это поля для внешней ссылки:

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

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

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

В разделе «Стиль» нажмите ссылку «Изменить стиль шаблона». Откроется новая страница, на которой вы можете создать собственный шаблон (вы также можете попасть сюда через настройки плагина). Опять же, настройки просты, понятны и понятны, поэтому вам будет легко ориентироваться. Вот как выглядит шаблон после того, как я поигрался с некоторыми настройками:

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

Вместо того, чтобы использовать миниатюру, я вернулся на страницу настройки шаблона и ввел нестандартный размер изображения, который превратил его в квадрат (и, к счастью, идеально обрезанный). Я еще немного поигрался с заголовком и отрывком, чтобы он был лучше размером в блоке и рядом с изображением. Это лучше:

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

Предварительный просмотр настроек вашего шаблона

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

Как вернуть стиль по умолчанию

Допустим, вы внесли несколько изменений и поняли, что предпочитаете стиль по умолчанию. Если вы оставите переключатель Использовать собственный стиль включенным в настройках шаблона, ваши индивидуальные настройки будут применены, когда вы вернетесь на свою страницу или публикацию, независимо от того, выберете ли вы Использовать по умолчанию в Настройках или Простой в раскрывающемся списке Шаблон (как я уже сказал, сбивает с толку).

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

Недостатки плагина Visual Link Preview

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

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

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

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

Заключение

В целом, даже несмотря на его недостатки, плагин Visual Link Preview мне понравился. Его легко настроить и использовать, независимо от того, с каким редактором вы предпочитаете работать - с Gutenberg или классическим. И это определенно более эстетичный и привлекательный способ добавления ссылок, который может иметь большое значение, если вы участвуете в партнерском маркетинге или хотите ссылаться на свои целевые страницы. Прямо сейчас, поскольку вы не можете создать более одного шаблона, лучше всего использовать веб-сайты со стандартизированным внешним видом для всех сообщений и страниц. Итак, если у вас есть несколько разных целевых страниц в разных стилях, вам будет сложно создать один шаблон окна предварительного просмотра, который поместится в любом месте. В остальном, однако, это легкий плагин, который хорошо выполняет свою единственную работу.

Вам также может понравиться эта статья с пятью интересными вещами, которые вы можете делать в Divi с помощью якорных ссылок.