Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Вывод скриншотов на WordPress без применения плагина

Добрый день уважаемые друзья, сегодня на abrek-ad-abra.ru мы с вами будем разбираться в том, как без использования спец-плагина в статьях блога на CMS WordPress можно вывести скриншот абсолютно любого интернет ресурса.

Мы уже рассматривали с вами такие полезные дополнения, как появления картинки при наведении курсора на ссылку, смена картинки при наведении курсора, увеличения изображения, бегущая строка. И я думаю, что и этот способ также многих заинтересует.

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

Конечно, чтобы скриншоты сайтов выводились на блоге их кто то должен обрабатывать и обновлять и для этой цели мы будим использовать сервес под названием: «mShots» расположенный на родном нашему CMS сервере: «WordPress.Org». В этом случае у нас появится возможность вставки шорткода для вывода скриншотов, как абсолютно в любом месте статьи так и на любой странице. Ниже я покажу, как это всё будет происходить.

А пока давайте установим специальную функцию в виде небольшого кода в файл темы: «functions.php». Которая и будит руководить шорткодом выводящим скриншот.

В админ-панели выбираем «Внешний вид» или-же «Дизайн» здесь всё зависит от перевода админки, далее «Редактор» или соединившись по FTP через FileZilla, находим и открываем для редактирования «functions.php», опускаемся в низ и перед знаком ?> устанавливаем функцию:

function wpr_mshot($atts, $content = null) {
        extract(shortcode_atts(array(
		"mshot" => 'https://s.wordpress.com/mshots/v1/',
		"url" => 'https://abrek-ad-abra.ru',
		"alt" => 'SEO-Бизнес блог: «Progress-project»',
		"title" => 'SEO-Бизнес блог: «Progress-project»',
		"w" => '400',
		"h" => '300'
        ), $atts));
	$img = '<img src="' . $mshot . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '" title="' . $title . '" />';
        return $img;
}
add_shortcode("mshot", "wpr_mshot");

Сохраняем изменения.

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

«mshot» — здесь у нас задан сервер.

«url» — url сайта для скриншота по умолчанию.

«alt» — альтернативное названия скриншота по умолчанию.

«title» — заголовок скриншота по умолчанию.

«h» — высота скриншота заданная по умолчанию.

«w» — ширина скриншота заданная по умолчанию.

Думаю здесь всё понятно.

Что же касаемо шоркода который мы будим использовать для вывода скриншотов на странице или в теле поста, то он имеет следующий вид:

[mshot url="https://АДРЕС РЕСУРСА" alt="ОПИСАНИЕ" title="ЗАГОЛОВОК" w="ШИРИНА" h="ВЫСОТА"]

Меняем значения на свои, а именно:

АДРЕС РЕСУРСА — меняем на url того сайта откуда необходимо сделать скриншот.
ОПИСАНИЕ — прописываем описание скриншота.
ЗАГОЛОВОК — прописываем заголовок скриншота.
ШИРИНА — указываем необходимую ширину скриншота.
ВЫСОТА — указываем необходимую высоту скриншота.

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

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

На этом у меня всё, придавайте своим постам более профессиональный вид и делитесь результатом в комментариях, всего доброго до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-18

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

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

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог