Как создать виджет Twitter

Содержание скрыть

1 Результат

2 О щебетать Условия обслуживания

3 Дальнейшее чтение на SmashingMag:

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

5 Добавить сведения нашего приложения

6 Интеграция API

7 Создание виджета

7.1 Форма бэк-Энда

8 Сохранить данные формы

9 Отображение твитов

9.1 Retrieve Tweets from Twitter

9.2 Сохранение твитов в базе данных

9.3 Получить твиты из базы данных

10 Заключение

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

Результат

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

О щебетать Условия обслуживания

Поскольку это пользовательский виджет, вы контролируете, что и как элементы отображаются. Убедитесь в том, чтобы прочитать Twitter в «Разработчик Дисплей Требования«, чтобы узнать, что вам нужно для отображения. Я буду нарушать некоторые из правил ради простоты, но болтами на вещи будет тривиальным вопросом, как только вы закончите эту статью.

Дальнейшее чтение на SmashingMag:

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

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

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

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

Войти в раздел разработчиковTwitter .
Перейдите на«Мои приложения»и нажмите кнопку «Создать новое приложение».
Заполните необходимые поля, примите правила дорожного движения, а затем нажмите на кнопку «Создайте приложение Twitter». Вам не понадобится URL-адрес обратного вызова для этого приложения, так что не стесняйтесь оставить его пустым.
После создания приложения нажмите кнопку «Создайте токен доступа».
С тобой покончишь! Позже вам понадобятся следующие данные:
- ключ потребителя,
- секрет потребителя,
- токен доступа,
- доступ к маркеру секрет.

Добавить сведения нашего приложения

Чтобы добавить некоторые варианты к нашей теме быстро, мы будем использовать настраиватель темы, введенный в 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 будет генерировать ссылку на настраиватель в разделе «Внешний вид» области админ. Чтобы добавить несколько опций, нам нужно создать класс. Добавьте файл, названный 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() функцию, мы указываем настройки, которые должны быть изменены, метку элемента управления и раздел, в который он находится. Тип управления не указан, поскольку по умолчанию это обычная вхотовая коробка.

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

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


include( 'MyCustomizer.class.php' );

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

Интеграция API

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

Скачать 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 экземпляр. Давайте отложим это в сторону на данный момент; Мы вернемся к этому позже!

Мне нравится разделять виджеты на отдельные файлы. Итак, прежде чем мы сделаем что-нибудь еще, создать widgets каталог и положить файл в нем под названием 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. Основной шаблон для создания этих параметров заключается в следующем:


<p>
  <label for='<?php echo $this->get_field_id( 'option_name' ); ?>'>
    <?php _e( 'Title:', 'mytextdomain' ); ?>
    <input class='widefat' id='<?php echo $this->get_field_id( 'option_name' ); ?>' name='<?php echo $this->get_field_name( 'option_name' ); ?>' type='text' value='<?php echo $values['option_name']; ?>' />
  </label>
</p>

$valuesМассив представляет собой список всех вариантов этого виджета, которые указаны в другом месте. Все наши варианты будут следовать шаблону ниже. Вот функции, на которые стоит обратить внимание:

get_field_id()Выводит идентификатор поля для вашего выбора.
get_field_name()Выводит название поля для вашего выбора.

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

Полный код для нашей формы выглядит примерно так:


<?php
  $defaults = array(
    'title'    => ’,
    'limit'    => 5,
    'username' => 'bonsaished'
  );
  $values = wp_parse_args( $instance, $defaults );
?>
<p>
  <label for='<?php echo $this->get_field_id( 'title' ); ?>'>
    <?php _e( 'Title:', 'mytextdomain' ); ?>
    <input class='widefat' id='<?php echo $this->get_field_id( 'title' ); ?>' name='<?php echo $this->get_field_name( 'title' ); ?>' type='text' value='<?php echo $values['title']; ?>' />
  </label>
</p>

<p>
  <label for='<?php echo $this->get_field_id( 'limit' ); ?>'>
    <?php _e( 'Tweets to show:', 'mytextdomain' ); ?>
    <input class='widefat' id='<?php echo $this->get_field_id( 'limit' ); ?>' name='<?php echo $this->get_field_name( 'limit' ); ?>' type='text' value='<?php echo $values['limit']; ?>' />
  </label>
</p>

<p>
  <label for='<?php echo $this->get_field_id( 'username' ); ?>'>
    <?php _e( 'Twitter user name:', 'mytextdomain' ); ?>
    <input class='widefat' id='<?php echo $this->get_field_id( 'username' ); ?>' name='<?php echo $this->get_field_name( 'username' ); ?>' type='text' value='<?php echo $values['username']; ?>' />
  </label>
</p>

Единственным дополнением к этому коду является извлечение значений. Функция передает текущие значения $instance параметра. Я добавил defaults массив в случае, если значения не были установлены. Массивы defaults данных и instance данных были объединены, в результате чего получился окончательный $values массив.

Сохранить данные формы

Я уверен, что вы будете освобождены от простоты этого. Вот полный код в update() функциях.


return $new_instance;

$new_instanceПараметр имеет все новые данные в нем. Все, что нам нужно сделать, это вернуть его. Цель update функции состоит в том, чтобы обеспечить некоторую проверку или манипуляцию.

Отображение твитов

Теперь о самой трудной части! Получение tweets не так сложно, но если мы делаем это на каждой странице нагрузки, мы будем скорость ограничена щебетать в кратчайшие сроки. Нам нужно найти способ кэшировать результаты, так что мы только беспокоить щебетать, скажем, каждые пять минут. Как мне нравится обрабатывать эти проблемы заключается в том, чтобы обойти их в целом и код, как если бы решение было уже на месте. Предположим, что мы уже написали функции, которые нам нужны для этого, и приступим к созданию передней части:

Во-первых, давайте посмотрим на общий шаблон, необходимый для отображения виджетов:


echo $args['before_widget'];
echo $args['before_title'] . $instance['title'] .  $args['after_title'];
echo $args['after_widget'];

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

Теперь давайте перечислим несколько твитов:


$tweets = $this->get_tweets( $args['widget_id'], $instance );
if( !empty( $tweets['tweets'] ) AND empty( $tweets['tweets']->errors ) ) {

  echo $args['before_widget'];
  echo $args['before_title'] . $instance['title'] .  $args['after_title'];

  $user = current( $tweets['tweets'] );
  $user = $user->user;

  echo '
    <div class="twitter-profile">
    <img src="' . $user->profile_image_url . '">
    <h1><a class="heading-text-color" href="http://twitter.com/' . $user->screen_name . '">' . $user->screen_name . '</a></h1>
    <div class="description content">' . $user->description . '</div>
    </div>  ';

  echo '<ul>';
  foreach( $tweets['tweets'] as $tweet ) {
    if( is_object( $tweet ) ) {
      $tweet_text = htmlentities($tweet->text, ENT_QUOTES);
      $tweet_text = preg_replace( '/http://([a-z0-9_.-+&!#~/,]+)/i', 'http://', $tweet_text );

      echo '
        <li>
          <span class="content">' . $tweet_text . '</span>
          <div class="date">' . human_time_diff( strtotime( $tweet->created_at ) ) . ' ago </div>
        </li>';
    }
  }
  echo '</ul>';
  echo $args['after_widget'];
}

Давайте вскроем это, чтобы понять, что происходит.

Линия 1 Мы предполагаем, что у нас есть get_tweets() функция, которая вернет список твитов в той или иной форме. Мы еще не написали это, но, предполагая, что мы сделали это, мы будем знать, что включить в код функции.
Линия 2 Если список твитов не пуст и нет ошибок, мы можем отобразить виджет.
Линии 7-8 Все твиты от одного и того же пользователя, и каждый твит содержит данные пользователя. В строке 7, мы просто захвата первый чирикать. В строке 8 мы втягиваем данные пользователя в $user переменную.
Линии 10-16 Мы используем данные с $user объекта для создания простого дисплея для учетной записи пользователя. Она включает в себя изображение, краткое описание и имя пользователя.
Линии 18-29 Используя данные в $tweets['tweets'] переменной, мы создаем список твитов. В preg_replace() там необходимо преобразовать ссылки (которые приходят как простой текст) в интерактивные элементы.

Все, что осталось, это выяснить, как get_tweets() функция должна работать. Мы уже знаем, что он не может непосредственно получить tweets от Twitter, так что нам нужно будет использовать некоторые хитрости!

Чтобы осуществить это, наша get_tweets() функция должна будет сделать следующее:

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

Чтобы сделать вещи более модульными, мы создадим три функции.

get_tweets()Вытягивает список твитов из нашей базы данных.
retrieve_tweets()Вытягивает список твитов из Twitter.
save_tweets()Сохраняет список твитов из Twitter в нашу базу данных.

Retrieve Tweets from Twitter

В MyTwitterWidget классе давайте создадим эту функцию и сделаем ее необходимой для получения нескольких твитов:


function retrieve_tweets( $widget_id, $instance ) {
  global $cb;
  $timeline = $cb->statuses_userTimeline( 'screen_name=' . $instance['username']. '&count=' . $instance['limit'] . '&exclude_replies=true' );
  return $timeline;
}

Как вы можете видеть, это довольно легко, благодаря Codebird класса. Мы просто используем одну из своих функций, statuses_userTimeline() чтобы получить наш список. Наши собственные функции получают идентификатор виджета и instance данные, которые мы используем, чтобы сказать Codebird, какие твиты пользователя мы хотим и сколько для извлечения.

Сохранение твитов в базе данных

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


function save_tweets( $widget_id, $instance ) {
  $timeline = $this->retrieve_tweets( $widget_id, $instance );
  $tweets = array( 'tweets' => $timeline, 'update_time' => time() + ( 60 * 5 ) );
  update_option( 'my_tweets_' . $widget_id, $tweets );
  return $tweets;
}

Этот виджет также получает идентификатор виджета и instance данные. Мы используем их для получения твитов, используя retrieve_tweets() функцию, которую мы создали выше. Мы добавим, что к нашему $tweets массиву, который содержит данные, возвращенные из Twitter и время обновления.

Время обновления через пять минут. Когда мы отображаем наши твиты, мы будем использовать это значение, чтобы определить, следует ли отображать твиты в базе данных или захватить список из Twitter снова (чтобы убедиться, что у нас есть самые последние).

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

Получить твиты из базы данных

Мы, наконец, пришли к get_tweets() функции. Давайте взглянем. Объяснение вытекает!


function get_tweets( $widget_id, $instance ) {
  $tweets = get_option( 'my_tweets_' . $widget_id );
  if( empty( $tweets ) OR time() > $tweets['update_time'] ) {
    $tweets = $this->save_tweets( $widget_id, $instance );
  }
  return $tweets;
}

Во-первых, мы извлекаем твиты из базы данных с помощью таблицы опций. Если таблица опций пуста или время обновления прошло мимо нашего лимита, то мы используем save_tweets() эту функцию. Это позволит получить твиты из Twitter и сохранить их в базу данных (а также вернуть их, так что мы можем использовать их сразу).

Заключение

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

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

Источник: smashingmagazine.com

Как создать виджет Twitter

Результат

О щебетать Условия обслуживания

Дальнейшее чтение на SmashingMag:

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

Добавить сведения нашего приложения

Интеграция API

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

Форма бэк-Энда

Сохранить данные формы

Отображение твитов

Retrieve Tweets from Twitter

Сохранение твитов в базе данных

Получить твиты из базы данных

Заключение

Понравилось это:

Похожее

Добавить комментарийОтменить ответ

Результат

О щебетать Условия обслуживания

Дальнейшее чтение на SmashingMag:

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

Добавить сведения нашего приложения

Интеграция API

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

Форма бэк-Энда

Сохранить данные формы

Отображение твитов

Retrieve Tweets from Twitter

Сохранение твитов в базе данных

Получить твиты из базы данных

Заключение

Sharing is caring

Понравилось это:

Похожее

Добавить комментарийОтменить ответ