Дек
13

Показываем скриншоты сайтов на страницах WordPress

Все вы когда-нибудь делали скриншоты сайтов для последующего их размещения на своих сайтах, блогах, различных форумах и т.д. Как правило, захват изображения производился вручную или при помощи специальных программ, а также веб-сервисов. Согласитесь, занятие немного нудное, а в некоторой степени даже и неудобное. Особенно, когда приходится вручную скачивать скриншот, а потом загружать его себе на сайт. Сегодня я вам расскажу, как сделать скриншоты сайтов и разместить их на страницах вашего сайта на WordPress, не прибегая к помощи сторонних веб-сервисов и плагинов. А поможет нам в этом сервис mShots, который расположен на сервере WordPress.org, при этом никаких плагинов устанавливать не нужно, а вставить скриншот можно будет легко в любом месте вашей записи или страницы при помощи специального шорткода. Я уже рассказвал в предыдущих статьях о том, как разбить контент в записях и страницах на колонки при помощи шорткода и работа c шорткодами в WordPress на примерах, поэтому вы должно иметь представление о том, что такое шорткоды и как с ними работать.

Традиционно, перед размещением шорткодов в записях или страницах, нужно будет написать специальную функцию, которая и “скажет” шорткоду как надо работать и что надо делать. Для этого откройте файл functions.php шаблона и добавьте в него следующий код:

function wpr_snap($atts, $content = null) {
        extract(shortcode_atts(array(
		"snap" => 'http://s.wordpress.com/mshots/v1/',
		"url" => 'http://www.wordpressadmin.ru',
		"alt" => 'Wordpressadmin',
		"w" => '400',
		"h" => '300'
        ), $atts));

	$img = '<img src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '"/>';
        return $img;
}
add_shortcode("snap", "wpr_snap");

Здесь,  в значении “snap” указывается адрес сервиса  mShots на сервере wordpress.org, далее, в значении “url” указывается адрес сайта по-умолчанию, с которого будет сниматься скриншот, если в шорткоде не будет указан никакой иной адрес, “alt”, как вы правильно догадались – это альтернативное название скриншота по-умолчанию, а значения “w” и “h” отвечают за ширину и высоту скриншота соответственно.

Теперь, когда мы создали функцию и добавили ее в файл functions.php шаблона, пришло время в нужной нам записи или страницы добавить шорткод, который выглядит следующим образом:

[snap url="http://www.wordpressadmin.ru" alt="Wordpressadmin" w="400" h="300"]

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

VN:F [1.9.16_1159]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.16_1159]
Rating: 0 (from 0 votes)

Понравилась статья? Поделитесь ею в социальных сервисах!

Подпишитесь на обновление блога!

Ваш e-mail:

Понравилась статья? Вы не хотите пропускать новые статьи, посвященные Wordpress? Тогда подпишитесь на RSS или на электронный ящик и получайте новые статьи мгновенно! Также можете следить за мной в Twitter.

Один комментарий к “Показываем скриншоты сайтов на страницах WordPress”

  • Нет аватара
    Никита 15.12.2011 в 00:19

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)

Оставить комментарий для Никита

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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

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

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога по E-mail:

E-mail:

Последние комментарии

Друзья проекта