Resumen de N formas de implementar la nube de etiquetas de color del tema sin complementos en WordPress

La nube de etiquetas es el toque final de nuestro artículo. Si dejamos que nuestra nube de etiquetas genere efectos de color aleatoriamente, aumentará en lugar de personalización. Ahora abandonamos el complemento y aprendemos de Internet a crear nuestra propia nube de etiquetas de color.

1. Método general en línea

1. Agregue el siguiente código al archivo functions.php en su carpeta de temas :

function colorCloud($text) { // 实现彩色标签云  
        $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);   
        return $text;   
    }   
    function colorCloudCallback($matches) {   
        $text = $matches[1];   
        $color = dechex(rand(0,16777215));   
        $pattern = '/style=(\'|\")(.*)(\'|\")/i';   
        $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);   
        return "<a $text>";   
    }   
    add_filter('wp_tag_cloud', 'colorCloud', 1);

En el código $color = dechex (rand (0,16777215)); la función es definir el rango de valores decimales del color aleatorio de la etiqueta, 0 es igual a # 000000, 16777215 es igual a #ffffff, también puede redefinir el rango de color mostrado por la nube de etiquetas, siempre que encuentre el correspondiente El hexadecimal del color se convierte al decimal correspondiente.
2. Personalice los parámetros relevantes del widget de nube de etiquetas de WordPress

//custom widget tag cloud
add_filter( 'widget_tag_cloud_args', 'theme_tag_cloud_args' );
function theme_tag_cloud_args( $args ){
	$newargs = array(
		'smallest'    => 8,  //最小字号
		'largest'     => 22, //最大字号
		'unit'        => 'pt',   //字号单位，可以是pt、px、em或%
		'number'      => 45,     //显示个数
		'format'      => 'flat',//列表格式，可以是flat、list或array
		'separator'   => "\n",   //分隔每一项的分隔符
		'orderby'     => 'name',//排序字段，可以是name或count
		'order'       => 'ASC', //升序或降序，ASC或DESC
		'exclude'     => null,   //结果中排除某些标签
		'include'     => null,  //结果中只包含这些标签
		'link'        => 'view', //taxonomy链接，view或edit
		'taxonomy'    => 'post_tag', //调用哪些分类法作为标签云
	);
	$return = array_merge( $args, $newargs);
	return $return;
}

Se recomienda encarecidamente que lea: Función de WordPress: wp_tag_cloud (nube de etiquetas) explicación detallada y ejemplos
. La matriz en el código de apelación se puede seleccionar adecuadamente. Si desea utilizar los parámetros predeterminados, puede eliminar los parámetros personalizados relevantes (matriz).
Análisis de parámetros predeterminados: el
smallest：tamaño de fuente mínimo del texto de la etiqueta, el valor predeterminado es 8 puntos; el
largest：tamaño de fuente máximo del texto de la etiqueta, el valor predeterminado es 22 puntos;
unit：la unidad del tamaño de fuente del texto de la etiqueta, el valor predeterminado es pt, que puede ser px, em, pt, porcentaje, etc .;
number：el número de etiquetas llamadas, el valor predeterminado es 45, establecido en "0" para llamar a todas las etiquetas;
format：llamar al formato de la etiqueta, seleccionar "plano", "lista" y "matriz", el valor predeterminado es mosaico "plano", "lista" es el modo de lista;
orderby：llamar a la etiqueta Ordenar, el valor predeterminado es "nombre" se ordena por nombre y "recuento" se ordena por el número de artículos relacionados; el
order：valor predeterminado es "ASC" está en orden positivo, "DESC" está en orden inverso y "RAND" está en cualquier orden.
exclude：Para excluir algunas etiquetas, ingrese los ID de etiqueta y sepárelos con comas. Por ejemplo, "exclude = 1,3,5,7" no mostrará
include：etiquetas con ID 1, 3, 5 y 7; las etiquetas de inclusión son lo mismo que excluir, pero tienen el efecto contrario. Por ejemplo, "include = 2,4,6,8" solo mostrará etiquetas con ID 2, 4, 6, 8.
3. Llamar a wordpress widget de nube de etiquetas de colores.
Una vez completada la modificación, arrastre directamente el widget de "nube de etiquetas" al widget de la derecha en "Apariencia -> widget" del panel de control.
También puede agregar la siguiente línea de llamada de código donde se debe llamar al tema:
En el método de llamada en la barra lateral, agregue el siguiente código (modifique los parámetros específicos usted mismo, el más pequeño representa la fuente más pequeña, el más grande representa la fuente más grande, la unidad representa la unidad de fuente pt / px, número indica el número de etiquetas recuperadas):

<?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=20');?>

Dos, implementación de nube de etiquetas de fondo de color de WordPress

El método que se presenta a continuación es en realidad para lograr el color del fondo de la nube de etiquetas, no el color de la etiqueta en sí.
1. Agregue el siguiente código a la llamada:

<aside class="tags"><?php wp_tag_cloud('smallest=12&largest=12&number=45&order=DESC'); ?></aside>

Si sus etiquetas son diferentes, configure la clase en etiquetas.
Si desea agregar directamente a través del widget de texto en la barra lateral, necesita el widget de texto para admitir el código PHP. El método para lograr esto es leer el artículo y dejar que su widget de texto de WordPress ejecute PHP . En este caso Más conveniente y flexible.
2. Agregue los siguientes estilos CSS a su tema style.css

.tags{padding: 12px 13px 10px 15px;}
.tags a:nth-child(9n){background-color: #4A4A4A;}
.tags a:nth-child(9n+1){background-color: #428BCA;}
.tags a:nth-child(9n+2){background-color: #5CB85C;}
.tags a:nth-child(9n+3){background-color: #D9534F;}
.tags a:nth-child(9n+4){background-color: #567E95;}
.tags a:nth-child(9n+5){background-color: #B433FF;}
.tags a:nth-child(9n+6){background-color: #00ABA9;}
.tags a:nth-child(9n+7){background-color: #B37333;}
.tags a:nth-child(9n+8){background-color: #FF6600;}
.tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px}
.tags a:hover{opacity: 1;filter:alpha(opacity=100);}

3. El código puro de Wordpress realiza una nube de etiquetas con esquinas redondeadas y un fondo colorido

El principio es similar a agregar una nube de etiquetas de color. Agregue el siguiente código a functions.php en el directorio de temas actual:

//圆角背景色标签  
function colorCloud($text) {  
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);  
return $text;  
}  
function colorCloudCallback($matches) {  
$text = $matches[1];  
$colors = array('F99','C9C','F96','6CC','6C9','37A7FF','B0D686','E6CC6E');  
$color=$colors[dechex(rand(0,7))]; 
$pattern = '/style=(\'|\")(.*)(\'|\")/i';  
$text = preg_replace($pattern, "style=\"display: inline-block; *display: inline; *zoom: 1; color: #fff; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 3px; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;\"", $text);  
$pattern = '/style=(\'|\")(.*)(\'|\")/i';  
return "<a $text>";  
}  
add_filter('wp_tag_cloud', 'colorCloud', 1);

Cuarto, nube de etiquetas de color giratoria 3D de WordPress

Si desea implementar una colorida nube de etiquetas giratoria 3D, lea la nube de etiquetas colorida giratoria 3D de WordPress directamente

Artículos que le pueden interesar:

▪ Tema de WordPress para crear archivos de plantilla básicos y funciones básicas

▪ Carga de retraso de imagen integrada de desarrollo de tema de WordPress

▪ Tema de WordPress de la lección 11 que habilita las imágenes destacadas

▪ Utilice Bootstrap para crear su tema adaptable de WordPress (4)

▪ Código de marco básico index.php de producción de temas de WordPress

▪ Utilice Bootstrap para crear su tema adaptable de WordPress (7)

▪ La página de inicio de WordPress excluye ciertas categorías

▪Lección 10: Diseño de tema de creación de tema de WordPress

▪ Una forma alternativa de agregar rápidamente enlaces de amistad en WordPress

▪ Utilice Bootstrap para crear su tema adaptable de WordPress (5)

Resumen de N formas de implementar la nube de etiquetas de color del tema sin complementos en WordPress

Supongo que te gusta