M谩s

    C贸mo mostrar sus publicaciones de WordPress en un dise帽o de cuadr铆cula

    - Advertisement -

    驴Quieres mostrar las publicaciones de WordPress en un dise帽o de cuadr铆cula?

    Un dise帽o de cuadr铆cula le brinda m谩s flexibilidad al mostrar sus publicaciones en WordPress. Esto puede ser 煤til al crear p谩ginas personalizadas.

    En este art铆culo, le mostraremos c贸mo mostrar f谩cilmente sus publicaciones de WordPress en un dise帽o de cuadr铆cula en cualquier lugar de su sitio.

    驴Cu谩ndo necesita un dise帽o de cuadr铆cula para WordPress?

    Todos los temas de WordPress admiten el dise帽o vertical tradicional de las publicaciones de blog, y esto funciona bien para la mayor铆a de los tipos de sitios web. Sin embargo, este dise帽o puede ocupar mucho espacio, especialmente si tiene muchas publicaciones.

    Si est谩 creando una p谩gina de inicio personalizada para su sitio, es posible que desee utilizar el dise帽o de cuadr铆cula para mostrar sus publicaciones recientes.

    Esto le dar谩 m谩s espacio para agregar otros elementos a su p谩gina de inicio.

    Adem谩s, su cuadr铆cula de publicaci贸n resaltar谩 sus im谩genes destacadas, por lo que es visualmente atractivo y se puede hacer clic en 茅l. Tambi茅n puede usar la cuadr铆cula de publicaciones para mostrar su cartera creativa y otros tipos de contenido personalizado.

    Muchos temas de revistas y temas de fotograf铆a ya utilizan el dise帽o basado en cuadr铆culas para mostrar las publicaciones. Sin embargo, si su tema no es compatible con esta funcionalidad, deber谩 agregarlo.

    Dicho esto, le mostraremos c贸mo mostrar sus publicaciones de WordPress en un dise帽o de cuadr铆cula. Simplemente use los enlaces r谩pidos a continuaci贸n para saltar directamente al m茅todo que desea usar.

    M茅todo 1. Cree un dise帽o de cuadr铆cula de publicaci贸n de WordPress con Block Editor

    Este m茅todo le permite simplemente mostrar sus publicaciones y miniaturas en un dise帽o de cuadr铆cula de publicaci贸n utilizando el editor de bloques de WordPress. Hay un bloque de cuadr铆cula posterior incorporado que le permite crear su propia cuadr铆cula.

    Para hacer esto, abra la p谩gina que desea editar, luego haga clic en el bot贸n Agregar bloque ‘M谩s’ y busque ‘Bucle de consulta’, luego haga clic en el bloque para agregarlo.

    Agregar bloque de bucle de consulta

    Este bloque agrega su bucle de publicaci贸n a su p谩gina.

    Luego, haga clic en la opci贸n ‘Comenzar en blanco’ en la parte superior del bloque para crear una cuadr铆cula de publicaciones.

    Haga clic en iniciar opci贸n en blanco

    Esto brinda algunas opciones diferentes seg煤n el tipo de informaci贸n que desea mostrar con su cuadr铆cula de publicaci贸n.

    Seleccionaremos la opci贸n ‘Imagen, fecha y t铆tulo’, pero puedes elegir lo que quieras.

    Seleccione el tipo de bucle de consulta

    Despu茅s de eso, pase el cursor sobre la imagen y seleccione la opci贸n ‘Vista de cuadr铆cula’.

    Esto convierte su lista en una cuadr铆cula de publicaciones.

    Haga clic en la opci贸n de vista de cuadr铆cula

    A continuaci贸n, puede personalizar la informaci贸n que desea mostrar.

    Primero, vamos a eliminar la paginaci贸n en la parte inferior del bloque. Para hacer esto, simplemente haga clic en 茅l y haga clic en el men煤 de opciones ‘Tres puntos’.

    Luego, haga clic en ‘Eliminar paginaci贸n’.

    Haga clic en eliminar paginaci贸n

    Esto eliminar谩 autom谩ticamente el elemento del bloque.

    Puede eliminar las fechas de las publicaciones de la misma manera o dejar m谩s informaci贸n de la publicaci贸n para sus visitantes.

    A continuaci贸n, agregaremos enlaces tanto a la miniatura de la publicaci贸n como al t铆tulo de la publicaci贸n.

    Simplemente haga clic en la miniatura de su publicaci贸n y active la opci贸n ‘Enlace a publicaci贸n’ en el panel de opciones de la derecha.

    Activar enlace para alternar publicaci贸n

    Luego, haz lo mismo con el t铆tulo de tu publicaci贸n.

    Una vez que haya terminado, haga clic en el bot贸n ‘Actualizar’ o ‘Publicar’ para que su cuadr铆cula de publicaci贸n est茅 activa.

    Ahora, puede visitar su sitio web de WordPress para ver su nueva cuadr铆cula de publicaciones de WordPress.

    Ejemplo de cuadr铆cula de publicaciones del editor de bloques

    Puede agregar este bloque a cualquier p谩gina o publicaci贸n. Si desea usar esto como su p谩gina de archivo de blog, puede ver nuestra gu铆a sobre c贸mo crear una p谩gina separada para publicaciones de blog en WordPress.

    M茅todo 2. Cree un dise帽o de cuadr铆cula de publicaci贸n de WordPress con el complemento de cuadr铆cula de publicaci贸n

    Este m茅todo ofrece una forma sencilla de agregar una cuadr铆cula de publicaci贸n personalizable que puede agregar en cualquier lugar de su sitio web.

    Lo primero que debe hacer es instalar y activar el Publicar cuadr铆cula enchufar. Para obtener m谩s detalles, consulte nuestra gu铆a sobre c贸mo instalar un complemento de WordPress.

    Tras la activaci贸n, debe visitar Publicar cuadr铆cula 禄 Agregar nuevo para crear su primera cuadr铆cula de publicaci贸n.

    Luego, dale un t铆tulo a tu cuadr铆cula de publicaciones. Esto no aparecer谩 en ninguna parte de su p谩gina, es solo para ayudarlo a recordar.

    El complemento Post Grid crea un nuevo dise帽o

    Debajo de esto, encontrar谩 la configuraci贸n de la cuadr铆cula de publicaciones dividida en diferentes secciones con m煤ltiples pesta帽as.

    Primero, debe hacer clic en la pesta帽a ‘Consultar publicaci贸n’. Aqu铆 es donde definir谩 los tipos de publicaci贸n que desea mostrar en el cuadro ‘Tipos de publicaci贸n’.

    De forma predeterminada, solo mostrar谩 publicaciones, pero puede agregar p谩ginas e incluso tipos de publicaciones personalizadas.

    Establecer la configuraci贸n del tipo de consulta posterior

    Despu茅s de eso, debe hacer clic en la pesta帽a ‘Dise帽os’.

    Luego, haga clic en el bot贸n ‘Crear dise帽o’. Esto se abrir谩 en una nueva ventana.

    Haga clic en el bot贸n Crear dise帽o

    Necesitas nombrar tu dise帽o. Luego, haga clic en la opci贸n ‘General’ y se abrir谩 una lista de etiquetas.

    Estas etiquetas son la informaci贸n que se mostrar谩 en su cuadr铆cula de publicaci贸n.

    Pantalla del editor de dise帽o

    Seleccionaremos la opci贸n ‘Miniatura con enlace’ y la opci贸n ‘Publicar t铆tulo con enlace’.

    Luego, haga clic en ‘Publicar’ o ‘Actualizar’ para guardar su dise帽o.

    Elija etiquetas y guarde el dise帽o

    Ahora, regrese al editor de cuadr铆cula de publicaci贸n original en la pesta帽a anterior, y habr谩 una nueva opci贸n de dise帽o disponible que puede seleccionar.

    Simplemente haga clic en el nuevo dise帽o en la secci贸n ‘Dise帽os de elementos’ en la parte inferior de la pantalla.

    Haga clic en nuevo dise帽o de elemento

    A continuaci贸n, haga clic en la pesta帽a ‘Estilo de elemento’. Aqu铆 puede establecer el tama帽o de su cuadr铆cula.

    La configuraci贸n predeterminada deber铆a funcionar para la mayor铆a de los sitios, pero si no, puede cambiarla aqu铆.

    Cambiar el tama帽o del estilo del elemento

    Una vez que haya terminado, haga clic en el bot贸n ‘Publicar’ en la parte superior de la p谩gina y su cuadr铆cula estar谩 lista para agregarse a su blog de WordPress.

    Ahora, debe hacer clic en la pesta帽a ‘C贸digo corto’ y luego copiar el c贸digo corto en el cuadro ‘C贸digo corto de cuadr铆cula posterior’.

    Copiar el c贸digo abreviado de la cuadr铆cula de publicaci贸n

    Despu茅s de eso, abra la p谩gina donde desea mostrar su lista de publicaciones y haga clic en el bot贸n Agregar bloque ‘M谩s’.

    Luego, busque ‘C贸digo corto’ y seleccione el bloque ‘C贸digo corto’.

    Agregar bloque de c贸digo abreviado

    A continuaci贸n, pegue el c贸digo abreviado que copi贸 anteriormente en el cuadro.

    Luego, haga clic en el bot贸n ‘Actualizar’ o ‘Publicar’.

    Pegar shortcode y guardar

    Ahora, puede ver su p谩gina para ver el dise帽o de la cuadr铆cula de publicaciones de WordPress en vivo.

    Ejemplo del complemento Post GridM茅todo 3. Cree un dise帽o de cuadr铆cula de publicaci贸n de WordPress con el complemento SeedProd Page Builder

    Otra forma de crear un dise帽o de cuadr铆cula posterior es usar el Producto de semilla Complemento del creador de p谩ginas. Es el mejor generador de p谩ginas de WordPress de arrastrar y soltar en el mercado utilizado por m谩s de 1 mill贸n de sitios web.

    Producto de semilla

    SeedProd lo ayuda a crear f谩cilmente p谩ginas personalizadas e incluso temas de WordPress completamente personalizados sin escribir ning煤n c贸digo. Puede usar el complemento para crear cualquier tipo de p谩gina que desee, como p谩ginas 404, pr贸ximamente p谩ginas, p谩ginas de destino y m谩s.

    Para obtener m谩s informaci贸n, consulte nuestra gu铆a sobre c贸mo crear una p谩gina personalizada en WordPress.

    En el generador de SeedProd, mientras personaliza su p谩gina, simplemente haga clic en el bot贸n 芦Agregar secci贸n禄 en cualquier parte de la p谩gina.

    Haga clic para agregar una nueva secci贸n

    Esto abrir谩 una opci贸n para agregar un nuevo bloque.

    A continuaci贸n, arrastre el bloque ‘Publicaciones’ a su p谩gina y autom谩ticamente agregar谩 una lista de publicaciones a su p谩gina.

    Arrastre sobre el bloque de publicaci贸n de blog

    Ahora, puede personalizar este bloque con el panel de opciones de la izquierda.

    Primero, despl谩cese hacia abajo hasta la secci贸n ‘Dise帽o’. Aqu铆 puede establecer el n煤mero de columnas para la cuadr铆cula de su publicaci贸n de blog y activar las opciones ‘Mostrar imagen destacada’ y ‘Mostrar t铆tulo’.

    Establecer n煤mero de columnas, t铆tulo e imagen

    A continuaci贸n, despl谩cese hacia abajo hasta el bot贸n ‘Mostrar extracto’ y ‘Mostrar leer m谩s’ y desact铆velos para crear un dise帽o de cuadr铆cula de publicaci贸n de blog simple.

    Desactivar leer m谩s y alternar extractos

    Si desea personalizar el esquema de color, el texto y m谩s, haga clic en la pesta帽a 芦Avanzado禄 en la parte superior de la columna de la izquierda.

    Luego, haga clic en el men煤 desplegable ‘Texto’ y realice sus cambios.

    Personalizar el texto de la cuadr铆cula de publicaciones

    Puede continuar personalizando su p谩gina y el dise帽o de la cuadr铆cula de publicaciones de blog tanto como desee.

    Una vez que haya terminado, haga clic en el bot贸n ‘Guardar’ y seleccione el men煤 desplegable ‘Publicar’ en la parte superior de la p谩gina para hacer sus cambios en vivo.

    Ahora, puede ver su nueva cuadr铆cula de publicaciones en su sitio web.

    Ejemplo de cuadr铆cula de publicaci贸n de SeedProdM茅todo 4. Cree un dise帽o de cuadr铆cula de publicaci贸n de WordPress agregando c贸digo a WordPress

    Este m茅todo requiere una comprensi贸n b谩sica de c贸mo agregar c贸digo a WordPress. Si no lo ha hecho antes, consulte nuestra gu铆a sobre c贸mo copiar y pegar c贸digo en WordPress.

    Antes de agregar c贸digo, debe crear un nuevo tama帽o de imagen que usar谩 para su cuadr铆cula de publicaci贸n. Para obtener m谩s informaci贸n, consulte nuestra gu铆a sobre c贸mo crear tama帽os de imagen adicionales en WordPress.

    A continuaci贸n, deber谩 encontrar el archivo de tema de WordPress correcto donde agregar谩 el fragmento de c贸digo. Por ejemplo, puede agregarlo a su single.php, para que aparezca en la parte inferior de todas sus publicaciones.

    Tambi茅n puede crear una plantilla de p谩gina personalizada y usarla para mostrar el dise帽o de cuadr铆cula de su publicaci贸n de blog con miniaturas.

    Para obtener m谩s informaci贸n, consulte nuestra hoja de trucos de la jerarqu铆a de plantillas de WordPress para ayudar a encontrar el archivo de plantilla de tema correcto.

    Una vez que haya hecho eso, puede comenzar a agregar c贸digo a WordPress. Dado que el fragmento de c贸digo es bastante largo, lo desglosaremos secci贸n por secci贸n.

    Primero, agregue el siguiente fragmento de c贸digo a su archivo de plantilla de tema.

    <?php
    $counter = 1; //start counter
     
    $grids = 2; //Grids per row
     
    global $query_string; //Need this to make pagination work
     
    /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
    query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
     
    if(have_posts()) :  while(have_posts()) :  the_post();
    ?>
    

    Este fragmento de c贸digo configura la consulta de post loop. Puede cambiar la variable ‘posts_per_page’ para mostrar m谩s publicaciones por p谩gina si lo desea.

    Luego, agregue el siguiente fragmento de c贸digo a su archivo de plantilla de tema.

    <?php
    //Show the left hand side column
    if($counter == 1) :
    ?>
                <div class="griditemleft">
                    <div class="postimage">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                    </div>
                    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                </div>
    <?php
    //Show the right hand side column
    elseif($counter == $grids) :
    ?>
    <div class="griditemright">
                    <div class="postimage">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                    </div>
                    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                </div>
    <div class="clear"></div>
    <?php
    $counter = 0;
    endif;
    ?>
    

    Este fragmento de c贸digo crea dos columnas para nuestras publicaciones y mostrar谩 el t铆tulo y la imagen de la publicaci贸n. Tambi茅n crea una clase CSS a la que le mostraremos c贸mo aplicar estilo m谩s adelante.

    Tambi茅n hace referencia a ‘postimage’, por lo que deber谩 cambiarlo por el nombre del tama帽o de imagen que cre贸 anteriormente.

    Despu茅s de eso, agregue el siguiente fragmento de c贸digo al final.

    <?php
    $counter++;
    endwhile;
    //Post Navigation code goes here
    endif;
    ?>
    

    Este fragmento de c贸digo simplemente cierra el ciclo. Tambi茅n ofrece la opci贸n de agregar navegaci贸n posterior, pero la mayor铆a de los propietarios de sitios web usan un complemento diferente para esto, por lo que no lo incluimos para evitar conflictos de c贸digo.

    As铆 es como se ve el fragmento de c贸digo final en conjunto.

    <div id="gridcontainer">
    <?php
    $counter = 1; //start counter
     
    $grids = 2; //Grids per row
     
    global $query_string; //Need this to make pagination work
     
     
    /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
    query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
     
     
    if(have_posts()) :  while(have_posts()) :  the_post(); 
    ?>
    <?php
    //Show the left hand side column
    if($counter == 1) :
    ?>
                <div class="griditemleft">
                    <div class="postimage">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                    </div>
                    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                </div>
    <?php
    //Show the right hand side column
    elseif($counter == $grids) :
    ?>
    <div class="griditemright">
                    <div class="postimage">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                    </div>
                    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                </div>
    <div class="clear"></div>
    <?php
    $counter = 0;
    endif;
    ?>
    <?php
    $counter++;
    endwhile;
    //Pagination can go here if you want it.
    endif;
    ?>
    </div>
    

    Ahora, deber谩 agregar el siguiente CSS a su sitio para asegurarse de que su cuadr铆cula de publicaciones se muestre bien.

    Si no lo ha hecho antes, consulte nuestra gu铆a sobre c贸mo agregar f谩cilmente CSS personalizado a su sitio de WordPress.

    #gridcontainer{
         margin: 20px 0; 
         width: 100%; 
    }
    #gridcontainer h2 a{
         color: #77787a; 
         font-size: 13px;
    }
    #gridcontainer .griditemleft{
         float: left; 
         width: 278px; 
         margin: 0 40px 40px 0;
    }
    #gridcontainer .griditemright{
         float: left; 
         width: 278px;
    }
    #gridcontainer .postimage{
         margin: 0 0 10px 0;
    }
    

    Puede modificar los diferentes selectores de CSS para ver c贸mo cambian los diferentes elementos de su ciclo de publicaci贸n.

    Esperamos que este art铆culo le haya ayudado a aprender c贸mo mostrar sus publicaciones de WordPress en un dise帽o de cuadr铆cula. Tambi茅n puede consultar nuestra gu铆a sobre c贸mo elegir el mejor software de dise帽o web y nuestra selecci贸n de expertos del mejor software de chat en vivo para peque帽as empresas.

    Si te ha gustado este art铆culo, suscr铆bete a nuestro Canal de Youtube para tutoriales en v铆deo de WordPress. Tambi茅n puedes encontrarnos en Gorjeo y Facebook.

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.