Nuevo artículo sobre desarrollo de plugins para WordPress. Hoy voy a explicar como crear una página de configuración para el plugin básico que hicimos en el anterior artículo
En estos momentos tenemos un plugin que añade botones para compartir en redes sociales. Ahora añadiremos una página de configuración en la que podremos indicar que redes sociales queremos que aparezcan. Si nuestra web está dedicada al ocio tener el enlace para compartir en Linkedin no tiene mucho sentido.
Añadiendo una página de configuración
Para añadir una página de configuración a un plugin de WordPress que estemos desarrollando usaremos la función add_management_page. Con esto añadiremos una entrada al menú de herramientas de WordPress desde donde podremos configurar el plugin. Esta función tiene los siguientes parámetros:
- page_title: El título de la página
- menu_title: El texto que aparecerá en el menú
- capability: La capacidad que tiene que tener el usuario para poder acceder a la página de opciones. Usaremos la capacidad “manage_options”, que es la más adecuada para este caso. Tienes más información sobre las capacidades en la documentación. En general cada tipo de usuario tiene una serie de capacidades. Al poner la capacidad “manage_options” solo los administradores podrán cambiar las opciones y el menú quedará oculto a editores, colaboradores o autores. En caso de duda, “manage_options” suele ser la mejor opción.
- menu_slug: La identificación que tendrá la entrada del menú. Debería ser única. Se usará también a la hora de crear entradas de segundo nivel.
- function: La función a la que llamaremos para generar la página de opciones
- position: La posición donde estará dentro del menú de herramientas. Podemos obviar este parámetro y será el propio WordPress quien la ponga donde mejor considere.
Con esto ya podemos crear la página. Como casi todo, necesitamos llamar a la función a través de una de los ganchos para acciones. Así que el código de inicio quedaría así:
add_action( 'admin_menu', function(){
add_submenu_page( 'tools.php', 'Basic Sharer Options', 'Basic Sharer', 'manage_options', 'basic_sharer_options', 'basic_sharer_render_options_page');
});
function basic_sharer_render_options_page(){
echo '<h1>Basic sharer options</h1>';
}Si lo hemos hecho bien deberíamos ver la entrada “Basic Sharer” en el menú de herramientas. Accediendo veremos una página titulada “Basic sharer options”, que es el contenido que hemos puesto en la función que hemos creado para generar la página
La página de configuración: El formulario
Así que ahora lo que tendremos que crear es un formulario para las opciones. Para este caso tendremos tres opciones, una por cada red social.
Para trabajar con opciones en WordPress tenemos que usar la función get_option. Esta función nos permite recuperar el valor de una opción que hayamos guardado, o un valor por defecto si aún no hemos definido dicha opción
Usaremos tres opciones basic_sharer_facebook, basic_sharer_twitter, basic_sharer_linkedin con true como valor por defecto. Es decir, que queremos que por defecto se muestren los enlaces. Es importante anteceder el nombre de cada opción con el nombre de nuestro plugin. Así minimizamos posibilidades de “pisarnos” con otros plugin.
Por comodidad, meteremos el código html del funcionario en un archivo aparte. De esta forma, la función basic_sharer_render_options_page quedará así:
function basic_sharer_render_options_page(){
$basic_sharer_facebook = get_option('basic_sharer_facebook', true);
$basic_sharer_twitter = get_option('basic_sharer_twitter', true);
$basic_sharer_linkedin = get_option('basic_sharer_linkedin', true);
include('options_page.php');
}Y el contenido de options_page.php quedará así
<div class="wrap">
<?php echo "<h2>" . __( 'Basic Sharer Options' ) . "</h2>"; ?>
<form name="form" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>" style="padding-top: 1em;">
<div class="inline-edit-col" style="padding-top: 1em;">
<span class="title">Facebook</span><br/>
<span class="input-text-wrap">
<input type="checkbox" name="basic_sharer_facebook" <?php if ($basic_sharer_facebook) echo 'checked' ?> />
</span>
</div>
<div class="inline-edit-col" style="padding-top: 1em;">
<span class="title">Twitter</span><br/>
<span class="input-text-wrap">
<input type="checkbox" name="basic_sharer_twitter" <?php if ($basic_sharer_twitter) echo 'checked' ?> />
</span>
</div>
<div class="inline-edit-col" style="padding-top: 1em;">
<span class="title">Linkedin</span><br/>
<span class="input-text-wrap">
<input type="checkbox" name="basic_sharer_linkedin" <?php if ($basic_sharer_linkedin) echo 'checked' ?> />
</span>
</div>
<div class="submit">
<input type="hidden" name="basic_sharer_data" value="true" />
<input class="button" type="submit" name="Submit" value="<?php _e('Actualizar') ?>" />
</div>
</form>
</div>Grabando las opciones del plugin
Con esto tenemos el formulario para elegir las opciones. Ahora tenemos que guardarlas. Si vemos el ccódigo anterior veremos que el formulario anterior envía los datos a la propia página de configuración. Así que realizaremos el guardado de datos desde la misma función que muestra el formulario
Para grabar los datos usaremos la función update_option, que resulta bastante autoexpicativa. La función basic_sharer_render_options_page quedaría así:
function basic_sharer_render_options_page(){
if ( isset($_POST['basic_sharer_data']) ){
$basic_sharer_facebook = isset($_POST['basic_sharer_facebook']);
$basic_sharer_twitter = isset($_POST['basic_sharer_twitter']);
$basic_sharer_linkedin = isset($_POST['basic_sharer_linkedin']);
update_option('basic_sharer_facebook', $basic_sharer_facebook);
update_option('basic_sharer_twitter', $basic_sharer_twitter);
update_option('basic_sharer_linkedin', $basic_sharer_linkedin);
echo '<div class="updated"><p><strong>';
_e('Configuración modificada.');
echo '</strong></p></div>';
}
else {
$basic_sharer_facebook = get_option('basic_sharer_facebook', true);
$basic_sharer_twitter = get_option('basic_sharer_twitter', true);
$basic_sharer_linkedin = get_option('basic_sharer_linkedin', true);
}
include('options_page.php');
}Fijaos como usamos el campo oculto basic_sharer_saving_data para detectar que estamos grabando los datos. Esto es necesario en este caso, porque todos nuestros campos son del tipo checkbox, por lo que podría darse el caso de que no se enviara ningún dato (todos los checkbox desactivado). Así que necesitamos un campo oculto para detectar el envío de datos.
Aplicando la configuración al plugin
Bien, ya tenemos guardados los datos.
Ahora tenemos que modificar el código que muestra los enlaces en cada entrada para que estos enlaces solo se muestren en el caso de que hayamos seleccionado la red social correspondiente. Usando la función get_option resulta bastante sencillo.
Solo tenemos que modificar la función que muestra los enlaces añadiendo la condición de que solo se haga si la opción correspondiente a cada red social está a true. Teniendo true como opción por defecto. Es decir, que si no se toca la configuración del plugin se mostrarán todas las redes sociales.
El código queda así:
add_filter( 'the_content', function($content){
$permalink = get_permalink();
$title = urlencode(get_the_title());
$links = array(
'Facebook' => array(
'link' => 'https://www.facebook.com/sharer.php?u='.$permalink.'&t='.$title,
'logo' => plugin_dir_url(__FILE__).'images/fb-24.png',
'visible' => get_option('basic_sharer_facebook', true)
),
'Twitter' => array(
'link' => 'https://twitter.com/share?text='.$title.'&url='.$permalink,
'logo' => plugin_dir_url(__FILE__).'images/tw-24.png',
'visible' => get_option('basic_sharer_twitter', true)
),
'Linkedin' => array(
'link' => 'https://www.linkedin.com/shareArticle?mini=true&title='.$title.'&url='.$permalink,
'logo' => plugin_dir_url(__FILE__).'images/ln-24.png',
'visible' => get_option('basic_sharer_linkedin', true)
),
);
$share_links = '<div id="sharer_links">';
foreach ( $links as $network_name => $link_info ){
if ($link_info['visible']) {
$share_links .= '<a href="'.$link_info['link'].'" class="external share_'.strtolower($network_name).'" target="_blank"><img style="display: inline" src="'.$link_info['logo'].'" alt="'.$network_name.'" /></a> ';
}
}
$share_links .= '</div>';
return $content.$share_links;
});¡Y ya está hecho! Con esto ya tenemos finalizada la página de configuración de nuestro plugin.
Puedes descargar el código completo desde GitHub: Basic Sharer 0.2
Puedes descargar el plugin desde el repositorio de WordPress: Basic Sharer