Твиттер не нуждается в представлении. Он давно стал способом связываться с некоторыми людьми и компаниями, или же просто поболтать с друзьями. Размещение фида Twitter на веб-сайте стало практически обязательным действием. Интегрировать фид на сайт можно довольно просто – с помощью стандартного виджета Twitter, однако некоторое разработчики стремятся к тому, чтобы создать свой собственный виджет, который можно будет профессионально внедрить в существующий дизайн.

6 __ |

результат

Результатом наших усилий будет виджет WordPress, который вы легко сможете разместить в виджеты боковой панели. Он будет выводить пользовательские данные, а также последние обновления пользовательского фида. Вы можете посмотреть его в действии в нашей теме Musico, или на скриншоте ниже.

17 __ |

Об условиях использования сервиса Twitter

В случае создания произвольного виджета (как в нашем случае), вы можете самостоятельно управлять тем, какие элементы вы будете выводить и как вы будете это делать. Обязательно прочитайте требования “Developer Display Requirements“, чтобы узнать, что вам нужно для отображения. Некоторые из приведенных правил я нарушу в угоду простоте, что всегда можно будет поправить в дальнейшем, после полного прочтения статьи.

Обратите внимание, что следование требованиям – это насущная необходимость. Если вы этого не сделаете, вы рискуете добиться того, что ваш ID забанят, это означает, что ваш виджет не будет отображать любые твиты.

Первый шаг: Создайте приложение Twitter

Перед написанием кода, мы должны получить в свои руки приложение Twitter или точнее, учетные данные приложения Twitter. Процесс объясняется в видео, которое я сделал:

В случае, если вы предпочитаете читать, вместо того, чтобы посмотреть видео,  вот основные шаги:

1. Заходим в Секцию разработчиков Твиттера.
2. В разделе “Мои приложения” нажимаем кнопку “Создайте новое приложение.”|
3. Заполняем обязательные поля, принимаем правила, после чего щелкаем по кнопке Create your Twitter application. Вам не понадобится callback URL для приложения, потому просто оставьте соответствующее поле незаполненным.
4. Как только приложение будет создано, щелкаем по кнопке Create my access token.
5. Все готово! Позже вам понадобятся следующие данные:
   • consumer key
   • consumer secret
   • access token
   • access token secret

Добавляем детали к нашему приложению

Чтобы быстро добавить некоторые опции к нашей теме, мы будем использовать настройщик тем, введенный в WordPress 3.4. Журнал “Smashing Magazine” имеет  исчерпывающие статьи об этом, если вы заинтересованы в том, чтобы узнать больше о данной проблеме. На данном этапе мы просто добавим необходимые базовые возможности.

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

 add_action ('admin_menu', 'my_theme_customizer'); function my_theme_customizer() { add_theme_page( __( 'Customize Theme Options', THEMENAME ), __( 'Customize Theme', THEMENAME ), 'edit_theme_options', 'customize.php' ); } 

Добавление этого кода в файл темы functions.php сгенерирует ссылку к настройщику тем в разделе «Appearance» консоли. Чтобы добавить некоторые опции, нам нужно будет создать класс. Добавим файл MyCustomizer.class.php в подпапку темы, и вставим в него следующий код:

 <?php class MyCustomizer { public static function register ( $wp_customize ) { /** Sections **/ $wp_customize->add_section( 'twitter_api' , array( 'title' => __( 'Twitter API Details', 'mytextdomain' ), 'priority' => 10, )); /** Settings **/ $wp_customize->add_setting( 'twitter_consumer_key' ); $wp_customize->add_setting( 'twitter_consumer_secret' ); $wp_customize->add_setting( 'twitter_access_token' ); $wp_customize->add_setting( 'twitter_access_token_secret' ); /** Controls **/ $wp_customize->add_control( 'twitter_consumer_key', array( 'label' => __( 'Consumer Key', 'mytextdomain' ), 'section' => 'twitter_api', 'priority' => 10, ) ); $wp_customize->add_control( 'twitter_consumer_secret', array( 'label' => __( 'Consumer Secret', 'mytextdomain' ), 'section' => 'twitter_api', 'priority' => 20, ) ); $wp_customize->add_control( 'twitter_access_token', array( 'label' => __( 'Access Token', 'mytextdomain' ), 'section' => 'twitter_api', 'priority' => 30, ) ); $wp_customize->add_control( 'twitter_access_token_secret', array( 'label' => __( 'Access Token Secret', 'mytextdomain' ), 'section' => 'twitter_api', 'priority' => 40, ) ); } } add_action( 'customize_register' , array( 'MyCustomizer' , 'register' ) ); ?> 

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

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

• Создать новый раздел, который будет объединять эти опции в одной логической группе. Для этого мы используем функцию add_section(); нам нужно только добавить заголовок.
• Сообщить WordPress о том, что мы добавили определенные настройки. Для этого мы используем функцию add_setting, которая также принимает параметр по умолчанию, однако в данном случае он нам не требуется.
• Наконец, мы связываем средства управления с настройками, чтобы пользователь мог управлять ими. Доступно довольно много разных средств управления; в данной статье мы воспользуемся простым текстовым полем. Используя функцию add_control() мы определим параметры, которые будут изменяться, метку для средств управления, а также секцию под них. Тип средств управления не определен, поскольку в качестве значения по умолчанию выступает обычное поле ввода input.

34 __ | 13 __ |

Обратите внимание на настройку «приоритета» для некоторых элементов. Он определяет порядок, в котором элементы будут выводиться. Все числа кратны 10, чему есть простое объяснение – если вы вдруг впоследствии поймете, что вам нужно вставить какое-то поле между уже существующими, вам не понадобится переписывать все приоритеты; вы можете, к примеру, указать «15» для нового элемента.

Не забудьте включить этот класс в functions.php, чтобы код был выполнен.

 include( 'MyCustomizer.class.php' ); 

Как только все это будет сделано, вы сможете заполнить детали. Получить доступ к значениям можно с помощью функции get_theme_mod( 'option_name' ). о которой мы еще поговорим ниже.

Интеграция приложения

Теперь у нас есть простой способ получения наших API деталей, однако у нас до сих пор еще нет связи с API. Сделать это достаточно сложно; к счастью, другие люди уже сделали этот труд за нас. В указанном руководстве я буду использовать PHP-класс Codebird для взаимодействия с Twitter API.

Скачиваем файл codebird.php со страницы Codebird, размещаем его в папку с основной темой и настраиваем его следующим образом:

 add_action( 'init', 'my_twitter_api' ); function my_twitter_api() { global $cb; $consumer_key = get_theme_mod( 'consumer_key' ); $consumer_secret = get_theme_mod( 'consumer_secret' ); $access_token = get_theme_mod( 'access_token' ); $access_secret = get_theme_mod( 'access_secret' ); include( 'codebird.php' ) Codebird::setConsumerKey( $consumer_key, $consumer_secret ); $cb = Codebird::getInstance(); $cb->setToken( $access_token, $access_secret ); } 

Теперь вы сможете использовать Codebird, просто вызывая экземпляр $cb. Давайте отложим пока рассмотрение этого экземпляра; мы еще вернемся к нему.

Создаем виджет

Мне нравится представлять виджеты как отдельные файлы. Перед тем, как мы приступим к более обстоятельной работе, давайте создадим папку с виджетами и поместим в нее файл MyTwitterWidget.class.php. Включите этот файл в functions.php следующим образом:

 include( 'widgets/MyTwitterWidget.class.php' ); 

Добавьте следующий код PHP в файл. Это общая отправная точка для виджетов.

 <?php class MyTwitterWidget extends WP_Widget { /** Widget setup **/ function MyTwitterWidget() { parent::WP_Widget( false, __( 'My Twitter Widget', 'mytextdomain' ), array('description' => __( 'Displays a list of tweets from a specified user name', 'mytextdomain' )), array('width' => '400px') ); } /** The back-end form **/ function form( $instance ) { } /** Saving form data **/ function update( $new_instance, $old_instance ) { } /** The front-end display **/ function widget( $args, $instance ) { } } register_widget('MyTwitterWidget'); ?> 

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

• Первая функция – конструктор. Здесь можно определить заголовок виджета и его описание.
• form функция отвечает за интерфейсное отображение формы. Если поместить сюда несколько функций, можно заметно упростить сборку формы. Об остальном позаботится WordPress.
• update функция позволяет добавить любой код к процессу сохранения.
• widget функция обрабатывает интерфейсных отображение виджета.

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

Бэк-энд форма

Мы хотим предложить пользователям возможность изменения заголовка виджета, определения числа твитов для вывода на экран, а также задания имени пользователя в Twitter. Базовый паттерн для создания эти …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров