Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Plugins

Создаем простой плагин для Instagram

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

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


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

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

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

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

This is our plan
Мы добавим немного картинок

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

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


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

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


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

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


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

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


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

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


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

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

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


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

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


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

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


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

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


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

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


12. Проблемы SSL

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


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

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


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

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

Finished plugin, how it looks in browser
Как это выглядит в браузере
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.