Cómo modificar el CSS en WordPress ?

Cuando desea modificar la hoja de estilo en su CMS de WordPress, no necesariamente sabe por dónde empezar. Y, sin embargo, las hojas de estilo son absolutamente esenciales para la apariencia de su sitio web. Ya sea que lo esté usando en su conjunto o para ciertas páginas específicas, puede modificar el diseño, agregar o eliminar elementos, modificar el color para personalizar su tema a su conveniencia.

Si desea desarrollar su conocimiento y dominar perfectamente la modificación de las hojas de estilo, simplemente será suficiente para seguir la guía.

Css WordPress

Definición CSS

CSS literalmente significa en inglés Hojas de estilo en cascada que se traduce en una hoja de estilo en cascada. Complementario al lenguaje HTML, las hojas de estilo son absolutamente esenciales para dar forma rápida a los elementos textuales y gráficos de un sitio. El objetivo, mejorar el aspecto visual para enriquecer la experiencia del usuario.

Sin una hoja de estilo, sería realmente difícil hacer que WordPress responda para ser compatible con teléfonos móviles y teléfonos inteligentes. Pero el aspecto visual generalmente sería mucho más triste, tanto en la parte del cliente como en el área de administración. Cuando buceas dentro de WordPress, te das cuenta de que se han utilizado varios lenguajes de programación para lograr dicho resultado. En el corazón del núcleo, las hojas de estilo ocupan un lugar destacado e incluso si no es un desarrollador web experimentado, es posible realizar modificaciones estéticas muy prácticas según el tema que haya seleccionado.

Cuando se usa WordPress, las hojas de estilo generalmente son administradas por los temas. Estos son archivos de modelo que le permitirán definir un formato general, pero tenga la seguridad de que puede modificarlos perfectamente. En general, toda la información está presente en un archivo llamado “style.css” presente en la raíz de su tema. Cuando modifica este archivo, cambia la apariencia general de su sitio web. Puede modificar, eliminar o agregar ciertas líneas de código. Pero si no es un experto, siempre es mejor hacer una primera copia de seguridad para evitar contratiempos y considerar el uso de un tema para niños.

CSS

Personalizando su tema con la hoja de estilo

Tan pronto como desee obtener una apariencia diferente de su sitio, la hoja de estilo es esencial para la personalización del tema. Podrá modificar el presente código, pero si aplica estos cambios directamente en el archivo fuente, perderá todas sus modificaciones cuando se actualice el tema. Es por eso que es aconsejable nunca hacer estas modificaciones directamente en el archivo “style.css”, sino pasar por un editor específico usando un tema secundario.

Para acceder a él, puede usar un cliente FTP o directamente el tablero. La última solución permite el acceso directo a la hoja de estilo sin instalar un editor de código o cualquier módulo adicional. Nuevamente, antes de realizar cualquier cambio, es necesario guardar todo su sitio, lo que puede encontrar rápidamente un error debido a un manejo inadecuado de su parte. Una vez que se ha completado la copia de seguridad y la creación de un tema para niños, todo lo que tiene que hacer es conectarse a su administración haciendo clic en el menú “apariencia” y luego en “editor de tema”. Se abrirá una ventana que indica los riesgos asociados con la modificación y solo tiene que hacer clic en “Entiendo” para ignorar la advertencia.

Ftp Css

Una vez dentro, podrá modificar la hoja de estilo como mejor le parezca. No será el único archivo presente, otros elementos también están dentro, en particular los archivos PHP porque permiten que su tema funcione correctamente.

Por el momento, no necesita comprender cómo funciona PHP, lo que resulta ser totalmente diferente del código incluido en las hojas de estilo. Tan pronto como cambie la hoja de estilo, los diferentes cambios se aplicarán globalmente y no en una sola página de su sitio web. Por lo tanto, es importante garantizar que se logre la coherencia en su totalidad.

Modifique Css Theme WordPress con Editor

La otra posibilidad mencionada anteriormente es manipular la hoja de estilo de su servidor. Simplemente acceda directamente usando un software específico como Filezilla. Completamente gratuito, debe traer sus identificadores FTP para poder acceder a su sitio web. Esta información diversa se le envió al elegir su host. Una vez que haya podido conectarse correctamente, ubique la carpeta “Contenido WP” para acceder.

En el interior tiene la carpeta “temas” que debería aparecer y deberá seleccionar el tema que está utilizando actualmente en su CMS. Localice el archivo “estilo” para poder cambiar la apariencia de su sitio web. Pequeños consejos una vez más, recuerde guardar su sitio web y recuerde que los cambios que está aplicando a este archivo tendrán lugar en todo el sitio.

Modifique la hoja de estilo para personalizar WordPress

Si no desea tocar estrictamente el código existente, sino agregar ciertos elementos, se preferirán diferentes métodos. Puede usar una extensión dedicada o, por el contrario, recurrir a la personalización para agregar el código más fácilmente, sin temor a perder su trabajo cuando se actualiza el tema. Además, cuando usa este método, no necesita crear un tema para niños.

La personalización de WordPress para modificar el CSS

Primero, deberá conectarse a la administración con su nombre de usuario y contraseña. Luego explore el menú “apariencia” para ir a la sección “personalizar”. Esto le permitirá acceder a la pantalla de personalización de su tema con una descripción general en vivo del sitio.

En la parte inferior del menú hay un cuadro esencial para la personalización, el CSS adicional. Al hacer clic en él, se lo dirigirá a una nueva ventana que realmente se comporta como un editor. La validación también es muy práctica porque puede haber cometido un error en el código que impide su funcionamiento. Una vez que se hayan realizado las modificaciones, simplemente publique el ensamblaje o guárdelo para realizar cambios más adelante.

La ventaja de este método es que también hay un enlace de vista previa disponible para verificar el renderizado, sin aplicarlo definitivamente en el sitio. Básicamente, la adición de código como la modificación, era un nativo con gran simplicidad.

Modificar Css WordPress

El principal inconveniente de este método es la ineficacia de la hoja de estilo cuando cambia el tema. Si planea usar múltiples temas o si desea orientar páginas específicas, el uso de una extensión es absolutamente esencial.

Complementos para personalizar la hoja de estilo CSS

La utilidad de los complementos permite agregar código adicional sin temor a actualizaciones del tema. Los cambios también son más fáciles de evitar que escriba código usted mismo. El uso de menús a través de una interfaz de usuario más funcional le ahorrará mucho tiempo, especialmente si no es un desarrollador web.

1). La extensión Simple CustomCSS

Sin duda, es el complemento más popular cuando se trata de cambiar la hoja de estilo. Muy fácil de usar, ciertamente ofrece una interfaz minimalista pero tan efectiva.

Su administración de luz le permite tomar un control intuitivo, lo que necesariamente explica su éxito en todo el mundo. A través de la interfaz de administración, vaya a la sección “agregar una extensión” y escriba su nombre. Unos segundos serán suficientes para la implementación y la ventaja es que resulta ser totalmente compatible, sin importar qué tema use.

Se le informarán directamente sobre errores de resaltado o sintaxis incorrecta para evitar ciertas desventuras.

Css personalizado simple

2). La extensión Simple CSS y JS personalizada

Otra alternativa a considerar, Simple CustomCSS y JS le permitirá modificar y editar su hoja de estilo como mejor le parezca. La ventaja es que podrá orientar fácilmente los elementos en cuestión, si están en el pie de página, el encabezado, en el área de administración o, por el contrario, en la interfaz pública. También en un estilo muy refinado, las muchas opciones aparecerán en su pantalla a través de menús desplegables, lo que le permite modificar la apariencia de su sitio web, sin conocer ninguna línea de código.

Además, la extensión será totalmente compatible con todos los temas, por lo que es una alternativa muy sólida que absolutamente necesita. Cereza en el pastel, la extensión es gratis.

Simple Css y Js personalizados

3). La extensión SiteOriginCSS

Si las dos primeras extensiones no lo convencieron, pruebe SiteOriginCSS. En realidad, es un visual y editor más tradicional que le brinda la oportunidad de realizar cambios en la hoja de estilo editando el código o, por el contrario, en función de estas diferentes funcionalidades intuitivas.

En la misma línea, también puede usar las extensiones CSSHero o WP Add CustomCSS.

Siteorigin Css

Cómo aprender CSS ?

Si no desea recurrir a extensiones intuitivas, es muy posible aprender el código recurriendo a tutoriales especialmente diseñados para principiantes. Incluso si la programación inicial puede ser confusa, es un lenguaje fácil de aprender que le permite obtener resultados muy fácilmente, porque los cambios visuales se pueden ver de inmediato. Para hacer esto, primero puede ir a YouTube porque hay muchos videos sobre este tema.

Para ir más allá, también se brinda capacitación gratuita para aumentar su nivel. Obviamente, para ser un verdadero profesional de programación y hojas de estilo, nada le impide recurrir a una capacitación paga que le garantizará lecciones efectivas que aprenderá a su propio ritmo. Los diferentes conocimientos que ha adquirido le serán útiles de todos modos, incluso si ya no usa WordPress.

Las hojas de estilo son absolutamente esenciales para un sitio web para que el formato sea lo más correcto posible.

CSS

Fragmentos CSS para WordPress

Aquí hay algunos fragmentos (consejos de código) que puede agregar a su archivo (style.css) para mejorar o modificar el diseño de su blog de WordPress.

Agregue bordes redondeados a las imágenes

Redondea los bordes de tus imágenes con un poco de CSS3.

img { 
-webkit-border-radius: 25px; 
-moz-border-radius: 25px; 
border-radius: 25px; 
}

Enlaces de correo electrónico con imágenes

Agregue un icono o imagen a todos los enlaces de correo electrónico.

a[href^="mailto:"] {  
     background: url(images/email.png) no-repeat rightright top;  
     padding-right:10px;  
}

Para citas bonitas

Dale a tus Blockquotes un nuevo aspecto.

blockquote { 
 background:#f9f9f9; 
 border-left:10px solid #ccc; 
 margin:1.5em 10px; 
 padding:.5em 10px; 
 quotes:"201C""201D""2018""2019"; 
} 
blockquote:before { 
 color:#ccc; 
 content:open-quote; 
 font-size:4em; 
 line-height:.1em; 
 margin-right:.25em; 
 vertical-align:-.4em; 
} 
blockquote p { 
 display:inline; 
}

Cambia tus listas de pulgas

Anote discos o círculos para sus listas? Prueba este fragmento.

ul {list-style: none}
ul li {
 background-image: url("lien-vers-votre-image");
 background-repeat: none;
 background-position: 0 0.5em;
}

Cambia el color del texto seleccionado

::selection {
 background: #93CE52; /* Safari */
 color: #ffffff;
 }
::-moz-selection {
 background: #93CE52; /* Firefox */
 color: #ffffff;
 }

Elimina los bordes alrededor de los emoticones

Agregue este código si ve bordes desagradables alrededor de sus emoticones.

img.wp-smiley{ border:none;}

También aumente el espacio entre texto y emoticones usando un margen simple.

img.wp-smiley{ 
border:none;
margin:0 3px;
}

Enfoca tu sitio web

Este contenedor centrará su sitio web y alineará el texto a la izquierda de forma predeterminada.

#wrapper{ 
 width:960px; 
 margin:0 auto; 
 text-align:left; 
}

Agregar mayúsculas

2 formas de estilizar la primera letra de un párrafo. El primero requiere que haga un intervalo de “primer carácter” en la primera letra :

.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

El siguiente método no requiere ninguna intervención de su parte, pero obviamente no funciona bajo IE 6, 7 y 8:

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Agregue un efecto de carga a las imágenes

Agregue una pequeña imagen GIF animada a su clase de imagen para que aparezca durante la carga. Muy útil para blogs que contienen muchas fotos en sus contenidos.

img {
 background: url(loader.gif) no-repeat 50% 50%;
}

Agregue un efecto de sombra a los títulos

Destaca tus títulos con este simple efecto de sombra.

.h2, .h3, .h4 {
 text-shadow: 2px 2px 4px #666;
}

Agregar saltos de impresión

El salto de impresión separa el contenido del resto cuando un usuario imprime la página. Se puede usar justo antes del área de comentarios para que se imprima una nueva página para ellos.

.page-break{
 page-break-before:always;
}

Evite el regreso a la línea de enlace

Use este código para asegurarse de que los enlaces no se muestren en 2 líneas. Este código asegurará que sus enlaces comiencen en una nueva línea si son demasiado largos.

a { white-space: nowrap; }

Alterne el color de los comentarios

WordPress asigna una clase a cada comentario publicado, este código le permitirá alternar el color de fondo de un comentario a otro.

li.even {
 list-style: none;
 background: #FFFF;
}
li.odd {
 list-style: none;
 background: #F9F9F9;
}

Ajuste el espacio entre letras y palabras

Cambie el espacio entre letras y palabras agregando las propiedades de “espacio entre letras” y espacio entre palabras a su clase de “encabezado”.

h3 {
color: #FF0000;
font-size: 24px;
letter-spacing: 0.3em;
word-spacing: 0.2em;
}

Use las citas de extracción para mejorar la experiencia

Haga que sus artículos sean más fáciles de leer y mejore la experiencia del usuario, al “flotar” a la derecha o izquierda de su contenido, todas las citas importantes.

.pullquote {
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }

Mejora y estilo “&”

Para “&” personalizado y único (ampersand).

.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

Después de agregar la clase anterior, estilice su y colocando el siguiente intervalo:

<span>&amp;</span>

Estilice el código en artículos y páginas

Las etiquetas

 y  se usan con frecuencia para mostrar código. El siguiente código le facilitará la lectura.

pre {
 padding: 0.1em 0.5em 0.3em 0.7em;
 border-left: 11px solid #ccc;
 margin: 1.7em 0 1.7em 0.3em;
 overflow: auto;
 width: 93%;
 line-height: 1.6em;
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
/* target IE7 and IE6 */
*:first-child+html pre {
 padding-bottom: 2em;
 overflow-y: hidden;
 overflow: visible;
 overflow-x: auto; 
 }
* html pre, { 
 padding-bottom: 2em;
 overflow: visible;
 overflow-x: auto;
 }

No olvides las etiquetas DIV

Las etiquetas DIV se usan para aplicar un estilo a un contenido, si las etiquetas SPAN también aplican un estilo CSS, los DIV se usan para el diseño. A menudo tendemos a olvidarlos, sin embargo, permiten presentar texto o elementos, para agregar un toque real de personalización.

Uso de una etiqueta Div simple: Primero, veamos la adición de un DIV simple de 80% de ancho, centrado con un color de fondo y un borde :

Este es mi DIV

Entonces puedo escribir este último y sus atributos directamente en una página o un artículo:

<div style="border: 1px #949494 solid; background-color: #d5d5d5; padding: 5px; width: 80%; margin-left: auto; margin-right: auto;">Voilà ma DIV</div>

declararlos en un archivo CSS y llamarlos si es necesario:

#ma_div {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 1px ##949494 solid;
    background-color: #d5d5d5;
    padding: 5px;
}

y úsalo de la siguiente manera:

<div id="ma_div">
Voilà ma DIV
</div>

Para DIV más complejos: El uso adicional de etiquetas DIV le permite personalizar su contenido. Por supuesto, podemos usar varios y hacer que se superpongan, alinearlos a la derecha, a la izquierda, etc ..

Eso es suficiente para hacer; Recuerde guardar antes de cualquier modificación, además, sepa que JetPack le permite modificar la apariencia de su sitio usando CSS, pero sin modificar su tema utilizando un archivo CSS personalizado. Espero que encuentres útiles estas piezas de código, no dude en compartir sus consejos y sugerencias de CSS con un comentario.

Conclusión CSS WordPress

Desde el momento en que usa un CMS de cualquier tipo, es esencial respetar los diferentes trucos básicos para administrar la administración y la parte pública. Las hojas de estilo, aunque están diseñadas correctamente desde el principio con su tema de WordPress, pueden requerir algunos ajustes y modificaciones. Gracias a los diferentes métodos mencionados anteriormente, no tendrá dificultades para aplicar sus propios estilos con un conocimiento limitado.

Obviamente, cuanto mayor sea su nivel en programación, más fácil será. Sin embargo, siempre esté alerta cuando trabaje en el archivo fuente, siempre es mejor usar una extensión o tema secundario para evitar tener un sitio defectuoso.

Te puede interesar:  ¿Qué es WordPress? ? ¿Por qué elegir usar WordPress? ?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share This