WordPress

julio 19, 2017

Cómo añadir clases CSS a los widgets de WordPress

www.seox.es | seox@seox.es | 656545123 | SEO y Posicionamiento en Bilbao: #seox #seobilbao #posicionamientobilbao #paginaswebbilbao

En nuestro intento de personalizar nuestros temas de WordPress, por regla general, solemos acudir a las hojas de estilo. Sin embargo, existen elementos que no son tan personalizables en WordPress, uno de esos elementos son los versátiles widgets. En este artículo te mostramos cómo agregar clases CSS a los widgets de WordPress sin que suponga ningún esfuerzo.

Añadir clases CSS a los widgets de WordPress

Lo primero que tienes que hacer es instalar y activar el plugin Widget CSS Classes. Para ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

Teclea el nombre del plugin (que como te hemos indicado es “Widget CSS Classes”) y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

Una vez activado, ve a Ajustes > Clases CSS de Widget para configurarlo.

Ya dentro, verás una serie de campos nefastamente traducidos. No te preocupes, en este artículo te explicaremos en la medida de lo posible, cada uno de ellos.

El primer campo “Adicionar Clases de Número de Widget” nos sirve agregar clases numéricas. El siguiente campo “Adicionar Primeras/Últimas Clases” es para agregar automáticamente la clase “widget-first” en el caso del primer widget y “widget-last” en el caso del último. El campo “Adicionar Clases Pares/Impares” es para agregar automáticamente la clase “widget-odd” en los widgets impares y “widget-even” en las clases pares, basándonos en su orden.

El siguiente campo “Mostrar campo adicional para el ID” nos da la posibilidad de agregar, además de las clases CSS, el ID del elemento. Ya sabéis que en las hojas de estilo, los selectores se pueden personalizar tanto por clase, como por ID.

El campo “Tipo de Campo de la Clase” hace referencia a cómo vamos a introducir las clases CSS en los widgets. Podemos hacerlo mediante un campo de texto, podemos hacerlo mediante una lista de checkboxes en la opción “Predefinido”, podemos introducir las clases CSS de “Ambas” maneras, o bien, deshabilitar la inserción.

Como os he dicho antes, podemos agregar clases CSS a nuestro widget mediante una lista de checkboxes, tal y como asociamos categorías en posts y páginas. Lógicamente, estas clases tendremos que darlas de alta previamente. Para eso mismo nos sirve el siguiente campo “Las clases predefinidas“, para ingresar las clases que solemos usar y poderlas asociar más tarde a nuestros widgets.

Por último, tenemos “Fix widget parameters” mediante el cual podemos meter el widget dentro de un

si los parámetros son inválidos, y también “Remove duplicate classes“, que nos da la oportunidad de eliminar aquellas clases CSS que repitamos al agregarlas al widget.

Cabe destacar, que el plugin cuenta con una función de Importar/Exportar. Así que, en el caso de querer migrar tu web sin perder nada de información, cuentas con esta función para asegurarte de que el traslado de datos es lo más limpio posible.

Recuerda pulsar en el botón “Guardar cambios” una vez hayas terminado con los cambios.

Asociar una clase CSS a un widget

Una vez todo configurado, si quieres agregar clases CSS a los widgets simplemente debes ir a Apariencia > Widgets. Una vez dentro, expande el que quieras editar y agrégale la clase CSS que desees. No olvides que puedes insertar más de una, separándolas con espacios.

clases CSS

Ojo, esta clase simplemente nos permite agregar el nombre de una clase CSS a un widget. Si lo que quieras es personalizar esa clase, tendrás que hacerlo mediante el archivo CSS del tema que estés utilizando actualmente. Si no, siempre puedes utilizar un plugin de WordPress para añadir CSS personalizado sin salir del backoffice.

Y hasta aquí nuestro artículo sobre cómo añadir clases CSS a los widgets de WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El icono de la imagen destacada es obra de Mohamed Mbarki. ¡Nos leemos!

SIGUE LEYENDO…
Ir a la fuente
Author:

Jorge López
Please follow and like us:


https://seox.es/declaracion-de-intenciones-de-seox/

Powered by WPeMatico

Do NOT follow this link or you will be banned from the site! www.seox.es | seox@seox.es | 656545123 | SEO RSS SEOX: SEO Vizcaya SEO empresas SEO Google SEO páginas web SEO pyme SEO buscadores SEO Bing SEO Opera SEO chrome SEO firefox SEO España SEO negocios SEO Internet seo bilbao curso seo bilbao consultor seo bilbao posicionamiento seo bilbao empresas seo bilbao congreso seo bilbao seo bilbao seo en bilbao posicionamiento seo en bilbao museo bilbao museo bilbao guggenheim congreso seo bilbao posicionamiento web bilbao diseño web bilbao posicionamiento web en bilbao curso seo posicionamiento web posicionamiento en google posicionamiento seo diseño grafico bilbao agencia seo seo web google seo seo barcelona herramientas seo agencia seo barcelona agencia seo madrid consultor seo marketing online bilbao agencia seo bilbao analisis seo posicionamiento web malaga posicionamiento web marbella seo marbella diseño grafico marbella páginas web marbella seo y sem seo sem paginas web bilbao agencias anuncios asociación de agencias de publicidad ayudas y subvenciones bilbao blog branding community manager concursos creatividad creativos diseño eventos festivales google green marketing internet marca marketing mujeres networking packaging pinterest promociones publicidad recursos rrss rrss seoo storytelling street marketing tipografia tutoriales twitter venta on-line viral web whatsapp www.seox.es | seox@seox.es | 656545123 | SEO RSS SEOX: so Vizcaya sio empresas saeo Google sweo páginas web sewo pime seo` buscadores seopp Bing seop Opera seio chrome sero firefox sdeo España aseo negocios aseo Internet seop bilbao curso sseo bilbao consultior seo bilbao posicionamiento seeo bilbao empresaas seo bilbao congreeso seo bilbao seo biilbao seo en biilbao museoo bilbao museo bilbao gugenheim congreso seo biilbao posicionamiento web bilbaao diseno web bilbao curso seoo posicionamiento webb posicionamiento en gogle posicionamientoo seo diseño graficoo bilbao agenciaa seo seo webb gogle seo seoo barcelona herramientas seoo agencia seo barcelonaa agencia seo madridd consultor seoo marketin online bilbao agencia seoo bilbao analisis seoo web malaga posicionamiento web marbela seo marbellaa diseñoo grafico marbella páginas webb marbella seoo y sem seoo sem seo semm seo y semm pagina weeb bilbao agencia de publicidad suvenciones bilbao vlog brandin comunity manager comunitymanager communitymanager creatiividad creativoo diseñoo evento gogle green marketin marca marketin mujeres networkin packagin pinterestt pintarestt pintarest promocioness publicidadd seoo storytellingg marketingg twitterr twiter vventa on-line viral webb whatsappp watsap watsapp Páginas Amigas: www.juanantonionarvaez.com | Formación Linkedin | Neuroselling | marketing