Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Comenzando con WordPress: Editar la apariencia de tu sitio con CSS

by
Length:LongLanguages:
This post is part of a series called Beginning With WordPress.
Beginning With WordPress: Preparing to Customise Your Theme Using a Child Theme
Beginning With WordPress: Editing the Structure of Your Site

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

De modo que, ahora que tenemos un tema hijo configurado ya estamos listos para hacer algunos cambios en la apariencia de nuestro sitio.

Lo que necesitarás

  • Navegador web - Yo estoy usando Chrome
  • Editor de texto - Estoy usando Text Wrangler
  • Cliente FTP - Estoy usando FileZilla el cual hemos configurado para usar Text Wrangler como su editor de texto
  • Un conocimiento práctico de HTML y CSS

Antes de empezar

Antes de entrar en el tema central del tutorial necesitamos configurar nuestro sistema de edición, y una de las cosas útiles sobre los clientes FTP modernos es que en sus preferencias podemos configurar el software que queremos utilizar para editar archivos. De esa manera podemos elegir editar al seleccionar un archivo en el servidor, hacer que se descargue en un directorio temporal en nuestro sistema local, editarlo, y después cuando lo guardamos lo tenemos automáticamente cargado de nuevo en el servidor. Es un sencillo sistema automatizado, pero es necesario ser un poco cuidadoso mientras estamos realizando ediciones en tiempo real, ya que si cometemos un error, nuestro sitio en vivo se verá afectado. Sin embargo, antes de llegar a eso, configura tu editor de texto predeterminado.

Dirígete a FileZilla > Opciones > Edición de archivos ahora ve a tus directorios Aplicaciones o Programas y elige tu editor de texto (como mencioné, yo estoy usando Text Wrangler, como puedes ver en la siguiente imagen, está establecido como mi editor predeterminado).

3-bwwp_6-file-editor

Ok, volveremos a eso...

En segundo lugar, antes de que empecemos a ajustar el tema (este es tu momento 'aquí hay uno que he preparado antes') también he creado algunas nuevas entradas en nuestro blog y las diferencié utilizando formatos de entrada para que podamos ver dónde se reflejarán algunos de los cambios en nuestro sitio publicado, se pueden ver en la primera imagen, identificadas por diferentes fondos de colores. El primero es un enlace, seguido de una entrada estándar, luego una galería, otro estándar, una cita y luego un vídeo. Twenty Thirteen cambia el estilo de cada una de estas entradas, así que vamos a tener que editar algunas partes de la hoja de estilo de nuestro sitio para hacer que tenga un aspecto diferente al original.

1-bwwp_6-original-site-colours

Cambiar los estilos de tu sitio

Correcto, el primer cambio de estilo que estoy haciendo no requiere ningún código, simplemente actualicé las imágenes de la cabecera.

Twenty Thirteen muestra en ella de forma predeterminada tres imágenes con patrones geométricos naranjas, nosotros estamos poniendo cuatro nuevas azules y verdes, entrando en la configuración de Apariencia > Cabecera y cargando algunas nuevas imágenes de cabecera. No tiene sentido cambiar una cabecera en el CSS cuando el tema en sí nos proporciona los medios para hacerlo, así que encuentra algunas nuevas imágenes de cabecera para tu nuevo esquema de color, y súbelas...

Esperaré aquí mismo.

Ok, ¿las encontraste? Genial, cárgalas y pasemos a lo siguiente.

2-bwwp_6-header-changes

Ajustar el tema usando hojas de estilo

Para proporcionarte algunos fundamentos sobre las hojas de estilo o refrescarlos, un sitio web se compone de 3 capas. La primera, en la base, tenemos la capa de contenido, la parte del sitio que organiza el contenido en una estructura significativa en tu sitio. Esta estructura se crea mediante código denominado HTML (Hypertext Markup Language) con el que se etiquetan las distintas partes del contenido. Aquí tienes un poco de HTML a modo de ejemplo.

HTML en sí no aplica estilo a nada. El HTML solo estructura el contenido. Para realizar cambios en el estilo del contenido, pasamos a la capa central del sitio, la capa de presentación. Una de las grandes cosas acerca de esta era de la construcción del sitio web es la separación entre la presentación y el contenido. Es este sistema en sí lo que hace que sea tan fácil cambiar el aspecto de tu sitio web cambiando simplemente su actual tema por uno nuevo (que en su sentido más básico es, en efecto, cambiar una hoja de estilo por otra).

El lenguaje que habla a esta capa de presentación es CSS (Cascading Style Sheets, en español, Hojas de estilo en cascada) y es este CSS lo que vamos a ajustar para realizar cambios de estilo en nuestro tema Twenty Thirteen.

Siempre que miremos la estructura CSS como un lenguaje observaremos tres cosas:

Así que si queremos ajustar algo como el titular de primer nivel, la etiqueta h1 será nuestro selector, como puedes ver:

Lo siguiente es la propiedad, y en este caso la propiedad que queremos cambiar va a ser el color, también, en CSS usamos la ortografía americana. Así que mientras escribo color en el contenido, cuando escribo en el código, usa color.

Finalmente estableceremos el valor. Ahora, en el caso de los colores podemos establecer el color de tres maneras:

  1. Nombres de los colores
  2. Código hexadecimal
  3. Valores de color RGB

En su mayor parte vamos a utilizar valores hexadecimales, si deseas descubrir más sobre los otros valores, puedes encontrar una referencia aquí. En este caso estamos cambiando nuestro texto a blanco, que en hexadecimal es #FFFFFF.

Por lo tanto, con eso en mente, y para empezar a conseguir que nuestro tema se vea un poco más 'nuestro', vamos a cambiar primero la fuente del texto tanto en el titular como en el contenido del cuerpo. Así que comienza abriendo Filezilla y navega a la ventana remota a la hoja de estilo de tu tema hijo, luego haz clic con el botón derecho en el archivo style.css y elige Ver/Editar.

6-bwwp_6-file-edit

Haz clic y verás que el archivo se abre en tu editor de texto.

7-bwwp_6-file-edit-2

IMPORTANTE

Antes de ir más lejos, vamos a guardar una copia de nuestra hoja de estilo en nuestro escritorio a modo de copia de seguridad. Esto se debe a que estamos editando en vivo en el servidor y queremos tener un respaldo por si hacemos algo que rompa nuestro código.

Por lo tanto, antes de hacer cualquier otra cosa, en Text Wrangler con tu archivo pulsa CMD + A para seleccionar todo el texto. Pulsa CMD + C para copiarlo y abre un nuevo archivo en Text Wrangler (CMD + N). Pega el texto copiado en el nuevo documento (CMD + V) y guarda ese archivo como una copia de seguridad en tu escritorio. De esta manera, si algo sale mal, siempre podrás copiarlo en el archivo que hayas editado en último lugar y guardarlo en el servidor, restaurando el sitio a la última versión de trabajo.

Sigue el anterior proceso y guarda este archivo cada vez que hayas realizado un cambio (un cambio que haya funcionado según lo esperado), de esta manera el archivo siempre se corresponderá con tu última versión. (Hay un montón de formas increíbles y más complicadas de cuidar de este control de versiones. Para un completo principiante, este es un buen inicio, si recuerdas mantenerlo)

Bien, ¡ahora ya estamos preparados para ser creativos!


Cambio de fuentes

Para cambiar las fuentes de un sitio tenemos que tener acceso a los archivos de fuentes que tengamos alojados. Esto solucionará el hecho de que no todos los ordenadores por ahí tienen las mismas fuentes cargadas en su sistema que las que tenemos nosotros. Por lo tanto, una de las grandes cosas a las que tenemos acceso a día de hoy son algunas fuentes web alojadas de agradable aspecto, proporcionadas por Google Web Fonts de forma gratuita. Para nuestro sitio, hemos encontrado dos fuentes que funcionan muy bien juntas, Rancho para los titulares, y Gudea para el texto del cuerpo.

Por lo tanto, en el sitio de Google Fonts, añade estas dos fuentes (Rancho y Gudea, o cualquier par de tu elección) a una colección; presiona la pestaña Usar y luego la pestaña @import para tomar el siguiente código y pegarlo en nuestra hoja de estilos:

8-bwwp_6-text-style-edits-2

Esto le indica a nuestro tema dónde encontrar la fuente. A continuación le diremos a nuestra hoja de estilos dónde mostrar la fuente editando un par de selectores, pero ¿cómo sabemos en qué elementos queremos trabajar o incluso qué selectores podemos modificar?


Uso de herramientas de desarrollo

Una de las cosas más interesantes de los actuales navegadores es el gran número de herramientas disponibles para ayudar a los desarrolladores. En Chrome se denominan Herramientas para desarrolladores y puedes acceder a ellas haciendo clic con el botón derecho en el elemento de la página web que quieras inspeccionar y seleccionando después Inspeccionar elemento. En Firefox la herramienta de desarrollo se denomina Firebug y se puede obtener mediante la instalación de una extensión (Firefox también tiene incorporadas sus propias herramientas de desarrollo), en Safari vienen incorporadas, pero hay que activarlas (Preferencias > Avanzado > Mostrar menú de desarrollo en la barra de menús).

En cualquier caso, inspeccionemos el titular del sitio. Haz clic con el botón derecho sobre el texto del titular y, a continuación, elige Inspeccionar elemento

9-bwwp_6-inspect-element

Haz clic en eso, lo cual mostrará el panel de herramientas en la parte inferior de la página en la que estamos.

10-bwwp_6-inspect-element-2

A la izquierda del panel se encuentra la sección de elementos HTML con el elemento que tenemos seleccionado resaltado. A la derecha está el CSS. Habiendo seleccionado el elemento <h1> en el HTML, podemos desplazarnos a través del CSS de la derecha para encontrar todos los selectores que están operando sobre este HTML. Si te desplazas hacia abajo solo unas pocas líneas, encontrarás una secuencia de selectores de titulares con una propiedad llamada font-family.

13-bwwp_6-inspect-element-4

Una de las mejores cosas de las herramientas para desarrolladores es que puedes editar estas propiedades y ver una simulación de los cambios en vivo sin ningún efecto real sobre tu sitio en vivo para otros usuarios, y cuando tengas el selector con el aspecto como deseas, puedes copiarlo en la hoja de estilo de tu tema hijo. Así que coloca tu cursor sobre la propiedad (empezando por la palabra Bitter) y, como ya hemos guardado la fuente Rancho en nuestra hoja de estilo usando el selector @import, podemos cambiar la fuente actual Bitter en el inspector a 'Rancho' para ver como cambian nuestras fuentes en tiempo real.

13-bwwp_6-change-font-family

Si estamos satisfechos con esta nueva fuente podemos copiar el CSS del Inspector y pegarlo en nuestra hoja de estilo.

Selecciona el código desde los selectores que comienzan en h1 hasta los corchetes de cierre y cópialo.

14-bwwp_6-header-new-font-2

A continuación, pega el código en tu hoja de estilos.

15-bwwp_6-header-new-font-3

La naturaleza de las hojas de estilo es que su contenido tiene efecto de forma sucesiva. Si hay varios selectores en una hoja de estilos para un elemento HTML determinado, el que se encuentre en la parte inferior de la página es el que tiene la primacía en la jerarquía y, por lo tanto, es el que muestra el explorador.

Aquí, en nuestro caso, estamos importando la hoja de estilo en la parte superior de nuestro tema hijo, por lo que todo el nuevo código que estamos escribiendo ahora viene al final del código existente en el tema principal. Como consecuencia, nuestro código es el código que se aplicará cuando se muestre el sitio. Además, debido a que el código que pegamos contiene líneas que no estamos cambiando, y por lo tanto, mantener estas líneas en efecto duplicaría el código existente (es el mismo en el tema padre, por lo que no necesitamos usarlo de nuevo en el tema hijo), eliminaremos las líneas por encima y por debajo de la propiedad font-family, ya que no son necesarias.

16-bwwp_6-header-new-font-5

Ahora, guardamos nuestra hoja de estilo, luego pasamos a FileZilla donde deberíamos ver esta alerta:

19-bwwp_6-save-file-zilla

Si estás satisfecho con los cambios, tienes una copia de seguridad en el escritorio y estás listo para continuar, pulse para sobrescribir el archivo ubicado en el servidor. A continuación, dirígete a tu sitio para actualizar la página y ver publicados los cambios.

20-bwwp_6-text-style-titles

Una vez que hayamos hecho esto a las fuentes de los titulares, haremos lo mismo con los textos del cuerpo. Así que manteniendo tu sitio abierto, haz clic con el botón derecho en una parte del texto del cuerpo y elige Inspeccionar elemento. En el inspector CSS, busca el selector de font-family en el panel CSS y, a continuación, cambia el valor de Source Sans Pro a 'Gudea'. En esta coyuntura cabe señalar que el selector que estamos editando no es realmente un selector p (para los párrafos) como cabría esperar, en realidad el selector que está afectando a los párrafos en este caso es el selector html (puedes comprobarlo en el inspector ya que aparece oscurecido, los atenuados en esa matriz selectora no afectan a este fragmento concreto de texto), en este caso html es un selector primario que afecta a TODOS los elementos que descienden de él en la página.

13-bwwp_6-change-font-family-2

De todos modos, copia ese texto, desde el selector hasta el corchete de cierre, tal como hicimos más arriba, en tu hoja de estilo. En este caso, no es necesario eliminar ningún selector no utilizado, ya que font-family es el único. Guarda y carga el archivo.

21-bwwp_6-text-style-titles

Puedes ver como he añadido en el código anterior un par de líneas a modo de comentarios, envueltos en los siguientes caracteres /* para abrirlos y luego, */ para cerrarlos. Te sugiero que te acostumbres a dejar notas de esta manera para que más adelante puedas encontrar y entender fácilmente qué hiciste en tu código.

Lo siguiente que estoy haciendo es empezar a recorrer el sitio existente con mi Inspector y elegir todos los elementos cuyos colores quiero cambiar... y hay una buena lista.

A continuación, la barra de navegación y los enlaces

22-bwwp_6-nav-style-changes

Ok, ¡así que ahora que tienes los conceptos básicos de lo que es posible hacer puedes recorrer sistemáticamente el sitio publicado, buscar los selectores que desees editar y jugar con ellos en tu inspector, ajustar la configuración, copiarlos y pegar sus nuevos cambios en la hoja de estilo del tema hijo!

Podría proporcionarte un listado con todos los cambios que he hecho en la hoja de estilo para conseguir que el tema Twenty Thirteen tenga el aspecto que ves en esta imagen de ejemplo, pero ¿dónde estaría la diversión?

2-bwwp_6-blue-site-colours

Conclusión

Aunque mirar el código de un sitio a través de las Herramientas de desarrollo puede resultar bastante abrumador. Pero a medida que te familiarices con cómo se relaciona y actúa el CSS con los elementos HTML, empezarás a ver cuáles son las posibilidades. ¡Es un mundo a explorar desafiante y emocionante! Así que pasa algún tiempo jugando con el tema esta semana y ver si se puede conseguir que se ve como la imagen azul de arriba.

La próxima semana, antes de publicar la siguiente lección te daré la hoja de estilo que le dió a Twenty Thirteen este precioso tono de azul.

P.S. Si todavía te sientes un poco nervioso usando HTML y CSS recuerda, puedes echar un vistazo a 30 días para aprender HTML y CSS: un curso premium gratuito de Tuts+

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.