crear un theme para wordpress paso a paso category y tag

Bien, si habéis seguido el tutorial sobre la creación de un Theme para WordPress paso a paso desde código cero desde un principio ya tendréis un Theme casi funcional, hasta ahora hemos llegado a crear hasta la pagina de nuestros autores y hoy le toca la hora a la pagina de las categorías.

Esta pagina también es fundamental en cualquier Theme ya que muestra un listado completo de los artículos incluidos en cada categoría, y como en nuestro Theme, al igual que en el Theme original que estamos clonando, mostramos y enlazamos el nombre de cada categoría en cada artículo pues dicha pagina debe existir ya que es indispensable.

Pues bien, entremos en materia, lo primero que debemos hacer es abrir nuestro ID de programación favorito y crear un nuevo archivo PHP, a este archivo le daremos el nombre de category.php y lo guardaremos en la raíz de nuestro Theme, justo donde tenemos guardados el resto de archivos.

Veremos que el artículo de hoy será bastante corto por qué habrá pocos cambios y por lo tanto poco código a explicar, para darle forma a nuestro archivo category.php lo que haremos será copiar y pegar dentro de él el siguiente código.




<?php
get_header
();
    echo 
'<section class="container secindex">';
        echo 
'<article class="artindex">';
            echo 
'<div class="archive-box">';
                echo 
'<span>Estas en la categoría</span>';
                
single_cat_title();
            echo 
'</div>';
        echo 
'</article>';
        if (
have_posts()) : while (have_posts()) : the_post();
            echo 
'<article class="artindex">';
                echo 
'<div class="imgindex">'.get_the_post_thumbnail().'</div>';
                echo 
'<div class="indexcont">';
                    
the_category();
                    echo 
'<div class="titindex"><a href="'.get_the_permalink().'">'.get_the_title().'</a></div>';
                    echo 
'<div class="excindex">'.get_the_excerpt().'</div>';
                    echo 
'<div class="moreindex"><a href="'.get_the_permalink().'">Leer más</a></div>';
                    echo 
'<div class="foindex">';
                        echo 
'<p class="derindex">'.get_the_date().' por <a href="'.get_author_posts_url(get_the_author_meta('ID')).'">'.get_the_author().'</a> con '.get_comments_number().' comentarios</p>';
                        
$twitter of_get_option('twitter_fs','');
                        
$facebook of_get_option('facebook_fs','');
                        
$instagram of_get_option('instagram_fs','');
                        
$pinterest of_get_option('pinterest_fs','');
                        echo 
'<ul class="izindex">';
                            if (
$facebook){
                                echo 
'<li><a href="'.$facebook.'" target="_blank" rel="noopener noreferrer"><i class="icon-facebook"></i></a></li>';
                            }
                            if (
$twitter){
                                echo 
'<li><a href="'.$twitter.'" target="_blank" rel="noopener noreferrer"><i class="icon-twitter"></i></a></li>';
                            }
                            if (
$instagram){
                                echo 
'<li><a href="'.$instagram.'" target="_blank" rel="noopener noreferrer"><i class="icon-instagram"></i></a></li>';
                            }
                            if (
$pinterest){
                                echo 
'<li><a href="'.$pinterest.'" target="_blank" rel="noopener noreferrer"><i class="icon-pinterest-circled"></i></a></li>';
                            }
                        echo 
'</ul>';
                    echo 
'</div>';
                echo 
'</div>';
            echo 
'</article>';
            
get_sidebar();
        endwhile; 
fs_paginate(); wp_reset_query(); endif;
    echo 
'</section>';
get_footer();
?>

Como podemos ver el código nos recuerda mucho al del artículo de ayer en el que trabajamos sobre la pagina del autor, y es así, en realidad hemos creado la pagina de las categorías reciclando el mismo código que en el author.php e index.php, lo hacemos así para no malgastar tiempo y recursos en código nuevo que no hace falta en absoluto, utilizamos las mismas clases e ids, así como la misma jerarquía HTML5.

Lo único que hemos cambiado es la llamada nativa de WordPress, ayer utilizábamos la llamada al nombre del autor y hoy utilizamos single_cat_title, esta nueva llamada también nativa de WordPress es la que se encarga de llamar a las categorías del artículo en cuestión, de esta manera conseguimos listar todas las categorías con las que el artículo está relacionado.

Y como el artículo de hoy nos ha sabido a poco lo alargaremos un poquito añadiendo la sección de la creación de la pagina para las etiquetas, de esta manera conseguimos eliminar un artículo del tutorial y hacemos este un poco más largo.

Para crear nuestra pagina de etiquetas abrimos nuestro ID de programación favorito y crearemos un nuevo archivo PHP al que llamaremos tag.php, igual que con anterior lo guardaremos en la raíz de nuestro Theme.

Y es tan sencillo como seguir con el siguiente paso, ahora copiamos y pegamos dentro de nuestro archivo tag.php el siguiente código.




<?php
get_header
();
    echo 
'<section class="container secindex">';
        echo 
'<article class="artindex">';
            echo 
'<div class="archive-box">';
                echo 
'<span>Estás en la etiqueta</span>';
                
single_tag_title();
            echo 
'</div>';
        echo 
'</article>';
        if (
have_posts()) : while (have_posts()) : the_post();
            echo 
'<article class="artindex">';
                echo 
'<div class="imgindex">'.get_the_post_thumbnail().'</div>';
                echo 
'<div class="indexcont">';
                    
the_category();
                    echo 
'<div class="titindex"><a href="'.get_the_permalink().'">'.get_the_title().'</a></div>';
                    echo 
'<div class="excindex">'.get_the_excerpt().'</div>';
                    echo 
'<div class="moreindex"><a href="'.get_the_permalink().'">Leer más</a></div>';
                    echo 
'<div class="foindex">';
                        echo 
'<p class="derindex">'.get_the_date().' por <a href="'.get_author_posts_url(get_the_author_meta('ID')).'">'.get_the_author().'</a> con '.get_comments_number().' comentarios</p>';
                        
$twitter of_get_option('twitter_fs','');
                        
$facebook of_get_option('facebook_fs','');
                        
$instagram of_get_option('instagram_fs','');
                        
$pinterest of_get_option('pinterest_fs','');
                        echo 
'<ul class="izindex">';
                            if (
$facebook){
                                echo 
'<li><a href="'.$facebook.'" target="_blank" rel="noopener noreferrer"><i class="icon-facebook"></i></a></li>';
                            }
                            if (
$twitter){
                                echo 
'<li><a href="'.$twitter.'" target="_blank" rel="noopener noreferrer"><i class="icon-twitter"></i></a></li>';
                            }
                            if (
$instagram){
                                echo 
'<li><a href="'.$instagram.'" target="_blank" rel="noopener noreferrer"><i class="icon-instagram"></i></a></li>';
                            }
                            if (
$pinterest){
                                echo 
'<li><a href="'.$pinterest.'" target="_blank" rel="noopener noreferrer"><i class="icon-pinterest-circled"></i></a></li>';
                            }
                        echo 
'</ul>';
                    echo 
'</div>';
                echo 
'</div>';
            echo 
'</article>';
            
get_sidebar();
        endwhile; 
fs_paginate(); wp_reset_query(); endif;
    echo 
'</section>';
get_footer();
?>

Como podéis ver de nuevo reciclamos todas las clases e ids así como la jerarquía HTML5 que hemos utilizado en el archivo anterior, lo único que cambia ahora es la llamada a las etiquetas, en este caso utilizamos single_tag_title, esta es una nueva llamada nativa de WordPress que realiza lo mismo que la anterior pero en este caso destinada a los tags o etiquetas, así nos mostrará un listado de todos los artículos relacionados con la etiqueta en cuestión.

Y por hoy es todo, como siempre recordaros que podéis ver el Theme original que estamos clonado aquí, los cambios que hacemos cada día en el tutorial aquí, y si tenéis alguna duda sobre el curso podéis dejar vuestros comentarios o por Twitter en @ricardfs.

266 Visitas

22 mayo, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: