Comenzando con WordPress: personalización de la funcionalidad de nuestro sitio usando functions.php

Entonces, aquí estamos en la octava y última entrega de nuestra búsqueda para adentrarnos en un sitio web de WordPress. Espero que a estas alturas te sientas mucho más cómodo jugando con tus propios sitios. Una de las grandes cosas que he encontrado sobre WordPress es la gran cantidad de cosas que puedes hacer con él una vez que empieces a familiarizarte con cómo encajan las cosas.

En el tutorial de hoy vamos a abordar ese último archivo misterioso en nuestro tema que a menudo verás mencionado alrededor de las trampas; aquel en el que bien puedes haber pegado fragmentos de código antes sin saber realmente por qué. Hoy jugaremos con la plantilla de funciones (functions.php).

Para discutir profundamente sobre este misterioso documento no puedes pasar de lo que se discute en el Codex, pero en resumen, el archivo Functions es el medio por el cual podemos cambiar la funcionalidad predeterminada de algunos de nuestro sitio. Con este archivo también podemos ampliar aún más la funcionalidad del sitio. Es bastante poderoso, y hoy veremos solo un par de formas en que podemos usarlo para extender nuestro sitio web de prueba.

Antes de que empecemos

Necesitarás:

• Acceso FTP a tu sitio
• Tu software de edición de texto
• Una imagen de favicon de 32x32px guardada en formato .ico, llamada favicon.ico

Lo que haremos

• Agregar el código de seguimiento de Google Analytics (podrías usar un plugin para hacer esto, pero lo estamos usando como ejemplo)
• Agregar un favicon a tu sitio

Antes de continuar, deberíamos hablar un poco sobre cómo se comporta el archivo de funciones en el contexto de tu tema hijo. Es un poco diferente a las otras plantillas con las que hemos estado trabajando.

En un tema hijo, en lugar de reemplazar la funcionalidad del archivo correspondiente en el tema padre como hicimos en nuestro último tutorial, functions.php agrega o extiende la funcionalidad del tema padre. No lo reemplaza, que si lo recuerdas, es cómo se comportan las otras plantillas en un tema hijo.

Entonces, cuando se llama a nuestra página, y el servidor hace su magia juntando todas las plantillas, busca las funciones en el tema hijo, las ejecuta y luego mira al tema padre y ejecuta esas funciones también.

En segundo lugar, el archivo de funciones también es un archivo PHP, y las funciones que estamos pegando/ escribiendo incluirán código PHP y potencialmente algo de HTML. ¡Así que nos están ayudando a aumentar nuestra credibilidad geek! (¡choca los cinco!)

Entremos en ello.

Agregar código de seguimiento de Google Analytics

Debo decir que al principio, no hay nada de malo en agregar código de análisis usando un plugin. De hecho, la mayoría de los plugins que ofrecen esta funcionalidad (en lo esencial) no diferirán mucho de este proceso, simplemente guardan el código en un archivo de plugin. Dicho esto, es una ilustración útil y no demasiado desafiante para los fines de este ejercicio. Entonces, veamos.

1.Creación de nuestro archivo de funciones

Paso 1. Abre tu cliente FTP y ve al directorio de tu tema hijo.

Paso 2. En la lista de archivos de tu servidor remoto, haz clic derecho y selecciona Crear nuevo archivo.

Paso 3. Introduce el nombre del archivo de funciones como functions.php y pulsa OK.

Paso 4. Abre tu nuevo archivo functions.php en tu Editor de texto.

Paso 5. En este punto, necesitamos configurar el archivo para que nuestro servidor lo reconozca como un archivo PHP. Así que agrega una etiqueta PHP de apertura, como esta <?php, al principio de tu archivo.

Paso 6. Ahora estamos listos para pegar algo de código en nuestro archivo functions.php.

Este es el código que pegaremos, y debajo hay una explicación de lo que estamos viendo:

1

<?php

2

3

// Inserting Google Analytics Code to the Footer

4

add_action( 'wp_footer', 'mytheme_add_google_analytics' );

5

function mytheme_add_google_analytics() {

6

	?>

7

	<!-- Where we'll put the Google Analytics code that we get from google... -->

8

	<?php

9

}

10

11

?>

Ok, analicémoslo.

1

// Inserting Google Analytics Code to the Footer

En la línea 1 tenemos una oración que comienza con dos símbolos //. Este es un comentario, que no hace nada mediante programación, y sólo está allí para la información de la persona que edita el archivo. Formatearlo con las barras diagonales es una forma rápida de comentar una sola línea de código PHP. Si estamos comentando un bloque completo que cruza más de una línea, usaríamos los símbolos habituales /* comment here */ que también usamos en CSS. Es una buena práctica agregar comentarios como notas siempre que estés codificando para que puedas mantenerte al día con dónde estás y qué has hecho.

1

add_action( 'wp_footer', 'mytheme_add_googleanalytics' );

En la línea 4 tenemos un código de aspecto un poco complicado que comienza con add_action.

add_action es una función PHP que conecta acciones con lugares en el código llamados hooks. Podemos encontrar una gran cantidad de fragmentos de código en la web que efectivamente son funciones PHP para agregar o eliminar la funcionalidad a diferentes hooks en nuestro código. En este caso, estamos usando esta add action para agregar la función mytheme_add_google_analytics al hook wp_footer.

1

function mytheme_add_googleanalytics() {

La línea 5 realmente define y abre la función mytheme_add_google_analytics:

1

<!-- Where we'll put the Google Analytics code that we get from google... -->

y de la línea 7, que sigue, es la parte del trabajo pesado que es en realidad donde proporcionaremos la funcionalidad. Por el momento esto es sólo un comentario HTML (<-- comentario aquí -->), lo solucionaremos en breve.

Finalmente, en la Línea 9 cerramos la función con los corchetes (nota cómo tuvimos que volver a indicar la etiqueta <?php. Esto se debe a que el código que estamos pegando es, de hecho, HTML y los dos lenguajes funcionan en conjunto en lugar de combinarlos. Por lo tanto, tuvimos que cerrar la etiqueta PHP con el ?> después de los corchetes { en la línea 5, luego pegar nuestro código (lo haremos en el siguiente paso) y luego volveremos a abrir la etiqueta PHP en la línea 8 antes de escribir más funciones en nuestro archivo.

1

	<?php

2

}

3

4

?>

Paso 7. Es el momento de iniciar sesión en tu cuenta de Google Analytics y obtener tu código de inserción. Esperaré aquí mientras haces eso...

...

Paso 8. Ahora ve y pégalo en la línea 7 sobre la parte superior de nuestro comentario HTML.

Paso 9. Ahora guarda tu archivo y cárgalo en tu servidor.

Debes ser capaz de inspeccionar el código de tu página y ver el código sentado felizmente allí en la parte inferior de tu código fuente:

Agregar un favicon a tu sitio

Sabes lo que es un favicon, ¿verdad? Si necesitas un repaso, visita el Codex para obtener más información. Pero, en resumen, es el pequeño ícono que a menudo ves mostrando un logotipo o una imagen personalizada en las pestañas de tu navegador, o cuando un enlace a tu sitio se guarda como marcador.

Paso 1. Crea tu favicon.ico en tu software de edición de imágenes favorito.

Paso 2. Carga tu favicon a tu directorio de temas (tu tema hijo) a través de FTP.

Paso 3. Pega el siguiente código en el archivo functions.php:

1

// Add a Favicon to the Site

2

3

add_action( 'wp_head', 'mytheme_add_favicon' );

4

5

function mytheme_add_favicon() {

6

7

	echo '<link rel="Shortcut Icon" type="image/x-icon" href="' . get_stylesheet_directory_uri() . '/favicon.ico" />';

8

9

}

Paso 4. Guarda el archivo y cárgalo de nuevo en tu servidor.

Habiendo descrito lo que está sucediendo en una función de WordPress anteriormente, te resultará bastante sencillo comprender lo que está sucediendo en la siguiente función. Primero, veamos el código...

Para empezar, en la línea 4 podemos ver que estamos creando otra función add_action. El hook en el que pusimos nuestro código es wp_head (por lo que, al contrario del hook anterior, estamos agregando esto al encabezado de nuestro sitio, en lugar del pie de página) y el nombre de nuestra función es mytheme_add_favicon.

De todos modos, suponiendo que tengas un archivo favicon.ico en tu directorio de temas, el código anterior debería funcionar de inmediato, pero a modo de explicación:

1. En la línea 8 le decimos a nuestro tema que inserte una cadena de HTML en el head de nuestro sitio web. Esto le indica al navegador dónde encontrar el favicon.ico.
2. El pedacito de PHP en esa cadena (get_stylesheet_directory_uri() inserta la ruta a nuestro archivo en el directorio de temas.

Suponiendo que todo el código es correcto y que el archivo está en el directorio de temas, el navegador, a su vez, mostrará este icono de nuestro sitio en la esquina de nuestras pestañas y en otros lugares similares donde generalmente se ve un favicon.

Es posible que hayas notado que en este ejemplo no tuvimos que cerrar y volver a abrir las etiquetas PHP como lo hicimos en los pasos 7 y 8 del ejemplo anterior. Esto se debe a que en este segundo ejemplo, el código que usamos es PHP de un extremo a otro, y aunque incluye fragmentos de HTML, no es HTML independiente porque PHP crea parte de la cadena URL. ¡A medida que te familiarices con funciones como esta y aprendas a crear funciones tú mismo, te aclararás la diferencia, pero este pensamiento solo sirve para hacerte saber que el código es correcto, en caso de que estés buscando agregar en las etiquetas <?php  y/o ?> en este ejemplo también alrededor de las llaves!

Conclusión

Una vez que comiences a comprender el poder del archivo functions.php, serás imparable, es el medio para hacer todo tipo de cosas y agregar una funcionalidad excelente y poderosa a tu sitio. Por lo tanto, la próxima vez que debas agregar un tutorial que estés siguiendo o un fragmento que hayas encontrado a tu archivo functions.php, deberías poder agregar con confianza y tomar el control de todas las áreas de tu sitio.