Cómo aplicar estilo a las etiquetas de WordPress










  • ¿Sigue enumerando todo su contenido bajo etiquetas específicas para ayudar a los visitantes a encontrar lo que buscan? Bueno, ¿por qué no hacer que se vea bien al mismo tiempo agregando algo de estilo a tus etiquetas? De forma predeterminada, las etiquetas de WordPress son realmente aburridas y solo muestran el nombre de la etiqueta sin opciones de diseño disponibles, pero no temas, con un poco de codificación puedes cambiarlas en estilos de etiqueta únicos.

    Tenga en cuenta que lo único que está cambiando es la apariencia de las etiquetas que verán sus visitantes. Esto no tendrá ningún beneficio de SEO. Se trata de ser estéticamente agradable para sus visitantes. Hoy, demostraré cómo diseñar etiquetas en WordPress usando código CSS.

    ¿Qué son las etiquetas y por qué darles estilo?

    Las etiquetas son una forma de taxonomías que utiliza WordPress para ayudarte a organizar tu contenido para los visitantes. Están estrechamente relacionados con categorías y subcategorías, y usar ambas en su sitio web es una gran idea y lo ayudará a configurar una jerarquía de contenido fácil de entender. Mantenerse organizado ayuda a sus visitantes, pero también ayuda a los motores de búsqueda y a su sitio web. Al rastrear qué etiquetas son las más populares, puede enumerar más contenido debajo de esa etiqueta para obtener más vistas. A los motores de búsqueda les encanta la organización y eso lo ayudará a obtener más tráfico web a través de motores de búsqueda como Google y Bing.

    Ahora, probablemente ya sabía algo de eso y se pregunta por qué exactamente necesita diseñar sus etiquetas. Bueno, la respuesta es bastante simple, quieres hacer un sitio web que se vea genial. El uso de las opciones de diseño predeterminadas solo es aceptable cuando se comienza y debe cambiarse lo más rápido posible. Un sitio web que funciona perfectamente puede ignorarse por completo si parece que lo creó un aficionado. La apariencia es tan importante como la funcionalidad en estos días.

    Cómo aplicar estilo a las etiquetas de WordPress

    Hoy, demostraré cómo diseñar etiquetas en WordPress usando código CSS. No se requieren complementos para hacer esto y todo se hace a través de la codificación. Por supuesto, en realidad no necesitarás escribir ningún código, solo copiarlo y pegarlo será más que suficiente. Tenga en cuenta que hay muchos estilos de etiquetas que puede crear y puede contratar personas para que las escriban si usted mismo no es un programador competente. Recuerde, deberá haber creado etiquetas en su sitio web para ver realmente cualquier efecto de estos códigos.

    Antes de comenzar, asegúrese de tener acceso al cPanel que su servidor web le proporcionará. También deberá repetir este proceso si cambia el tema en su sitio web. Esto se debe a que el código se coloca en el archivo functions.php del tema. También debe tomarse el tiempo para hacer una copia de seguridad de su sitio web en caso de que cometa un error y dañe su sitio web.

    Para comenzar, diríjase al cPanel de su sitio web. Una vez que haya iniciado sesión, haga clic en la opción Administrador de archivos.

    haga clic en la opción Administrador de archivos.

    Ahora deberá ubicar sus carpetas de temas. Haga clic en el directorio public_html. Aquí debería ser donde se almacenan todos sus archivos de WordPress. Haga clic en la carpeta wp-content. Haga clic en la carpeta de temas. Haga clic en la carpeta del tema que está utilizando actualmente. Haga clic derecho en el archivo functions.php y seleccione la opción de edición. Recuerda que debes crear una copia de seguridad antes de cambiar el código. Esto puede protegerlo de los errores simples que puede cometer.

    Haga clic derecho en el archivo functions.php y seleccione la opción de edición.

    Tiene muchas opciones disponibles para usted, pero una de las primeras es mostrar a los visitantes qué tan pobladas están sus etiquetas. Por ejemplo, si tiene una etiqueta llamada Perros con cinco piezas de contenido, verá la etiqueta Perros con un 5 al lado. Todo lo que necesita hacer para comenzar es copiar y pegar el siguiente código:

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]function tag_counter() {

    $tagcounter = get_tags();


    foreach ($tagcounter as $tag) {


    $string .= ‘<span class=”tagbox”><a class=”taglink” href=”’.
    get_tag_link($tag->term_id) .’”>’. $etiqueta->nombre. ‘</a><span class=”tagcount”>’. $etiqueta->cuenta .'</span></span>’ . “n” ;


    }


    devuelve $cadena;


    }


    add_shortcode(‘tagcounter’ , ‘tag_counter’ );[/ht_message]

    Este código solo agregará la función de contador, pero en realidad no mostrará ni cambiará el aspecto de sus etiquetas. Aquí es donde algunas búsquedas de Google realmente pueden ser útiles. Hay muchas opciones de diseño diferentes disponibles, pero debe dedicar un tiempo a buscarlas y usar el siguiente código como base:

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].tagbox {

    color de fondo:#eee;


    borde: 1px sólido #ccc;


    margen:0px 10px 10px 0px;


    altura de línea: 200%;


    relleno:2px 0 2px 2px;

    }

    .taglink {


    relleno:2px;


    }

    .tagbox a, .tagbox a:visitado, .tagbox a:activo {

    text-decoration:none;


    }

    .tagcount {

    color de fondo: azul;


    Color naranja;


    posición: relativa;


    relleno: 2px;


    }[/ht_mensaje]

    Siéntase libre de cambiar los tamaños de píxeles (px) a cualquier valor que desee y también puede cambiar los colores para que se adapten mejor a su elección de tema. Ten en cuenta que puedes guardar tu trabajo y ver los cambios en tu sitio web y luego cambiarlos si no son lo que imaginabas, pero debes agregar el shortcode [tagcounter]. Hay muchos códigos abreviados ya creados que puede editar en Internet, pero asegúrese de que coincidan con el tema de su sitio web.

    Una última cosa que puede hacer es agregar esto en un widget como el siguiente ejemplo:

    Puede agregar este widget.

    Ahora ve a la página en vivo y podrás verlo en acción.

    Puede ver las 3 formas de mostrar etiquetas.

    Como puede ver, tengo el que está dentro de la publicación, uno idéntico en el widget de la barra lateral y el que puede usar con Tag Cloud Widget (que no requiere ningún código).

    Felicitaciones, ha agregado con éxito un estilo a sus etiquetas. Como puede ver, diseñar las etiquetas de WordPress es muy simple, pero necesita comprender el código básico a menos que elija la opción de widgets simples. Sin embargo, no hay opciones de color usando el widget. Puede cambiar los valores dentro del código en cualquier momento, pero recuerde guardar su trabajo para aplicarlo.

    Haga que cada parte de su sitio web se vea genial

    La mayoría de los principiantes se centrarán en hacer que la página de inicio y las áreas de publicación se vean realmente bien, lo cual es excelente, pero tenga en cuenta que no hay razón para que todo no se vea bien, ¿verdad? Puede parecer que las etiquetas no necesitan ningún condimento adicional y eso depende completamente de usted, pero no hay mucho daño en intentarlo.

    Recuerde, esto es específico del tema y, a veces, las etiquetas se muestran de manera diferente en ciertos temas. Si este es el caso, busque foros relacionados con esto o comuníquese con el soporte del tema para obtener la información que le puede faltar. Hay muchas opciones.

    ¿Qué tipo de combinación de colores has elegido usar? ¿Prefiere este método en lugar de usar Tag Cloud Widget? ¿Ha tenido algún problema con el tema que está utilizando?