Las páginas de opciones en WordPress son una forma de permitir que los usuarios personalicen la configuración de un tema o plugin. Estas páginas suelen incluir opciones para personalizar el aspecto y el comportamiento de un sitio web, como el título del sitio, la dirección del sitio, la configuración del menú y la configuración de widgets.
Para crear una página de opciones en WordPress, se puede utilizar la función add_options_page() de la API de administración de WordPress. Esta función creará una nueva página de opciones en el menú de administración de WordPress y le permitirá definir el contenido de la página y las opciones que se mostrarán.
1- Hook de admin_menu
Primero vamos a insertar este bloque que nos ayudara a hacer hook hacia admin_menu
add_action( 'admin_menu', 'marcode_pagina_de_opciones' );
function marcode_pagina_de_opciones() {
// Aquí pondremos las paginas de opciones cualquiera
// de las 2 opciones dependiendo de tus necesidades.
}2- Creando paginas
Opción 1- Agregar pagina de administración (Admin Menu Page)
// Agregamos la pagina de opciones al menú de administración
add_menu_page(
'Mi Canal Favorito', // El nombre de la pagina
'Mi Canal Favorito', // El texto del menú
'manage_options', // Las Capability (Privilegios)
'mi-canal-favorito', // Slug de la pagina
'marcode_contenido_de_pagina', // Funcion Callback con su contenido.
'dashicons-youtube', // Icono del menu
5 // Prioridad (La posicion en el menú)
);
// Agregar subpagina
add_submenu_page(
'mi-canal-favorito', // Slug de pagina padre
'Lista de Canales', // Titulo de la pagina
'Lista de Canales', // Titulo en el menu
'manage_options', // Las Capabilities (Privilegios)
'lista-de-canales', // Slug de la subpagina
'marcode_contenido_subpagina' // Funcion Callback y su contenido para la subpagina
);Opción 2- Agregar pagina de opciones (Option Page)
// Agregamos la pagina de opciones al menú de ajustes
add_options_page(
'Mi Canal Favorito', // El nombre de la pagina
'Mi Canal Favorito', // El texto del menú
'manage_options', // Las Capabilities (Privilegios)
'mi-canal-favorito', // Slug de la pagina
'marcode_contenido_de_pagina', // Funcion Callback con su contenido.
5 // Prioridad (La posicion en el menú)
);3- Función Callback
Creamos nuestra función Callback. La función Callback aplica para ambas opciones, es decir que no importa cual opción elijas deberás crear su función Callback.
// Funcion Callback para la pagina de opciones con su contenido
function marcode_contenido_de_pagina(){
echo '<div class="wrap">
<h1>Mi Canal Favorito de Youtube</h1>
<form method="post" action="options.php">';
settings_fields( 'marcode_settings' ); // Creamos un grupo de campos // ESTE
do_settings_sections( 'marcode-slug' ); // Asignamos un slug
submit_button();
echo '</form></div>';
// Aqui solo imprimimos el shortcode para mostrarlo
echo '<b>Shortcode para este form<b></b>'.' <input type="text" readonly value="[mi_canal_favorito]">';
}4- Registramos los campos y secciones
add_action( 'admin_init', 'marcode_registrar_settings' );
function marcode_registrar_settings(){
add_settings_section(
'marcode_id_seccion_opciones', // Asignamos un Id a la seccion
'Información', // Agregamos un titulo
'', // Funcion callback en caso de necesitarla
'marcode-slug' // Asignamos un slug para la seccion
);
register_setting(
'marcode_settings', // Ponemos el nombre de los grupos (marcode_settings), recuerda que lo asignamos en settings_fields( 'marcode_settings' );
'nombre_canal_youtube', // Registramos el nombre del grupo del campo
'sanitize_text_field' // Sanitizamos
);
register_setting(
'marcode_settings', // Ponemos el nombre de los grupos (marcode_settings), recuerda que lo asignamos en settings_fields( 'marcode_settings' );
'canal_youtube', // Registramos el nombre del grupo del campo
'sanitize_text_field' // Sanitizamos
);
add_settings_field(
'nombre_canal_youtube', // Asignamos el id.. (es el que registramos en el nombre del grupo del campo)
'Nombre de mi canal favorito', // Etiqueta del campo a mostrar
'marcode_input_text', // Funcion callback para imprimir el campo
'marcode-slug', // Slug que asignaste en do_settings_sections
'marcode_id_seccion_opciones', // Id de la seccion
array(
'label_for' => 'nombre_canal_youtube', // Asignamos el id al cual apuntara nuestro label
'class' => 'marcode-class', // Clase para el <tr>
)
);
add_settings_field(
'canal_youtube', // Asignamos el id.. (es el que registramos en el nombre del grupo del campo)
'Mi canal favorito', // Etiqueta del campo a mostrar
'marcode_input_url',// Funcion callback para imprimir el campo
'marcode-slug', // Slug que asignaste en do_settings_sections
'marcode_id_seccion_opciones', // Id de la seccion
array(
'label_for' => 'canal_youtube', // Asignamos el id al cual apuntara nuestro label
'class' => 'marcode-class', // Clase para el <tr>
)
);
}5- Funciones Callback para campos
function marcode_input_text(){
$text = get_option( 'nombre_canal_youtube' ); // Obtenemos el dato de nombre_canal_youtube
printf('<input type="text" id="nombre_canal_youtube" name="nombre_canal_youtube" value="%s" />',esc_attr( $text )); // El HTML que vamos a imprimir
}
function marcode_input_url(){
$text = get_option( 'canal_youtube' ); // Obtenemos el dato de canal_youtube
printf('<input type="url" id="canal_youtube" name="canal_youtube" value="%s" />',esc_attr( $text )); // El HTML que vamos a imprimir
}6- Creamos el Shortcode
Esto ya lo vimos en el post pasado llamado Shortcodes en WordPress
add_shortcode( 'mi_canal_favorito', 'marcode_shortcode' );
function marcode_shortcode( $atts ) {
$url = get_option( 'canal_youtube' );
$name = get_option( 'nombre_canal_youtube' );
return '<div>Mi canal favorito de youtube es: <a target="_blank" href="'.$url.'">'.$name.'</a></div>';
}
Iniciar chat