Създаване снимка на сайт със помощта на WordPress mShot

wordpress screenshot

Здравейте, приятели! Съществуват много сайтове, които предлагат възможността за правене на снимка на сайт (screenshot). За съжаление, всички тези ресурси са практически платени, а при безплатното използване обикновено рядко се обновяват снимките или присъства реклама във вид на воден знак във снимката.

Малко хора знаят, но WordPress.com има собствен ресурс за правене на снимки на сайтове, наречен „WordPress.com mShots“. За WordPress блог със помощта на малък код може да направите и да поставите във страницата снимка на който и да е сайт.

Правене на снимка на сайт във три лесни стъпки

Преди да правите промени във кода на вашата тема, свалете файлове functions.php и style.css на вашия компютър. Така, ако объркате нещо, ще може да качите оригиналните файлове!

  1. Добавете на нов ред във файл functions.php на вашата активна тема този код:
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. Във файл style.css на вашата активна тема добавете този код:
/*--------------------------------------------------------------
създаване на скриншотове за сайтове start
--------------------------------------------------------------*/
.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 код ще добави на вашите снимки закръглена рамка със сянка.

  1. Поставяйте този код във вашите страници, където искате да се показва снимката на сайта.
[mshot url="http://www.site.com/" alt="Тук alt на снимката" w="200" h="150"]

Кода се поставя във режим html:

html view

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

  • http://www.site.com – тук попълвате адреса на сайта на който искате да направите снимка.
  • Тук alt на снимката – тук попълвате alt таг на картинката.
  • 200 и 150 – тук попълвате ширина и височина на снимката.

Безсмислено е да попълвате височината и ширината на картинката, тъй като сайта винаги прави снимки със височина ¾ от ширината. Тоест, ако например сте попълнили ширина на снимката от 200 пиксела, то височината винаги ще бъде 150 пиксела, независимо от посочения от вас размер. Достатъчно е само да попълните само един параметър на картинката – втория ще бъде изчислен автоматично по тази формула.

Когато правите първа снимка на сайт, ще видите това:

wordpress mShots

Тази картинка ще се показва, докато се прави снимка на сайта. Генерирането на снимката на сайта може да продължи до минута, но обикновено е по-бързо. При следващо обновление на страницата ще видите актуалната снимка на сайта. След това снимката на сайта ще се обновява автоматично, не съм сигурен но мисля, че на всеки 24 часа. Снимките се пазят на сървърите на wordpress.com, а не на вашия сървър. Кода който добавяте само показва снимката във вашия блог.

Ето как изглежда снимката на моя сайт със зададена ширина в кода от 400 пиксела – [mshot url=“http://ptcpari.com/“ alt=“ptcpari.com снимка“ w=“400″ h=““]:

снимка на сайт

Може да използвате този плъгин който прави снимки на сайт, но всяка добавка натоварва допълнително вашия блог и е препоръчително да използвате колкото се може по малко плъгини, за да се зарежда бързо вашия блог.

За днес това е всичко, приятели. Използвайте този страхотен ресурс за правене на снимки на сайт във вашия WordPress блог.

С уважение, Николай Томов.

Хареса ли ви статията? Споделете я с приятелите:

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *