Agregar las funcionalidades a tu Tema Wordpress

Los temas en wordpress incorporan funcionalidades en el archivo de plantilla functions.php, este archivo contiene tanto código PHP personalizado como código PHP proveniente de codex de Wordpress como por ejemplo: agregar archivos CSS o JavaScript, definir los áreas de Widgets y definir el Menú de Navegación. Solo por nombrar estas funcionalidades básicas de todo Tema en Wordpress y que seguramente los requeritas en el tuyo.

El archivo functions.php

Ahora vamos a agregar el archivo functions.php a nuestros otros archivos de plantilla, dentro de la Carpeta de nuestro Tema Wordpress.

En esta archivo especificaremos los scripts para darle la funcionalidad a nuestro Tema, pero un punto importante a considerar es que aplica tanto para el front-end como para el back-end. Así, debemos envolver los sctipts en los ganchos de Wordpress para su correcta carga dentro de la aplicación.

Pero para no saturar la información, comencems por lo primero y paso a paso:

Como incluir archivos de hojas de estilos CSS y scripts Javascript a nuestro Tema de Wordpress

Cuando estamos creando nuestros propios Temas de Wordpress, seguranmente vamos desear agregar archivos adicionales de hojas de estilos CSS y scripts JavaScript.

Podriamos estar tentados a incluir estos archivos en el encabezado (header) como en cualquier documento HTML, pero recordemos que Wordpress no solo carga y muestra nuestro Tema, sino también carga y usa diferentes complementos (plugins) y todo debe funcionar en armonia.

Es muy importante que el Theme y los plugins cargen los scripts y las hojas de estilos usando el método estándar de Wordpress para evitar problemas de compatibilidad.

Agregar scripts y estilos a WordPress es un proceso bastante simple. Esencialmente, se creará una función en el archivo de plantilla functions.php, que pondrá en cola todos sus scripts y estilos.

Al poner en cola un script o una hoja de estilo, WordPress crea un identificador (handle) y una ruta para encontrar su archivo y cualquier dependencia que pueda tener (como jQuery) y luego usará un gancho (hook) que insertará todos los scripts y las hojas de estilo que estan en la cola.

Encolar las hojas de estilos CSS

El archivo style.css es requerido en todos los Temas Wordpress, pero en ocasiones puede ser necesario agregar otros archivos para extender la funcionalidad de los estilos

Para poner en cola los estilos se utiliza la función:

wp_enqueue_style()

Sintaxis de ejemplo:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Puedes incluir los siguientes parametros:

• $handle que es simplemente el nombre de la hoja de estilos. (obligatorio).
• $src que es la ubicación o ruta del archivo (obligatorio).
• $deps indica si esta hoja de estilos CSS tiene dependencias con otras hojas de estilos en formato de un array() o false. Así, esta hoja de estilos solo se cargará después de que se haya cargada la hoja de estilos a la que es dependiente. (opcional).
• $ver indica el número de versión. Sirve para que si aumento la versión del documento lo recargara de lo contrario mantendra el archivo cargado en cache (opcional).
• $media se puede especificar el tipo de media CSS, como son: all, screen, print o handheld.

Como primer ejemplo, si se desea cargar una hoja de estilos CSS llamda "slider.css" que se localiza en la carpeta "css" en la carpeta del Tema, se usaría el siguiente código básico:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css');

Explicación:

• Solo utilizamos los dos primeros parámetros obligatorios: $handle y $src.
• la función get_template_directory_uri() nos sirve para recuperar la ubicación de la carpeta raíz de nuestro Tema y la concatenamos con la ubicación del archivo.

Como segundo ejemplo, si se desea realizar la misma acción en su sintaxis completa, se usaría el siguiente código completo:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

Explicación:

• $deps se establece en false dado que no va a tener depencias con otras hojas de estilos.
• $ver se establece con un número de versión, puede ser un número entero o en formato de versión como 1.1.
• $media se establece como all que aplica para todas las medias CSS.

Encolar los scripts JavaScript

Wordpress incluye algunos archivos JavaScript como parte de sus paquetes de software, incluyendo librerias de uso común como JQuery. Antes de agregar su propios archivos Javascript, checa si tu puedes hacer uso de las librerias incluidas.

Cualquier archivo JavaScript que se requiera agregar al Tema de Wordpress debe cargarse usando el método estándrd de Wordpress, esto para asegurarse se cargue apropiiadamente y guarde en caché, así como también, opcionalemente, haga uso de las etiquetas condicionales especificas de la página.

Para poner en cola los scripts se utiliza la función

wp_enqueue_script()

Sintaxis de ejemplo:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

Puedes incluir los siguientes parametros:

• $handle que es simplemente el nombre del script. (obligatorio).
• $src que es la ubicación o ruta del archivo (obligatorio).
• $deps indica si este script tiene dependencias con otros scripts en formato de un array() o false. Así, este script solo se cargará después de que se haya cargada el script al que es dependiente. (opcional).
• $ver indica el número de versión. Sirve para que si aumento la versión del documento lo recargara de lo contrario mantendra el archivo cargado en cache (opcional).
• $in_footer es un parametro booleano (true o false), que permite localizar el script en el footer del documento HTML en lugar de en el header, esto para que no retrase la carga del árbol DOM.

Como primer ejemplo, si se desea cargar un script llamda "script.js" que se localiza en la carpeta "js" en la carpeta del Tema, se usaría el siguiente código básico: 

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js' );

Explicación:

• Solo utilizamos los dos primeros parámetros obligatorios: $handle y $src.
• la función get_template_directory_uri() nos sirve para recuperar la ubicación de la carpeta raíz de nuestro Tema y la concatenamos con la ubicación del archivo.

Como segundo ejemplo, si se desea realizar la misma acción en su sintaxis completa, se usaría el siguiente código completo:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Explicación:

• $deps se establece que el script depende de la libreria JQuery, se pasa un arreglo de un elemento nombrado 'jquery'.
• $ver se establece con un número de versión, puede ser un número entero o en formato de versión como 1.1.
• $in_footer se establece como true para que sea cargago en footer en lugar de haad.

Envolver los Scripts y las hojas de estilos CSS para su adecuada carga

Como se mencionó anteriormente, el arhivo functions.php ejecuta los scripts PHP tanto para el foron-end como para el back-end. Así que, para nuesto caso que estamos tratando con las hojas de estilos CSS y scripts JavaScript, estos deben ser cargados específicamente para el front-end, entonces, primero debemos envolverlos en una función PHP y posteriormente engancharla (con un hook) especifico para los estilos y scripts de la plantilla.

Entonces, el código quedaría así:

function mis_estilos_scripts(){
  wp_enqueue_style( "slide", get_template_directory_uri() . "/css/slide.css" );
  wp_enqueue_script( "script", get_template_directory_uri() . "/js/script.js" );
}
add_action( "wp_enqueue_scripts", "mis_estilos_scripts" );

Explicación:

• Creamos una función (nosotros definimos el nombre) y dentro establecemos las funcitones de estilos y scripts.
• Posteriormente llamsos a la función de gancho que es add_action() y recibe dos parametros:
  1. el primer parametro es el nombre de la función wp_enqueue_scripts() de Wordpress.
  2. el segundo parametro es el nombre de nuestra función creada como mis_estilos_scripts().

La función: wp_enqueue_scripts()

El proposito de esta función es establecer como y cuando se pondran en cola las hojas de estilos CSS y script JavaScript definidad en nuestra función en donde establecimos los estilos y scripts a cargar.

Nota: No confundir wp_enqueue_scripts() con la enteriormente explicada wp_enqueue_scrit(). La diferencia es la s al final del nombre.

Nota: A pesar del nombre de la función, que hace solo referencia a scripts, esta función sirve para envolver y activar en la cola tanto scripts JavaScript como hojas de estilos CSS.

Pero a diferencia de las otras funciones explicadas, la función wp_enqueue_scripts() no la llamaremos como normalmente lo hariamos, sino lo la llamaremos a través de la función de gancho add_action() como su primer parametro.

La función: add_action( )

Esta es una función de gancho del Nucleo de Wordpress y su proposito es ahora si de cargar y poner en cola, pero depende de los dos parámetros principales:

1. El nombre de la función de gancho, que en nuestro caso es wp_enqueue_scripts() que especifica la cargar estilos y scripts.
2. El nombre de la función que establecimos para cargar las hojas de estilos y scripts JavaScript de acuerdo como nosotros los definimos.

Nota Avanzada: Internamente este método de ganchos: permite que sea cargado primero en el front-end en la función wp_head() en donde ya están disponibles otras funciones de plantilla como is_home(), is_page(), etc. Esto nos permitirá escribir código más complejo una vez tengamos mayor conocimiento de funciones, hooks y etiquetas de Wordpress.

Agregar los Widgets de la Barra Lateral

function add_widget_support(){
  register_sidebar( array(
    "name" => "Sidebar",
    "id" => "sidebar",
    "before_widget" => "<div>",
    "after_widget" => "</div>",
    "before_title" => "<h2>",
    "after_title" => "</h2>", )
  );
}

Nota: Si se omite este fragmento de código, el enlace del menú de widgets no será visible en el panel de control del administración y no se podran agregar ningún widget.

Agregar el menú de navegación

Para activar y disponer de la función del Menú de Navegación de nuestro Tema Wordpres desde el Panel de Administración,  es decir:

Apariencia > Menús

agregamos el siguiente código:

function mi_menu_nav(){
  register_nav_menu( "header-menu" , __( "Header Menu" ) );
}
add_action("init", "mi_menu_nav" );