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

Опубликовано: 06.09.2018

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

Таблицы в WordPress. Обзор способов создания таблиц в ручном режиме и с помощью плагинов

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


Оптимизация изображений в WordPress для ускорения сайта и улучшения SEO

Добавьте в файл 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

//создание скриншотов для сайтов 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


Быстрое создание красивых сайтов на WordPress - Layers StyleKit на реальном примере

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

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

[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 ) ; }

.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 ".

IRC (Internet Relay Chat)
rss