Во многих блогах часто встречается виджет обо мне на боковой панели блога, который отображает биографию автора . Это отличное место, чтобы показать всем свое имя, свою биографию, свою фотографию и ссылки в социальных сетях. Если вы хотите сделать это в WordPress, вы можете добавить стандартный текстовый виджет и ввести эту информацию вручную.
Но проблема возникает, если у вас есть несколько авторов в вашем блоге WordPress , если вы добавите текстовый виджет, то это будет отображаться одинаково на каждой странице. Решением этой проблемы является создание виджета WordPress, который будет отображать только автора текущей страницы в виджете .
В этом уроке мы собираемся создать виджет WordPress, который будет отображать автора текущего поста и будет использовать встроенный менеджер пользователей WordPress для хранения всей необходимой нам информации.
Создать виджет WordPress
Для начала нам нужно зарегистрировать виджет WordPress, это так же просто, как создать плагин WordPress. Все, что вам нужно сделать, это создать новую папку в каталоге wp-content / plugins для вашего плагина и создать новый php-файл внутри этой папки.
В новом файле PHP добавьте следующие комментарии к вашему коду.
/*
* Plugin Name: Multi Author About Me Widget
* Plugin URI: [Your Website]
* Description: A widget that allows you to display either a specific author for your site, or current posts author.
* Version: 1.0
* Author: [Author Name]
* Author URI: [Author URL]
* License: GPL2
Copyright 2012 Paul Underwood
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.
*/
Лучший способ создать виджет в WordPress — наследовать от класса WP_Widget и переопределить функции widget (), update () и form () . Вы можете увидеть, как вы это создадите, просмотрев [a href = «http://www.paulund.co.uk/wordpress-widget-boilerplate» title = «Boilerplate виджета WordPress» target = «_ blank»] WordPress Boilerplate виджета ,
Сначала нам нужно зарегистрировать этот новый виджет на WordPress, чтобы он появился на панели инструментов виджета , чтобы сделать это и увидеть новый виджет, добавьте следующий код.
<?php
add_action( 'widgets_init', create_function( '', 'register_widget("paulund_multi_author_about_me_widget");' ) );
class paulund_multi_author_about_me_widget extends WP_Widget
{
/**
* Register widget with WordPress.
*/
public function __construct() {
parent::__construct(
'multi_author_about_me_widget', // Base ID
'Multi Author About Me Widget', // Name
array(
'classname' => 'multi_author_about_me_widget',
'description' => __('A widget that allows you to display either a specific author for your site, a list of all authors, or current posts author.', 'framework')
)
);
} // end constructor
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget( $args, $instance ) {
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update( $new_instance, $old_instance ) {
}
/**
* Create the form for the Widget admin
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance )
{
}
}
?>
Теперь вы увидите этот новый виджет на панели инструментов виджета, но он ничего не сделает, так как нам нужно завершить оставшуюся часть виджета.
Конструктор Виджетов
В конструкторе виджета нам нужно сделать пару вещей для настройки виджета, сначала нам нужно добавить дополнительные социальные профили в диспетчер пользователей WordPress , затем мы собираемся включить палитру цветов на экране администратора, чтобы пользователь мог выбирать как стилизовать фон и цвета шрифта.
/**
* Register widget with WordPress.
*/
public function __construct() {
add_filter( 'user_contactmethods', array(&$this, 'add_social_media_networks'), 10, 1);
add_action( 'admin_enqueue_scripts', array(&$this, 'enqueue_styles') );
parent::__construct(
'multi_author_about_me_widget', // Base ID
'Multi Author About Me Widget', // Name
array(
'classname' => 'multi_author_about_me_widget',
'description' => __('A widget that allows you to display either a specific author for your site or current posts author.', 'framework')
)
);
} // end constructor
В первой строке этого конструктора будет использоваться фильтр user_contactmethods , который позволит нам добавить дополнительные поля в диспетчер пользователей, этот фильтр вызовет следующую функцию.
public function add_social_media_networks()
{
$contactmethods['rss_url'] = 'RSS URL';
$contactmethods['google_profile'] = 'Google Username';
$contactmethods['twitter_profile'] = 'Twitter Username';
$contactmethods['facebook_profile'] = 'Facebook Username';
$contactmethods['pinterest_profile'] = 'Pinterest Username';
$contactmethods['flickr_profile'] = 'Flickr Username';
$contactmethods['youtube_profile'] = 'YouTube Username';
$contactmethods['skype_profile'] = 'Skype Username';
$contactmethods['digg_profile'] = 'Digg Username';
return $contactmethods;
}
Вторая строка функции конструктора будет включать в себя Javascript и Stylesheets для палитры цветов на странице виджета WordPress, при этом будет вызвана следующая функция. Эта функция будет использовать встроенную палитру цветов WordPress, которая называется farbtastic. Вы можете просто включить ее на странице, используя функции wp_enqueue_style () и wp_enqueue_script () .
public function enqueue_styles()
{
wp_enqueue_style('farbtastic');
wp_enqueue_script('farbtastic');
}
Создание формы виджета
Когда вы добавляете виджет на боковую панель на панели инструментов WordPress, вы можете добавить форму, чтобы настроить внешний вид виджета. Для этого виджета нам нужно добавить ряд различных опций, чтобы правильно его настроить, нам понадобятся следующие опции.
- Выберите пользователя из выпадающего списка.
- Введите размер вашего аватара.
- Флажок, чтобы всегда отображать текущего автора.
- Выбор цвета фона
- Выбор цвета шрифта
- Иконки социальных сетей
Все эти настройки должны быть определены внутри функции формы, чтобы они отображались на экране панели управления виджетом.
/**
* Create the form for the Widget admin
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance )
{
// Set up some default widget settings
$defaults = array(
'display_author' => '',
'override' => '1',
'background' => '#ffffff',
'font_color' => '#000000',
'avatar_size' => '125',
'icon_color' => 'black'
);
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
<label for="<?php echo $this->get_field_id( 'display_author' ); ?>"><?php _e('Display Author:', 'framework') ?></label>
<?php wp_dropdown_users( array('id' => $this->get_field_id( 'display_author' ),
'name' => $this->get_field_name( 'display_author' ),
'selected' => $instance['display_author']
) ); ?>
<label for="<?php echo $this->get_field_id( 'avatar_size' ); ?>"><?php _e('Avatar Size:', 'framework') ?></label>
<input type="text" name="<?php echo $this->get_field_name( 'avatar_size' ); ?>" id="<?php echo $this->get_field_id( 'avatar_size' ); ?>" value="<?php echo $instance['avatar_size']; ?>" />
<label for="<?php echo $this->get_field_id( 'override' ); ?>"><?php _e('Override Author With Current Post Author:', 'framework') ?></label>
<input type="checkbox" name="<?php echo $this->get_field_name( 'override' ); ?>" id="<?php echo $this->get_field_id( 'override' ); ?>" <?php checked( $instance['override'], '1', true ); ?> value="1" />
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function()
{
jQuery('.widefat').focus(function(){
var $this = jQuery(this);
$this.parent().next().show();
}).focusout(function(){
var $this = jQuery(this);
$this.parent().next().hide();
});
jQuery('.widget-color-picker').hide();
// colorpicker field
jQuery('.widget-color-picker').each(function(){
var $this = jQuery(this),
id = $this.attr('rel');
$this.farbtastic('#' + id);
});
});
//]]>
</script>
<label for="<?php echo $this->get_field_id('background'); ?>"><?php _e('Background Color:', 'framework'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('background'); ?>" name="<?php echo $this->get_field_name('background'); ?>" type="text" value="<?php echo $instance['background']; ?>" />
<div class="widget-color-picker" rel="<?php echo $this->get_field_id('background'); ?>"></div>
<label for="<?php echo $this->get_field_id('font_color'); ?>"><?php _e('Font Color:', 'framework'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('font_color'); ?>" name="<?php echo $this->get_field_name('font_color'); ?>" type="text" value="<?php echo $instance['font_color']; ?>" />
<div class="widget-color-picker" rel="<?php echo $this->get_field_id('font_color'); ?>"></div>
<label for="<?php echo $this->get_field_id('icon_color'); ?>"><?php _e('Icon Color:', 'framework'); ?></label>
<select id="<?php echo $this->get_field_id('icon_color'); ?>" name="<?php echo $this->get_field_name('icon_color'); ?>">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="limegreen">Lime Green</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
<option value="purple">Purple</option>
<option value="red">Red</option>
</select>
<?php
}
Сохранение данных формы
При сохранении данных виджета виджет автоматически вызовет функцию update () , поэтому внутри этой функции мы сделаем любую проверку, которая должна быть сделана со значениями.
В функцию обновления передаются два параметра: первый параметр — это новые значения, поступающие из формы, второй параметр — старые значения, которые уже сохранены в базе данных. Возвращением этой функции будут те значения, которые будут храниться в базе данных.
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
// Strip tags to remove HTML (important for text inputs)
foreach($new_instance as $k => $v){
$instance[$k] = strip_tags($v);
}
$instance['display_author'] = $new_instance['display_author'];
$instance['override'] = (bool)$new_instance['override'];
return $instance;
}
Отображение виджета на вашем сайте
Когда вы переместите виджет в боковую панель, измените настройки и нажмите «Сохранить» для этих настроек, виджет будет сохранен на этой боковой панели и будет отображаться на вашем сайте.
Когда виджет будет отображаться на боковой панели, он будет использовать функцию widget () и передает два параметра, первый параметр будет определять аргументы виджета. Вторым параметром будут все настройки, которые вы сохранили в форме виджета, нам нужно использовать оба из них в функции виджета.
В форме для виджета мы позволили пользователю выбрать конкретного пользователя для отображения или позволить ему переопределить этого пользователя и отобразить текущего автора сообщения.
Чтобы получить всю необходимую нам информацию о пользователях, нам нужно использовать функции get_userdata () и get_user_meta () и передать идентификатор пользователя, чтобы получить данные для этого определенного пользователя.
if((int)$override === 1 && is_single())
{
$display_author = get_the_author_meta('ID');
}
$user_info = get_userdata( $display_author );
$user_meta = get_user_meta( $display_author );
Теперь мы можем использовать эти данные для отображения информации о виджете обо мне. Ниже приведен остальной код, который необходим для отображения имени автора, биографии автора, аватара автора и значков социальных сетей.
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget( $args, $instance ) {
extract( $args );
extract( $instance );
if((int)$override === 1 && is_single())
{
$display_author = get_the_author_meta('ID');
}
$user_info = get_userdata( $display_author );
$user_meta = get_user_meta( $display_author );
// Our variables from the widget settings
$title = '';
// Before widget (defined by theme functions file)
echo $before_widget;
// Display the widget title if one was input
if ( $title )
echo $before_title . $title . $after_title;
?>
<div id="about_me_widget" <?php echo 'style="background-color:'. $background.'; color:'.$font_color.'"'; ?>>
<h2><?php echo $user_info->display_name; ?></h2>
<?php echo get_avatar( $user_info->user_email, $avatar_size ); ?>
<?php echo $user_meta['description'][0]; ?>
<div class="about_me_widget_social_icons">
<?php
$url = trailingslashit( plugins_url( 'img', __FILE__ ) );
if(isset($user_meta['rss_url']) && $user_meta['rss_url'][0] != '')
{
?><a href="<?php echo $user_meta['rss_url'][0]; ?>"><img src="<?php echo $url . $icon_color . '-01.png'; ?>" alt="" title="Subscribe To RSS" /></a><?php
}
if(isset($user_meta['google_profile']) && $user_meta['google_profile'][0] != '')
{
?><a href="<?php echo $user_meta['google_profile'][0]; ?>"><img src="<?php echo $url . $icon_color . '-01.png'; ?>" alt="" title="Circle On Google Plus" /></a><?php
}
if(isset($user_meta['twitter_profile']) && $user_meta['twitter_profile'][0] != '')
{
?><a href="<?php echo $user_meta['twitter_profile'][0]; ?>"><img src="<?php echo $url . $icon_color . '-01.png'; ?>" alt="" title="Follow On Twitter" /></a><?php
}
if(isset($user_meta['facebook_profile']) && $user_meta['facebook_profile'][0] != '')
{
?><a href="<?php echo $user_meta['facebook_profile'][0]; ?>"><img src="<?php echo $url . $icon_color . '-01.png'; ?>" alt="" title="Like On Facebook" /></a><?php
}
if(isset($user_meta['pinterest_profile']) && $user_meta['pinterest_profile'][0] != '')
{
?><a href="<?php echo $user_meta['pinterest_profile'][0]; ?>"><img src="<?php echo $url . $icon_color . '-01.png'; ?>" alt="" title="Follow On Pinterest" /></a><?php
}
if(isset($user_meta['flickr_profile']) && $user_meta['flickr_profile'][0] != '')
{
?><a href="<?php echo $user_meta['flickr_profile'][0]; ?>"><img src="<?php echo $url . $icon_color . '-01.png'; ?>" alt="" title="Follow On Flickr" /></a><?php
}
if(isset($user_meta['youtube_profile']) && $user_meta['youtube_profile'][0] != '')
{
?><a href="<?php echo $user_meta['youtube_profile'][0]; ?>"><img src="<?php echo $url . $icon_color . '-01.png'; ?>" alt="" title="Subscribe To YouTube" /></a><?php
}
if(isset($user_meta['skype_profile']) && $user_meta['skype_profile'][0] != '')
{
?><a href="<?php echo $user_meta['skype_profile'][0]; ?>"><img src="<?php echo $url . $icon_color . '-01.png'; ?>" alt="" title="Talk On Skype" /></a><?php
}
if(isset($user_meta['digg_profile']) && $user_meta['digg_profile'][0] != '')
{
?><a href="<?php echo $user_meta['digg_profile'][0]; ?>"><img src="<?php echo $url . $icon_color . '-01.png'; ?>" alt="" title="Follow On Digg" /></a><?php
}
?>
</div>
</div>
<?php
// After widget (defined by theme functions file)
echo $after_widget;
}
Если вы сейчас зайдете на свой сайт, то увидите боковую панель своего блога виджета обо мне. Если вы не находитесь ни в одном сообщении, то будет отображаться пользователь по умолчанию, при нажатии на сообщение другого автора виджет изменится и отобразит информацию об авторе текущего сообщения.
В этом коде есть изображения, которые будут отображать ваши иконки в социальных сетях, есть опции для разных стилей кнопок социальных сетей. Я не включил их в этот урок, чтобы вы могли использовать ваши любимые иконки для социальных сетей.