De JPG a PHP. Creando un tema de WordPress parte 2

Ahora si se viene lo bueno, después de hacer las vistas en figma me puse a realizar el maquetado en HTML. Para esto utilice visual studio code, creo que muchos lo conocen, pero para los que no es un editor de texto con muchas funcionalidades para el desarrollo.

Para el tema de WordPress primero el cree el HTML, intente que fuera HTML semántico, trate de estructurarlo lo mejor posible, utilizando las etiquetas adecuadas, poniendo el contenido en secciones de manera tal que sea más fácil para San Google entenderlo.

Luego agregar el css, soy flojo asi que utilice Bootstrap. la ventaja de Bootstrap es que tiene un sistema de grilla y muchos componentes prefabricados lo cual simplifico parte del trabajo, el lado malo es que crear algo muy personalizado con esta herramienta es un gran problema. Me toco en algunos casos descomponer el estilo y recrear utilizando mi propio css pero con mis ajustes. Desgraciadamente esto toma tiempo y esfuerzo.

.comment-section li{
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: var(--bs-list-group-bg);
    border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
    margin: 0 2%
}

En este caso tuve que descomponer el código del selector, modificar lo que necesitaba y lo demás dejarlo tal y cual estaba.

Creando las plantillas de PHP.

Una vez que tuve los mock ups en html y css tendria la ardua tarea de convertirlo en las plantillas de PHP. Como saben las plantillas tienen header, footer, sidebars y un monton de otras cosas las cuales se deben crear. Lo bueno es que wordpress en su documentación tiene bastante informacion util.

El famoso «Loop» de wordpress sera tu principal aliado, el se encargara de toda la parte dificil, y lo genial es que es bastante personalizable, esto te permite pedirle lo que te de la gana y el traera (si necesidad de utilizar SQL aunque tambien puedes usarlo). Una vez creado el loop solo madas a pedir lo que necesitas, como wp_header() y wp_footer() y vas de viaje.

 <?php
            // get latest post info
            $lpargs = [
                'posts_per_page' => 10,
                'orderby' => 'date',
                'order' => 'DESC'
            ];
            $latest_post_query = new WP_Query($lpargs);
 ?>  
<?php if($latest_post_query->have_posts()){ ?>
            <div id="carouselLatestPosts" class="carousel slide">
                <div class="carousel-inner">
            <?php while($latest_post_query->have_posts()){ $latest_post_query->the_post();?>

                        <?php if($latest_post_query->current_post == 0):?>
                            <article class="carousel-item active">
                        <?php else:?>
                            <article class="carousel-item">
                        <?php endif ?>
                            <h3><?php the_title();?></h3>

                            <div class="post-content">
                                <?php the_excerpt();?>
                            </div>
                            <a class="see-more-link" href="<?php the_permalink() ;?>">See more...</a>
                        </article>       
                <?php } ?>
            <?php } ?>

En este caso el loop seleccionamos lo diez posts más recientes.

La caja de comentarios de WordPress.

Otra cosa super sweet es que la caja de comentarios te la da WordPress con una sola función, puedes modificarla si necesitas, pero con lo que te da es bastante útil. En mi caso solo tuve que ponerle unas etiquetas alrededor y el resto con estilos de css.

Acá se puede ver un ejemplo de cómo utilice la función que te otorga WordPress

<?php 
        $commentbox_args=[
            'class_container' => 'comment-form',
            'class_form' => '',
            'class_submit'=>'btn btn-outline-success',
            'label_submit' => 'Enviar',
            'comment_field' => '<div class="row my-3 justify-content-center">
            <textarea class="col-8" name="comment" id="" cols="4" rows="10" placeholder="Write comment!!!"></textarea>
            </div>',
            'comment_notes_after' => '<div class="row my-3 gx-5 justify-content-end pe-5">',
            'submit_field' => '<div class ="col-2">%1$s</div><div class ="col-2">%2$s</div></div>'
        ];
        comment_form($commentbox_args);

    $args = array(
        'status' => 'approve',
    );
    
    // The comment Query
    $comments_query = new WP_Comment_Query();
    $comments       = $comments_query->query( $args );
    
    // Comment Loop
    if ( $comments ) { ?>
        <section class="comment-section">
            <ul>
                <?php   wp_list_comments( [
                        'reverse_top_level' => true,
                        'style' => 'ul'
                    ], $comments);
                ?> 
            </ul>
        </section>

    <?php
    } else {
        echo 'No comments found.';
    }

;?>

Lo otro fue crear un sistema de puntuación para los diversos posts que se van a crear, pero eso será para la siguiente entrega. Si te interesa la primera parte de mi anécdota creando un tema de WordPress puedes leerla aquí.