В этом уроке вы узнаете общедоступный секрет: как создавать скриншоты веб-сайтов для использования в ваших сообщениях WordPress с помощью службы, предоставляемой WordPress.com. Мы даже превратим это в простой в использовании шорткод для отображения скриншотов… давайте начнем!
Содержание
Задний план
Уже несколько лет ни для кого не секрет, что WordPress предоставляет генератор скриншотов на своем субдомене s.wordpress.com. А ерунда в том, что если вы не злоупотребляете им, то его можно использовать бесплатно. WordPress.com использует его для создания скриншотов для различных действий.
Например, вот ссылка на скриншот wp.tutsplus шириной 400 пикселей:
https://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp.tutsplus.com?w=400
Возможно, вам придется щелкнуть ссылку еще раз, так как генератору требуется некоторое время для кэширования изображения.
Что мы будем делать:
- написать функцию шорткода для отображения снимка экрана
- используйте шорткод, чтобы отобразить снимок экрана как часть цикла сообщений, используя настраиваемое поле для URL-адреса.
Шаг 1. Функция шорткода
Наш шорткод будет использоваться как:
Вы можете добавить код в файл functions.php в каталоге вашей темы. Полный код доступен по ссылке выше.
add_shortcode('ss_screenshot', 'ss_screenshot_shortcode');
function ss_screenshot_shortcode($atts){
$width = intval($atts['width']);
$width = (100 <= $width && $width <= 300) ? $width : 200;
$site = trim($atts['site']);
if ($site != ''){
$query_url = 'http://s.wordpress.com/mshots/v1/' . urlencode($site) . '?w=' . $width;
$image_tag = '<img class="ss_screenshot_img" alt="' . $site . '" width="' . $width . '" src="' . $query_url . '" />';
echo '<a class="ss_screenshot_link" href = "' . $site . '">' . $image_tag . '</a>';
}else{
echo 'Bad screenshot url!';
}
}Более 2 миллионов тем и плагинов WordPress, веб-шаблонов и шаблонов электронной почты, наборов пользовательского интерфейса и многого другого
Что делает этот код:
- объявить шорткод с именем ss_screenshot с помощью функции add_shortcode
- функция шорткода принимает массив $atts, содержащий два атрибута шорткода: ширина и сайт
- атрибут ширины преобразуется в целое число и проверяется, чтобы убедиться, что он находится в подходящем диапазоне, в данном случае от 100 до 300 пикселей. Примечание. Мы используем тернарный оператор PHP для назначения ширины по умолчанию, равной 200, если предоставленная ширина выходит за пределы нашего диапазона. Это также учитывает отсутствующий атрибут ширины.
- атрибут сайта обрезан, чтобы удалить случайные левые и правые пробелы
- мы создаем URL-адрес запроса, добавляя атрибут сайта с кодировкой urlencoded и атрибут ширины
- наконец, мы заключаем query_url в тег изображения и тег ссылки, чтобы пользователи могли щелкнуть снимок экрана и перейти на сайт.
Шаг 2. Проверьте шорткод
В пост или на страницу вставьте этот шорткод:
Когда вы просматриваете сообщение или страницу, вы должны увидеть скриншот Amazon шириной 300 пикселей. Помните, что вам, возможно, придется обновить страницу через несколько секунд, чтобы увидеть кешированный снимок экрана. Поэкспериментируйте с шириной и посмотрите, что произойдет, когда вы выйдете за пределы диапазона. Кстати, вы можете установить любой диапазон ширины, который вам нравится. Кроме того, проверьте неверный URL-адрес: вы должны увидеть предупреждающее сообщение вместо снимка экрана.
Теперь, когда у нас есть рабочий шорткод, давайте посмотрим, как мы можем включить его в наш цикл WordPress.
Шаг 3. Настройка пользовательского поля
Давайте представим сценарий, в котором мы хотим отображать скриншот сайта рядом с каждым из наших сообщений. По соображениям форматирования и удобства использования лучше всего автоматизировать этот процесс, добавив настраиваемое поле на экран редактирования сообщения. В это поле мы можем ввести URL-адрес сайта, который затем можно использовать в цикле сообщений для отображения снимка экрана с использованием нашего нового шорткода.
Если поле настраиваемого поля не отображается на экране редактирования сообщения, посмотрите на правый верхний угол экрана, и вы должны увидеть вкладку «Параметры экрана». Нажмите на нее и установите флажок «Пользовательские поля». Теперь вы должны увидеть что-то вроде этого внизу экрана:
Щелкните ссылку Enter New и создайте новое настраиваемое поле с именем screenshot_url. Вот что вы должны увидеть:
Теперь, когда вы создаете/редактируете сообщение (настраиваемое поле появляется для всех сообщений), вы можете ввести URL-адрес для создания снимка экрана, связанного с сообщением.
Шаг 4. Добавьте отображение скриншотов в цикл
Вот серьезно урезанная версия стандартного цикла сообщений WordPress (найденного в файле шаблона темы), включая наш код отображения скриншота:
if (have_posts()) while (have_posts()) : the_post();
the_title();
$url = get_post_meta($post->ID, 'screenshot_url', true);
do_shortcode('');
the_content();
endif;
endwhile;
Что делает этот код:
- проверить, есть ли у нас посты, запустить цикл и отобразить заголовок поста
- получить содержимое настраиваемого поля screenshot_url, передав идентификатор текущего сообщения и имя настраиваемого поля в функцию get_post_meta
- поскольку мы находимся в файле шаблона, мы используем функцию do_shortcode для анализа нашего шорткода, который включает URL-адрес снимка экрана для этого сообщения.
- затем мы отображаем содержимое сообщения и завершаем цикл
Шаг 5. Проверка цикла
Если вы создали сообщение с заголовком Honda Accord и дали ему URL-адрес скриншота http://www.honda.com, используя новую настройку цикла, вы должны увидеть что-то вроде этого:
Вывод
Вместо того, чтобы отображать жесткое предупреждающее сообщение, если к сообщению не прикреплен URL-адрес снимка экрана, вы можете показать изображение по умолчанию.
Если вы не хотите использовать генератор скриншотов из WordPress или у вас есть большие потребности, вы можете использовать бесплатную опцию на сервисе скриншотов, таком как http://www.shrinktheweb.com . Вы можете применить методы, использованные в этом руководстве, к любому сервису снимков экрана.
То, что нужно запомнить:
- создание скриншотов занимает несколько секунд (обычно), поэтому обновите страницу
- urlencode URL-адрес, отправленный службе скриншотов
- начинайте URL с http://
- если у вас есть более требовательные потребности в скриншотах, используйте коммерческий сервис
