Desarrollo del feed principal del Home

En esta sección se van a desplegar los posts en orden cronológico. Si existen widgets, también se puede desplegar una columna extra en el sector izquierdo.

<div class="row border-between mt-4 bottom-line">  
<?php
               
    if ( is_active_sidebar( 'left-sidebar-widget-area' ) ) : ?>
        <div class="col-md-4">
            <?php dynamic_sidebar( 'left-sidebar-widget-area' ); ?>
        </div>
            <div class="col-md-8">
        <?php
        else :?>
            <div class="col-md-12">
<?php endif; ?>

¿El área sidebar izquierda está activa? Es decir, ¿tiene algún widget? En caso afirmativo hay que reservar el espacio de una columna de 4. Sino, el feed ocupará todo el ancho.
Nota: Aunque también se implementa el sidebar en sidebar.php, el home es un caso especial, dado que el barra no ocupará la portada. Por eso, se implementa aparte en index.php.Siguiendo con el código en index.php:

<?php
    /* Start the Loop */
    while ( have_posts() ) :
        the_post();

        /*
         * Include the Post-Type-specific template for the content.
         * If you want to override this in a child theme, then include a file
         * called content-___.php (where ___ is the Post Type name) and that will be used instead.
         */
        get_template_part( 'template-parts/content', get_post_type() );
    endwhile;
?>

En este pasaje se realiza el loop principal de WordPress. El formato con que se va a desplegar cada post, se trae el template del archivo template-parts/content.php.

Código de template-parts/content.php:

<?php
$post_meta_small_in_main = get_post_meta($post->ID, '_small-in-main-post', true);

Lo primero que se observa es un llamado para obtener un dato de la tabla meta de posts. Esto es porque los artículos en el main feed del home se van a mostrar de dos formas posibles:

  • Una foto chica a la izquierda, y un extracto del texto.
  • Título y foto destacadas.

Para poder implementar los dos tipos de modelos, hay que hacer una implementación similar a la de featured posts. De hecho, al igual que en ese caso, hay que definir previamente una opción meta en el archivo functions.php:

<?php
function register_post_assets(){
    add_meta_box('featured-post', __('Featured Post'), 'add_featured_meta_box', 'post', 'advanced', 'high');
    add_meta_box('main-post', __('Main Featured Post (Only one at a Time)'), 'add_main_meta_box', 'post', 'advanced', 'high');
    /*Nuevo Codigo*/
    add_meta_box('small-in-main-post', __('Small in Main Post'), 'add_small_in_main_meta_box', 'post', 'advanced', 'high');
}
add_action('admin_init', 'register_post_assets', 1);

function add_small_in_main_meta_box($post){
    $small_in_main = get_post_meta($post->ID, '_small-in-main-post', true);
    echo "<label for='_small-in-main-post'>".__('Small in Main Post&nbsp;&nbsp;&nbsp;', 'foobar')."</label>";
    echo "<input type='checkbox' name='_small-in-main-post' id='small-in-main-post' value='1' ".($small_in_main == 1 ? 'checked': '')."  />";
}

function save_all_meta($post_id){
    /* Al codigo anterio del metodo save_all_meta hay que agregar esto: */
    if (isset($_REQUEST['_small-in-main-post']))
        update_post_meta(esc_attr($post_id), '_small-in-main-post', esc_attr($_REQUEST['_small-in-main-post']));
    else
        update_post_meta(esc_attr($post_id), '_small-in-main-post', esc_attr(0));
}
add_action('save_post', 'save_all_meta');

Esto crea una opción nueva en edición de posts.

Siguiendo la implementación del main feed en template-parts/content.php. Vamos a usar un tipo Card de Bootstrap en ambos casos así que conviene declararlo al principio. Luego, podemos abrir la implementación del tipo de post pequeño:

<div class="card border-0">
<?php
if ($post_meta_small_in_main)
{
    ?>
    <p class="card-category-author mb-0">
    <?php
        echo '<a href="/contact-page/">'.get_the_author_meta('user_firstname', $post->post_author)." ".get_the_author_meta('user_lastname', $post->post_author).'</a>';
    ?>
    </p>
    <div class="row bottom-line">
        <div class="col-md-2 mb-2">
            <div class="pic card border-0">
                <?php
                echo '<a href="'.get_permalink($post).'">';
                ?><img class="card-img-top img-fluid img-overlayed" src="<?php echo get_the_post_thumbnail_url(null, 'medium');?>">
                <div class="overlay"></div>
                </a>
            </div>
        </div>
        <div class="col-md-10">
            <p class="article-extract"><?php echo '<a href="'.get_permalink($post).'">'.get_the_excerpt($post).'</a>'; ?></p>
        </div>
    </div>
<?php
}

En el caso del post chico, estamos implementandole dentro del Card una nueva fila con dos columnas. Tener el Card nos facilita el comportamiento responsivo adecuado cuando la pantalla del dispositivo sea más chica.

En cambio para el artículo regular hay que usar una sola columna de ancho 100%:

<?php
else
{
    ?>
    <div class="row bottom-line mt-2">
    <div class="col-md-12">
       
    <?php
    the_title( '<h3 class="card-title card-title-text medium-card-title-text"><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' );
    ?>
    <p class="card-category-author">
        <?php
            echo '<a href="/contact-page/">'.get_the_author_meta('user_firstname', $post->post_author)." ".get_the_author_meta('user_lastname', $post->post_author).'</a>';
        ?>
    </p>
    <div class="pic card border-0">
        <?php
            echo '<a href="'.get_permalink($post).'">';
        ?><img class="card-img-top img-fluid img-overlayed" src="<?php echo get_the_post_thumbnail_url(null, 'large');?>">
            <div class="overlay"></div>
        </a>
    </div>
    <div class="card-block px-0">
        <p class="article-extract"><?php echo '<a href="'.get_permalink($post).'">'.get_the_excerpt($post).'</a>'; ?></p>
    </div>
    </div>
    </div>
<?php
}
Pag.: 1 2 3 4 5 6