Creando un theme para wordpress II

Creando un theme para wordpress II

En la publicación de hoy vamos a aprender como se incluyen las librerias css y javascript en nuestro theme wordpress.

Para conseguirlo, vamos a crear un fichero .php llamado functions.php, que contendrá el código php necesario para que funcione nuestro theme, tal y como iremos viendo en ésta y en publicaciones sucesivas de este minicurso.

Antes de continuar, vuelvo a recordar que éste tipo de ficheros tienen una denominación específica y no se puede cambiar, por que en ese caso simplemente no funcionará. Éste archivo será el que almacene toda la lógica del theme.

Vamos a comenza encolando los ficheros javascript que necesita nuestro teme. Para ello emplearemos el siguiente fragmento de código tomado de la plantilla twentysixteen:

function twentysixteen_scripts() {
	
wp_enqueue_script( 'twentysixteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20160816', true );

wp_enqueue_script( 'twentysixteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20181230', true );

}

add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );

Crearemos una función cuyo nombre designaremos nosotros mismos. Dentro de esta función haremos una llamada a wp_enqueue_script, esto sirve para encolar cada uno de los ficheros javascript que necesitaremos en nuestro theme. Ésta función tiene varios argumentos:

  1. El primero es un nobre, entre comillas simples, que identifica de forma unívoca a la libreria.
  2. El segundo es una función que devuelve el path hacia nuestro template. Esto es importante para que wordpress sepa donde se encuentran los ficheros del theme en el servidor en el que lo tenemos instalado. Concatenado, entre comillas simples, irá el path en donde hemos guardado nuestro fichero javascript.
  3. El tercer parámetro es un array que contendrá aquellas librerias que tenemos guardados en nuestro theme que son necesarias para nuestro fichero javascript. Perfectamente pueden ir comillas simples sin nada si no necesitamos ningún fichero.
  4. El cuarto argumento, por el momento, no hablameros de él. Simplemente poner dos comillas simples.
  5. Por último, habrá que indicar a wordpress si nuestros ficheros javascript los queremos situados al final del fichero index.php -en este caso poner true-, o al principio -por lo que tendremos que escribir false-.

Con ésto ya casi hemos terminado. Sólo nos queda escribir el hook necesario para que éste código se ejecute en nuestro theme, es decir, se cargen los ficheros javascript correctamente. Para ello utilizaremos la función add_action, que contendrá dos argumentos:

  1. el primero será un nombre reservado: wp_enqueue_scripts entre comillas simples.
  2. El segundo será el nombre de la función que hemos creado, también entre comillas simples.

La forma de encolar los ficheros css es prácticamente la misma. El formato de la función será el mismo y el hook necesario para que el theme los carge idéntico. Entra ya dentro de la decisión del programador que los encolados de los ficheros css vayan junto a los de javascript en la misma función, o crear una función particular para cada tipo de código: css y javascript respectivamente.

function twentysixteen_scripts() {
		
// Theme stylesheet.
wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );

// Theme block stylesheet.
wp_enqueue_style( 'twentysixteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentysixteen-style' ), '20181230' );
		
	}

add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );

Las funciones y la forma de encolar los ficheros css son idénticos a como hemos trabajado con javascript. Sólamente haremos una observación: vemos que el primer enconlamiento usa la función get_stylesheet_uri ( ). La respuesta a esto es por que lo que se está encolando es el fichero style.css que se encuentra en el directorio raiz del theme, junto con los demas ficheros php. Por tanto, la función devuelve el path a éste fichero de una manera particular.

Con éste código, finalizamos la explicación de hoy. Ya nuestro theme wordpress reconoce los ficheros css y javascript que necesitamos. En la siguiente publicación, hablaremos de como particionar nuestro código y los ficheros .php que nos harán falta.

No Comments

Post a Comment