En el articulo anterior, preparamos la carpeta para nuestro nuevo tema, y creamos los principales ficheros que necesitamos, aunque los dejamos vacíos; en este articulo, los llenaremos. Para este primer paso, nos limitaremos a llenar los ficheros con el código mas sencillo posible, y descubrir como funciona, dejamos para un capitulo posterior,el como potenciar nuestro primer tema. Vamos a ir explicando el significado de cada linea que incorporemos, aunque también, para los menos trabajadores, al final incluiremos un fichero comprimido con toda la carpeta.

WordPress se encargará de cargar todos los ficheros uno detrás de otro, ya veremos como, por lo que somos nosotros los que deberemos controlar y asegurarnos que todas las etiquetas se cierran en el momento que nos interese, aunque sus aperturas, estén en distintos ficheros que sus cierres.

El orden de carga es:

  • cabecera->header.php
  • cuerpo->index.php o page.php 0 archive.php o…
  • barra lateral->sidebar.php
  • Pie->footer.php

La propuesta es que antes de montar el tema, seria conveniente que hicierais toda la pagina en html convencional y después de probarla, distribuyerais el contenido en cada uno de los ficheros, para así no dejaros el cierre de ninguna etiqueta.

El resultado de todo el trabajo reconozco que no es muy vistoso, pero creo que si es muy ilustrativo.

2014-08-01_18h15_40

El fichero header.php

Empezamos cargando el fichero header.php, para que lo abrimos con nuestro editor y copiamos  las siguientes lineas:

2014-08-01_18h54_56

  1. html – Declara que se inicia el documento html y se cerrara en footer.php Toda nuestra pagina deberá estar entre estas dos declaraciones
  2. head – Declara que se inicia la parte de cabecera del documento. Lo que se escribe en cabecera no aparece en pantalla.
  3. Title – Lo que nos aparece en la pestaña del navegador
  4. link – Nos incorpora la hoja de estilos desde la ubicación y con el nombre configurado por WordPress (ver bloginfo()).
  5. /head – informa del final del bloque head
  6. body – Inicio del cuerpo de la pagina. Aquí debe estar todo el código html que se ha de mostrar en la página; la etiqueta se cerrara en footer.php
  7. Las lineas siguientes, hasta el final, es código html que nos sirve para abrir un div que se cerrará en sidebar.php, o en footer.php si no hay sidebar.php

El fichero index.php

Este fichero es que se utilizará por defecto siempre que no se encuentre uno mas adecuado, según el cuadro de sustitución que comente en el capitulo anterior.

Tambien debéis tener en cuenta, que cuando he hablado del orden en que wordpress va a cargar los ficheros, no os lo dije, pero este el el único fichero que realmente cargará wordpress, y desde este fichero, vamos llamando a los demás.

Su contenido:

2014-08-01_18h57_46

Vamos a revisarlo

  1. get_header – Es una función WordPress que hace que nuestro fichero header.php aparezca en esa posición tal y como lo escribimos
  2. div – Abrimos una caja para que contenga todo lo que no es cabecera o pie. En nuestro caso contendrá los artículos, y la barra lateral
  3. div – Abrimos una caja para que contenga los artículos, páginas,…osea todo lo que será cuerpo.
  4. h1 – se indica que viene un titulo de categoría h1, la mas importante.
  5. if (have_post())… Aqui se inicia el famoso bucle de wordpress, las siguientes lineas, hasta la «endwhile» se ejecutarán para cada elemento encontrado, WordPress preparará la lista de elementos según se haya indicado categoría, fecha,… Dentro del bucle solo hay disponible un elemento
  6. h1 – Iniciamos titulo 1
  7. the_title()  – función de WordPress que nos trae el titulo del elemento (articulo o pagina…)
  8. /h1 – Finaliza Titulo 1
  9. h4 – Iniciamos titulo categoría 4
  10. Escrito… Muestra el valor en la pantalla de navegación
  11. the_time() función de WordPress que muestra la fecha del elemento activo, las letras que aparecen entre los paréntesis establecen el formato
  12. /h4 – finalizamos el titulo 4
  13. p – iniciamos párrafo
  14. the_content() función de WordPress que nos trae el contenido del elemento, puede facilitarnos la entradilla (hasta el «Seguir leyendo») o el articulo completo. El texto que figura entre los paréntesis  es lo que aparecerá para indicar el «More…»
  15. /p – Finalizamos párrafo
  16. hr – Etiqueta html que hace que aparezca una linea horizontal en la pantalla
  17. endwhile; else: – Se trata de dos ordenes de PHP, la primera indica que finaliza el bloque while, por lo que el programa volverá al inicio del bucle (linea 5) para procesar el siguiente elemento. Cuando se acaben los elementos a procesar, se debería continuar en la siguiente linea, pero…el else indica que empiezan las instrucciones que se ejecutaran ciando no se cumpla el if de la linea 5; osea cuando no se hayan encontrado elementos. En resumen, si se ha entrado en el while, el proceso pasara a la linea 22, final del if
  18. p – Iniciamos párrafo, para cuando el if de la linea 5 ha fallado porque no había ningún artículo
  19. _e() – Función de wordpress que nos permite traducir texto y enviarlo a pantalla.
  20. /p – Finalizamos el párrafo
  21. endif – orden PHP que indica que ha terminado el if
  22. /div – no cierra la caja que habíamos abierto en la linea 3 para «content»
  23. get_sidebar() – función wordpress que coloca aquí el contenido del fichero sidebar.php
  24. /div – cierra la caja abierta en la linea 2 (main) y contendrá el articulo (en «content»), y la barra lateral
  25. div – definimos una caja vacía que la llamamos «delimiter» y que luego, con la hoja de estilos conseguiremos que nos garantice la correcta ubicación del Pie.
  26. get_footer() – función de wordpress que nos deja en este punto, el contenido del fichero footer.php

El fichero sidebar.php

Nuestro siguiente paso, es cargar el fichero que vamos a utilizar para llenar nuestra barra lateral, sidebar.php La primera versión va a ser muy sencilla, pero empezareis a comprender que ventajas aporta desarrollar un tema propio, como que cosas que luego tendríamos que incorporar como widget, ahora las introducimos en el diseño base. En este caso, hemos incorporado la lista de categorías y la lista de archivos Aquí esta el código a colocar en sidebar.php 2014-08-01_19h00_13

  1. div – Abrimos una caja llamada «sidebar», que contendrá toda nuestra barra lateral
  2. h2 – Iniciamos titulo 2
  3. _e() – función de wordpres que traduce el literal que hay dentro del paréntesis, y lo saca a pantalla
  4. /h2 – finalizamos titulo 2
  5. ul – etiqueta html para iniciar una lista desordenada
  6. wp_list_categoriesfunción wordpress que presenta todas las categorías que tengamos definidas, en forma de lista. La forma de presentación y el orden se indica dentro del paréntesis.
  7. /ul – cerramos la lista desordenada
  8. h2 – iniciamos titulo 2
  9. _e() – función de wordpress para traducir y presentar
  10. /h2 – finalizamos titulo 2
  11. ul – etiqueta html para iniciar una lista desordenada
  12. wp_get_archives() función de wordpress que lista todos los archivos que hay, según las opciones que indiquemos entre paréntesis.
  13. /ul – Cerramos lista desordenada
  14. /div – cerramos la caja «sidebar» que abrimos al principio del fichero.

Fichero footer.php

El fichero que se ocupa de controlar el contenido del pie, se compone de momento de muy poco código, abre una caja llamada footer que contiene un titulo h1 con la palabra Pie y luego cierra el div «wraper» que abrimos en la linea 7 de header.php, luego cierra el body que abrió en la linea 6 del header.php, y termina cerrando el html que abrió en la linea 1 de header.php.

En código, esto:2014-08-01_19h02_59 y con esto, se acaba todo el código que necesitáis para el tema, ahora solo queda la hoja de estilos.

El fichero style.css

Las hojas de estilo, que eso es lo que contienen este fichero se encargan de controlar la forma en que se vera el codigo html de la pagina. Para que se pueda utilizar las reglas de estilo contenidos en un fichero, este se ha de enlazar a la pagina, y eso es lo que estamos haciendo en la linea 4 de header.php, ya que wordpress traducirá esto:

2014-08-01_19h04_05

por esto: 2014-08-01_19h05_33 en donde vemos que enlaza el fichero style.css que esta en la misma carpeta del tema. El contenido del fichero es:

body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
  1. Establece que todo lo que este dentro de la etiqueta «body» tendra alineacion centrada
  2. Define que la caja llamada «wrapper» ocupara una anchura del 90% de la disponible, estará centrada, y tendrá borde
  3. Define que la caja llamada «header» tendrá borde
  4. Define que la caja «content» ocupara el 75% de la anchura disponible, tendrá borde, se alineara a la izquierda, y dejará que la siguiente caja se coloque a su altura, si cabe.
  5. Define que la caja «sidebar» tenga una anchura del 23% de la disponible, y se colocara a la derecha, Como la caja anterior «content» solo ocupa el 75%, y ella ocupa el 23%, las dos caben en la misma altura.
  6. Define que la caja «delimiter» no pueda tener nada a la derecha o a la izquierda, por lo que actuara alineando verticalmente la caja «main» y la «footer»
  7. Define que la caja «footer» tendrá borde
  8. Define que todos aquellos elementos a los que se le indique «class=»title», tendrán un tipo de fuente «verdana» negrita de 11 puntos

Espero que hayáis conseguido entender un poco todo este galimatias, si no es así, no dudéis en preguntar, y si no, en un próximo articulo ampliaremos el tema para poder hacer mas cosas, y mejores, con él.

Activando el tema

Antes de activarlo, y para los menos trabajadores, si no queréis mancharos con el código…y que quede claro que lo mejor es ir copiando las instrucciones en cada fichero, para que os empiecen a «sonar», las cosas, podéis descargar todos los ficheros del tema de aquí: miPrimerTema

Solo tendréis que descompactarlos y dejarlos en la carpeta Themes de vuestro wordpress, que esta bajo «wp-content», los demás, tendréis que subir vuestra carpeta al servidor…

Ahora ya para todos, para que podáis ver el comportamiento del tema, deberéis is a vuestra instalación de wordpress, y en administración, en Apariencia->Temas, os aparecerá el nuevo tema, aunque no tendrá la imagen de muestra, deberéis activarlo, y…disfrutar del mismo.

Wordpress Castellano: Apuntate en este grupo de Facebook para consultar cualquier duda que tengas

Recursos formacion: y dale un "Me gusta" a esta pagina para estar al dia de todos nuestros cursos gratuitos

Un comentario sobre “WordPress – Mi primer tema (II)”

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.