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

Rifat Учебные пособия по WordPress Oct 2, 2020

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

Плагин Visual Link Preview поможет вам:

  • Add Призыв к действию button to all your affiliation link
  • Увеличьте количество продуктов WooCommerce, представленных на вашем сайте
  • Управляйте подборкой статей для ваших читателей
  • Представить связанный блог / продукты с других сайтов
  • Показать диаграммы, статистику по актуальным вопросам.

Кроме того, в чистом виде плагин Visual Link Preview - отличный способ добавить релевантные ссылки на публикации и удерживать людей на веб-сайте на более длительный период.

Конкретный плагин позволит вам создать видимый предварительный просмотр для любой внутренней или внешней ссылки, а также вы можете создать собственный шаблон с формой, которая соответствует вашей торговой марке или веб-сайту. Затем добавьте элегантный шоу-бокс в любом месте вашего контента или страницы. Давайте посмотрим, как добавить окно отображения в любом редакторе на сайт WordPress.

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

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

Сначала перейдите на панель управления WordPress и выберите «Плагины» на левой боковой панели.

Нажмите «Добавить» в подменю. Вы также можете нажать «Добавить» в верхней части страницы установленных плагинов.

Введите «Предварительный просмотр визуальной ссылки» в поле поиска в правом верхнем углу страницы. Нажмите «Установить сейчас» в правом верхнем углу окна предварительного просмотра плагина.

После завершения установки нажмите Активировать.

Настройка плагина Visual Link Preview

После успешной активации вы автоматически будете перенаправлены на страницу активированных плагинов. Найдите плагин «Visual Link Preview» и нажмите «Настройки». Тогда вы попадете на эту страницу. Здесь вы можете увидеть, что параметры пользовательского стиля отключены. Включите его, и вы увидите несколько вариантов.

Здесь вы можете установить

  • Ширина, цвет окна предварительного просмотра,
  • Радиус, стиль, цвет и стиль контейнеров
  • Шкала позиционирования изображения
  • Цвет и размер текста.

Большинство из них вполне понятно, но есть несколько вещей, которые нужно знать о Размер изображения. Вы можете установить собственный размер, например 150x150 пикселей, или выбрать размер из шаблонов из «Учить больше". Есть три размера - эскиз, средний, и Large».

Плагин Visual Link Preview в редакторе Gutenberg

В WordPress широко используется редактор Gutenberg. Он известен тем, что он очень прост в использовании и имеет обширные возможности настройки. Здесь мы увидим, как мы можем создать контейнер предварительного просмотра в посте в редакторе Гутенберга.

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

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

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

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

Теперь я добавил внешнюю ссылку. Я скопировал одну случайную ссылку для публикации со своего сайта и добавил ее сюда. Как видите, результат такой же, как у внутренней ссылки.

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

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

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

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

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

Плагин Visual Link Preview в классическом редакторе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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