Crear un theme para wordpress paso a paso single

Bueno llevamos un par de días sin seguir el tutorial sobre la creación de un Theme para WordPress paso a paso desde cero pero aquí estamos de vuelta otra vez, hoy le dedicaremos el artículo al archivo single.php, este archivo es el que controla y gestiona cada pagina de artículo individual, por lo que es sumamente importante en nuestro Theme.

Para el desarrollo de este nuevo bloque añadiremos nuevas funciones al archivo functions.php, crearemos algunos archivos nuevos y añadiremos más código a nuestra hoja de estilos, así mismo hoy también añadiremos algunos comentarios a nuestra web para ver que tal funciona la función que creamos con anterioridad sobre los artículos más comentados.

Sin más dilaciones comenzamos y nos metemos en materia, lo primero que haremos será abrir nuestro ID de programación favorito y crear un nuevo archivo PHP, a este le daremos el nombre de comments.php y lo guardaremos en la raíz de nuestro Theme, luego volvemos a crear un nuevo archivo PHP y le damos el nombre de single.php, igualmente lo guardamos en la raíz de nuestro Theme.

El archivo comments.php será el que gestione el formulario y el listado de los comentarios que nos dejen en nuestra web, para que el archivo funcione correctamente le añadiremos algo de código, así que copiaremos y pegaremos el siguiente código.




<?php
if ( post_password_required() ) {
    return;
}
echo 
'<div id="comments" class="comments-area container">';
    if ( 
have_comments() ) :
        echo 
'<ol class="comment-list">';
                
wp_list_comments( array(
                    
'style'       => 'ol',
                    
'short_ping'  => true,
                    
'avatar_size' => 56,
                ) );
        echo 
'</ol>';
    endif;
       if ( ! 
comments_open() && get_comments_number() && post_type_supportsget_post_type(), 'comments' ) ) :
        echo 
'<p class="no-comments">Comments are closed</p>';
    endif;
    
comment_form();
echo 
'</div>';
?>

Lo primero que hace es preguntar si hemos configurado los comentarios con contraseña, seguidamente crea el contenedor principal de los comentarios y un condicional que pregunta si hay comentarios, de haberlos crea una lista ordenada y los muestra, luego añade un nuevo condicional donde pregunta si los comentarios están cerrados, de estarlo imprimirá un mensaje diciendo que lo están, y por último hace la llamada al formulario nativo de WordPress para los comentarios.

Ahora pasaremos al archivo single.php, este archivo tiene bastante más código y nos llevara un rato más explicar el mismo, de manera que vamos a ello, lo que hacemos es lo mismo de siempre, copiamos y pegamos el siguiente código dentro del archivo.




<?php
get_header
();
    if (
have_posts()) : while (have_posts()) : the_post();
    echo 
'<section class="container secindex">';
        echo 
'<article class="artindex">';
            echo 
'<div class="imgindex">'.get_the_post_thumbnail().'</div>';
            echo 
'<div class="indexcont">';
                
the_category();
                echo 
'<div class="titindex"><h1>'.get_the_title().'</h1></div>';
                echo 
'<div class="excindex">'.get_the_content().'</div>';
                echo 
'<div class="foindex">';
                    echo 
'<p class="derindex">'.get_the_date().' per <a href="'.get_author_posts_url(get_the_author_meta('ID')).'">'.get_the_author().'</a></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 
'<div class="author">';
                
$imgart of_get_option('imgart_fs','');
                
$nombre of_get_option('nombre_fs','');
                
$descripcion of_get_option('descripcion_fs','');
                if(
$imgart){
                    echo 
'<div class="imgart"><img src="'.$imgart.'" /></div>';
                }
                if(
$nombre){
                    echo 
'<div class="nomart">'.$nombre.'</div>';
                }
                if(
$descripcion){
                    echo 
'<div class="desart">'.$descripcion.'</div>';
                }
                
$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="autsocial">';
                    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 
'</article>';
        
get_sidebar();
        echo 
'<article class="olderpost">';
            echo 
'<span class="prev">'.get_previous_post_link().'</span>';
            echo 
'<span class="next">'.get_next_post_link().'</span>';
        echo 
'</article>';
        echo 
'<article class="related">';
            echo 
'<h3>ARTÍCULOS RELACIONADOS</h3>';
            
$related get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'numberposts' => 3'post__not_in' => array($post->ID) ) );
            if( 
$related ) foreach( $related as $post ) {
                
setup_postdata($post);
                echo 
'<ul>'
                    echo 
'<li>';
                        echo 
'<a class="reltitle" href="'.get_the_permalink().'">'.get_the_post_thumbnail().'</a>';
                        echo 
'<a class="reltitle" href="'.get_the_permalink().'">'.get_the_title().'</a>';
                        echo 
'<p>'.get_the_date().'</p>';
                    echo 
'</li>';
                echo 
'</ul>';   
            }
            
wp_reset_postdata();
        echo 
'</article>';
        echo 
'<article class="container-comments">';
            
comments_template();
        echo 
'</article>';
    echo 
'</section>';
    endwhile; endif;
get_footer();
?>

Como siempre lo primero que hacemos es llamar al header, seguidamente abrimos el famoso loop de WordPress, las primeras lineas de código os sonarán mucho ya que hemos aprovechado las mismas clases que teníamos en el index.php, esto lo hacemos para evitar crear código nuevo sin necesidad de hacerlo, llegamos a la linea donde llamamos a get_the_content, esta es la llamada nativa de WordPress para imprimir el contenido principal de nuestro artículo, recordar que en el index.php utilizamos un extracto.

Al igual que en el index.php creamos el footer del single.php donde mostramos la linea del autor y la fecha así como los enlaces a redes sociales.

Ahora pasamos a un bloque nuevo, este es el bloque del autor donde mostramos su imagen, la descripción y sus redes sociales, para ello creamos las variables y hacemos las llamadas correspondientes al panel de control, para las redes sociales creamos condicionales para ver si existen, de no existir no mostrará nada evidentemente.

Lo que tenemos que hacer ahora es añadir nuestro sidebar o aside, para ellos como en el index.php utilizamos la llamada nativa de WordPress.

De nuevo creamos un nuevo bloque para nosotros, esta vez creamos un nuevo article dentro del section donde hacemos uso de las llamadas nativas de WordPress para el artículo anterior y posterior, de esta manera mostraremos el enlace correspondiente igual que en el Theme original que estamos clonando<./p>

Otro nuevo article dentro del section, esta vez lo creamos para mostrar los artículos relacionados por categoría, para ello creamos una llamada a las categorías del artículos, le decimos que deseamos mostrar solo tres artículos relacionados y que no incluya el artículo en vigor.

Creamos un condicional y un bucle para que recorra todos los artículos, dentro del bucle le decimos que imprima la imagen destacada, el título y la fecha de creación de cada artículo, así de simple es mostrar los artículos relacionados por categoría, de momento se ve todo horrible, tranquilos ya llegaremos al CSS.

Y para finalizar con nuestro single.php hacemos uso de la llamada nativa de WordPress para el archivo comments.php, con esta llamada conseguimos imprimir en nuestro single.php los comentarios y el formulario de comentarios anteriormente creados.

Ahora vamos a nuestro archivo functions.php, en este debemos corregir una función que ya tenemos para añadirle algo de código y crearemos una nueva, la función a la que le añadiremos código es la que muestra los artículos más comentados en el sidebar, para ello abrimos el functions.php y copiamos y pegamos el siguiente código.




<?php
//mostrar los artículos más comentados
function entradas_mas_comentadas($no_posts 20$before '<li>'$after '</li>'$show_pass_post false$duration='') {
    global 
$wpdb;
    
$request "SELECT ID, post_title, COUNT($wpdb->comments.comment_post_ID) AS 'comment_count' FROM $wpdb->posts$wpdb->comments";
    
$request .= " WHERE comment_approved = '1' AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = 'publish'";
    if(!
$show_pass_post$request .= " AND post_password =''";
    if(
$duration !="") {
        
$request .= " AND DATE_SUB(CURDATE(),INTERVAL ".$duration." DAY) < post_date ";
    }
    
$request .= " GROUP BY $wpdb->comments.comment_post_ID ORDER BY comment_count DESC LIMIT $no_posts";
    
$posts $wpdb->get_results($request);
    
$output '';
    if (
$posts) {
        foreach (
$posts as $post) {
            
$post_title stripslashes($post->post_title);
            
$comment_count $post->comment_count;
            
$permalink get_permalink($post->ID);
            
$thumbnail get_the_post_thumbnail_url($post->ID);
            
$output .= $before '<span class="container-link"><span class="img-link"><img src="'.$thumbnail.'" /></span><a href="'.$permalink.'"><span class="removed_link" title="' $permalink '">' $post_title.' ('$comment_count ')</span></a></span>';
        }
    } else {
        
$output .= $before "No hay nada" $after;
    }
    echo 
$output;
}

//elimino el campo website del formulario de comentarios
function dcms_disable_url_comment($fields) { 
    unset(
$fields['url']);
    return 
$fields;
}
add_filter('comment_form_default_fields','dcms_disable_url_comment');
?>

Como vemos en la primera función lo que estamos modificando es únicamente la linea que imprime el resultado final, lo que añadimos es la imagen destacada del artículo que antes no existía, y en la segunda función lo que hacemos es eliminar el campo para introducir la web del formulario de contacto, esta opción no es obligatoria pero nosotros preferimos añadirla para evitar el spam.

Y ahora sí, es el momento de darle algo de estilo a todo el código que acabamos de añadir para que todo se vea perfecto, es la hora de abrir el archivo style.css para añadir más lineas a nuestra hoja de estilos, para ello copiamos y pegamos el siguiente código al final del que ya tenemos.




<style>
.author{
    display:block;
    overflow:hidden;
    border-top:2px solid #F5F5F5;
    border-bottom:2px solid #F5F5F5;
    padding:30px 0 30px 0;
    margin-bottom:40px;
}
.author .imgart img{
    float:left;
    width:125px;
    height:125px;
    border-radius:50%;
    margin:0 20px 0 20px;
}
.author .nomart{
    font-family: "Oswald",sans-serif;
    font-size:14px;
    color:#000;
    text-transform:uppercase;
    margin:0 0 10px 0;
}
.author .desart{
    font-family: "Crimson Text",serif;
    font-size:16px;
    color:#000;
}
.author .autsocial{
    margin-top:10px;
}
.author .autsocial li{
    display:inline;
}
.author .autsocial li a{
    color:#C2C2C2;
}
.author .autsocial li a:hover{
    color:#EF9D87;
}
.olderpost{
    display:block;
    overflow:hidden;
    width:70%;
    float:left;
    background-color:#fff;
    box-sizing:border-box;
    margin-bottom:40px;
    font-family: 'Open Sans', sans-serif;
}
.olderpost .prev{
    box-sizing:border-box;
    float:left;
    width:50%;
    padding:20px 20px 20px 20px;
    cursor: pointer;
}
.olderpost .next{
    box-sizing:border-box;
    float:right;
    width:50%;
    text-align:right;
    padding:20px 20px 20px 20px;
    cursor: pointer;
}
.olderpost span.prev,
.olderpost span.next{
    font-size: 10px;
    display: block;
    color: #aaa;
    letter-spacing: 1px;
    text-transform: uppercase;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}
.olderpost span.prev a,
.olderpost span.next a{
    color: #aaa;
    letter-spacing: 1px;
    text-transform: uppercase;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}
.olderpost .prev:hover,
.olderpost .next:hover{
    background-color:#EF9D87;
}
.olderpost .prev:hover a,
.olderpost .next:hover a{
    color:#fff;
}
@media (max-width: 800px){
    .olderpost{
        width:100%;
        float:none;
    }
}
.related{
    display:block;
    overflow:hidden;
    width:70%;
    float:left;
    background-color:#fff;
    box-sizing:border-box;
    padding:20px 20px 20px 20px;
    margin-bottom:40px;
}
.related h3{
    text-align:center;
    text-transform:uppercase;
    font-family: "Oswald",sans-serif;
    font-size:14px;
    color:#000;
    font-weight:normal;
    letter-spacing: 2px;
    margin-bottom:20px;
}
.related li{
    width:30%;
    float:left;
    margin-left: 3%;
}
.related li img{
    width:100%;
    height:150px;
}
.related .reltitle{
    font-family: "Oswald",sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
}
.related .reltitle:hover{
    text-decoration:underline;
}
.related p{
    font-size: 11px;
    font-style: italic;
    color: #999;
    font-family: 'Open Sans', sans-serif;
}
@media (max-width: 800px){
    .related{
        width:100%;
        float:none;
    }
}
.container-comments{
    width:70%;
    float:left;
    background-color:#fff;
    box-sizing:border-box;
    padding:20px 20px 20px 20px;
    margin-bottom:40px;
}
.container-comments h3{
    display:none;
}
.container-comments .comment-body{
    padding-bottom:50px;
    padding-top: 50px;
    border-bottom: 1px dotted #eee;
}
.vcard img{
    border-radius:50%;
    margin-right:30px;
    float:left;
}
.container-comments .says{
    display:none;
}
.container-comments .fn{
    display:block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
    color: #000;
    font-family: "Oswald",sans-serif;
}
.container-comments .commentmetadata a{
    font-size: 11px;
    color: #999;
    font-style: italic;
    display: block;
    margin-bottom: 10px;
    font-family: 'Open Sans', sans-serif;
}
.container-comments p{
    font-family: "Crimson Text",serif;
    color: #161616;
    font-size: 16px;
    line-height: 24px;
}
.container-comments .reply a{
    float: right;
    font-size: 10px;
    background-color: #ccc;
    color: #FFF;
    padding: 3px 6px 5px 6px;
    border-radius: 2px;
    margin-left: 7px;
    font-family: 'Lato', sans-serif;
}
.container-comments .reply a:hover{
    opacity:0.5;
}
.comment-respond{
    width:70%;
    display:block;
    overflow:hidden;
}
#respond h3,
.comment-form-comment label,
.comment-form-cookies-consent,
.comment-notes{
    display:none !important;
}
#respond label {
    color: #888;
    width: 80px;
    font-size: 14px;
    display: inline-block;
    font-weight: 300;
    font-family: "Crimson Text",serif;
    float:left;
}
#respond textarea {
    padding: 14px;
    border: 1px solid #DDD;
    border-radius: 3px;
    width: 95%;
    height: 120px;
    font-size: 13px;
    color: #777;
    margin-bottom: 14px;
    line-height: 20px;
}
#respond input {
    padding: 8px 10px;
    border: 1px solid #DDD;
    margin-right: 10px;
    border-radius: 3px;
    color: #999;
    margin-bottom: 15px;
    font-size: 11px;
    width: 250px;
}
#respond #submit {
    font-family: "Open Sans",sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #eee;
    border-radius: 0;
    font-size: 11px;
    color: #666;
    padding: 12px 19px 14px;
    margin-top: 20px;
    display: block;
    border: none;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
    cursor: pointer;
    border-radius: 30px;
    width: auto;
}
#respond #submit:hover{
    background-color:#3C3C3C;
    color:#fff;
}
@media (max-width: 800px){
    .container-comments{
        width:100%;
        float:none;
    }
}
.container-link{
    width:100%;
    display:block;
    overflow:hidden;
    margin-bottom:15px;
}
.img-link{
    width:25%;
    float:left;
}
.removed_link{
    width: 70%;
    float:right;
}
</style>

Empezamos dando estilos al bloque del autor, en este caso flotamos la imagen a la izquierda y le damos un ancho y un alto definidos así como un redondeado del cincuenta por ciento.

Le damos estilo al nombre del autor con un tipo de fuente de Google Fonts que transformamos en mayúsculas, así mismo le damos estilo a la descripción dando una fuente de Google Fonts también, y por último le damos estilos a la lista desordenada de los iconos sociales.

Pasamos a los enlaces de artículo anterior y posterior, a estos les damos un ancho del setenta por cien y los flotamos a la izquierda, a cada uno de los enlaces le damos un ancho del cincuenta por ciento para que ocupe la mitad del contenido y los flotamos a derecha e izquierda, a continuación le damos los estilos a los bloques enteros de cada enlace y a los enlaces en sí, finalizamos dando un efecto al hover y diciendo que si la pantalla es igual o menos a ochocientos el ancho sea del cien por cien.

Ahora le toca el turno a los artículos relacionados, estos ocupan igualmente un ancho del setenta por cien y los flotamos a la izquierda, le damos una fuente y transformamos en mayúsculas el H3 o título del bloque, le damos a cada item del listado desordenado un ancho del treinta por ciento y los flotamos a la izquierda, a las imágenes le decimos que ocupen el cien por cien y un alto definido, damos estilos al título del artículo así como un efecto hover y acabamos dando un estilo a la fecha del artículo, igual que el bloque de los enlaces le decimos que si pantalla es igual o inferior a ochocientos píxeles ocupes el cien por cien.

Ahora le toca el turno al bloque de comentarios, como hemos hecho antes le damos un ancho del setenta por cien y lo flotamos a la izquierda, eliminamos el H3 o título del formulario de comentarios, le damos estilos a la imagen o avatar de cada comentario, escondemos la frase “dice” ya que no nos gusta como queda, le damos estilos al nombre del autor del comentario y al enlace del autor si procede, pasamos a los estilos del comentario y del botón “responder”.

Pasamos a darle estilos a los nombres o label que aparecen al lado de cada campo del formulario, ahora le damos estilos al campo donde añadimos el comentario en sí, damos estilos a los dos campos del formulario, el campo del nombre y del email, ahora le damos estilos al botón del formulario así como un efecto hover, y finalizamos diciendo que si la pantalla es igual o inferior a ochocientos ocupe el ancho del cien por cien.

Para finalizar con la hoja de estilos pasamos a darle forma a nuestro widget de artículos más comentados, creamos la clase para el contenedor que ocupa el cien por cien, a la imagen le damos un ancho del veinticinco por cien y la flotamos a la izquierda y por último al texto le damos un ancho del setenta por cien y lo flotamos a la derecha.

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.

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