Seleccionar página

Diseñar un un template para wordpress parece más difícil de lo que realmente es. Si eres desarrollador front-end y te mueves como pez en el agua con el css, te será bastante fácil.

No soy desarrollador ni diseñador, mi especialidad es el merkating, y este fue el motivo de aprender a desarrollar un theme para wordpress, el optimizar a nivel de velocidad la web.

Ficheros necesarios

Antes que nada, es necesario crear una carpeta a la que pondremos el nombre de nuestro tema. Dentro de este, crearemos una serie de ficheros en blanco que serán:

  • functions.php: aquí se recogen todas las funciones de nuestro tema que interactuarán con nuestro panel de administración
  • sidebar.php: el sidebar va orientado a los plugins de nuestro tema
  • header.php: este fichero será la cabecera que se insertará en todas las páginas. Es donde se cargarán todos los estilos y javascripts
  • index.php: es la página principal de nuestro tema, es decir, la homepage.
  • footer.php: es el fichero que se cargará al final de cada una de las páginas de nuestra web.
  • single.php: este fichero es el encargado de mostrar las páginas de los posts individuales.
  • page.php: este fichero se encarga de mostrar las páginas de nuestro wordpress.
  • style.css: este fichero se encarga de cargar los css de nuestro wordpress

Una vez tengamos todos estos archivos, es necesario introducir un encabezado a todos nuestros archivos completando los datos. Os dejo con un ejemplo de encabezado que podéis copiar y pegar al comenzar todos los ficheros:

Después de esto, si subimos la carpeta a nuestro directorio de temas de wordpress /wp-content/themes, podremos visualizarla dentro de nuestro activador de temas, en mi caso, llamé al tema theme-wp:

A pesar de que los ficheros mencionados arriba son los básicos, para este tutorial, agregaré 2 hojas más de estilos:

  • blog.css
  • page.css

Estas hojas de estilo, las usaremos para una carga selectiva de hojas de estilo, donde usaremos el css que más nos interese en función del tipo de página, para limitar la cantidad de código cargado.

functions.php

sidebar.php

header.php

index.php

footer.php

single.php

page.php

style.css

En nuestra hoja de diseño, pondremos algunos css básicos para poder visualizar algo

blog.css

page.css

Explicando el funcionamiento de los hooks y funciones

Ver todos los códigos así, puede ser algo algo confuso. El código anterior está compuesto por html, css y php. Mediante el código en php utilizamos los hooks y funciones para poder coger la información de nuestra base de datos y plasmarla en nuestro front-end.

Básicos

A continuación voy a mostrarte los hooks y funciones que he utilizado en el código anterior con una breve explicación. Para más ayuda sobre estos, te recomiendo que visites la página de referencia de wordpress para desarrolladores :

  • language_attributes(): inserta el idioma.
  • bloginfo(‘name’): inserta el nombre del blog.
  • is_front_page(): comprueba si la página es una página o un post.
  • bloginfo(‘description’): inserta las descripción del blog.
  • wp_title(»): muestra el título de la página para todas las áreas del blog.
  • bloginfo( ‘charset’ ): inserta los meta charset.
  • bloginfo(‘stylesheet_url’): inserta la hoja de estilos por defecto.
  • is_single(): nos dice si es una página cargada con single.php.
  • esc_url( home_url() ): esc_url checkea y limpia la url, mientras que home_url devuelve la url de la web actual.
  • wp_head(): escribe scripts o datos en la etiqueta head.
  • body_class(): muestra la clase para el elemento body.
  • wp_nav_menu( array( ‘theme_location’ => ‘header-menu’ ) ): con wp_nav_menu mostramos el menú de navegación, mientras que con
    array( ‘theme_location’ => ‘header-menu’ ) indicamos el menú que queremos usar que se encuentra declarado dentro de nuestro functions.php.
  • get_header(): carga el header.php.
  • have_posts(): realiza una consulta a WordPress para comprobar si existen posts.
  • the_post(): itera los posts que se muestran dentro del bucle.
  • the_permalink(): muestra el enlace permanente para la página actual.
  • the_title_attribute(): muestra el título actual. similar a la función the_title().
  • the_title(): muestra el título actual.
  • the_post_thumbnail(‘medium’): muestra la imagen destacada de la página o post con un tamaño medio (medium). También existen otros tamaños como thumbnail, large, full, etc.
  • the_author(): muestra el autor.
  • the_excerpt(): muestra el extracto del post.
  • get_footer(): carga el footer.php.
  • the_content(): muestra el contenido del post.
  • is_active_sidebar( ‘sidebar’ ): determina si el sidebar está en uso, es decir, comprueba si existen widgets en el sidebar.
  • dynamic_sidebar( ‘sidebar’ ): muestra el sidebar dinámico, en otras palabras, los widgets incluidos en el sidebar.
  • get_sidebar(): carga el template del sidebar (sidebar.php).
  • wp_footer(): carga los scripts y datos antes de cerrar con las etiquetas body y html.

Bucles de wordpress

El bucle que utilizo dentro de wordpress es para mostrar artículos de forma automática:

Con este código hacemos un bucle condicional, en el que si existen artículos de blog, mientras existan, se irá publicando el título, la imagen, el autor y un pequeño texto de introducción, en que de no tener, mostrará un pequeño mensaje de error en inglés.

Truco de optimización

Realmente, como puedes observar, hay más códigos de los necesarios, esto lo hice con el objetivo de optimizar un poco más el código de tal forma que también fuera para mi más cómodo trabajar a futuro con el template,

Carga selectiva de CSS y JS

Como puedes comprobar en el fichero header.php, realizo una carga selectiva de dos hojas de estilo diferentes, una orientada al blog, y otra orientada a páginas normales. El código en cuestión es este:

Al principio, realiciamos una comprobación de si la página es un artículo del blog o no, con if (is single()). Si es es un artículo de blog, carga el archivo blog.css, mientras que si no lo es, carga el page.css.

Lo que hago para este template, es tener tres css, uno genérico, otro ara para artículos del blog y otro para páginas, esto hace que me sea más fácil mantener un estandar para toda la web, aunque lo realmente óptimo, sería tener un único css para cada página.

Esto luego podemos solucionarlo con algún plugin, ya que habrán otros plugins que dejarán su css y será necesario igualmente unificarlos todos igualmente de una forma práctica.

Conclusiones

Como puedes comprobar, realizar un tema para wordpress es bastante sencillo. Quería incluir algunas cosas más, como la creación de nuevos diseños de páginas y plugins, pero creo que con todo esto es suficiente.

El tema, como podéis comprobar, está un poco en fase beta y la idea es ir mejorándolo poco a poco con el tiempo, así que con paciencia y mucho mimo, iré dando forma a lo que es el diseño de mi blog.

Dejo los archivos en Github por si alguien quiere descargar los archivos y subirlos directamente a su web.

Fuentes

¿Cómo crear un tema de WordPress responsive usando HTML5? – Diana C.

Cómo crear un theme para WordPress
5 (100%) 3 votes

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies