Tutorial creación de un Theme para WordPress Index

En esta entrega del tutorial sobre la creación de un Theme para WordPress paso a paso vamos a empezar a darle forma a nuestro sitio de una vez, hasta ahora solo hemos trabajado en el Header y en nuestro panel de control personalizado, hoy vamos a crear nuestro Index, la pagina inicial de nuestro Theme, para ello crearemos un par de nuevas funciones, añadiremos código a la hoja de estilos y por supuesto añadiremos código a nuestro index.php.

Para poder tener algo visible en nuestro Theme hemos creado un contenido dummy para que lo podáis subir a vuestro sitio en un XML que es compatible con el importador nativo de WordPress, para ello tendréis que descargar el archivo que os dejamos debajo de este párrafo, luego entrar en el admin de WordPress e ir a la ruta “herramientas/importar”, justo al final de todo tenéis el importador de WordPress, lo instaláis y lo ponéis en marcha para subir el archivo descargado, debéis elegir la opción de pasar todo al admin de vuestro sitio y marcar la opción de subir también las imágenes, ahora podréis comprobar que tenéis diez entradas con categorías, etiquetas y una imagen destacada.

Ahora pasemos a la acción, con nuestro ID de programación favorito abrimos nuestro archivo index.php que creamos en la primera lección del tutorial, ahora solo tenemos dos lineas de código, vamos a añadir unas cuantas más, para ello copiáis y pegáis el siguiente código.




<?php
get_header
();
    echo 
'<section class="container secindex">';
        
query_posts(array(
            
'post_type' => 'post',
            
'order' => 'desc',
            
'posts_per_page' => 4,
            
'paged' => $paged,
        ));
        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>';
        endwhile; 
fs_paginate(); wp_reset_query(); endif;
    echo 
'</section>';
get_footer();
?>

En primer lugar abrimos un section para que nuestro marcado HTML5 quede bien, después creamos una query en la que le pasamos los siguientes parámetros: El tipo de post, en este caso listaremos los post o artículos de nuestro WordPress, el orden de listado, le hemos dado descendiente para que los ordene por fecha de creación del más nuevo al más viejo, le decimos que nos liste cuatro por pagina y por último le pasamos la variable del paginador

El siguiente paso es crear el famoso loop de WordPress, como veis no es tan difícil como lo pintan, solo es una linea de código, una vez dentro del loop empezamos a crear nuestro contenido, lo primero es abrir un article como recipiente de cada artículo, después creamos un div y dentro la llamada al thumbnail que no es más que la imagen destacada de cada artículo.

Creamos otro div nuevo donde meteremos el contenido de texto principal de nuestros artículos, hacemos la llamada para listar las categorías, a continuación utilizamos the_permalink que nos imprime el enlace del artículo y the_title que nos imprime el título del mismo, justo después llamamos a the_excerpt que nos imprime un extracto del contenido principal del artículo y a continuación creamos otro enlace con the_permalink y un texto de leer más.

Ahora creamos otro div que representa el footer de nuestro artículo donde pondremos los datos del autor y los enlaces a redes sociales, para ello utilizamos the_date que nos imprime la fecha de publicación, get_author_posts_url(get_the_author_meta(‘ID’)) que nos imprime la url del autor para crear el enlace, get_the_author para mostrar el nombre del mismo y get_comments_number para mostrar el número de comentarios del artículo.

Justo a continuación hacemos lo mismo que hicimos en el Header para mostrar los iconos sociales, declaramos las cuatro variables y creamos los cuatro condicionales para que solo muestre los iconos sociales si estos existen, de no existir nada en el panel de control no mostraría nada, ahora cerramos todos los divs abierto al igual que nuestro article.

Como podéis ver a continuación cerramos el loop de la siguiente manera endwhile; fs_paginate(); wp_reset_query(); endif;, primero cerramos el bucle, luego llamamos a la función del paginador, tranquilos ahora la crearemos, luego cerramos la query y por último cerramos el condicional del loop, a continuación cerramos el section, y con esto ya tendríamos todo el código necesario para nuestro index.php, si ahora entráis a vuestro WordPress y vais a la pagina de inicio podréis ver unas entradas mal configuradas por la falta de CSS, al final os dará un error de código, es normal por que todavía no hemos declarado la función del paginador.




<?php
//paginador
function fs_paginate($the_query NULL){
    global 
$wp_query;
    
$the_query = (!isset($the_query)) ? $wp_query $the_query;
    
$big 999999999;
    
$pagination paginate_links( array(
        
'base' => str_replace$big'%#%'get_pagenum_link$big ) ),
        
'format' => '?paged=%#%',
        
'current' => max1get_query_var('paged') ),
        
'total' => $the_query->max_num_pages,
        
'prev_text'    => __'Anterior''florence' ),
        
'next_text'    => __'Siguiente''florence' )
    ) );
    if(
$the_query->max_num_pages 1) echo '<div class="pagination">'.$pagination.'</div>';
}

//cambiamos longitud excerpt
function longitud_excerpt($length) {
    return 
150;
}
add_filter('excerpt_length''longitud_excerpt');
?>

Como podéis ver creamos dos funciones nuevas, con la primera conseguimos imprimir un paginador mejorado, es decir, mejor que el paginador que tiene el Theme original que estamos clonando, ya que nuestro paginador será numérico y no solo textual, así podremos ver la cantidad de paginas que tenemos en nuestra web, y la segunda función que es mas sencilla con la que conseguimos modificar la longitud del extracto nativo de WordPress a ciento cincuenta palabras, si queréis podéis mostrar más o menos palabras, eso ya va a vuestro gusto.

Ahora si vamos de nuevo a la pagina inicial de nuestra web y refrescamos la pagina veremos que ya no tiene errores PHP y que al final de todo nos muestra el paginador, lógicamente muy feo todavía ya que no le hemos dado nada de estilos.

Y ahora sí, ha llegado el momento de darle algo de color a nuestra pagina de inicio, es el momento de darle estilos a todo el código que hemos añadido hoy, para hacer esto con nuestro ID de programación favorito abrimos el archivo style.css, vamos hasta el final de todo el código que ya tenemos y copiamos y añadimos el siguiente.




<style>
.artindex{
    display:block;
    overflow:hidden;
    width:70%;
    float:left;
    background-color: #fff;
    margin-bottom:40px;
}
.artindex .imgindex img{
    width:100%;
    height:auto;
}
.artindex .indexcont{
    box-sizing: border-box;
    padding:30px 30px 30px 30px;
}
@media (max-width: 800px){
    .artindex{
        width:100%;
        float:none;
    }
}
.indexcont .excindex p{
    font-family: "Crimson Text",serif;
    color: #161616;
    font-size: 16px;
    line-height: 24px;
    margin-bottom:20px;
}
.indexcont .excindex p a{
    color:#EF9D87;
}
.indexcont .excindex p a:hover{
    color:#000;
}
.post-categories{
    width:100%;
    text-align:center;
}
.post-categories li{
    display:inline;
    margin-right:20px;
}
.post-categories li a{
    color:#EF9FA2;
    text-transform:uppercase;
    font-size:11px;
    font-family: 'Open Sans', sans-serif;
}
.post-categories li a:hover{
    text-decoration:underline;
}
.titindex{
    width:100%;
    text-align:center;
    font-family: 'Oswald', sans-serif;
    font-size:24px;
    color:#000;
    text-transform:uppercase;
    margin:30px 0 30px 0;
}
.titindex a:hover{
    color:#000;
    opacity:0.5;
}
.excindex{
    font-family: 'Crimson Text', serif;
    width:100%;
    color:#000;
}
.indexcont .excindex p{
    font-family: "Crimson Text",serif;
    color: #161616;
    font-size: 16px;
    line-height: 24px;
    margin-bottom:20px;
}
.indexcont .excindex p a{
    color:#EF9D87;
}
.indexcont .excindex p a:hover{
    color:#000;
}
.moreindex{
    width:100%;
    text-align:center;
    font-family: 'Open Sans', sans-serif;
    font-size:11px;
    margin:50px 0 50px 0;
    text-transform:uppercase;
}
.moreindex a{
    color:#EF9D87;
    border:1px solid #EF9D87;
    padding:10px 20px 10px 20px;
}
.moreindex a:hover{
    background-color: #EF9D87;
    color:#fff;
}
.foindex{
    display:block;
    overflow:hidden;
    width:100%;
    padding:20px 0 20px 0;
}
.foindex a{
    color: #EF9D87;
}
.derindex{
    color:#ADADB9;
    font-family: 'Crimson Text', serif;
    font-size:15px;
    float:left;
}
.izindex{
    font-size:15px;
    float:right;
}
.izindex a{
    color:#EF9D87;
    border:1px solid #EF9D87;
    border-radius:50%;
    padding:3px 0 3px 0;
    margin: 0 10px 0 0;
    font-size:12px;
}
.izindex a:hover{
    background-color: #EF9D87;
    color:#fff;
}
.izindex li{
    display:inline;
}
.pagination{
    display:block;
    overflow:hidden;
    width:100%;
    margin-bottom:30px;
    padding:20px 0 20px 0;
}
.pagination .page-numbers{
    color:#EF9D87;
    border:1px solid #EF9D87;
    padding:3px 10px 3px 10px;
}
.pagination .current,
.pagination .page-numbers:hover{
    background-color: #EF9D87;
    color:#fff;
}
</style>

Empezamos con la clase de nuestro section, para el solo le damos un ancho del cien por cien para que ocupe toda la pantalla, seguimos con las clases del article, como veis le damos un ancho del setenta por ciento y lo flotamos a la izquierda, esto lo hacemos por que mañana crearemos un sidebar con un ancho del veinticinco por ciento y lo flotaremos a la derecha, de esta manera tendremos el cien por cien del section ocupado.

Ahora le damos un ancho del cien por cien a nuestra imagen destacada y pasamos a darle un padding de treinta píxeles al div que contendrá el contenido principal de nuestro article, pasamos a darle estilo al extracto, utilizamos una de las fuentes de Google Fonts que se cargaron en el Header, le damos un color al texto un tamaña y una separación al ínter lineado, seguidamente le damos un color rojizo a los enlaces y un efecto de cambio de color al pasar el ratón por encima.

Ahora vamos con el listado de categorías, primero le damos un ancho del cien por cien y las centramos en el article, como el listado es una lista desordenada le decimos que lo muestre inline o en linea y le damos un margen abajo, le damos color y otra fuente diferente a los enlaces, los transformamos en mayúsculas y le damos un efecto de cambio de color al pasar el ratón por encima.

Ahora le daremos estilos al extracto de nuestro artículo, en primer lugar le damos un fuente de Google Fonts, un color y un ancho del cien por cien, a la etiqueta P le damos un tamaño, un margen al ínter lineado y un color de fuente, y por último damos color a los enlaces y le añadimos un efecto hover.

Ahora transformaremos el texto de “leer más” en un botón, para ello le damos un ancho del cien por cien, una fuente de Google Fonts, un tamaño en píxeles y un margen arriba y abajo, al enlace le daremos un color, le pondremos un borde del mismo color que el texto y le daremos un padding para dar margen interno entre el texto y el borde que acabamos de crear, y por último en el efecto hover cambiamos el color del texto y también el color de fondo para darle un efecto llamativo.

Pasamos al Footer de nuestro article, le damos un ancho del cien por cien y un padding arriba y abajo y le añadimos color a los enlaces.

Al apartado del autor le damos color, una fuente de Google Fonts, un color y lo flotamos todo a la izquierda del article para dejar espacio para los iconos sociales.

Ahora vamos con los iconos, primero todo el bloque lo flotamos a la derecha, luego le damos color al enlace, le añadimos un borde y un padding para dejar espacio entre el icono y el border, le damos un border-radius que lo que hace es que el borde se redondee, añadimos un efecto hover donde cambiamos el color del icono y el color de fondo y le decimos que el listado desordenado lo imprima en linea.

Y por último nos quedan los estilos del paginador, en primer lugar le damos un ancho del cien por cien, un margen solo abajo y un padding arriba y abajo, luego a los enlaces numéricos les damos un color, añadimos un borde y le damos un padding para dejar espacio entre el número y el border, y por último le damos clase al item que esté activo en cada momento y al efecto hover de los números.

Y con esto ya tendríamos gran parte de nuestro index.php acabado, mañana seguiremos con el sidebar que ocupara la parte derecha de la pantalla, si habéis seguido bien el tutorial ahora todo tendría que estar igual que nuestra pagina de muestra que está en Tutorial, ya sabéis que si tenéis dudas podéis dejar aquí vuestros comentarios o en Twitter a mi cuenta @ricardfs.

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