WordpressPlugins.ru

Плагины, хаки, уроки и многое другое для WordPress.

Получать новости (RSS) на E-mail

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

Существует множество сайтов, которые предоставляют возможность делать снимки (скриншоты) сайтов. К сожалению, практически все такие ресурсы платные в той или иной мере (бесплатное использование подразумевает или редкое обновление снимков или рекламу ресурса в виде "водяных знаков" на скриншоте). Мало кто знает, но на 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".

Понравился пост? Подпишись на обновления по RSS или Twitter !

Главная
Статьи о WordPress
Как сделать..
Эта страница...

Copyright © 2008-2024. WordpressPlugins.ru. Все права защищены.
81 / 0,193/ 12.21mb

• Главная
• Карта сайта
• О сайте
• Ссылки