Главная » Wordpress » Статьи Wordpress

Создаем свой собственный виджет для отображения последних твитов

Статьи Wordpress

В этой статье мы рассмотрим, как создать виджет, в котором будут выводиться свежие твиты. За основу мы возьмем стандартный виджет «Профиль», доступный в Twitter.

Содержание
  1. Заголовок плагина
  2. Переменные
  3. Код виджета
  4. Обновление настроек в базе данных
  5. Создание панели управления
  6. Заключительный аккорд

Заголовок плагина

Первое, с чего стоит начать, это создать новую папку в каталоге wp-content/plugins, которая будет отведена под наш плагин. В эту папку мы поместим чистый PHP-файл, который будет содержать код нашего виджета. Чтобы плагин стал доступен в панели администратора, мы должны указать для него заголовок, в котором обычно находится информация, однозначно идентифицирующая плагин:

<?php
/*
Plugin Name: Dave Recent Tweets
Plugin URI: http://www.doitwithwp.com/
Description: Displays your recent tweets in a sidebar widget
Version: 0.1
Author: Dave Clements
Author URI: http://www.theukedge.com
License: GPL2
*/

/*  Copyright 2011  Dave Clements  (email : http://www.theukedge.com/contact/)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

Как только вы заполните заголовок плагина собственной информацией, вам понадобится установить класс виджета и задать для него конструктор. Класс виджета должен представлять собой уникальную строку, чтобы избежать конфликтов с другими плагинами, поэтому я назвал свой класс diww_my_recent_tweets_widget. Также я ввел заголовок будущего виджета (Dave Recent Tweets) и его описание (Displays your recent tweets using the Twitter Profile tool).

// Start class diww_my_recent_tweets_widget //

	class diww_my_recent_tweets_widget extends WP_Widget {

// Constructor //

	function diww_my_recent_tweets_widget() {
		$widget_ops = array( 'classname' => 'diww_my_recent_tweets_widget', 'description' => 'Displays your recent tweets using the Twitter profile tool' ); // Widget Settings
		$control_ops = array( 'id_base' => 'diww_my_recent_tweets_widget' ); // Widget Control Settings
		$this->WP_Widget( 'diww_my_recent_tweets_widget', 'Dave Recent Tweets', $widget_ops, $control_ops ); // Create the widget
	}

Переменные

Теперь мы должны задать переменные, которые будем использовать. Twitter-виджет «Профиль» предлагает целый массив настроек, предназначенные для изменения внешнего вида своего виджета. В примере, который следует ниже, я взял большинство этих настроек, однако вы можете удалить некоторые из них по своему усмотрению. Я разрешил пользователям устанавливать:

  • Заголовок виджета
  • Количество твитов, выводимых на экран
  • Имя пользователя в Twitter
  • Пять цветовых опций
  • Отображать или нет хэштеги
  • Отображать или нет timestamp’ы
  • Отображать или нет аватары

Каждая наша переменная будет обладать понятным, уникальным идентификатором, который в дальнейшем мы будем использовать при написании кода. Следующий фрагмент кода позволяет нам записать в переменные значения, полученные из базы данных. Заметьте, что здесь используется два различных синтаксиса: первый — для текстового ввода, второй — для булевого ввода (true/false).

// Extract Args //

		function widget($args, $instance) {
			extract( $args );
			$title 		= apply_filters('widget_title', $instance['title']); // the widget title
			$tweetnumber 	= $instance['tweet_number']; // the number of tweets to show
			$twitterusername 	= $instance['twitter_username']; // the twitter username to poll tweets from
			$shellbg	= $instance['shell_bg']; // Shell background color
			$shellcolor 	= $instance['shell_color']; // Shell text color
			$tweetsbg 	= $instance['tweets_bg']; // Tweets background color
			$tweetscolor 	= $instance['tweets_color']; // Tweets text color
			$tweetslinks 	= $instance['tweets_links']; // Tweets links color
			$hashtags   = isset($instance['hashtags']) ? $instance['hashtags'] : false ; // whether or not to show hashtags
			$timestamp   = isset($instance['timestamp']) ? $instance['timestamp'] : false ; // whether or not to show timestamp
			$avatars   = isset($instance['avatars']) ? $instance['avatars'] : false ; // whether or not to show avatars

Код виджета

Наш виджет будет задаваться следующим кодом:

// Before widget //

		echo $before_widget;

// Title of widget //

		if ( $title ) { echo $before_title . $title . $after_title; }

// Widget output //

		?>
		<script src="http://widgets.twimg.com/j/2/widget.js"></script>
			<script>
			new TWTR.Widget({
				version: 2,
				type: 'profile',
				rpp: <?php echo $tweetnumber; ?>,
				interval: 6000,
				width: 250,
				height: 300,
				theme: {
					shell: {
						background: '<?php echo $shellbg; ?>',
						color: '<?php echo $shellcolor; ?>'
					},
					tweets: {
						background: '<?php echo $tweetsbg; ?>',
						color: '<?php echo $tweetscolor; ?>',
						links: '<?php echo $tweetslinks; ?>'
					}
				},
				features: {
					scrollbar: false,
					loop: false,
					live: true,
					<?php if ($hashtags) {
						echo 'hashtags: true,';
					}
					else {
						echo 'hashtags: false,';
					}
					if ($timestamp) {
						echo 'timestamp: true,';
					}
					else {
						echo 'timestamp: false,';
					}
					if ($avatars) {
						echo 'avatars: true,';
					}
					else {
						echo 'avatars: false,';
					} ?>
					behavior: 'all'
  				}
			}).render().setUser('<?php echo $twitterusername; ?>').start();
			</script>
			<?php

// After widget //

		echo $after_widget;
		}

Обновление настроек в базе данных

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

// Update Settings //

 		function update($new_instance, $old_instance) {
 			$instance['title'] = ($new_instance['title']);
 			$instance['tweet_number'] = ($new_instance['tweet_number']);
 			$instance['twitter_username'] = ($new_instance['twitter_username']);
 			$instance['shell_bg'] = ($new_instance['shell_bg']);
 			$instance['shell_color'] = ($new_instance['shell_color']);
 			$instance['tweets_bg'] = ($new_instance['tweets_bg']);
 			$instance['tweets_color'] = ($new_instance['tweets_color']);
 			$instance['tweets_links'] = ($new_instance['tweets_links']);
 			$instance['hashtags'] = ($new_instance['hashtags']);
 			$instance['timestamp'] = ($new_instance['timestamp']);
 			$instance['avatars'] = ($new_instance['avatars']);
 			return $instance;
 		}

Создание панели управления

Нам осталось лишь создать панель управления, в которой пользователь сможет установить и выбрать настройки для своего виджета. Фрагмент кода, приведенный ниже, начинается с объявления некоторых начальных значений, которые появятся после первой установки виджета. Мы используем текстовые поля и переключатели для получения нужных настроек. При желании мы могли бы заменить их на радиокнопки или выпадающие списки.

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

// Widget Control Panel //

 		function form($instance) {

 		$defaults = array( 'title' => 'Dave Recent Tweets', 'tweet_number' => 3, 'twitter_username' => '', 'shell_bg' => '#AAE3FF', 'shell_color' => '#333', 'tweets_bg' => '#EFFFFF', 'tweets_color' => '#333', 'tweets_links' => '#716B68', 'hashtags' => 'on', 'timestamp' => 'on', 'avatars' => false );
 		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

 		<p>
 			<label for="<?php echo $this->get_field_id('title'); ?>">Title</label>
 			<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>'" type="text" value="<?php echo $instance['title']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweet_number'); ?>"><?php _e('Number of tweets to display'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweet_number'); ?>" name="<?php echo $this->get_field_name('tweet_number'); ?>" type="text" value="<?php echo $instance['tweet_number']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('twitter_username'); ?>"><?php _e('Twitter username'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('twitter_username'); ?>" name="<?php echo $this->get_field_name('twitter_username'); ?>" type="text" value="<?php echo $instance['twitter_username']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('shell_bg'); ?>"><?php _e('Shell background color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('shell_bg'); ?>" name="<?php echo $this->get_field_name('shell_bg'); ?>" type="text" value="<?php echo $instance['shell_bg']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('shell_color'); ?>"><?php _e('Shell text color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('shell_color'); ?>" name="<?php echo $this->get_field_name('shell_color'); ?>" type="text" value="<?php echo $instance['shell_color']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_bg'); ?>"><?php _e('Tweets background color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_bg'); ?>" name="<?php echo $this->get_field_name('tweets_bg'); ?>" type="text" value="<?php echo $instance['tweets_bg']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_color'); ?>"><?php _e('Tweets text color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_color'); ?>" name="<?php echo $this->get_field_name('tweets_color'); ?>" type="text" value="<?php echo $instance['tweets_color']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_links'); ?>"><?php _e('Tweets links color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_links'); ?>" name="<?php echo $this->get_field_name('tweets_links'); ?>" type="text" value="<?php echo $instance['tweets_links']; ?>" />
 		</p>
		<p>
			<label for="<?php echo $this->get_field_id('hashtags'); ?>"><?php _e('Show hashtags?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['hashtags'], 'on' ); ?> id="<?php echo $this->get_field_id('hashtags'); ?>" name="<?php echo $this->get_field_name('hashtags'); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('timestamp'); ?>"><?php _e('Show timestamp?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['timestamp'], 'on' ); ?> id="<?php echo $this->get_field_id('timestamp'); ?>" name="<?php echo $this->get_field_name('timestamp'); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('avatars'); ?>"><?php _e('Show avatars?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['avatars'], 'on' ); ?> id="<?php echo $this->get_field_id('avatar'); ?>" name="<?php echo $this->get_field_name('avatars'); ?>" />
		</p>
        <?php }

}

Заключительный аккорд

Теперь нам осталось только зарегистрировать виджет:

// End class diww_my_recent_tweets_widget

add_action('widgets_init', create_function('', 'return register_widget("diww_my_recent_tweets_widget");'));
?>

Весь код целиком будет выглядеть следующим образом:

<?php
/*
Plugin Name: Dave Recent Tweets
Plugin URI: http://www.doitwithwp.com/
Description: Displays your recent tweets in a sidebar widget
Version: 0.1
Author: Dave Clements
Author URI: http://www.theukedge.com
License: GPL2
*/

/*  Copyright 2011  Dave Clements  (email : http://www.theukedge.com/contact/)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

// Start class diww_my_recent_tweets_widget //

	class diww_my_recent_tweets_widget extends WP_Widget {

// Constructor //

	function diww_my_recent_tweets_widget() {
		$widget_ops = array( 'classname' => 'diww_my_recent_tweets_widget', 'description' => 'Displays your recent tweets using the Twitter profile tool' ); // Widget Settings
		$control_ops = array( 'id_base' => 'diww_my_recent_tweets_widget' ); // Widget Control Settings
		$this->WP_Widget( 'diww_my_recent_tweets_widget', 'Dave Recent Tweets', $widget_ops, $control_ops ); // Create the widget
	}

// Extract Args //

		function widget($args, $instance) {
			extract( $args );
			$title 		= apply_filters('widget_title', $instance['title']); // the widget title
			$tweetnumber 	= $instance['tweet_number']; // the number of tweets to show
			$twitterusername 	= $instance['twitter_username']; // the type of posts to show
			$shellbg	= $instance['shell_bg']; // Shell background color
			$shellcolor 	= $instance['shell_color']; // Shell text color
			$tweetsbg 	= $instance['tweets_bg']; // Tweets background color
			$tweetscolor 	= $instance['tweets_color']; // Tweets text color
			$tweetslinks 	= $instance['tweets_links']; // Tweets links color
			$hashtags   = isset($instance['hashtags']) ? $instance['hashtags'] : false ; // whether or not to show hashtags
			$timestamp   = isset($instance['timestamp']) ? $instance['timestamp'] : false ; // whether or not to show timestamp
			$avatars   = isset($instance['avatars']) ? $instance['avatars'] : false ; // whether or not to show avatars

// Before widget //

		echo $before_widget;

// Title of widget //

		if ( $title ) { echo $before_title . $title . $after_title; }

// Widget output //

		?>
		<script src="http://widgets.twimg.com/j/2/widget.js"></script>
			<script>
			new TWTR.Widget({
				version: 2,
				type: 'profile',
				rpp: <?php echo $tweetnumber; ?>,
				interval: 6000,
				width: 250,
				height: 300,
				theme: {
					shell: {
						background: '<?php echo $shellbg; ?>',
						color: '<?php echo $shellcolor; ?>'
					},
					tweets: {
						background: '<?php echo $tweetsbg; ?>',
						color: '<?php echo $tweetscolor; ?>',
						links: '<?php echo $tweetslinks; ?>'
					}
				},
				features: {
					scrollbar: false,
					loop: false,
					live: true,
					<?php if ($hashtags) {
						echo 'hashtags: true,';
					}
					else {
						echo 'hashtags: false,';
					}
					if ($timestamp) {
						echo 'timestamp: true,';
					}
					else {
						echo 'timestamp: false,';
					}
					if ($avatars) {
						echo 'avatars: true,';
					}
					else {
						echo 'avatars: false,';
					} ?>
					behavior: 'all'
  				}
			}).render().setUser('<?php echo $twitterusername; ?>').start();
			</script>
			<?php

// After widget //

		echo $after_widget;
		}

// Update Settings //

 		function update($new_instance, $old_instance) {
 			$instance['title'] = ($new_instance['title']);
 			$instance['tweet_number'] = ($new_instance['tweet_number']);
 			$instance['twitter_username'] = ($new_instance['twitter_username']);
 			$instance['shell_bg'] = ($new_instance['shell_bg']);
 			$instance['shell_color'] = ($new_instance['shell_color']);
 			$instance['tweets_bg'] = ($new_instance['tweets_bg']);
 			$instance['tweets_color'] = ($new_instance['tweets_color']);
 			$instance['tweets_links'] = ($new_instance['tweets_links']);
 			$instance['hashtags'] = ($new_instance['hashtags']);
 			$instance['timestamp'] = ($new_instance['timestamp']);
 			$instance['avatars'] = ($new_instance['avatars']);
 			return $instance;
 		}

// Widget Control Panel //

 		function form($instance) {

 		$defaults = array( 'title' => 'Dave Recent Tweets', 'tweet_number' => 3, 'twitter_username' => '', 'shell_bg' => '#AAE3FF', 'shell_color' => '#333', 'tweets_bg' => '#EFFFFF', 'tweets_color' => '#333', 'tweets_links' => '#716B68', 'hashtags' => 'on', 'timestamp' => 'on', 'avatars' => false );
 		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

 		<p>
 			<label for="<?php echo $this->get_field_id('title'); ?>">Title</label>
 			<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>'" type="text" value="<?php echo $instance['title']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweet_number'); ?>"><?php _e('Number of tweets to display'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweet_number'); ?>" name="<?php echo $this->get_field_name('tweet_number'); ?>" type="text" value="<?php echo $instance['tweet_number']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('twitter_username'); ?>"><?php _e('Twitter username'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('twitter_username'); ?>" name="<?php echo $this->get_field_name('twitter_username'); ?>" type="text" value="<?php echo $instance['twitter_username']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('shell_bg'); ?>"><?php _e('Shell background color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('shell_bg'); ?>" name="<?php echo $this->get_field_name('shell_bg'); ?>" type="text" value="<?php echo $instance['shell_bg']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('shell_color'); ?>"><?php _e('Shell text color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('shell_color'); ?>" name="<?php echo $this->get_field_name('shell_color'); ?>" type="text" value="<?php echo $instance['shell_color']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_bg'); ?>"><?php _e('Tweets background color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_bg'); ?>" name="<?php echo $this->get_field_name('tweets_bg'); ?>" type="text" value="<?php echo $instance['tweets_bg']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_color'); ?>"><?php _e('Tweets text color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_color'); ?>" name="<?php echo $this->get_field_name('tweets_color'); ?>" type="text" value="<?php echo $instance['tweets_color']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_links'); ?>"><?php _e('Tweets links color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_links'); ?>" name="<?php echo $this->get_field_name('tweets_links'); ?>" type="text" value="<?php echo $instance['tweets_links']; ?>" />
 		</p>
		<p>
			<label for="<?php echo $this->get_field_id('hashtags'); ?>"><?php _e('Show hashtags?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['hashtags'], 'on' ); ?> id="<?php echo $this->get_field_id('hashtags'); ?>" name="<?php echo $this->get_field_name('hashtags'); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('timestamp'); ?>"><?php _e('Show timestamp?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['timestamp'], 'on' ); ?> id="<?php echo $this->get_field_id('timestamp'); ?>" name="<?php echo $this->get_field_name('timestamp'); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('avatars'); ?>"><?php _e('Show avatars?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['avatars'], 'on' ); ?> id="<?php echo $this->get_field_id('avatar'); ?>" name="<?php echo $this->get_field_name('avatars'); ?>" />
		</p>
        <?php }

}

// End class diww_my_recent_tweets_widget

add_action('widgets_init', create_function('', 'return register_widget("diww_my_recent_tweets_widget");'));
?>

А вы уже пробовали создать свой виджет для твитов? Какие настройки при этом вы использовали?

http://wplift.com/create-your-own-widget-for-displaying-recent-tweets

1 виджет для отображения твитов
Советуем ознакомиться:
Статьи Wordpress 0
WordPress Playground: от 5-минутной установки до мгновенного развертывания
WordPress Playground зародился как эксперимент, позволяющий исследовать то, как бы выглядел автономный WordPress без
Статьи Wordpress 2
Статистика подтверждает рост числа уязвимостей WordPress
Исследователи безопасности WordPress из Patchstack опубликовали свой ежегодный отчет «Состояние безопасности WordPress» («State of
Статьи Wordpress 0
Ответы на распространенные вопросы об интерпретации отчетов о скорости загрузки страниц
Замечали ли вы, что отчеты различных инструментов дают разные показатели производительности? Не должны ли
Статьи Wordpress 6
Что появится в WordPress 6.3: превью планируемых нововведений и улучшений
Не так давно вышла бета-версия WordPress 6.3, а потому пришла пора сделать обзор всех
Статьи Wordpress 0
Почему премиальный веб-хостинг стоит своих денег
Однажды утром я открыл сайт компании, в которой я работал, и он исчез. Исчез
Статьи Wordpress 4
Оптимизация базы данных в WordPress: добавляем индексы к своим (кастомным) таблицам
Индексирование базы данных – практика, про которую часто забывают, но которая очень полезна при
Блог про WordPress
Комментарии: 1
  1. cheshire

    Все бы хорошо, но код нормально можно написать?

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

Получать новые комментарии по электронной почте.