All posts by admin

Sticky nav en wordpress con css

En muchos blogs y páginas web se ha puesto de moda dejar fija la barra de navegación, esto es algo muy sencillo de hacer y que aporta mucho al blog, ya que cuando alguien está navegando, no tendrá necesidad de subir hasta arriba si quiere acceder a alguna de las opciones del menú.

Para hacer tu sticky nav en wordpress estoy segura de que existen mil formas, pero yo voy a enseñaros la más sencilla que se me ha ocurrido, aunque quizás no sea la más correcta.

Digo que es la más sencilla porque vamos a hacerlo mediante css, y no vamos a necesitar tocar absolutamente nada del header, ni de las funciones.

El tema que tengo activado es un tema hijo del Twenty Thirteen, y es sobre el que he hecho las modificaciones, no puedo asegurar que estas modificaciones funcionen sobre cualquier otro tema de wordpress.

Las modificaciones son las siguientes:

Con esto lo que hemos hecho es muy sencillo de entender, con el z-index hemos puesto la barra de navegación en el eje  z por encima del resto de cosas,  que estarán en el eje 0.

Con position:fixed, hemos dejado fija la posición de la barra, por lo que no va a cambiar aunque bajemos y naveguemos por la página.

Y poniendo un margin-top negativo hacemos que la barra de navegación suba y se ponga arriba del todo. Quizás con este número tenéis que jugar un poco, dependiendo de si habéis modificado la barra de navegación, o si habéis añadido algún elemento que no estuviera en el tema por defecto.

Una vez que hemos hecho esto, es posible que si tenemos alguna imagen en la cabecera se nos quede oculta detrás de la barra de navegación. Pero eso lo arreglamos con un par de modificaciones.

Primero ponemos en el header un margin-top:

Y ahora nos quedará de nuevo nuestra barra de navegación descuadrada, así que lo mismo que le hemos quitado de margin-top al header se lo tenemos que poner sumar al margin de la barra de navegación, que finalmente quedará así:

Vuelvo a repetir que los px de los margenes pueden variar un poco, dependiendo de si el tema del que partís no es el mismo o si habéis añadido algo más a la barra de navegación, pero  de todos modos, sólo tendréis que jugar con un par de números hasta dejarlo perfecto.

Cómo crear un tema hijo en WordPress

Una de las decisiones más importantes al crear un blog es el aspecto y el tema que vamos a usar. En wordpress hay muchos temas que pueden gustarnos más o menos, pero casi seguro que no cumplen al 100% lo que estamos buscando. así que seguro que tendremos que hacer modificaciones.  Vamos a ver porque los temas hijos en wordpress pueden facilitarnos la vida.

La primera opción que se te puede pasar por la cabeza es entrar en la máquina y modificar directamente los ficheros del tema que tienes instalado. Esto puede provocar un montón de problemas, ya que, olvidar un simple ‘?’ o borrar alguna condición que no teníamos claro para que servía puede hacer que tu blog quede inutilizado.

Pero bueno, supongamos que sabemos php, html y css y que los cambios que vamos a hacer en nuestro blog no van a provocar errores. Así que los hacemos, todo queda justo como queríamos, y dos días después wordpress o el tema del que partimos hace una actualización que añade nueva funcionalidad. ¿Que hacemos? ¿Actualizamos y perdemos nuestros cambios? ¿Nos quedamos eternamente desactualizados?

Para prevenir estos problemas hay que evitar modificar los ficheros originales del tema que queremos usar y crearnos nuestro tema hijo.

¿Cómo crear un tema hijo en wordpress?

Lo primero que debemos hacer es elegir un tema padre, del que, al principio vamos a heredar toda su funcionalidad, y que después podremos ampliar o modificar. En mi caso voy  a partir del tema Twenty Thirteen que es el que más se parece a lo que quiero para mi blog.

Para crear el tema hijo nos conectarnos a la máquina donde tengamos montado el wordpress, y accedemos a la carpeta wp-content/themes, en esa ruta vemos el listado directorios con los temas que tenemos instalados en wordpress. Creamos una carpeta nueva con el nombre del tema que queramos poner, en este caso tweentythirteen-child.

Una vez creada la carpeta, es necesario indicar que este tema va a ser el tema hijo de tweentythirteen, para ello creamos dentro de la carpeta tweentythirteen-child un fichero style.css con el siguiente contenido:

Con esto, ya tenemos creado el tema hijo que hereda toda la funcionalidad y aspecto del tema padre.

Si accedemos a la administración de wordpress aparecerá algo así:

 

Trabajando sobre el tema hijo

Una vez que tenemos creado el tema hijo podemos empezar a modificar su aspecto y funcionalidad. Para esto, dependiendo de lo que queramos hacer tendremos que trabajar de la siguiente forma:

  • Modificar estilos: En la hoja de estilos styles.css que hemos añadido a la carpeta del tema hijo podemos sobreescribir cualquier estilo que queramos del tema padre o añadir elementos nuevos.
  • Modificar fichero php (excepto functions.php): Cualquier fichero .php que esté en el tema padre puede ser sobreescrito en el tema hijo, para ello, simplemente hay que crearlo con el mismo nombre en la carpeta del tema hijo. Lo más recomendable es copiar el fichero del tema padre completo y modificarlo.
  • Añadir nuevos ficheros php: Si lo necesitamos podemos añadir ficheros .php nuevos que no estén en el tema padre.
  • Añadir funciones a functions.php: Este fichero se trata de una forma un poco especial, ya que este fichero es el único que no sobrescribe al fichero del tema padre. En concreto las funciones que declaremos en el tema hijo, se cargarán antes que las del tema padre.
    Si queremos añadir una función nueva, es necesario incluir un fichero functions.php en la carpeta del tema hijo con las etiquetas de php, de la siguiente forma: