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.

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

🟢Editar código de un módulo en Dolibarr [04]

🟢Editar código de un módulo en Dolibarr [04]

En este tutorial vamos editar el código de nuestro módulo personas para poder personalizar algunas…

2 meses hace
🟢Crear un sub_módulo en Dolibarr [03]

🟢Crear un sub_módulo en Dolibarr [03]

En este tutorial vamos a crear un sub módulo llamado seguridad que será muy parecido…

2 meses hace
🟢Modificar un módulo en Dolibarr [02]

🟢Modificar un módulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
🟢Constructor de módulos en Dolibarr

🟢Constructor de módulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una política clara:…

2 meses hace
🟢Tickets en Dolibarr [19]

🟢Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
🟢Agenda en Dolibarr [18]

🟢Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace