Tutorial: Agregar widget artículos mas vistos a sidebar sin plugin

  • 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
Hola betas les traigo un tutorial para que puedan agregar un widget en su sidebar con los articulos mas vistos.

Empezemos primero abren su functions.php de su theme actual y pegan lo siguiente en la ultima linea:

PHP:
/*
	Post mas visitados sin plugin para Forobeta :)
	Autor: Fercba 
 */
function sitePlus(){
		global $post;

	if(is_single()){

		$count_key = 'view_post';

	    $count = get_post_meta($post->ID, $count_key, true);

	    if(empty($count)){

	      delete_post_meta($post->ID, $count_key);
	      add_post_meta($post->ID, $count_key,  1);

	    }else{
	       $count++;
	       update_post_meta($post->ID, $count_key, $count);

	    }   
	}
}




class WidgetPopularPost extends WP_Widget
{
    function WidgetPopularPost()
    {
      parent::WP_Widget(false, $name = 'Lo mas visto'); 
    }

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

        $title = apply_filters('widget_title', $instance['title']);
       

        $arg1   = array(  'posts_per_page' => ($instance['posts_page']) ? $instance['posts_page'] : 7,
                          'meta_key' => 'view_post', 
                          'orderby' => 'meta_value_num', 
                          'order' => 'DESC');
        $query = new WP_Query($arg1);

		echo '
		<style type="text/css">
		.content{ clear: both;}
		.PostSidebar{ padding: 10px;}
		.PostSidebar .img{ padding: }
		.PostSidebar img { width: 100%; max-width: 100%; margin-bottom: 10px;}
		.PostSidebar h4{ margin: 0; padding: 0 }
		.PostSidebar h4 a{font:normal 600 15px Arial;  }
		</style>
		';
        echo $before_widget;
            if ($title):
                echo $before_title . $title . $after_title;
              ?><div class="content"><?php
              if($query->have_posts()):
                 while($query->have_posts()){ $query->the_post();
                 ?><div class="PostSidebar" >
                      <div class="img">
                        <?php
                          if(has_post_thumbnail()):
                                the_post_thumbnail(); 
                          else:
                             ?><img alt="sin imagen" src="<?php bloginfo('template_url'); ?>/images/no_image.jpg"><?php  
                          endif;?>
                      </div>
                      <div class="desc">
                        <h4><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h4>
                      </div>
                    </div><?php

                 }
              endif;  
              ?></div><?php
        echo $after_widget;
    }

    function update($new_instance, $old_instance) 
    {        
        $instance = $old_instance;
        $instance['title']      = strip_tags($new_instance['title']);
        $instance['posts_page'] = (int) $new_instance['posts_page'];

        return $instance;
    }

    function form($instance)
    {       
      $title    = esc_attr($instance['title']);
  
      $posts_page = esc_attr($instance['posts_page']);
        ?>
            <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>
            
             <p>
               <label for="<?php echo $this->get_field_id('posts_page'); ?>">Post a mostrar</label><br>
               <select name="<?php echo $this->get_field_name('posts_page'); ?>" 
                id="<?php echo $this->get_field_id('posts_page'); ?>">
                <?php $categoria = get_categories();
                  for ($i = 1; $i<= 10;$i++) {
                    $select = (!empty($posts_page) and $posts_page == $i) ? ' selected="selected" ' : '';
                   echo '<option value="'.$i.'" '.$select.'>'.$i . '</option>'; 
                  }
                ?>
              </select>
            </p>
        <?php 
    }
}

function WidgetPP() {
       register_widget('WidgetPopularPost');
}

add_action('wp_footer','sitePlus');
add_action('widgets_init', "WidgetPP");


Guardan cambios y listo ahora van a la seccion de widget y le colocan el titulo que desean y los post a mostrar, por ultimo lo colocan donde quieran.

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 mismo archivo que editamos anteriormente

1.- En caso de no tener la opción de widgets habilitada agregan:

PHP:
register_sidebar(array(
 'name' => 'Sidebar alt',
 '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 miniaturas agregan:

PHP:
 add_theme_support( 'post-thumbnails' );


3.- Abren el archivo sibebar.php y ponen donde quieran que se visualize:

PHP:
  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar alt') ) : endif;


Resultado final :encouragement:

 
Última edición:
Muy bueno ya cada quien personaliza a gusto :encouragement:
 

Hola tiene agregados en los estilos para que la imagen sea del ancho del bloque que lo contiene asi no sobresalga, pero si queres modificarlo mas
mira esta linea:

PHP:
<?php
echo '
        <style type="text/css">
        .content{ clear: both;}
        .PostSidebar{ padding: 10px;}
        .PostSidebar .img{ padding:  }
        .PostSidebar img { width: 100%; max-width: 100%; margin-bottom: 10px;}
        .PostSidebar h4{ margin: 0; padding: 0 }
        .PostSidebar h4 a{font:normal 600 15px Arial;  }
        </style>
        ';

?>


Esos son los estilos, podes modificarlos como te mensione anteriormente.

Saludos
 
Última edición:
Movido a tutoriales de WordPress, se agradece el aporte 🙂
 
No sirve este tutorial el codigo esta mal, Apenas se da guardar marca error y se queda en blanco la web...
 
El código no funciona, ¿pueder revisarlo [MENTION=46522]fercba[/MENTION]?
 
Probare para ver que tal
 
para los que le da el error, yo lo he soluciona asi,

hay que cambiar esta linea
PHP:
  if ($title):
                echo $before_title . $title . $after_title;

por esta


PHP:
 if (!empty($title)){
                echo $before_title . $title . $after_title;}

Los post no se muestran inmediatamente, segun vallan entrando en la pagina, se ira actualizando el contador de visitas, y se iran mostrando los post. podeis engañar esas estadisticas, y poner un post que os convenga, modificando el valor en el campo personalizado "view_post"
 

Gracias amigo
 
Gracias 🙁
 
¿Alguien puede echar una mano?

He puesto el código tal cual y me aparece el "widget del código", he mirado las funciones y me vienen en mi functions.php, cree la carpeta images y subí esa imagen.

No se si será en esta parte, yo quiero que vaya en la barra lateral, que debería de poner en esa parte del código?

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar alt') ) : endif;

Gracias
 
Más tarde lo pruebo, te dejó un me gusta :encouragement:.
 

Temas similares