В этом руководстве мы создадим плагин для получения изображений из основной ленты Instagram.

1. Планирование

Наш плагин будет работать через шорткод [instagradam]. Вы можете вставить его где угодно, где есть поддержка HTML, редакторе шаблонов, редакторе кода и т.д.

В результате отобразится 10-15 превью картинок со ссылками. Ядром плагина является удаленный доступ к ленте, который мы получим используя API WordPress.

Сырой вид будет таким:

/*
  theluxurystyle --- https://distilleryimage8.s3.amazonaws.com/c4c876f4780a11e2a15422000a9f19a4_5.jpg
  loveobe --- http://distilleryimage3.s3.amazonaws.com/0c2d3b20781911e2b92122000a9e0727_5.jpg
  jaredleto --- http://distilleryimage8.s3.amazonaws.com/21d07bce781c11e2adc122000a1f9ace_5.jpg
  balloop --- http://distilleryimage11.s3.amazonaws.com/4fe04e66781411e2890222000a1fb0b2_5.jpg
  pinkshosho --- http://distilleryimage10.s3.amazonaws.com/abaef1b4781b11e2a2ce22000a1fa411_5.jpg
*/

Мы добавим немного картинок

2. Получаем Client ID и Secret

Этот шаг необходим для каждого нового плагина. Зарегистрируйтесь на Instagram, чтобы получить client_id и client_secret. Имя плагина должно использовать только буквы по моем опыту (например, johnsplugin).

3. Инофрмация о плагине

Здесь стоит описать основную информацию о вашем плагине, такую как его имя, адрес, номер версии и автора.

/*
Plugin Name: Instagradam
Plugin URI: http://wp.tutsplus.com/
Description: A simple and fast Instagram shortcode plugin. Please use [instagradam] to pull main feed!
Version: 1.0
Author: Adam Burucs
Author URI: http://burucs.com/
*/

4. Регистрируем шорткод

Это определит шорткод [instagradam], который будет работать на основе функции instagradam_embed_shortcode.

  // register shortcode
	add_shortcode( 'instagradam', 'instagradam_embed_shortcode' );

5. Определяем основную функцию для нашего шорткода

Это задаст основную функцию нашему плагину. $atts и $content должны быть определены, но мы не будем их рассматривать в этом руководстве.

	// define shortcode
	function instagradam_embed_shortcode( $atts, $content = null ) {

		// ...

	}

6. Задаем переменные

Нам нужна дополнительная переменная, чтобы вызывать нашу функцию и получать данные, мы воспользуемся FUnction API. Это $str и $result.

		// define main output
		$str    = "";
		// get remote data
		$result = wp_remote_get( "https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121" );

7. Исправляем ошибки в ленте

Основной набор решает большинство проблем с лентой (иногда может появляться ошибка SSL, но есть фикс, о котором мы поговорим дальше).

Если появляется ошибка, то мы направляем все на страницу: Что-то пошло не так: ... .

	if ( is_wp_error( $result ) ) {
		// error handling
		$error_message = $result->get_error_message();
		$str           = "Something went wrong: $error_message";
	} else {
		// processing further
		// ...
	}

8. Больше переменных

Переменная $result будет содержать основную информацию, для процессинга используем другого помощника, который называется $main_data. Нам также понадобится счетчик повторений.

// processing further
$result    = json_decode( $result['body'] );
$main_data = array();
$n         = 0;

9. Замыкаем, Часть первая

Эта петля соберет все имена пользователей и превью, которые нам нужны. До этого я анализировал основную ленту (ее структуру), чтобы понять, как получить нужные данные. Так что это важный шаг и давайте не забывать, что Instagram может все вскоре поменять
и нам понадобится изменить $d->user->username и $d->images->thumbnail->url.

	// get username and actual thumbnail
	foreach ( $result->data as $d ) {
		$main_data[ $n ]['user']      = $d->user->username;
		$main_data[ $n ]['thumbnail'] = $d->images->thumbnail->url;
		$n++;
	}

10. Замыкаем, Часть вторая

В следующих строках мы создадим HTML код, который будет содержать изображения и ссылки из основной ленты Instagram/ Ссылки будут открываться в новом окне с помощью target="_blank". Учтите пробел в конце строки , он нужен для простого отступа.

	// create main string, pictures embedded in links
	foreach ( $main_data as $data ) {
		$str .= '<a target="_blank" href="http://instagram.com/'.$data['user'].'"><img src="'.$data['thumbnail'].'" alt="'.$data['user'].' pictures"></a> ';
	}

11. Простая часть

Этот (шорткод) стандартный код покажет наш основной контент.

	return $str;

12. Проблемы SSL

В некоторых случаях функция wp_remote_get может плохо работать. Чтобы с этим разобраться вставим этот код до основной секции.

	// fix SSL request error
	add_action( 'http_request_args', 'no_ssl_http_request_args', 10, 2 );
	function no_ssl_http_request_args( $args, $url ) {
		$args['sslverify'] = false;
		return $args;
	}

13. Финальный код

Конечный результат выглядит так.

/*
Plugin Name: Instagradam
Plugin URI: http://wp.tutsplus.com/
Description: A simple and fast Instagram shortcode plugin. Please use [instagradam] to pull main feed!
Version: 1.0
Author: Adam Burucs
Author URI: http://burucs.com/
*/

	// fix SSL request error
	add_action( 'http_request_args', 'no_ssl_http_request_args', 10, 2 );
	function no_ssl_http_request_args( $args, $url ) {
		$args['sslverify'] = false;
		return $args;
	}

	// register shortcode
	add_shortcode( 'instagradam', 'instagradam_embed_shortcode' );
	
	// define shortcode
	function instagradam_embed_shortcode( $atts, $content = null ) {
		// define main output
		$str    = "";
		// get remote data
		$result = wp_remote_get( "https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121" );

		if ( is_wp_error( $result ) ) {
			// error handling
			$error_message = $result->get_error_message();
			$str           = "Something went wrong: $error_message";
		} else {
			// processing further
			$result    = json_decode( $result['body'] );
			$main_data = array();
			$n         = 0;

			// get username and actual thumbnail
			foreach ( $result->data as $d ) {
				$main_data[ $n ]['user']      = $d->user->username;
				$main_data[ $n ]['thumbnail'] = $d->images->thumbnail->url;
				$n++;
			}

			// create main string, pictures embedded in links
			foreach ( $main_data as $data ) {
				$str .= '<a target="_blank" href="http://instagram.com/'.$data['user'].'"><img src="'.$data['thumbnail'].'" alt="'.$data['user'].' pictures"></a> ';
			}
		}

		return $str;
	}

Финальный результат

Это изображение показывает плагин в действии. для этого мы вставили в статью шорткод.

Как это выглядит в браузере