07.- Crear una Plantilla en WordPress [categorias y single.php]
INTRODUCCIÓN
En este tutorial vamos a aprender a hacer dinámico nuestro portafolio y el área del blog, en otras palabras vamos a poder modificar esas áreas desde el administrado de wordpress.
PROCEDIMIENTOS
Para lograr esto debemos entrar al administrador de wordpress y hacer los siguientes pasos:
1.- Creamos las 2 categorias: Portafolio y Blog
2.- Creamos 6 entradas para el portafolio y 2 para el blog.
3.- En index.php sustituimos
<div class="col-4 col-6-medium col-12-small"> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic02.jpg" alt="" /></a> <header> <h3>Ipsum feugiat et dolor</h3> </header> <p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p> <footer> <ul class="actions"> <li><a href="#" class="button alt">Find out more</a></li> </ul> </footer> </section> </div> <div class="col-4 col-6-medium col-12-small"> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic03.jpg" alt="" /></a> <header> <h3>Sed etiam lorem nulla</h3> </header> <p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p> <footer> <ul class="actions"> <li><a href="#" class="button alt">Find out more</a></li> </ul> </footer> </section> </div> <div class="col-4 col-6-medium col-12-small"> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic04.jpg" alt="" /></a> <header> <h3>Consequat et tempus</h3> </header> <p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p> <footer> <ul class="actions"> <li><a href="#" class="button alt">Find out more</a></li> </ul> </footer> </section> </div> <div class="col-4 col-6-medium col-12-small"> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic05.jpg" alt="" /></a> <header> <h3>Blandit sed adipiscing</h3> </header> <p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p> <footer> <ul class="actions"> <li><a href="#" class="button alt">Find out more</a></li> </ul> </footer> </section> </div> <div class="col-4 col-6-medium col-12-small"> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic06.jpg" alt="" /></a> <header> <h3>Etiam nisl consequat</h3> </header> <p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p> <footer> <ul class="actions"> <li><a href="#" class="button alt">Find out more</a></li> </ul> </footer> </section> </div> <div class="col-4 col-6-medium col-12-small"> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic07.jpg" alt="" /></a> <header> <h3>Dolore nisl feugiat</h3> </header> <p>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</p> <footer> <ul class="actions"> <li><a href="#" class="button alt">Find out more</a></li> </ul> </footer> </section> </div>
por
<?php query_posts(array( "showposts" => 6, "cat" => 5 )); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="col-4 col-6-medium col-12-small"> <!-- post --> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic02.jpg" alt="" /></a> <header> <h3><?php the_title(); ?></h3> </header> <p><?php the_excerpt(); ?></p> <footer> <a href="<?php the_permalink(); ?>" class="button alt">Leer Más</a> </footer> </section> </div> <?php endwhile; ?> <!-- post navigation --> <?php else: ?> <!-- no posts found --> <p>Ups!! no existe nada para esta categoria</p> <?php endif; ?> <?php wp_reset_query(); ?>
4.- Creamos el archivo single.php y le pegamos todo el contenido de page.php
5.- En index.php sustituimos
<div class="col-6 col-12-small"> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic08.jpg" alt="" /></a> <header> <h3>Magna tempus consequat</h3> <p>Posted 45 minutes ago</p> </header> <p>Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p> <footer> <ul class="actions"> <li><a href="#" class="button icon fa-file-text">Continue Reading</a></li> <li><a href="#" class="button alt icon fa-comment">33 comments</a></li> </ul> </footer> </section> </div> <div class="col-6 col-12-small"> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic09.jpg" alt="" /></a> <header> <h3>Aptent veroeros aliquam</h3> <p>Posted 45 minutes ago</p> </header> <p>Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p> <footer> <ul class="actions"> <li><a href="#" class="button icon fa-file-text">Continue Reading</a></li> <li><a href="#" class="button alt icon fa-comment">33 comments</a></li> </ul> </footer> </section> </div>
por
<?php query_posts(array( "showposts" => 4, "cat" => 5 )); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="col-6 col-12-small"> <section class="box"> <a href="#" class="image featured"><img src="<?php echo get_template_directory_uri(); ?>/images/pic08.jpg" alt="" /></a> <header> <h3><?php the_title(); ?></h3> </header> <?php the_excerpt(); ?> <footer> <ul class="actions"> <li><a href="<?php the_permalink(); ?>" class="button icon fa-file-text">Leer Más</a></li> <li><a href="#" class="button alt icon fa-comment">33 Comentarios</a></li> </ul> </footer> </section> </div> <?php endwhile; ?> <!-- post navigation --> <?php else: ?> <!-- no posts found --> <p>Ups!! no existe nada para esta categoria</p> <?php endif; ?> <?php wp_reset_query(); ?>
En el siguiente tutorial agregaremos imagenes al area del portafolio y el blog.
