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

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

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

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

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

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

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

1. function wpb_screenshots($atts, $content = NULL) {
2. extract(shortcode_atts(array(
3. "snap" => 'http://s.wordpress.com/mshots/v1/',
4. "url" => 'http://www.wpbeginner.com',
5. "alt" => 'screenshot',
6. "w" => '600', // width
7. "h" => '450' // height
8. ), $atts));
9.  
10. $img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
11. return $img;
12. }
13. add_shortcode("screen", "wpb_screenshots");

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

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