crear un theme para wordpress paso a paso author

Hoy vamos ya con la octava entrega de nuestro tutorial sobre la creación de un Theme para WordPress paso a paso desde cero, esta entrega la dedicaremos a la pagina principal del autor, cada autor de nuestro sitio web tiene una pagina personal donde se muestra un listado de los artículos que ha redactado, pues hoy crearemos dicha pagina para que nuestro autores tengan su propio espacio.

El tema de hoy será más corto de lo normal ya que aprovecharemos mucho código del que ya tenemos creado para no tener que crear código nuevo sin necesidad, añadiremos algunos estilos a nuestra hoja de estilos y crearemos un archivo nuevo.

Para ello nos ponemos en materia, lo primero que hacemos es como siempre abrir nuestro ID de programación favorito y crear un nuevo archivo PHP, le daremos el nombre de author.php y lo guardaremos en la raíz de nuestro Theme, una vez lo tenemos creado lo que debemos hacer es copiar y pegar el siguiente código en su interior.




<?php
get_header
();
    echo 
'<section class="container secindex">';
        echo 
'<article class="artindex">';
            echo 
'<div class="archive-box">';
                echo 
'<span>Todos los artículos de</span>';
                
the_author();
            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 nuestra pagina de autor tiene casi el mismo código que nuestra pagina index.php, eso es así por que estamos reciclando las clases y las funciones para no tener un sin fin de código en nuestro Theme que creemos innecesario realmente, reutilizando el código conseguimos que nuestro Theme sea más ligero y más simple de entender a la hora de realizar cambios posteriores.

A pesar de que casi todo el código es igual si que hemos añadido un nuevo article al principio donde utilizamos la función the_author, esta función es nativa de WordPress y lo que hace es llamar al nombre del autor en cuestión, el article lo colocamos fuera del loop por que solo queremos que se muestre al principio de la pagina, si lo pusiéramos dentro del loop se repetiría antes de cada artículo y quedaría bastante mal.

Y este sería nuestro archivo author.php, de momento todo se ve perfecto a excepción del nuevo article que hemos creado, así que vamos a añadir un poco de código a nuestra hoja de estilos para solucionarlo, para ello abrimos nuestro archivo style.css y justo al final de todo el código copiamos y pegamos el siguiente.




<style>
.archive-box {
    padding:0 0 20px 0;
    font-size: 28px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-family: "Oswald",sans-serif;
    color:#000;
    width:100%;
    text-align:center;
}
.archive-box span {
    font-size: 11px;
    font-style: italic;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 4px;
    display: inline-block;
    font-family: "Open Sans",sans-serif;
    width:100%;
    text-align:center;
}
</style>

En primer lugar le damos estilos a todo el texto del article llamando a su clase principal, le damos un tamaño de fuente y un padding abajo, un margen entre letras y lo convertimos en mayúsculas, también le damos un fuente de Google Fonts, un color y lo centramos en la pagina dándole un ancho del cien por cien.

Ahora pasamos a darle estilos al span que el texto que quedará arriba, primero le damos un tamaño de fuente y lo ponemos en cursiva, le damos un margen entre letras, un color y margen abajo, lo alineamos en la misma linea y le damos una fuente de Google Fonts, le damos un ancho del cien por cien y para finalizar lo centramos en el bloque.

Si hemos seguido bien los pasos de esta entrega del tutorial sobre crear un Theme para WordPress paso a paso desde cero ahora tendremos nuestra pagina de autor creada, para verla simplemente pinchamos en el nombre del autor que aparece en el index después del botón “leer más” o al final de cada artículo, veremos un listado completo de los artículos de nuestro autor, si creamos más autores en nuestro WordPress y le asignamos algunos artículos veremos que automáticamente se le crea una pagina personal con el listado de sus artículos.

Para poder ir viendo los nuevos cambios en el contenido creado hemos hecho un nuevo XML con nuevo contenido, este contiene nuevos artículos, comentarios, etiquetas y categorías, podéis descargarlo a continuación.

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.

21 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: :-? :?: :!: