Сервисы, которые делают скриншоты сайтов, работают в интернете довольно активно, но ни один из них не работает так быстро и четко, как этот WordPress.com mShots. Но не все эти ресурсы, во первых, бесплатные, а во вторых, многие из них работают медленно, некоторые ставят свои водяные знаки на скриншоты, редко обновляют снимки, и т.д. И мало кто знает, что на WordPress.com есть свой сервис создания снимков (скриншотов). Для сайтов на CMS WordPress можно создать несложный шорткод, вставкой которого в страницы сайта можно легко организовать отображение снимка любого сайта в нужном вам месте. Шорткод имеет такой вид:

[mshot url=»http://www.mysite.com/» alt=»Пишете ваш alt и title» w=»200″ h=»150″]

Добавлять код на страницы или в виджет можно только в режиме html-режиме вашего редактора 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

Теперь подробнее о значениях выражения, то есть – кода:

  1. Значение «url» указывает на адрес сайта
  2. Значение «alt» показывает на alt и title изображения. Значение «title» можно прописывать отдельно.
  3. Значения «w» и «h» — ширина и высота скриншота соответственно.

Скриншоты автоматически делаются с соотношением сторон 3/4, поэтому указывать произвольные значения смысла нет – сервис будет обрезать скриншот по своим параметрам. То есть, если ширина скриншота — 200 px, то высота будет 150 px, независимо от прописанного размера высоты. Поэтому достаточно будет указать только один параметр размера скриншота – второе значение будет вычислено автоматически. Всем скриншотам присвоен класс «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);
}

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

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

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

На одном из своих сайтов я сделал страницу партнеров сайта именно с использованием этого кода. Вот как она выглядит:

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