Как автоматически делать скриншоты браузера и отображать их в WordPress

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

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

Давайте посмотрим, как это работает!

Подпишитесь на наш канал Youtube

Знакомство с плагином для создания снимков экрана в браузере

Browser Screenshots - это, пожалуй, нишевый плагин, который заслуживает места на вашем сайте. Он позволяет делать динамические снимки экрана браузера любой страницы, не выходя из редактора WordPress. Это применимо как к классическому, так и к блочному редакторам, в зависимости от вашего предпочтения. Это контрастирует с решениями для ОС, которые требуют открытия новых окон браузера и дальнейшей оптимизации изображений за пределами платформы.

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

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

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

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

Ключевая особенность:

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

Цена: Бесплатно | Больше информации

Как использовать плагин для создания снимков экрана в браузере (2 подхода)

К настоящему времени вы уже знаете, как работает плагин Browser Screenshot, поэтому давайте обсудим, как его использовать. Шорткоды - это фундаментальная часть плагина, поэтому давайте сначала рассмотрим это.

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

Плагин Browser Screenshots позволяет использовать следующий пользовательский шорткод для создания динамических снимков браузера:

[browser-shot url="elegantthemes.com" width="600" height="400"]

Шорткод включает два основных параметра: ширину и высоту . Оба параметра используют значения пикселей, а разрешение по умолчанию, которое плагин использует для съемки, составляет 600 x 400 . Конечно, вы также захотите добавить в шорткод конкретный URL-адрес, снимок экрана которого вы хотите сделать.

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

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

• Alt: этот параметр позволяет вам установить альтернативный текст для вашего скриншота.
• Ссылка: вы можете выбрать, на какую ссылку указывает изображение, используя этот параметр (который может отличаться от источника снимка).
• Цель: этот параметр позволяет вам контролировать, открываются ли ссылки на изображения в новом окне или нет.

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

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]

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

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]Here's the caption[/browser-shot]

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

2. Используйте блоки для добавления снимков экрана на свой веб-сайт.

Если вы используете редактор блоков, плагин Browser Screenshots предоставит вам доступ к новому блоку под названием Browser Shots :

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

После того, как вы нажмете « Найти изображение» , плагин «сделает» снимок экрана и отобразит его в редакторе блоков:

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

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

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

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

Заключение

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

Используя снимки экрана браузера, вы можете добавлять снимки экрана своего браузера с помощью простого шорткода или редактора блоков. Для шорткодов плагин включает несколько параметров, которые позволяют настраивать снимки экрана, такие как ширина, высота и даже alt (для альтернативного текста).

У вас есть вопросы о том, как использовать плагин Browser Screenshots? Давайте поговорим о них в разделе комментариев ниже!

Миниатюрное изображение статьи от VectorMine / shutterstock.com