Cómo agregar una página de configuración en el tema de WordPress

1. Cree los archivos necesarios

Antes de personalizar el tema, primero debe crear una "Página de opciones de configuración" personalizable. El código para crear la página de opciones de configuración debe colocarse en el archivo funciones.php en el directorio del tema. Si nuestra plantilla se llama "OptionPage", entonces la ruta al archivo de funciones es: wp-contentthemesOptionPagefunctions.php.

No necesitamos pedirle a WordPress que lo cargue manualmente, WordPress lo cargará automáticamente al ejecutarse.

2. Crear una página de opciones de configuración

En primer lugar, el primer paso es crear una página en blanco en segundo plano para que la usemos. Implementamos este paso a través de add_aaction. Las acciones se pueden ejecutar en momentos específicos cuando se está ejecutando WordPress. Por ejemplo, al crear un menú en el panel de control, se ejecutará admin_menu en respuesta. Por lo tanto, estos se pueden aprovechar para lograr la funcionalidad que requerimos. Esta es la función más básica para que podamos crear páginas de opciones.

lt;?php

// Establecer página de opciones

función themeoptions_admin_menu()

{

/ / Agregue el enlace de la página de opciones de configuración en la barra lateral del panel de control

add_theme_page("Configuración del tema", "Opciones del tema", 'edit_themes', basename(__FILE__), 'themeoptions_page');

}

function themeoptions_page()

{

// Establecer la función principal de la página de opciones

}

add_action('admin_menu', 'themeoptions_admin_menu'); gt;

themeoptions_admin_menu() agrega un enlace en la barra lateral del panel de control, apuntando a la página de opciones que creamos: themeoptions_page.

Los parámetros de add_theme_page() son:

Título de la página: Configuración del tema

Título del menú: Opciones del tema (p.d. Para distinguir la visualización, hice los títulos de página y menú (nombrados de forma diferente)

Función: edit_themes;

Handle (handle): archivo actual;

Función ejecutada: themeoptions_page;

Ahora hay un menú adicional de "Configuración del tema" en la barra lateral del panel de control en segundo plano, pero aún está en blanco. El contenido personalizado que queremos implementar más adelante se crea en esta página en blanco.

3. Agregar opciones y campos

Ahora podemos agregar nuestras opciones y campos a la página en blanco que acabamos de crear. Puede diseñar esta página según sus necesidades, pero para este tutorial usaremos las clases predeterminadas de WordPress, lo que nos ahorra tiempo y parece más nativo.

El código para el contenido de la página debe incluirse en la función themeoptions_page(). Primero, agregamos un contenedor div con class="wrap"; luego agregamos un ícono predeterminado en el encabezado como título de la página y finalmente diseñamos el formulario.

lt;div class="wrap"gt;

lt;div id="icon-themes" class="icon32″gt;lt;br /gt;lt;/ divgt;

lt;h2gt;configuración del temalt;/h2gt;

lt; método de formulario="POST" action=""gt;

lt; type="hidden" name="update_themeoptions" value="true" /gt;

lt;pgt;lt; input type="enviar" nombre="enviar" id="enviar" clase= " botón botón-primario" valor="Guardar cambios"gt;lt;/pgt;

lt;/formgt;

lt;/divgt;

En el formulario, primero debemos agregar un valor oculto a través del cual podemos verificar si se ha enviado la actualización. Luego agregue un botón de envío. Aquí también uso el estilo de botón predeterminado de WordPress. El efecto actual es:

Ahora que hemos creado la estructura básica de la página de opciones de configuración, comencemos a mejorarla en función del contenido desarrollado previamente:

Primero, debemos permitir usuarios del tema La combinación de colores se puede cambiar. Para ello, necesitamos una lista desplegable de combinaciones de colores disponibles.

En segundo lugar, para agregar el contenido de dos espacios publicitarios, necesitamos agregar dos cuadros de texto para ingresar la URL de la imagen y la URL del enlace publicitario.

Finalmente, el usuario puede elegir si desea mostrar el cuadro de búsqueda. Hacemos esto agregando casillas de verificación.

El código es el siguiente:

función themeoptions_page()

{

// Esta es la función principal para generar el tema. página de opciones;

lt;divgt;

lt;div id="icon-themes"gt;lt;br /gt;lt;/divgt;

lt;h2gt ;Configuración del temalt;/h2gt;

lt;form método="POST" action=""gt;

lt;input type="hidden" name=" update_themeoptions" value = "true" /gt;

lt;h4gt;Esquema de colores del temalt;/h4gt;

lt; select name = "color"gt;

lt;?php $color = get_option('mytheme_color'); ?gt;

lt; opción valor="gris" lt;?php if ($color=='gris') { echo 'seleccionado'; } ?gt; gt;/optiongt;

lt; opción valor="azul" lt;?php if ($color=='azul') { echo 'seleccionado'; } ?gt;gt;azul clarolt;/optiongt;

lt;option value="pink" lt;?php if ($color=='pink') { echo 'seleccionado' } ?gt ;gt;pinklt;/optiongt;

lt;/selectgt;

lt;h4gt;espacio publicitario de imagen (1)lt;/h4gt;

lt ;pgt;lt;input type="text" name="ad1image" id="ad1image" size="32" value="lt;?php echo get_option('mytheme_ad1image'); ?gt;"/gt; ;/pgt;

lt;pgt;lt;input type="text" name="ad1url" id="ad1url" size="32" value="lt;?php echo get_option( 'mytheme_ad1url '); ?gt;"/gt; Enlace publicitariolt;/pgt;

lt;h4gt;Espacio publicitario de imagen (2)lt;/h4gt;

lt; pgt;lt ;tipo de entrada="texto" nombre="ad2image" id="ad2image" tamaño="32" valor="lt;?php echo get_option('mytheme_ad2image'); ?gt;"/gt; Imagen publicitaria ;/pgt;

lt;pgt;lt;input type="text" name="ad2url" id="ad2url" size="32" value="lt;?php echo get_option('mytheme_ad2url ');? gt;"/gt; Enlace publicitariolt;/pgt;

p>lt;h4gt;lt;input type="checkbox" name="display_search" id="display_search" lt;?php echo get_option('mytheme_display_search'); ?gt; /gt; ;pgt;lt;input type="submit" name="bcn_admin_options" value="Actualizar datos"/gt;lt;/pgt;

lt;/formgt;

lt ;/divgt;

lt;?php

}

En este punto, el contenido de la página de opciones se ha completado básicamente.

4. Actualización de la base de datos

Hasta ahora, hemos creado una página de opciones de tema. El siguiente paso es cómo enviar datos a la base de datos de WordPress a través de POST. Para hacer esto, necesita crear una nueva función themeoptions_update(). Esta función será llamada por themeoptions_page(), así que agregue el siguiente código en la parte superior de la función themeoptions_page().

if ( $_POST['update_themeoptions'] == 'true' ) { themeoptions_update() }

El siguiente paso es agregar una función de actualización.

función themeoptions_update()

{

//Verificación de actualización de datos

update_option('mytheme_color', $_POST['color' ]);

update_option('mytheme_ad1image', $_POST['ad1image']);

update_option('mytheme_ad1url', $_POST['ad1url']);

update_option('mytheme_ad2image', $_POST['ad2image']);

update_option('mytheme_ad2url', $_POST['ad2url']);

if ( $_POST['display_search']=='on') { $display = 'marcado'; } else { $display = "; }

update_option('mytheme_display_search', $display);

}

5. Llame a la opción para personalizar el tema

El archivo de estilo predeterminado de nuestro tema es style.css. Si se utilizan otros esquemas de color, debemos hacerlo. cree el archivo de estilo correspondiente, por ejemplo, blue.css, pink.css y style.css en este ejemplo son grises de forma predeterminada.

Para cambiar la hoja de estilo de combinación de colores, debe agregar el siguiente código al encabezado del tema:

lt;? php bloginfo('stylesheet_directory' ); ?gt;/default.css" type="text/css"gt;

lt; enlace rel="stylesheet" href="lt;?php bloginfo(' stylesheet_directory'); ?gt ;/lt;?php echo get_option('mytheme_color'); ?gt;.css" type="text/css"gt;

Agregar imagen de espacio publicitario: agréguela donde desea colocar anuncios El siguiente código:

lt;a href="lt;?php echo get_option('mytheme_ad1url'); ?gt;"gt;lt;img src="lt;?php echo get_option('mytheme_ad1image') ?gt;” altura="125" ancho="125" /gt;lt;/agt;

lt;a href="lt;?php echo get_option ('mytheme_ad2url'); ? gt;"gt;lt;img src="lt;?php echo get_option('mytheme_ad2image'); ?gt;" height="125" width="125" /gt;lt;/ agt;

Si se debe mostrar el cuadro de búsqueda: agregue el siguiente código donde se debe colocar el cuadro de búsqueda. Se mostrará cuando el usuario elija mostrar el cuadro de búsqueda; de lo contrario, no se mostrará:

lt;?php if (get_option('mytheme_display_search ') == 'marcado') { ?gt;

lt;h3gt;Box de búsquedalt;/h3gt;

lt; método de formulario="get" id="formulario de búsqueda" action="lt;?php echo esc_url( home_url( '/' ) ); ?gt;"gt;

lt; type="text" name="s" id="s" placeholder ="lt;?php esc_attr_e('Buscar', '85Ryan'); ?gt;" /gt;

lt;input type="enviar" nombre="enviar" id="searchsubmit" valor = "Buscar" /gt;

lt;/formgt;

lt;?php } ?gt;