Subscribete

Ver articulos del blog

Crear un Widget personificado en Wordpress

Este código le permite rápida y fácilmente añadir un nuevo widget, insertara Google Plus y seguidores en su sitio web con Wordpress

Para no abultar el archivo de funciones, crea una carpeta dentro de tu tema y ponle como nombre widgets y un archivo google+.ph dentro de la carpeta y pegar el siguiente código.


/* ---------------------------- */
/* -------- Google Plus Followers Widget -------- */
/* ---------------------------- */
add_action( 'widgets_init', 'ast_gplus_widgets' );

/*
* Register widget.
*/
function ast_gplus_widgets() {
register_widget( 'ast_gplus_widget' );
}

/*
* Widget class.
*/
class ast_gplus_Widget extends WP_Widget {

/* ---------------------------- */
/* -------- Widget setup -------- */
/* ---------------------------- */

function __construct() {
parent::__construct( 'ast_gplus_widget', __( 'Google + seguidores' ), array(
'classname' => 'ast_gplus_widget',
'description' => __( 'Un widget que muestra tus seguidores de Google Plus..' ),
) );
$this->alt_option_name = 'ast_gplus_widget';
}

/* ---------------------------- */
/* ------- Display Widget -------- */
/* ---------------------------- */

function widget( $args, $instance ) {
extract( $args );

/* Our variables from the widget settings. 290*/
$title = isset( $instance['title'] ) ? apply_filters('widget_title', $instance['title'] ) : __('Seguir Google Plus');
$num = isset( $instance['num'] ) ? $instance['num'] : 'https://plus.google.com/+webgae';
$gplus_width = isset( $instance['gplus_width'] ) ? $instance['gplus_width'] : '290';
$templatepath = get_template_directory_uri();

/* Before widget (defined by themes). */
echo $before_widget;

if(is_customize_preview()) echo '<span class="widgetname">'.$this->name.'</span>';

/* Display the widget title if one was input (before and after defined by themes). */
if ( $title )
echo $before_title . $title . $after_title;

/* Display a containing div */
echo '<div class="ast_gplus">';
echo '<script type="text/javascript">
(function() {
window.___gcfg = {\'lang\': \'es\'};
var po = document.createElement(\'script\');
po.type = \'text/javascript\';
po.async = true;
po.src = \'https://apis.google.com/js/plusone.js\';
var s = document.getElementsByTagName(\'script\')[0];
s.parentNode.insertBefore(po, s);
})();
</script><div class="wc-gplusmod"><div class="g-plus" data-action="followers" data-height="290" data-href="'.esc_url($num).'?prsrc=2" data-source="blogger:blog:followers" data-width="'.$gplus_width.'"></div></div>';

echo '</div>';

/* After widget (defined by themes). */
echo $after_widget;
}

/* ---------------------------- */
/* ------- Update Widget -------- */
/* ---------------------------- */

function update( $new_instance, $old_instance ) {
$instance = $old_instance;

/* Strip tags for title and name to remove HTML (important for text inputs). */
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['num'] = esc_url_raw($new_instance['num']);
$instance['gplus_width'] = $new_instance['gplus_width'];

return $instance;
}

/* ---------------------------- */
/* ------- Widget Settings ------- */
/* ---------------------------- */

/**
* Displays the widget settings controls on the widget panel.
* Make use of the get_field_id() and get_field_name() function
* when creating your form elements. This handles the confusing stuff.
*/

function form( $instance ) {

/* Set up some default widget settings. */
$defaults = array(
'title' => __('Seguir en Google Plus'),
'num' => 'https://plus.google.com/+webgae',
'gplus_width' => '290'
);

$instance = wp_parse_args( (array) $instance, $defaults ); ?>

<!-- Widget Title: Text Input -->
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Titulo:') ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" type="text" />
</p>

<!-- Number of Posts: Text Input -->
<p>
<label for="<?php echo $this->get_field_id( 'num' ); ?>"><?php _e('Google Plus Url:') ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'num' ); ?>" name="<?php echo $this->get_field_name( 'num' ); ?>" value="<?php echo $instance['num']; ?>" type="text" />
</p>

<!-- Number of Posts: Text Input -->
<p>
<label for="<?php echo $this->get_field_id( 'gplus_width' ); ?>"><?php _e('Box Width:') ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'gplus_width' ); ?>" name="<?php echo $this->get_field_name( 'gplus_width' ); ?>" value="<?php echo $instance['gplus_width']; ?>" type="text" />
</p>


<?php
}

}

Agrega este código en functions.php de tu tema
require(get_template_directory() . '/widgets/google+.php');


Y listo....ves a tus widgets y veras uno nuevo llamado Google + seguidores