fercba Seguir
Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
- Desde
- 5 Ago 2013
- Mensajes
- 815
Betas les traigo un tutorial con el que podran mostrar en su sidebar un bloque con tabs con los ultimos comentarios y post con mas comentarios, vamos al tutorial.
Primero abren su archivo functions.php de su theme actual y al final de todo pegan el siguiente codigo:
Ahora vamos a agregar una funcion para que funcionen los tabs, agregenla en su archivo footer.php antes de cerrar la etiqueta </body>
Guardan cambios y listo ahora van a la seccion de widget y lo activan.
En su theme crean una carpeta de nombre "images" y guardan la siguiente imagen con nombre "no_image" es por si no tienen la miniatura se mostrara esa imagen.
Importante: si no tienen habilitada alguna de las siguientes funciones agregan el codigo en el functions.php de su theme
1.- En caso de no tener la opción de widgets habilitada agregan:
2.- Al igual si no tienen habilitada la función para thumbnails agregan:
3.- Por ultimo abren el archivo sibebar.php y ponen donde quieran que se visualize:
Eso fue todo hasta el proximo tutorial
Primero abren su archivo functions.php de su theme actual y al final de todo pegan el siguiente codigo:
PHP:
/*
Tabs ultimos comentarios y Post mas comentados para Forobeta :)
Autor: Fercba
*/
class last__comment extends WP_Widget
{
function last__comment()
{
parent::WP_Widget(false, $name = 'Articulos mas comentados');
}
function widget($args, $instance)
{
extract($args);
$title = apply_filters('widget_title', $instance['title']);
$arg1 = array( 'order' => 'DESC', 'orderby' => 'comment_count' , 'posts_per_page' => 5);
$query_most = new WP_Query($arg1);
$last_comment = get_comments('number=5');
echo $before_widget;
if ($title)
echo $before_title . $title . $after_title;
?>
<style type="text/css">
.TabsChange{overflow: hidden; margin:0 0 10px 0; padding: 0!important}
.TabsChange li{ float: left; }
.TabsChange li a{ padding: 5px 12px; display: block; border-bottom: 1px solid white; cursor: pointer;}
.TabsChange li a.active{ background: #eee;border-bottom:1px solid #ccc; }
.contenTabs .tbc{ display: none;}
.contenTabs .tbc.active{ display: block;}
</style>
<ul class="TabsChange">
<li><a class="active" data-view="last">Ultimos comentarios</a></li>
<li><a data-view="most">Los más comentados</a></li>
</ul>
<div class="contenTabs">
<div class="tbc" id="last">
<?php
foreach($last_comment as $c){
$d = get_post($c->comment_post_ID);
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($c->comment_post_ID), 'thumbnail' );
$title = $d->post_title; ?>
<div class="PostSidebar" >
<div class="img"><?php
if(!empty($thumb[0])):
?><img alt="<?php echo $title;?>" title="<?php echo $title;?>" src="<?php echo $thumb[0];?>"><?php
else:
?><img alt="<?php echo $title;?>" title="<?php echo $title;?>" src="<?php bloginfo('template_url'); ?>/images/no_image.jpg"><?php
endif;?>
</div>
<div class="desc">
<h4><a href="<?php echo get_permalink($c->comment_post_ID); ?>"><?php echo $d->post_title; ?></a></h4>
</div>
</div> <?php
}
?>
</div>
<div class="tbc active" id="most">
<?php
if($query_most->have_posts()):
while($query_most->have_posts()){ $query_most->the_post();
$nc =get_comments_number($query_most->post->ID);
if($nc > 0){
?>
<div class="PostSidebar" >
<div class="img"><?php
if(has_post_thumbnail()):
the_post_thumbnail('', array('class' => 'img-responsive'));
else:
?><img alt="sin imagen" src="<?php bloginfo('template_url'); ?>/images/no_image.jpg"><?php
endif;?>
</div>
<div class="desc">
<h4><a title="<?php the_title();?>" href="<?php the_permalink(); ?>"><?php the_title();?></a></h4>
<small><i class="glyphicon glyphicon-comment"></i> <?php echo $nc; ?></small>
</div>
</div><?php
}
}
?></div></div><?php
endif;
echo $after_widget;
}
function update($new_instance, $old_instance)
{
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
return $instance;
}
function form($instance)
{
$title = esc_attr($instance['title']);
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">Titulo</label><br>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<?php
}
}
function last__commentW() {
register_widget('last__comment');
}
add_action('widgets_init', "last__commentW");
Ahora vamos a agregar una funcion para que funcionen los tabs, agregenla en su archivo footer.php antes de cerrar la etiqueta </body>
HTML:
<script type="text/javascript">
$(document).on('ready',function(){
$(".TabsChange li a").click(function(){
$(".TabsChange li a, .tbc" ).removeClass('active');
$(this).add("#" + $(this).attr('data-view')).addClass('active');
});
});
</script>
Guardan cambios y listo ahora van a la seccion de widget y lo activan.
En su theme crean una carpeta de nombre "images" y guardan la siguiente imagen con nombre "no_image" es por si no tienen la miniatura se mostrara esa imagen.
Importante: si no tienen habilitada alguna de las siguientes funciones agregan el codigo en el functions.php de su theme
1.- En caso de no tener la opción de widgets habilitada agregan:
PHP:
register_sidebar(array(
'name' => 'Sidebar_Box_1',
'before_widget' => '<div class="box_s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
2.- Al igual si no tienen habilitada la función para thumbnails agregan:
PHP:
add_theme_support( 'post-thumbnails' );
3.- Por ultimo abren el archivo sibebar.php y ponen donde quieran que se visualize:
PHP:
if ( !function_exists('Sidebar_Box_1') || !dynamic_sidebar('Sidebar_Box_1') ) : endif;
Eso fue todo hasta el proximo tutorial