Theme de Wordpress

19
2014 Rafael Carmona & Luis Pino Wordpress 29/01/2014 Crear un Theme para Wordpress

description

En esta revista os presentamos como crear un theme para el CM Wordpress.

Transcript of Theme de Wordpress

Page 1: Theme de Wordpress

2014

Rafael Carmona & Luis Pino

Wordpress

29/01/2014

Crear un Theme para Wordpress

Page 2: Theme de Wordpress

Página 2 de 19

Índice

Crear una base de datos con un wordpress ............................................................... 3

Creamos el ChildOrbit ............................................................................................... 4

Buscamos y editamos el CSS .................................................................................... 5

Creamos un fondo y borde ........................................................................................ 7

Comenzamos con los Action Hooks ........................................................................... 7

Creamos el archivo functions.php .............................................................................. 8

Editamos la disposición de la página ......................................................................... 9

Editamos el footer.php ............................................................................................ 10

Cambiar el menú de posición .................................................................................. 13

El resultado del menú será el siguiente .................................................................... 16

Buscamos el ccs del sidebar ................................................................................... 16

Original: .................................................................................................................. 18

Nuestro tema: ......................................................................................................... 19

Page 3: Theme de Wordpress

Página 3 de 19

Antes de empezar.

Crear una base de datos con un wordpress

Debemos crear una base de datos en el servidor WAMP para crear un wordpress y ahí

modificar el theme, no sea que mandemos al traste una página ya hecha.

Primero creamos un usuario.

Conectamos el WP con la base de datos y listo.

Page 4: Theme de Wordpress

Página 4 de 19

Comenzamos a crear el theme.

Creamos el ChildOrbit

Vamos a emplear la táctica llamada “Childtheme”, que consiste en editar partes de un

tema original haciendo llamadas a otra página que creamos nosotros.

Vamos a la carpeta ‘wp-conten’ y entramos en la carpeta ‘themes’ y dentro de esta

carpeta creamos otra llamada ‘childotbit’

Dentro de ella creamos un archivo css en el que incluimos lo siguiente.

Ahora ya tenemos un css dónde editar partes del css del tema original. También

podremos modificar el PHP utilizando la misma fórmula de invocar a otro archivo.

Pero para que los cambios surjan efecto, tenemos que activar el childorbit como tema

principal. Para ello debemos de ir a apariencia, temas y lo seleccionamos.

Page 5: Theme de Wordpress

Página 5 de 19

Vamos a nuestro site web que hemos creado para esta prueba y comprobamos que

tenemos el tema tal cual está el orbit.

Buscamos y editamos el CSS

Vamos a empezar por editar lo básico del CCS para comprobar que funciona y que

podemos editar cosas.

Con el botón derecho cliqueamos en el Título, por ejemplo, y seleccionamos

inspeccionar elemento.

Page 6: Theme de Wordpress

Página 6 de 19

Nos aparecerá abajo del navegador una

barra con el código html y a la derecha nos

aparecerá el código css.

Identificamos el código css que

corresponde al título y lo copiamos.

Ahora lo pegamos en la hoja de estilos que

creamos del childorbit. Cambiamos los

parámetros a nuestro gusto, como por

ejemplo:

Guardamos y visualizamos la página para ver el resultado.

Page 7: Theme de Wordpress

Página 7 de 19

Creamos un fondo y borde

Ahora vamos a añadir una especie de tabla alrededor del contenido de la página

dejando en otro color la parte sin contenido. Para ello buscamos el código del ‘div’

que envuelve al contenido.

Ahora debemos de ir al editor

de wordpress y editar el color

de fondo al que queramos, en

este caso hemos optado por

un gris clarito.

Después nos situamos en

nuestra hoja de estilo del

‘childtheme’ y escribimos lo siguiente.

Esto nos va a realizar que el fondo se

coloree de blanco y nos efectúe un borde

de 15 píxeles azul alrededor.

Comprobemos el resultado.

Comenzamos con los Action Hooks

Una de las técnicas que usaremos para modificar el PHP se llama ‘Hook’, que son funciones

que nos permiten insertar nuestro código personalizado sin modificar el original de la

plantilla. Existen dos tipos de ’Hooks’: Action y Filter, vamos a empezar con el Action.

Los Action Hook pueden tener diferente origen, están los Hooks del core de wordpress

y los de plantilla (no todas las plantillas tienen Hook). En este ejemplo localizaremos

los ‘Hook’ en la documentación.

Page 8: Theme de Wordpress

Página 8 de 19

Creamos el archivo functions.php

Vamos a crear un archivo que, como en el anterior caso con el CSS, llame a una

página del tema original y así poder modificarlo a nuestro antojo. Lo crearemos en la

carpeta del childtheme.

En este caso vamos a añadir tres enlaces al final de la página pero antes del pie de

página, visualizamos

el código.

Debemos añadir los

enlaces antes del

“#main-footer”.

Vamos a proceder a crear el php. Añadimos el siguiente código.

Este código añadirá una función antes del “content-container end” llamada

“add_my_links”. Esta función contiene una lista de enlaces.

Estas líneas nos darán como resultado lo siguiente.

Visto así, nadie tomaría enserio nuestra página

web. Así que vamos a editar el CSS para darle un

aspecto más dinámico.

Nos vamos a nuestra hoja ‘style.css’ y añadimos el

siguiente código.

Page 9: Theme de Wordpress

Página 9 de 19

Ahora los links quedarán tal que así:

Editamos la disposición de la página

En wordpress existen unos ficheros template que son los que dan la disposición de la

página. Vamos a ver una imagen para explicarlo mejor y ver también los ficheros

correspondientes.

Page 10: Theme de Wordpress

Página 10 de 19

Editamos el footer.php

Visto esto, vamos a proceder a crear el archivo footer.php en el child, que será una

copia exacta del original, pero vamos a limpiarlo para añadir nuestra personalización.

Así que el fichero quedaría tal que así:

Es necesario mantener la linea: <?php wp_footer(); ?>. Esto es un Hook utilizado por

el core de WordPress para añadir funcionalidades.

Ahora debe de haber desaparecido el ‘footer’ por defecto.

Page 11: Theme de Wordpress

Página 11 de 19

A continuación vamos a añadir nuestro ‘footer’ personalizado. Un mapa de google por

ejemplo y algo de información de contacto.

Y quedará tal que así. Sin estilos queda bastante feo, así que vamos a darle un

poquito de estilo para que quede adaptable a la página.

Page 12: Theme de Wordpress

Página 12 de 19

Editamos el ‘style.css’ una vez más, añadimos lo siguiente.

Page 13: Theme de Wordpress

Página 13 de 19

Y nos dará como resultado lo siguiente.

Cambiar el menú de posición

Vamos a cambiar el menú de posición y aplicarle estilos para dejarlo adecuado al

nuevo tema que estamos preparando.

Lo primero será abrir el archivo ‘header.php’ del tema original de Orbit.

Page 14: Theme de Wordpress

Página 14 de 19

Localizamos la parte de ‘en of #logo’. Debajo de esta parte nos encontramos con el

contenido de las redes sociales y debajo de este código, tenemos el código del menú

(marcado en rojo).

Lo que haremos es cortar ese código (ctrl + x) y lo pegaremos en el ‘function.php’

como ya hicimos anteriormente para añadir una especie de menú al final de página.

Insertamos el siguiente código en el ‘function.php’.

Esto nos añadirá el menú al final de la cabecera, y lo eliminará de dentro de ella

puesto que hemos borrado el código original del ‘header.php’. Veamos el resultado:

Una vez cambiado vamos a editarle el CSS para que sea más vistoso y acorde con la

página. Inspeccionamos el elemento en el mismo navegador como hemos hecho

anteriormente. De ahí obtenemos el siguiente código:

Page 15: Theme de Wordpress

Página 15 de 19

Este es el código

perteneciente al menú

original, hemos cambiado el

‘float’, lo que nos realizará un

cambio de posicionado del

menú.

Vamos a cambiar los bordes, fondo letra, etc. Para ello debemos de buscar en el style

original. Buscaremos la clase ‘.dropdown’

Como podemos observar

tenemos muchísimos

resultados de búsqueda de

‘.dropdown’. Todas estas

clases pertenecen al menú.

Copiamos todas las líneas y

las pegamos en el ‘style.css’.

Cambiamos el tamaño de la

fuente.

Ahora vamos a editar los

colores y el cuerpo de la letra.

Hemos establecido que sea blanco y rojo y un cuerpo algo menor que la negrita.

Page 16: Theme de Wordpress

Página 16 de 19

Con este

código vamos

a crear un

degradado en

el menú en

azul y negro y

un borde que

tendrá 5

píxeles de

rádio.

El resultado del menú será el siguiente

Por útimo vamos a intentar aplicarle al sidebar un aspecto más moderno.

Buscamos el ccs del sidebar

Inspeccionamos el elemento del sidebar.

Nos aparecerá esta clase, la copiamos

al ‘style.css’ y procedemos a editarla.

A la izquierda tenemos el CSS pegado

al archivo, el ‘aside’ es la principal, pero

también hemos tenido que indagar un

poco para cambiar más cosas.

Tras cambiarlo, el resultado será el

siguiente:

Page 17: Theme de Wordpress

Página 17 de 19

Tras acabar de editar el tema, comprobemos los resultados.

Page 18: Theme de Wordpress

Página 18 de 19

Original:

Así es el tema original de Orbit.

Page 19: Theme de Wordpress

Página 19 de 19

Nuestro tema:

Así ha quedado nuestro theme.