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

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:

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 :)
 

Kenny Johnson

Mi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Desde
17 Sep 2011
Mensajes
3.420
me gustaria uno asi pero para Blogger
 

Carlos Arreola

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
12.390
Gracias por el aporte :)
 
Arriba