Создание снимков сайтов с помощью WordPress.com mShots

WordpressPlugins.ruСуществует множество сайтов, которые предоставляют возможность делать снимки (скриншоты) сайтов. К сожалению, практически все такие ресурсы платные в той или иной мере (бесплатное использование подразумевает или редкое обновление снимков или рекламу ресурса в виде "водяных знаков" на скриншоте). Мало кто знает, но на WordPress.com есть свой собственный сервис снятия снимков под названием "WordPress.com mShots". Для блогов на движке WordPress можно реализовать простенький шорткод, с помощью которого можно легко вставить снимок любого сайта в нужное вам место в блоге.

Добавьте в файл functions.php вашего шаблона код:

//создание скриншотов для сайтов start
function my_mshot($atts, $content = null) {
        extract(shortcode_atts(array(
            "mshot" => 'http://s.wordpress.com/mshots/v1/',
            "url" => 'http://www.wordpressplugins.ru',
            "alt" => 'Скриншот сайта',
            "title" => '',
            "w" => '200', 
            "h" => '' 
        ), $atts));
    if ($title == '') $title = $alt;
    $img = '<img class="mshots" src="' . $mshot . '' . urlencode($url) . 
    '?w=' . $w . '&h=' . $h . '" width="' . $w . '" alt="' . $alt . 
    '" title="' . $title . '" />';
    return $img; }
add_shortcode("mshot", "my_mshot");
//создание скриншотов для сайтов end

Использовать данный шорткод очень просто, для этого добавьте в запись в html-режиме редактора код:

[mshot url="http://www.site.ru/" alt="Здесь alt и title" w="200" h="150"]

Где url указывает на урл сайта, alt указывает на alt и title картинки (title можно задать отдельно), а w и h это ширина и высота скриншота в пикселях.

Указывать одновременно и высоту и ширину картинки бессмысленно, так как сервис всегда делает снимки высотой в 3/4 от ширины. То есть если вы указали ширину скриншота в 200 пикселей, то высота будет 150 пикселей независимо от указанного вами размера. Достаточно указать лишь один параметр картинки – второй будет вычислен автоматом по этой формуле.

Картинкам присваивается класс "mshots", с помощью которого можно оформить выводимые снимки сайтов. Например, добавьте в styles.css шаблона код:

.mshots{
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
}

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

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

При первом снятии скриншота сайта вы можете увидеть что-то типа:

WordPress.com mShots

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

Данный сервис идеален для реализации страниц ссылок на сайте. В качестве примера загляните на страницу "Ссылки" в этом блоге – все снимки сайтов на ней сделаны именно с помощью "WordPress.com mShots".

Понравился пост? Подпишись на обновления по Обновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Эффективный сайт.

эффективный сайт.

devgroup.ru

Гостиница Киева

Гостиница Киева высокий уровень комфорта.

pearl-hotel.kiev.ua

Комментарии (всего 16 комментариев)

Написать комментарий

(обязательно)

(обязательно, не публикуется)

Для вставки кода используйте кнопку "Код", по умолчанию используется синтаксис подсветки языка "php", вы можете поменять его на любой другой поддерживаемый GeSHi язык, например "javascript", "css", "html4strict", "sql" и тд. Используйте предпросмотр!
 


Подписаться на уведомления без комментирования.