Boilerplate WordPress plugin – Página ajustes

Pasamos a la tarea de crear el esqueleto de la página de opciones de nuestro plugin. Lo que vendría a ser el Settings del plugin. Empecemos con Boilerplate WordPress plugin – Página ajustes

Como ya hemos comentado, nuestro plugin, necesitará de una página de opciones donde configurarlo. El settings del plugin. Para ello haremos tres acciones:

  • crear la página de opciones,
  • añadir un enlace en el menú principal
  • y, por último, añadir un enlace en el listado de plugins.

Veamos paso a paso y siguiendo los artículos anteriores.

Crear esqueleto de la página settings del plugin

Vamos a crear una página vacía que más adelante rellenaremos con lo que nos interese. Por lo pronto, nuestro objetivo es crear los enlaces y que se abra la página.

Dónde se crea la página? Recordad que el plugin que nosotros estamos creando es feed-directory:

/wp-content/plugins/feed-directory/admin/partials/feed-directory-settings-admin-display.php

En un futuro pondremos aquí el formulario para que el usuario configure el plugin, pero por lo pronto podéis poner un contenido simbólico para saber que se carga correctamente la página.

Añadimos funciones para mostrar opciones e ir a las páginas

Ya vimos en el artículo Boilerplate WordPress plugin – Añadir plugin Menú admin, cómo añadir una opción en el menú principal de WordPress un enlace a nuestro plugin.

Ahora modificaremos un poco el código para que añada:

Fichero a modificar:

/wp-content/plugins/feed-directory/admin/class-feed-directory-admin.php

En este fichero es donde vamos creando las funciones que realizan las acciones de añadir al menú o las de cargar las páginas. El código deberá quedar así añadiéndolo alfinal. El código añadido nuevo está en negrita:

public function add_menu() {
  // Se añade al menú principal la opción de Feed Directory (lo vimos en artículo anterior)
  add_menu_page("Feed Directory","Feed Directory","manage_options", $this->plugin_name . '-index',array( $this, 'feed_directory_index' ), plugins_url( 'feed-directory/icon.png' ));

  // Se añade enlace en las optiones de Ajustes de WordPress
  add_options_page( 'Feed Directory Options', 'Feed Directory Options', 'manage_options', $this->plugin_name, array($this, 'display_plugin_setup_page'));
}

public function feed_directory_index() {
  include plugin_dir_url( __FILE__ ) .'partials/feed-directory-admin-display.php'; 
}

// Esta función cargará la página de settings
public function display_plugin_setup_page() {
  include plugin_dir_url( __FILE__ ) .'partials/feed-directory-settings-admin-display.php';
}

// Esta función añade la opción settings al listado de plugins
public function add_action_links( $links ) {
  $settings_link = array('<a href="' . admin_url( 'options-general.php?page=' . $this->plugin_name ) . '">' . __('Settings', $this->plugin_name) . '</a>',);
 return array_merge( $settings_link, $links );
}

Definimos los hooks

Una vez tenemos las funciones que necesitamos creadas, definimos los hooks que llamarán a estas funciones.

/wp-content/plugins/feed-directory/admin/includes/class-feed-directory.php

Modificaremos la función define_admin_hooks() añadiendo los que llaman a las funciones que hemos creado en el anterior apartado:

private function define_admin_hooks() {
$plugin_admin = new Feed_Directory_Admin( $this->get_plugin_name(), $this->get_version() ); 
$this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); 
$this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); 
// Admin menu option 
$this->loader->add_action( 'admin_menu', $plugin_admin, 'add_menu' ); 
// Admin Settings link to the plugin 
$plugin_basename = plugin_basename( plugin_dir_path( __DIR__ ) . $this->plugin_name . '.php' ); 
$this->loader->add_filter( 'plugin_action_links_' . $plugin_basename, $plugin_admin, 'add_action_links' ); 
}

Como véis, hemos añadido un action y un filter que llaman a las funciones creadas. De esta manera, se crean la opción de Ajustes y el enlace en el listado de plugins. Si activáis el plugin os quedará así:

Si os fijáis, aparece Feed factory Options dentro de los ajustes, y al pulsar, se carga la página Settigns que hemos creado.

Estudiad un poco el código y echad un vistazo al enlace inferior de un artículo en inglés que pone otro ejemplo que también os puede ser de ayuda. Espero que os haya sido de utilidad el artículo Boilerplate WordPress plugin – Página ajustes.


Más información