1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial [Wordpress] Cómo mostrar entradas o post relacionados en nuestra plantilla

Tema en 'Themes' comenzado por gyrutech, 10 de Enero de 2015.

  1. gyrutech

    gyrutech Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    99
    Me gusta recibidos:
    55
    Puntos de trofeos:
    18
    Género:
    Hombre
    [​IMG]
    Hola amigos, en está ocasión les enseñaré COMO MOSTRAR POST RELACIONADOS CON IMAGEN DESTACADA EN NUESTRA PLANTILLA.

    1. Primero y principal debemos editar el archivo el cual es single.php
    2. Antes de cerrar nuestro loop de wordpress ingresaremos el siguiente código, posiblemente sea mejor después de cerrar el contenedor del articulo.
    3. PHP:
      <div class="relacionadas">
         
                    <?php

                      $orig_post = $post;
                       global $post;
                      $categories = get_the_category($post->ID);
                      if ($categories) {
                          $category_ids = array();
                          foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
                     
                          $args=array(
                            'category__in' => $category_ids,
                            'post__not_in' => array($post->ID),
                            'posts_per_page'=> 4, // número de post a mostrar
                            'caller_get_posts'=>1
                          );
                     
                      $my_query = new wp_query( $args );
                         if( $my_query->have_posts() ) {
                          echo '<div id="related_posts"><h3>Post Relacionados</h3><ul>';
                          while( $my_query->have_posts() ) {
                         $my_query->the_post();?>
                     
                      <li><div class="thumb-relaciones"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
                      <div>
                       <h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                       <div> <?php the_excerpt(); ?></div>
                      </div>
                      </li>
                      <?
                       }
                       echo '</ul></div>';
                       }
                      }
                      $post = $orig_post;
                       wp_reset_query(); ?>

                </div>
    4. Ya después de esto simplemente quedaría darle un poco de css a nuestros pos relacionados, y es muy fácil. Aquí el código css basico :)
    5. Código (Text):
      /*==RELATED POST===*/

      #related_posts {
          width: 100%;
          background-color:fffffa;
          border-bottom: 1px solid #ccc;
          float: left;
          display: block;
         
      }

      #related_posts > h3{
          display: block;
          font-family: 'OpenSans', sans-serif;
          font-size: 1.3em;
          color: #1abc9c;
          margin: .5em 0 .5em 0;

      }



      #related_posts ul {list-style: none;}

      #related_posts ul li {
          width: 30%;
          float: left;
          margin: 0 2.5em 2.5em 0;
          background-color: #ffffff;
          max-height: 310px;
          border-bottom: solid 1px #ccc;
         
      }

      #related_posts ul li h3 > a {
          color: #2d2d2d;
          font-family: 'OpenSans', sans-serif;
          font-size: .9em;
      }

      #related_posts ul li p {
          font-size: .7em;
          font-family: 'OpenSans', sans-serif;
          color: #363636;
          text-align: justify;
          line-height: 1.5em;
      }

      .thumb-relaciones img {
          width: 100%;
          height: 100px;
          margin-bottom: .5em;
          -webkit-transition: all .5s linear;
          -moz-transition: all .5s linear;
          -o-transition: all .5s linear;
          transition: all .5s linear;
      }


      .thumb-relaciones img:hover {
          opacity: .8;
      }

    Bueno espero les haya servido éste pequeño tuto, muchas gracias por tu visita.
     
    A Cheitto, The Boy, ilovewd y 1 persona más les gusta esto.
  2. Cheitto

    Cheitto Miembro

    Se incorporó:
    10 de Febrero de 2015
    Mensajes:
    58
    Me gusta recibidos:
    13
    Puntos de trofeos:
    8
    Género:
    Hombre

Comparte esta página