{"id":6417,"date":"2018-05-22T11:20:19","date_gmt":"2018-05-22T11:20:19","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-tutoriales\/?p=6417"},"modified":"2023-04-28T01:39:51","modified_gmt":"2023-04-27T23:39:51","slug":"anadir-css-personalizado-wordpress","status":"publish","type":"post","link":"\/co\/tutoriales\/anadir-css-personalizado-wordpress\/","title":{"rendered":"C\u00f3mo a\u00f1adir CSS personalizado a WordPress"},"content":{"rendered":"

En este tutorial hablaremos de CSS personalizado para WordPress. Vamos a ver tres métodos que te ayudarán a añadir CSS personalizados a WordPress. Incluyendo el uso de:<\/p>

    \n
  1. Plugins de CCS personalizados para WordPress;<\/li>\n\n\n\n
  2. Personalizador de plantilla incorporado;<\/li>\n\n\n\n
  3. Tema hijo de WordPress.<\/li>\n<\/ol>

    Al final, sabrás todo lo que hay que saber sobre cómo añadir CSS personalizados a WordPress<\/a>. Esto te ayudará a ajustar ciertos elementos y hacer que tu sitio web sea más llamativo o fácil de usar. Sin más preámbulos, veamos cuáles son nuestras opciones.<\/p>

    Añadir CSS personalizado a WordPress a través de plugins<\/h2>
    \n
    \"añadir<\/figure>\n<\/div>

    Una manera fácil de implementar CSS personalizado a WordPress es a través de plugins. Y hay muchos para elegir. Veamos ahora los plugins de CSS personalizados más populares de WordPress y veamos cómo funcionan. Todas las herramientas que usamos en esta guía se pueden instalar fácilmente a través de la sección Plugins > Añadir nuevo<\/strong> del tablero de control.<\/p>

    Simple Custom CSS<\/strong><\/a><\/h3>
    \n
    \"custom<\/figure>\n<\/div>

    Este es uno de los plugins de CSS personalizados de WordPress más populares entre la comunidad. Te permite implementar tus estilos e invalidar el CSS de las plantillas actuales. Los valores que establezcas aquí persistirán incluso si cambias de plantilla.<\/p>

    \n
    \"añadir<\/figure>\n<\/div>

    Una vez activada, la herramienta estará disponible en la sección Apariencia> CSS personalizado<\/strong>. Usarlo es extremadamente simple. Ingresa los valores que necesites en el editor y guárdalo.<\/p>

    \n
    \"ejemplo<\/figure>\n<\/div>

    Después de eso, puedes ver los cambios actualizando tu sitio web.<\/p>

    WP Add Custom CSS<\/strong><\/a><\/h3>
    \n
    \"Plugin<\/figure>\n<\/div>

    Otra gran herramienta que puedes usar para implementar CSS personalizado en WordPress.<\/p>

    \n
    \"añadir<\/figure>\n<\/div>

    Una vez instalado, aparecerá en su propia sección dedicada en el tablero. Usando esa sección, puedes aplicar CSS a todo el sitio web.<\/p>

    \n
    \"css<\/figure>\n<\/div>

    Lo que es aún más conveniente es que también tendrás un editor de CSS debajo de cada post. Por lo tanto, puedes aplicar diferentes CSS a entradas individuales<\/strong> si es necesario.<\/p>

    \n
    \"ejemplo<\/figure>\n<\/div>

    Por último, todos los cambios se pueden ver refrescando tu navegador.<\/p>

    Site Origin CSS<\/strong><\/a><\/h3>
    \n
    \"Plugin<\/figure>\n<\/div>

    Una herramienta fácil de usar e interactiva para agregar CSS personalizados a WordPress.<\/p>

    \n
    \"vista<\/figure>\n<\/div>

    Una vez instalada, la herramienta estará disponible en la sección Apariencia> CSS personalizado<\/strong>.<\/p>

    \n
    \"añadir<\/figure>\n<\/div>

    Este plugin incluye una conveniente interfaz de editor donde puedes elegir cualquier parte de tu sitio y editarlo usando herramientas incorporadas o agregando código manualmente.<\/p>

    Simple Custom CSS and JS<\/strong><\/a><\/h3>
    \n
    \"Plugin<\/figure>\n<\/div>

    Por último, pero no menos importante, también puedes probar esta herramienta. Cuenta con algunas funcionalidades adicionales en comparación con las anteriores. Una de ellas es la posibilidad de agregar entradas de JavaScript personalizadas.<\/p>

    \n
    \"nueva<\/figure>\n<\/div>

    Una vez instalado el plugin, aparecerá en una sección separada debajo de tu tablero. Allí, podrás crear entradas CSS personalizadas de forma similar a cómo creas entradas de WordPress.<\/p>

    \n
    \"editar<\/figure>\n<\/div>

    Para probarlo, hemos modificado las etiquetas h1<\/strong> para que sean un poco más coloridas.<\/p>

    \n
    \"Ejemplo<\/figure>\n<\/div>

    Todos los cambios serán visibles en tu sitio web en vivo después de guardarlos.<\/p>

    Añadir CSS personalizado a WordPress con el personalizador de plantillas<\/h2>
    \n
    \"Menu<\/figure>\n<\/div>

    Puedes agregar fácilmente CSS personalizado a WordPress si tu versión es 4.7 y superior, ya que incluye una herramienta incorporada en el personalizador de temas. Para usarlo, ve a la sección Apariencia > Personalizar<\/strong> en tu tablero.<\/p>

    \n
    \"css<\/figure>\n<\/div>

    Desplázate hacia abajo hasta la parte inferior y haz clic en la sección CSS Adicional<\/strong>.<\/p>

    \n
    \"Ejemplo<\/figure>\n<\/div>

    Se abrirá una herramienta incorporada que te permitirá añadir cualquier código CSS<\/a>. Es fácil de usar y te permite ver las versiones de tu sitio para móviles y tabletas, lo que es sorprendente teniendo en cuenta lo importante que es la compatibilidad para dispositivos móviles en la actualidad.<\/p>

    ¡Felicitaciones! Ahora ya sabes cómo añadir CSS personalizado a WordPress sin necesidad de plugins.<\/p>

    Añadir CSS personalizado a WordPress usando un tema hijo<\/h2>

    Todos los ejemplos anteriores te mostraron cómo agregar tu propio CSS a un sitio web en vivo de WordPress. Sin embargo, hay situaciones en las que primero debes probarlo. Quizás todavía no estés seguro de lo que quieres hacer o no quieres arriesgarse a dañar tu sitio. <\/p>

    Para evitar que esto suceda, te recomendamos crear un tema hijo de WordPress. Esto te permitirá dar rienda suelta a tu imaginación y probar varias combinaciones de CSS. ¡Lo mejor de todo es que tu sitio web en vivo no se verá afectado!<\/p>

    Solución de problemas comunes de CSS personalizado para WordPress<\/h2>

    A veces, puedes encontrarte con pequeños inconvenientes al agregar CSS personalizado a WordPress. Repasemos rápidamente los problemas más comunes y veamos cómo podemos solucionarlos.<\/p>

    Los cambios no aparecen<\/h3>

    El CSS personalizado de WordPress puede no aparecer debido a la caché. Si estás utilizando algún plugins de almacenamiento en caché, existe una gran posibilidad de que algunos recursos se guarden en caché y se entreguen desde un almacenamiento temporal para aumentar la velocidad y reducir el uso de recursos. <\/p>

    Para obtener instrucciones detalladas sobre cómo borrar la memoria caché de WordPress, consulta este tutorial<\/a>. Otra solución sería deshabilitar temporalmente tales plugins.<\/p>

    Si también tiene habilitado el almacenamiento en caché del navegador, puede ser suficiente borrarlo para ver los nuevos cambios que aplicaste.<\/p>

    \n
    \"Ver<\/figure>\n<\/div>

    Por último, pero no menos importante, algunos proveedores de hosting web ofrecen herramientas de almacenamiento en caché integradas para ayudarle a tu sitio de WordPress a tener un mejor rendimiento. En Hostinger también hacemos esto. Nuestros plugins de almacenamiento en caché integrados de WordPress se pueden deshabilitar o purgar a través de la sección Plugins > Plugins instalados > Dependiente<\/strong>.<\/p>

    Sintaxis CSS mal escrita<\/h3>

    Los errores de sintaxis son bastante fáciles de pasar por alto y, a menudo, pueden impedir que el CSS personalizado de WordPress se muestre correctamente. <\/p>

    Si no puedes ver los cambios y estás seguro de que la caché no es el problema, usar un validador de CSS<\/a> puede ser realmente útil. Simplemente pega tu CSS y ejecuta la herramienta. Te mostrará cualquier error tipográfico y te dirá en qué línea está.<\/p>

    Demasiadas opciones<\/h3>

    A veces es posible exagerar un poco con el CSS personalizado de WordPress. Al agregar dos o más referencias a un selector, es posible causar un conflicto. <\/p>

    Como CSS no puede leer mentes, no sabe qué valor aplicar. Esto ocurre con frecuencia cuando se llama a una nueva hoja de estilo encima de una existente. Si estás tratando de cambiar el encabezado h2 pero no ocurre nada, revisa la hoja de estilos de las entradas existentes.<\/p>

    Estás sin ideas<\/h3>

    Si bien no es un problema real, muchas veces la parte más difícil es averiguar qué CSS personalizado quieres añadir a WordPress. Esto puede ser un gran dolor de cabeza, ya que debes tener muchas cosas en cuenta. Si tiene problemas, aquí hay algunos recursos (en inglés) que pueden ayudarte a generar ideas nuevas:<\/p>