Tutorial: Tutorial de Widget Tabs con últimos comentarios y más comentados

  • Autor Autor fercba
  • Fecha de inicio Fecha de inicio
F

fercba

VIP
Épsilon
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
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:

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.

pecQxuj.jpg



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 🙂
 
me gustaria uno asi pero para Blogger
 
Muy bien explicado y útil, muchas gracias 🙂
 
Gracias por el aporte 🙂
 
Atrás
Arriba