Para la web de Agilogy necesitábamos poder mostrar diferentes banderas en la parte superior de la web y que al hacer clic en ellas, se redirigiera a diferentes urls. Para no tener que modificar los temas o el propio WordPress (haría las actualizaciones más complicadas) decidimos implementar un pequeño plugin. Éste plugin debería:
- Poder incluirse en cualquier página
- Mostrar las banderas necesarias
- Idealmente, que el link de cada una se pudiera configurar a través de la administración de Wordpress
Ficheros de plugin
Los plugins tienen como mínimo un fichero .php llamado “nombre_plugin.php”. Es interesante coger un nombre suficientemente específico para que no haya otro plugin llamado igual puesto que no podrían estar instalados en el mismo WordPress.Para instalarlo en el entorno de desarrollo, es suficiente con copiarlo dentro de la carpeta “wp-content/plugins”.
En muchas ocasiones un plugin tendrá más de un fichero (para no poner todo el código en el mismo fichero php y poder estructurarlo un poco) así como ficheros css, javascript, etc. En éste caso, en lugar de copiar los ficheros directamente dentro de “wp-content/plugins” se puede crear un directorio con el mismo nombre del plugin en wp-content/plugins y poner los ficheros dentro.
En nuestro ejemplo, el plugin se llamará “Language Links” y como tendrá más de un fichero, creamos la carpeta “language-links” dentro de “wp-content/plugins” y ahí creamos un primer fichero php llamado igual: “language-links.php”.
El primer fichero
Para que WordPress reconozca el fichero php como plugin, tiene que contener una cabecera como la que sigue: 1
2
3
4
5
6
7
8
9
10
11
12
<?php
/*
Plugin Name: Language links
Plugin URI: http://www.agilogy.com
Description: Muestra banderas con links
Version: 0.1
Author: Agilogy
Author URI: http://www.agilogy.com
License: la licencia
*/
?>
Una vez hecho ésto, ya aparece en el apartado de plugins de WordPress y se puede activar.
Hooks
Una manera de utilizar un plugin es a través de “hooks”. Wordpress tiene una serie de puntos en los que los plugins se pueden “suscribir” y cada vez que WordPress llega a ese punto, ejecuta todas las funciones registradas. Hay dos tipos de hooks:- Actions: acciones que el núcleo de WordPress llama en determinados momentos. Un plugin puede suscribirse a estas acciones utilizando la Action API. Hay muchas acciones que se pueden utilizar. Por ejemplo: "publish_post", "plugins_loaded", "init",... (ver la referencia)
- Filters: los filtros son hooks que WordPress llama cuando tiene que modificar texto en varios puntos antes de guardarlo en base de datos o enviarlo al usuario. Suscribiéndose a estos filtros un plugin puede modificar el texto. Igual que en las acciones, hay muchos filtros que se pueden utilizar. Por ejemplo: "the_content" (cuando se está obteniendo el contenido de un post de la base de datos), "single_post_title", ... (ver la referencia)
Template tags
Otra forma de utilizar la funcionalidad de un plugin es a través de los “template tags”. En éste caso, el plugin define una función que luego, el tema la puede llamar en el punto donde quiera que aparezca el plugin. Para ello, simplemente tiene que llamar a una función de las definidas en el plugin y si éste está activado, la función estará disponible.En nuestro ejemplo, necesitamos una función para mostrar por pantalla las banderas:
1
2
3
4
5
6
7
8
9
10
11
function langlinks_flags() {
?>
<div id="langlinks">
<ul>
<li><a href="http://www.agilogy.cat"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/ca.png' ?>" /></a></li>
<li><a href="http://www.agilogy.es"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/es.png' ?>" /></a></li>
<li><a href="http://www.agilogy.eu"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/eu.png' ?>" /></a></li>
</ul>
</div>
<?php
}
Si el plugin está activo, en cualquier sitio de la plantilla o del blog en que pongamos la llamada a la función: langlinks_flags() aparecerán las banderas.
A destacar del código:
- Hemos copiado las tres imágenes en "img" dentro del directorio del plugin.
- La función plugin_dir_url(__FILE__) devuelve la url base del plugin. De éste modo, podemos acceder al directorio de imágenes.
Hojas de estilos
Para que aparezcan las banderas tal y como queremos, necesitamos añadirle algunas propiedades con CSS. Una opción seria mezclarlo todo con el código HTML pero es mucho más elegante que tenga su propio fichero CSS.Dentro del directorio del plugin, creamos un nuevo directorio llamado CSS y dentro, el fichero ”language-links.css” (el fichero css puede tener cualquier nombre).
Las reglas son simplemente:
1
2
3
4
5
6
7
8
9
10
#langlinks ul li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
#langlinks {
margin-bottom: 10px;
text-align: right;
}
Para que el plugin cargue los CSS, en lugar de poner el código html en cualquier lado, lo mejor es utilizar la función wp_enqueue_style. Ésta función, la tenemos que llamar cuando WordPress está mostrando los estilos. Ésto lo podemos hacer creando una nueva función que llame a wp_enqueue_style y se “suscriba” a la acción ’wp_print_styles’.
1
2
3
4
5
add_action('wp_print_styles', 'add_stylesheet');
function add_stylesheet() {
wp_enqueue_style('language-links-css', plugin_dir_url(__FILE__) . 'css/language-links.css');
}
- Hemos creado la función add_stylesheet que simplemente llama a wp_enqueue_style
- Con la función add_action hemos asociado la acción "wp_print_styles" a la función "add_stylesheet". Cada vez que WordPress pinte los estilos, llamará también a nuestra función
Edición de las urls
Como último paso, falta poder editar las urls de cada link des de la administración de WordPress.
Para ello, hay principalmente dos opciones:
- Crear una interfaz desde cero e irle dando la funcionalidad que queramos
- Utilizar lo que nos ofrece WordPress para hacer páginas para guardar propiedades de forma casi automática
Añadir nueva entrada en el menú de administración
El código necesario es el siguiente:1
2
3
4
5
add_action('admin_menu', 'langlinks_create_menu');
function langlinks_create_menu() {
add_menu_page('Language Links Settings', 'Language Links', 'administrator', __FILE__, 'langlinks_settings_page',plugins_url('/images/icon.png', __FILE__));
}
Donde:
- Creamos una función "langlinks_create_menu" que crea la nueva página de menú con una llamada a "add_menu_page". Entre otras cosas, los parámetros incluyen el nombre que se va a mostrar (el primero) y el nombre de la función a ejecutar si se selecciona el nuevo elemento. En éste caso: langlinks_settings_page
- Para que se ejecute en el momento oportuno, tenemos que "suscribirla" a la acción "admin_menu"
Creación de la página de edición
Como hemos comentado anteriormente, vamos a utilizar la funcionalidad de WordPress para generar una página de edición de propiedades automáticamente. Para hacerlo, básicamente necesitamos:- Registrar las propiedades que queremos gestionar
- Crear un formulario que haga POST a la página options.php
- Cada elemento del formulario que se corresponda con una de las propiedades, debe tener el mismo nombre que le hemos puesto a la propiedad al registrarla
- Antes de dibujar el formulario, debemos llamar a la función "settings_fields".
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
add_action('admin_menu', 'langlinks_create_menu');
function langlinks_create_menu() {
//create new top-level menu
add_menu_page('Language Links Settings', 'Language Links', 'administrator', __FILE__, 'langlinks_settings_page',plugins_url('/images/icon.png', __FILE__));
add_action( 'admin_init', 'register_mysettings' );
}
function register_mysettings() {
register_setting( 'langlinks-settings-group', 'url_ca' );
register_setting( 'langlinks-settings-group', 'url_es' );
register_setting( 'langlinks-settings-group', 'url_en' );
}
function langlinks_settings_page() {
?>
<div>
<h2>Language Links</h2>
<form method="post" action="options.php">
<?php settings_fields( 'langlinks-settings-group' ); ?>
<table>
<tr valign="top">
<th scope="row">URL Català</th>
<td><input type="text" name="url_ca" value="<?php echo get_option('url_ca'); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">URL Español</th>
<td><input type="text" name="url_es" value="<?php echo get_option('url_es'); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">URL English</th>
<td><input type="text" name="url_en" value="<?php echo get_option('url_en'); ?>" /></td>
</tr>
</table>
<p>
<input type="submit" value="<?php _e('Save Changes') ?>" />
</p>
</form>
</div>
Aparte de lo comentado anteriormente, podemos destacar:
- Registramos las propiedades con la función "registrer_settings" que es añadida a la action "admin_init" para ejecutarse cuando se carga la página de administración
- El primer parámetro de register_settings es el grupo al cuál pertencen: links-settings-group. Debemos utilizar el mismo nombre de grupo en la llamada a la función settings_fields
- En cada input, para obtener el valor actual del parámetro utilizamos una llamada a la función get_option('nombre_parametro')
- En el botón de submit, utilizando _e('Save Changes'), obtenemos el string por defecto en el idioma del usuario para guardar los cambios
1
2
3
4
5
6
7
<div id="langlinks">
<ul>
<li><a href="<?php echo get_option('url_ca'); ?>"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/ca.png' ?>" /></a></li>
<li><a href="<?php echo get_option('url_es'); ?>"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/es.png' ?>" /></a></li>
<li><a href="<?php echo get_option('url_en'); ?>"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/eu.png' ?>" /></a></li>
</ul>
</div>
Utilizamos el mismo get_option que el usado en la página de administración.
