Oxygenados Com on SnipSave | Web-based code snippet manager for developers

Mostrar Listado de Posts por tags y categorías css

                    .secciones-div__enlaceTag a {
    padding-right: 6px;
    margin-left: 10px;
    text-transform: capitalize;
}

.secciones-div__enlaces-posts {
    display: flex;
    flex-direction: column;
    padding-left: 60px;
    width: 100%
}

.secciones-tag__num {
    font-size: 14px;
}

.secciones-div__categoria-imagen {
    width: 25%
}

.secciones-div__enlaceTag {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 30px;
}

.secciones-enlaces__posts {
    margin-left: 18px;
}

a.secciones-enlaces__posts {
    font-size: 14px;
}

.seccion-div-decorativa {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.secciones-contenedor-grupo {
    padding: 10px 12px 10px 10px;
}

.secciones-contenedor-grupo> :not(:first-child) {
    display: flex;
    flex-direction: column;
    padding: 10px 12px 10px 0px;
    border-radius: 5px;
}

Mostrar Listado de Posts por tags y categorias php

View Snippet

                    <div class="secciones-contenedor">
<?php
	
$iconoCat = true; //True pone imagen - False no pone el imagen de las categorías
$iconoTag = true; //True pone imagen - False no pone el imagen de las etiquetas.
$colorLinkCat = true; //True colorea - False no colorea el enlace de las categorías.
$colorLinkTag = true; //True colorea - False no colorea el enlace de las etiquetas. 
$colorLinkPost = true; //True colorea - False no colorea el enlace de los enlaces a los posts. 
$cantpostTag = true; //True muestra - False no muestra la cantidad de por etiqueta posts. 	
$cantpostTagColor = true; //True colorea - False no colorea la cantidad de por etiqueta posts. 	

$claseSeccionPal = "secciones-contenedor-grupo"; //Sección Externa que engloba todo.
$claseDivCat = "secciones-div__enlaceCat"; //Div que contiene la categoría.
$claseDivBola = "seccion-div-decorativa"; // Div de la bolita.
$claseDivDatos = "secciones-div-conjunto__datos";//Div que engloba imagen de etiqueta, nombre de etiqueta y enlaces de los posts.
$claseLinkPost = "secciones-enlaces__posts"; //Div contenedor de los enlaces de los posts.
$claseNumeros = "secciones-tag__num"; //Clase para los números y paréntesis de la cantidad de posts.
$prefijoImagenClase= "secciones-div__"; //Prefijo de la clase que varía según sea imagen o bolita.
	

/*** FINAL CONFIGURACION ****/	
/**** NO TOCAR DE AQUI EN ADELANTE  ***/
	
function obtieneImagen($id,$clase){
    $imagen_id = get_term_meta($id);
    $img = $imagen_id['piotnetgrid_term_image'][0];
    $image = wp_get_attachment_url($img);
	($image) ? $muestraImagen = '<img class="'.prefijoImagenClase.$clase.'-imagen" src="'.$image.'">' : $muestraImagen= "";
	return $muestraImagen;
}
function obtieneColor($id){
    $color_id = get_term_meta($id);
    $piotnetColor = $color_id['piotnetgrid_term_color'][0];
	return '#'.$piotnetColor;
}

$categories = get_categories();
$tags = get_tags();

foreach ( $categories as $category ) {
    $category_link = get_category_link( $category->term_id );
    $categoryId = $category->term_id ;
	$imagenCat = obtieneImagen($categoryId, 'categoria');	
	
	($colorLinkCat)? $coloreaLinkCat = 'class="fuente-variable-seccion" style="color:'. obtieneColor($categoryId).'"' : $coloreaLinkCat = "";
	
	?>
	<div <?php echo 'class="'. $claseSeccionPal.'"' ?>> 
    <div <?php echo 'class="'. $claseDivCat.'"' ?>>
		<?php echo $imagenCat; ?><a href="<?php echo esc_url( $category_link ).'" '.$coloreaLinkCat. '>'. $category->name . '</a></div>';		
   foreach ($tags as $tag) {
	   $tagId = $tag->term_id;
        $args = array(
            'posts_per_page' => -1,
            'post_type' => 'post',
            'post_status' => 'publish',
            'tag_id' => $tagId,
        );
    $posts = get_posts($args);	   
	$i = 0;
	$salida = "";
    $tag_count = $tag->count;
	$catColor = obtieneColor($tagId);
	
	($colorLinkPost) ? $coloreaLinkPost = 'style="color:'.$catColor.'"' : '';
	   
    foreach ($posts as $post) {     
        $lacat = get_the_category($post->ID);
        if ($lacat[0]->term_id == $categoryId )	{
          $salida .=  '<a '.$coloreaLinkPost.' class="'.$claseLinkPost.'" href="' . get_permalink($post->ID) . '"> - ' . $post->post_title . '</a>';
		  $i++;
		}
   }
	   $conImagen = obtieneImagen($tagId,'etiqueta');
	   (!$conImagen)? $divColor = '<div class="'.$claseDivBola.'" style="background-color:'.$catColor.'"></div>': $divColor = "";
	   
		($i < 1 ) ? $DivEnlaceTag = "" : $DivEnlaceTag = '<div class="secciones-div-conjunto__datos" style="border:1px solid '.$catColor.'" ><div class="secciones-div__enlaceTag">'.$divColor.$conImagen.'<a href="'. get_tag_link($tagId) .'"class="fuente-variable-seccion"  style="color:'.$catColor.'">'.$tag->name.'</a><num class="secciones-tag__num" style="color:'.$catColor.'">('.$i.')</num></div>';
	   if ($i > 0 ) echo $DivEnlaceTag.'<div class="secciones-div__enlaces-posts">'.$salida.'</div></div>';
 }
 echo '</div>';
}
?>
</div>

Mostrar listado de todos los posts ordenados por categorías php

View Snippet

                    <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>

← Prev Page