Guías - Página 3 - Oxygenados La comunidad

Como quitar el listado de todas las categorías y sus respectivos posts.
Recurriremos a Oxygen, PHP y CSS, opcionalmente para dar estilos se puede tirar de WpCodebox, de los selectores avanzadas de Oxygen o bien añadir el CSS en el mismo elemento Code Block donde vamos a programar el código.

Para hacerte una idea de lo que vamos a «cocer» puedes ver el resultado en este mismo enlace, puesto que lo tenemos implantado en este mismo sitio.
Tiene un alto grado de personalización, aunque si quieres una personalización completa tendrás que tener unos conocimientos mínimos de php y css, aunque no demasiados.
Además de que en este mismo post vamos a procurar dar las instrucciones necesarias para la personalización, siempre podrás pasarte por nuestro canal de Telegram o bien dejar un comentario en este mismo post.

En este caso utilizamos las opciones que nos da Piotnet Grid para asignar imágenes y colores a las categorías y a las etiquetas(tags), aunque en este sitio no utilizamos etiquetas y en este ejemplo solo vamos a trabajar con las categorías.

Vamos al tajo 🤩.

Paso 1

Creamos una nueva página o bien en una existente añadimos un Code Block y en la parte de php pegamos el código que aparece al pulsar en el botón "Mostrar Código PHP"

Paso 2

En el apartado correspondiente al CSS pegamos el código que se mostrará al pulsar el botón “Mostrar Código CSS”.
Puedes editar este código como te interese para lograr la estética que precises.
NOTA — Si lo prefieres puedes usar un plugin gestor de snippets como nuestro más que recomendado WPCodebox

Paso 3

Ahora toca la personalización o estilizado, aunque este paso es opcional, seguramente no se adapte al estilo de tu web, por lo que pasamos a explicar los puntos en los que puedes tocar o ajustar para conseguir que si se adapte a la estética que se requiera.
Puedes tener en cuenta que el mismo código php te ofrece unas pocas pero efectivas opciones de personalización, que te permiten unos cambios radicales en el front end.

Al principio del código aparecen cuatro variables que tienen su valor asignado a true, en la misma línea de cada variable aparece comentado sus instrucciones. True para activar y false para desactivar.

$iconoCat = true; //True pone imagen - False no pone la imagen de las categorías
$colorLinkCat = true; //True colorea - False no colorea el enlace de las categorías.
$colorLinkPost = true; //True colorea - False no colorea los enlaces de los posts.
$ocultaVacios = true; //True oculta las categorías vacías - False muestra las categorías vacías.

La primera variable hace referencia al color por defecto que se aplicará a toda aquella categoría y su contenido que no tengan un color definido en las opciones de las categorías proporcionadas con Piotnet Grid.

$colorPorDefecto = '#BDB76B'; //Color aplicado por defecto en el caso que la categoría no lo tenga asignado.
$imagenPorDefecto = '/wp-content/uploads/2023/03/typescript.svg'; //Imagen por defecto en el caso de que la categoría no lo tenga asignado. Dejar solo con comillas para usar la bolita.

Mostrar Código PHP Mostrar Código CSS

Copiar

SnipSave Descargar

<div class="secciones-contenedor">
    <?php
    $iconoCat = true; //True pone imagen - False no pone la imagen de las categorías
    $colorLinkCat = true; //True colorea - False no colorea el enlace de las categorías.
    $colorLinkPost = true; //True colorea - False no colorea los enlaces de los posts.
    $ocultaVacios = true; //True oculta las categorías vacías - False muestra las categorías vacías.

    $colorPorDefecto = '#BDB76B'; //Color aplicado por defecto en el caso que la categoría no lo tenga asignado.
    $imagenPorDefecto = '/wp-content/uploads/2023/03/typescript.svg'; //Imagen por defecto en el caso de que la categoría no lo tenga asignado. Dejar solo con comillas para usar la bolita.

    /*** FINAL CONFIGURACION ****/
    /*****************************************************
     ************************************
/*****************************************************/
    /*********************************************/
    /**** NO TOCAR DE AQUI EN ADELANTE  ***/

    function obtieneImagen($id, $defecto)
    {
        $imagen_id = get_term_meta($id);
        if (count($imagen_id) > 1) {
            $img = $imagen_id['piotnetgrid_term_image'][0];
            $image = wp_get_attachment_url($img);
        } else {
            $image = $defecto;
        }
        $image ? ($muestraImagen = '<img class="secciones-div__imagen" src="' . $image . '">') : ($muestraImagen = "");
        return $muestraImagen;
    }
    function obtieneColor($id)
    {
        $color_id = get_term_meta($id);
        if (count($color_id) > 1) {
            $piotnetColor = $color_id['piotnetgrid_term_color'][0];
            return '#' . $piotnetColor;
        }
    }
    $categorias = get_categories();
    foreach ($categorias as $LaCategoria) {
        $LaCategoria_link = get_category_link($LaCategoria->term_id);
        $LaCategoriaId = $LaCategoria->term_id;
        $imagenCat = obtieneImagen($LaCategoriaId, $imagenPorDefecto);
        $catColor = obtieneColor($LaCategoriaId);

        $el_Color = ($catColor) ? $catColor : $colorPorDefecto;
        $colorLinkCat ? ($coloreaLinkCat = 'style="color:' . $el_Color . '"') : ($coloreaLinkCat = "");

        $elIcono =  ($imagenCat) ? $imagenCat : '<div class="secciones-div__bola" style="background-color:' . $el_Color . '"></div>';

        $salida = "";
        $salida =
            '<div style="border:1px solid ' . $el_Color . '" class="' . $claseSeccionPal . '"><div class="' . $claseDivCat . '">' . $elIcono  . '<a href="' . esc_url($LaCategoria_link) . '" ' . $coloreaLinkCat . '>' . $LaCategoria->name . '</a>';

        $args = [
            'posts_per_page' => -1,
            'post_type' => 'post',
            'post_status' => 'publish',
        ];
        $posts = get_posts($args);
        $i = 0;
        $colorLinkPost ? ($coloreaLinkPost = 'style="color:' . $el_Color . '"') : '';
        $enlaces = "";
        foreach ($posts as $post) {
            $lacat = get_the_category($post->ID);
            if ($lacat[0]->term_id == $LaCategoriaId) {
                $enlaces .= '<div class="secciones-div__enlaces-container"><div class="secciones-div__enlaces-div" style="background-color:' . $el_Color . '"></div><a class="' . $claseLinkPost . '" data-colorin="' . $el_Color . '" style="color:' . $el_Color . '" href="' . get_permalink($post->ID) . '"> ' . $post->post_title . '</a></div>';
                $i++;
            }
        }

        $ocultado = ($ocultaVacios && $i < 1) ? true : false;

        if (!$ocultado) {
            $i < 1 ? ($DivEnlaceTag = "</div>") : ($DivEnlaceTag = '<num class="secciones-tag__num" style="color:' . $el_Color . '">(' . $i . ')</num></div>');
            $i > 0 ? ($salida .= $DivEnlaceTag . '<div class="secciones-div__enlaces-posts">' . $enlaces . '</div>') : ($salida .= '</div>');
            echo $salida . '</div>';
        }
    }
    ?>
</div>

:root {
    --anchoImagen: 25px;
    --margenIzqui_Imagen: 10px;
}
.secciones-contenedor {
    display: grid;
    grid-template-columns: minmax(300px, max-content)repeat(auto-fill, 300px);
    width: 100%;
    justify-content: center;
}
.secciones-contenedor-grupo {
    display: flex;
    flex-direction: column;
    margin: 10px 12px 10px 0px;
    border-radius: 5px;
    padding-top: 15px;
    padding-bottom: 35px;
    height: auto;
    max-height: 500px;
    overflow: auto;
}
.secciones-div__enlaceCat {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.secciones-div__enlaceCat a {
    margin-left: 5px;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
}
.secciones-div__imagen {
    margin-left: var(--margenIzqui_Imagen);
    width: var(--anchoImagen);
}
.secciones-div__bola {
    width: var(--anchoImagen);
    height: var(--anchoImagen);
    margin-left: var(--margenIzqui_Imagen);
    border-radius: 50%;
}
.secciones-tag__num {
    margin-left: 10px;
    font-family: 'inter-medium';
    font-size: 10px;
}
.seccion-div-decorativa {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.secciones-div__enlaces-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 90%;
}
.secciones-div__enlaces-posts {
    display: flex;
    flex-direction: column;
    padding: 5px 0px 0px 25px;
}
.secciones-enlaces__posts {
    position: relative;
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.secciones-div__enlaces-div {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 7px;
}
@media screen and (max-width: 599px) {
    .secciones-contenedor {
        display: flex;
        flex-direction: column;
        padding: 0px 5px 0px 10px;
    }
}

<div class="secciones-contenedor">
<?php
$iconoCat = true; //True pone imagen - False no pone la imagen de las categorías
$colorLinkCat = true; //True colorea - False no colorea el enlace de las categorías.
$colorLinkPost = true; //True colorea - False no colorea los enlaces de los posts.
$ocultaVacios = true; //True oculta las categorías vacías - False muestra las categorías vacías.

$colorPorDefecto = '#BDB76B'; //Color aplicado por defecto en el caso que la categoría no lo tenga asignado.
$imagenPorDefecto = '/wp-content/uploads/2023/03/typescript.svg'; //Imagen por defecto en el caso de que la categoría no lo tenga asignado. Dejar solo con comillas para usar la bolita.

/*** FINAL CONFIGURACION ****/
/*****************************************************
************************************
/*****************************************************/
/*********************************************/
/**** NO TOCAR DE AQUI EN ADELANTE ***/

function obtieneImagen($id,$defecto)
{
$imagen_id = get_term_meta($id);

if (count($imagen_id) > 1) {
$img = $imagen_id['piotnetgrid_term_image'][0];
$image = wp_get_attachment_url($img);

}else{
$image = $defecto;
}

$image ? ($muestraImagen = '<img class="secciones-div__imagen" src="' . $image . '">') : ($muestraImagen = "");
return $muestraImagen;
}
function obtieneColor($id)
{
$color_id = get_term_meta($id);
if (count($color_id) > 1) {
$piotnetColor = $color_id['piotnetgrid_term_color'][0];
return '#' . $piotnetColor;
}
}

$categorias = get_categories();

foreach ($categorias as $LaCategoria) {
// Obtener el link a la categoría
$LaCategoria_link = get_category_link($LaCategoria->term_id);
$LaCategoriaId = $LaCategoria->term_id;
$imagenCat = obtieneImagen($LaCategoriaId,$imagenPorDefecto);
$catColor = obtieneColor($LaCategoriaId);
// echo '<pre>'; print_r($terminos); echo '</pre>';
// Imprimir el nombre de la categoría

$el_Color = ($catColor)? $catColor : $colorPorDefecto;
$colorLinkCat ? ($coloreaLinkCat = 'style="color:' . $el_Color . '"') : ($coloreaLinkCat = "");

$elIcono = ($imagenCat)? $imagenCat : '<div class="secciones-div__bola" style="background-color:'.$el_Color.'"></div>';

$salida = "";
$salida =
'<div style="border:1px solid ' . $el_Color . '" class="' . $claseSeccionPal . '"><div class="' . $claseDivCat . '">' . $elIcono . '<a href="' . esc_url($LaCategoria_link) . '" ' . $coloreaLinkCat . '>' . $LaCategoria->name . '</a>';

$args = [
'posts_per_page' => -1,
'post_type' => 'post',
'post_status' => 'publish',
];
$posts = get_posts($args);
$i = 0;
//$tag_count = $LaCategoria->count;

$colorLinkPost ? ($coloreaLinkPost = 'style="color:' . $el_Color . '"') : '';
$enlaces = "";
foreach ($posts as $post) {
$lacat = get_the_category($post->ID);
if ($lacat[0]->term_id == $LaCategoriaId) {
$enlaces .= '<div class="secciones-div__enlaces-container"><div class="secciones-div__enlaces-div" style="background-color:'.$el_Color .'"></div><a class="' . $claseLinkPost . '" data-colorin="'.$el_Color .'" style="color:' . $el_Color . '" href="' . get_permalink($post->ID) . '"> ' . $post->post_title . '</a></div>';
$i++;
}
}

$ocultado = ($ocultaVacios && $i < 1) ? true : false;

if (!$ocultado) {
$i < 1 ? ($DivEnlaceTag = "</div>") : ($DivEnlaceTag = '<num class="secciones-tag__num" style="color:' . $el_Color . '">(' . $i . ')</num></div>');
$i > 0 ? ($salida .= $DivEnlaceTag . '<div class="secciones-div__enlaces-posts">' . $enlaces . '</div>') : ($salida .= '</div>');

echo $salida . '</div>';
}
}
?>
</div>

Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.

Nos vemos en la próxima. 👌

Mostrar listado de todos los posts ordenados por categorías

Vamos al tajo 🤩.

Paso 1

Paso 2

Paso 3

OTRAS GUIAS