theme de wordpress
DESCRIPTION
En esta revista os presentamos como crear un theme para el CM Wordpress.TRANSCRIPT
2014
Rafael Carmona & Luis Pino
Wordpress
29/01/2014
Crear un Theme para 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
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.
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.
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.
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.
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.
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.
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.
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.
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.
Página 12 de 19
Editamos el ‘style.css’ una vez más, añadimos lo siguiente.
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.
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:
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.
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:
Página 17 de 19
Tras acabar de editar el tema, comprobemos los resultados.
Página 18 de 19
Original:
Así es el tema original de Orbit.
Página 19 de 19
Nuestro tema:
Así ha quedado nuestro theme.