Простой способ добавлять на сайт WordPress скриншоты

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

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

Обычно чтобы добавить на сайт скриншот, приходится сохранять скриншоты отдельно в виде файлов .png или .jpeg, а потом средствами WordPress загружать их на сайт. Однако есть пара инструментов, с помощью которых можно значительно упростить себе жизнь. Их сегодня и рассмотрим.

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

 | n-wp.ru

 | n-wp.ru

В результате скриншот страницы добавляется на страницу записи WordPress.

 | n-wp.ru

Для применения второго способа нужно подключиться к хостингу по FTP и отредактировать файл functions.php, что находится в каталоге wp-content/themes/название_вашей_темы. Просто добавьте в конец файла код

function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.wpbeginner.com',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
 
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';

return $img;
}
add_shortcode("screen", "wpb_screenshots");

После сохранения изменений добавить скриншот можно при помощи конструкции [screen url=”yandex.ru” alt=”Так выглядит Яндекс”].

По умолчанию скриншоты добавляются в разрешении 600*450 пикселей, изменить это значение можно либо исправив параметры «w» и «h» во вставляемом фрагменте кода (тогда изменятся параметры по умолчанию), либо указав нужное разрешение непосредственно при вставке шорткода, конструкция в этом случае примет вид [screen url=”yandex.ru” alt=”Так выглядит Яндекс” w=”800″ h=”650″].

А вы при наполнении своего сайта используете скриншоты? О целях, способах, впечатлениях как обычно приглашаю писать в комментариях!

Скачать Browser Shots
Создай свой первый сайт на WordPress

Вячеслав aka CrazyMoon

Сисадмин, интересующийся вебмастерингом, IT-шник, который любит море.

Оцените автора
Добавить комментарий

  1. Михаил

    Интересно. Если сайт — каталог сайтов, то очень удобно, чтобы генерить скриншоты.

    Ответить
  2. Den

    Если код скопировать и вставить в functions.php, то в итоге получим белый экран. Догадайтесь почему?

    Ответить