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

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

fercba

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
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.

pecQxuj.jpg



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:

JyuQMj5.png
 
Última edición:
Muy bueno ya cada quien personaliza a gusto :encouragement:
 
[MENTION=46522]fercba[/MENTION] hola, muy interesante lo que publicas, justo ando buscando eso en este post http://forobeta.com/wordpress/348475-modificar-look-and-feel-widget-wordpress.html#post2806933, ahora al leer tu codigo no vi donde personalizar las dimensiones de las imagenes en caso de que quiera responsive y quiera trabajar con imagenes largas como en ese post puse.

ojala me ayudes porque me urge

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"
 
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

Atrás
Arriba