2014 Crear un Theme para Wordpress
Rafael Carmona & Luis Pino Wordpress 29/01/2014
Í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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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 10 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 11 de 19
Editamos el ‘style.css’ una vez más, añadimos lo siguiente.
Página 12 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 13 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 14 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 15 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 16 de 19
Tras acabar de editar el tema, comprobemos los resultados.
Pรกgina 17 de 19
Original: AsĂ es el tema original de Orbit.
PĂĄgina 18 de 19
Nuestro tema: AsĂ ha quedado nuestro theme.
PĂĄgina 19 de 19