Создаем свой собственный виджет для отображения последних твитов
В этой статье мы рассмотрим, как создать виджет, в котором будут выводиться свежие твиты. За основу мы возьмем стандартный виджет “Профиль”, доступный в Twitter.
Заголовок плагина
Первое, с чего стоит начать, это создать новую папку в каталоге 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
