WordPress práctico: Creación básica de temas

El archivo functions.php

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Otro archivo muy importante en los temas de WordPress es el archivo functions.php. En él podremos dar de alta elementos como menús, crear funciones que se ocupen de la configuración y muchas otras tareas. En este vídeo vamos a asociar archivos de JavaScript al tema, usando la automatización con Gulp y functions.php.

Transcripción

Generalmente se suele pensar que cuando estamos construyendo un tema de Wordpress, ese tema va a consistir solamente en etiquetas HTML, y luego un poco en estilos, CSS y algo de JavaScript. Sin embargo, se utiliza bastante PHP. Y hay un archivo en concreto, que se ocupa de la configuración inicial del PHP y que es fundamental, que es el archivo functions.php, que está dentro de la raíz del sitio. No es imprescindible, se puede trabajar sin él, pero es un archivo que conviene tener configurado. Underscore, de hecho, ya lo configura por defecto, y tiene las características básicas, digamos, más importantes. Está muy bien dedicar un tiempo a conocer este archivo, porque nos puede servir en un momento dado para añadir nuevas características, nuevos elementos o eliminarlos. Lo primero de todo, tenemos una línea condicional que pregunta si existe una función que sirve para el setup, que es esta de aquí. Esto, en realidad, sirve para trabajar con herencia, para que, así, si hay un tema que hereda a otro, se lance la función setup correspondiente al tema que tiene que ser. En realidad, hay varias funciones, como es en mi tema setup, o este mitema_content_width por ejemplo, o widgets_init, que todas empiezan por la palabra mitema. Eso es para distinguir las funciones de mi propio tema de las del resto de Wordpress, y, así, que no haya problemas. Una vez que creo cualquier función, después lo que hago es utilizar el método add_action que sirve para añadir esa función asociándola a una característica concreta Wordpress. De hecho, en este caso, por ejemplo, esa función setup, en realidad, lo que se está añadiendo es a la función que se va a ejecutar después del setup del tema. O sea, digamos que es la función que inicializa el tema, después de haberse cargado en Wordpress. Y, dentro de ella, tenemos funciones que sirven para varias cosas. Por ejemplo, este load_theme_textdomain sirve para definir de dónde va a sacar los lenguajes que se van a utilizar en el tema, quiero decir, las cadenas de caracteres que van a servir para mostrar textos, por ejemplo, para pequeños botones o para cosas así dentro de mi tema. Aquí lo podemos ver, el copyright, etc. Pues en esta primera línea definimos que va a haber traducción posible y de dónde la va a sacar. En segundo lugar, vamos a tener muchos métodos add_theme_support. Aquí vemos unos cuantos. Todos ellos hacen lo que dicen añadir soporte al tema para una característica concreta. Este primero sirve para trabajar con RCSS. El segundo para añadir etiqueta título. El siguiente sirve para permitir la utilización de las imágenes relacionadas con los posts, o sea, que así pueda hacer, por ejemplo, un listado de posts en los que salga la imagen relacionada. Las siguientes líneas, no es exactamente añadir soporte para algo, sino añadir algo en concreto. Este register_nav_menus sirve para añadir nuevos menús a mi sitio. Es un array en el que de momento hay uno, pero podría añadir más. Entonces, en este caso estoy dando un identificador único al menú, menú-1, y le estoy asignando el nombre Primary, que es el que se va a utilizar luego para añadir elementos a ese menú desde la administración del sitio. Pero podría añadir más, podría añadir un menú secundario, por ejemplo. La siguiente característica también es importante, sirve para definir a qué elementos puedo añadirle etiquetas HTML5 específicas, por ejemplo, la galería, en la que voy a tener imágenes, y, entonces, si está añadido dentro de los elementos HTML5, eso va a servir para que pueda añadir etiquetas HTML5 como pitcher, rodeando las etiquetas IMG. Dicho de otra manera, que pueda utilizar etiquetas HTML5 en vez de HTML normal para los elementos que estoy definiendo en este array. El siguiente elemento para el que se añade soporte es el custom-background. En realidad, aquí, de lo que hablamos es del customizer, de la personalización, y le estoy diciendo que podamos modificar el color de fondo o la imagen de fondo. Vemos que también se añade la posibilidad de hacer el refresco selectivo de widgets. Aparte de estas opciones de add_theme_support, podríamos añadir otras nuevas. Pasándome a la siguiente función, content_width, esto sirve efectivamente para controlar el ancho del contenido. Y es interesante ver que utiliza primero este GLOBALS. Este GLOBALS sirve para hacer referencia a elementos globales a todo el sitio web, a todo Wordpress, no solamente al tema. En concreto, trabaja sobre la variable content_with, y aplica un filtro en concreto para definir un 640 para los elementos que se cargan desde fuera del Wordpress. O sea, por ejemplo, serviría para definir que los vídeos cargados desde YouTube tengan 640 píxeles independientemente de lo que luego hagamos con las imágenes que estén cargadas dentro del sitio. Otra función muy importante es la que sirve para inicializar los widgets. Aquí defino cómo se van a ver esos widgets, cómo se van a pintar. También esto es interesante, porque en realidad, aquí, estoy utilizando PHP pero para añadir código HTML a los widgets cuando se crean. La primera propiedad es el nombre, hasta aquí no hay problema. El identificador para este sidebar, identificador único. La descripción. Y aquí voy a definir una descripción para este sidebar. Y luego lo que viene es la definición de cómo se van a pintar los widgets para este sidebar que estamos definiendo aquí. De hecho, por eso se llama el método register_sidebar. Igual que tengo uno, podría tener varios. Si quisiese tener un segundo sidebar, lo añadiría, le pondría nombre diferente le pondría un identificador diferente y podría también ponerle otra descripción obviamente. before_widget sirve para añadir etiquetas antes del widget, y after_widget para ponérselas después. Así que, gracias a ello, con estas dos propiedades hago que los widgets aparezcan rodeados por etiquetas si quiero, y con eso puedo conseguir que aparezcan, por ejemplo, rodeados con etiquetas que sirvan para añadirle información semántica, o, por ejemplo, para que tengan alrededor de ellas ciertos elementos que hagan que salgan de manera distinta, como si fuese una caja flotante o cualquier otra cosa así. Y before_title y after_title es la misma idea. En este caso, estamos definiendo que cada uno de los widgets va a tener un título escrito con una etiqueta H2, pero podría cambiarla, y también le está aplicando una serie de clases. Estas clases también podría haberlas aplicado perfectamente dentro del before_widget. La siguiente función es muy importante, sirve para añadir al sitio tanto estilos CSS como los archivos de JavaScript. Así que si tuviese que añadir algún estilo aparte de este style CSS, pues lo añadiría aquí. No tiene mucho sentido en principio, pero sí cabe la posibilidad de que me interese cargar un estilo concreto cuando se entra en una página concreta, o en un tipo de contenido concreto. Y eso mismo también puedo hacerlo con los JavaScripts, hacer que solo se carguen en un momento determinado. De hecho, tengo un ejemplo de esto. Tengo una sentencia condicional, en la que se pregunta que en caso de que sea singular y que además se admitan comentarios, entonces, y solo entonces, voy a añadir otro script más, que es el comment-reply que va a servir para añadir réplicas. En mi tema, en concreto, me interesa trabajar también aquí por un motivo. Yo he programado el gulpfile para que genere un archivo con varios JavaScripts míos, propios, combinados, para que se carguen en el tema. Ese archivo se va a llamar all.min.js. Pues voy a tener que copiar esta ruta para hacer que me cargue ese archivo. Para ello, utilizo esta última línea, la copiaría, la pegaría, le cambiaría el identificador de ese JavaScript. Y por otro lado, también cambiaré la ruta de donde tiene que sacarlo, y haré que me cargue ese all.min.js. Al añadir esta línea de código, estoy haciendo que automáticamente me cargue este nuevo archivo. Así, a partir de ahora, cuando añada nuevos archivos de JavaScript a la carpeta custom automáticamente esos archivos generarán este archivo all.min.js, y ese archivo aparecerá dentro de los archivos cargados por mi sitio. Y, de hecho, ahora que lo he guardado, si recargo este nuevo tema y miro en la consola, veré que le estoy pidiendo en concreto a ese archivo de JavaScript que escriba "Hola mundo", y aquí vemos efectivamente que se está escribiendo. Ese es el código que he metido en este archivo custom. O sea, que podemos ver que efectivamente está funcionando. Para terminar, tengo varios require. Los require sirven para pedir que me cargue archivos en concreto. Este get_template_directory sirve para recuperar la ruta de donde tiene que sacar Wordpress los archivos del template. O sea, esto me devuelve la ruta del template dentro de la estructura de Wordpress. Entonces, a ello le está añadiendo inc, y luego diferentes archivos. Son los archivos que tengo en la carpeta inc, y aquí podría añadir nuevos archivos, y para que se cargasen añadir también la línea relacionada en este functions php. Y, en concreto, hay uno muy importante, que es el del final, el customizer.php. Este archivo es el que se ocupa de poner en marcha el customizer, el que se ocupa de configurarlo y pasar las características definidas desde él.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.