Cómo crear páginas de administración personalizadas en WordPress Dashboard

Artículo escrito por:
  • Artículos destacados
  • Actualizado: Jun 30, 2013

Cuando WordPress dio a conocer lo que solía ser su tema estándar, Kubrick, hace varios años, también tomó la forma de una nueva característica emocionante. Esa característica era el panel de administración de tema personalizado, habilitado mediante la definición de funciones y preferencias en el archivo "functions.php" específico del tema. En los años que siguieron, la página de opciones de temas ha sido tristemente infrautilizada por muchos diseñadores de temas, pero en realidad es una excelente manera de dar a los usuarios control sobre la apariencia de su sitio sin obligarlos a instalar un nuevo tema. Cosas como la imagen de fondo del tema, el número de columnas e incluso los colores de fuente se pueden cambiar con este panel de administración personalizado.

El panel de administración en sí se cambia al llenar el archivo de funciones del tema con una serie de matrices PHP que definen valores personalizados. Esos valores se incluyen en la plantilla y se definen en un panel de administración que permite a los usuarios definir visualmente sus preferencias de apariencia. Todo el proceso es en realidad relativamente simple una vez que el diseñador del tema aprende cómo funciona un PHP y cómo puede aprovechar ese fragmento de código para permitir una presentación personalizada dentro de sus archivos de plantilla.

El proceso de varios pasos comienza con la configuración de algunas variables de todo el sitio y la definición de lo que se debe personalizar en esta nueva página de administración.

Paso 1: Creación y edición de la página Functions.php específica del tema

Si ha desarrollado su propio tema, es muy probable que haya creado un archivo functions.php para emparejarlo con los archivos de plantilla existentes. Esta es una opción relativamente avanzada y la mayoría de los diseñadores simplemente la omiten por completo. En este caso, es esencial abrir el cliente FTP de su elección y apuntarlo a la siguiente URL del servidor donde residen los archivos del tema:

/ public_html / wp-content / themes / YOUR-THEME-FOLDER /

Una vez dentro de esta carpeta, verifique dos veces para asegurarse de que no haya un archivo "functions.php" presente y luego use su programa de edición de texto para crear un nuevo archivo llamado "functions.php". Este archivo se puede guardar y cargar en el servidor a través de FTP Se puede editar directamente en el servidor, eliminando la necesidad del programa de edición de texto.

El primer paso para tener un panel de opciones de tema válido definido en el archivo "functions.php" es definir dos variables en la parte superior del documento. Estas variables se usarán para mostrar el nombre del tema usando el Tablero, así como para identificar elementos de formulario y selección dentro de esa página de administración. Observe el código a continuación, colóquelo en la parte superior de su documento "functions.php" y personalícelo según las necesidades de su sitio.

$ longname = "Tema de desarrollo del panel de administración";
$ shortcode = "apdt";

Estas variables tienen diferentes propósitos. La variable $ longname se usará para imprimir el nombre del tema en el panel de opciones de administración real. Por esta razón, se recomienda que los desarrolladores asignen el nombre exacto del tema a esta variable para eliminar la confusión entre los usuarios de su tema. La variable $ shortcode debe ser todas letras minúsculas sin puntuación, ya que esto se usará para identificar elementos de formulario dentro del código mismo. En el ejemplo, se usó un acrónimo simple basado en el nombre completo del tema; Esto se puede personalizar a los gustos del usuario.

Paso 2: Definiendo Preferencias Personalizables Usando Arrays PHP

Primero, es importante decirle al tema cuál es el nombre del panel de administración. Esto se imprimirá sobre todas las configuraciones potenciales y ayuda a fomentar la claridad del propósito para los usuarios novatos. Esto se hace agregando la siguiente matriz a la etiqueta $ settings dentro del archivo "functions.php":

$ settings = array (
array ("name" => $ longname. "Configuración de apariencia",
"Tipo" => "título"),

A continuación, debemos indicar que la matriz llena de opciones está "abierta" o puede modificarse mediante la entrada del usuario. Esto se hace usando otra matriz simple que aparece justo debajo de la definición del título de la página. Se parece a esto:

array ("tipo" => "abrir"),

Ahora somos libres de comenzar a definir las opciones de apariencia del tema, y ​​cada una de ellas se creará como una nueva matriz. En este ejemplo, vamos a definir el texto que se coloca en el pie de página del tema. De manera predeterminada, el tema de ejemplo contiene un enlace al sitio web del desarrollador del tema, así como información de versiones de Teem. Sin embargo, esto no es deseable para una gran cantidad de usuarios de WordPress que preferirían colocar su propia información en el pie de página, por lo que habilitar este control personalizado les ahorra la edición manual del archivo "footer.php". Así es como se hace.

array (
“Nombre” => “Texto de pie de página de tema personalizado”,
"Desc" => "Este es el texto que se muestra al final de cada página contenida en este tema.",
"Id" => $ shortcode. "_ Custom_footer",
"Tipo" => "texto",
“Std” => “Experimental Theme v1.0. Desarrollado por John Doe. Más temas aquí. ”),

La matriz anterior permite al usuario determinar el texto de pie de página estándar del tema, pero las etiquetas de la matriz deben explicarse para describir mejor cómo funciona este proceso y qué define cada parte de la matriz.

Nombre: Se refiere al nombre del cuadro de texto real en sí, y no se presenta a los usuarios cuando ingresan a la página de opciones de administración para el tema.

desc: Esta es una breve descripción que acompaña a la configuración personalizada y se muestra a los usuarios.

ID: Esto utiliza el código corto junto con una identificación personalizada del nombre del formulario para presentar y diseñar el cuadro de texto.

Tipo: Esto define si el elemento de formulario es una línea de texto, un cuadro de texto, un menú desplegable, un botón de opción o una casilla de verificación.

Enfermedades de transmisión sexual: Esto determina el valor predeterminado del elemento seleccionado. Para un cuadro de texto, esto determina el texto predeterminado ingresado en él. Para las casillas de verificación, los botones de opción y los cuadros desplegables, esto determina qué opción se selecciona de forma predeterminada.

Paso 3: Cómo decirle a WordPress que habilite el acceso a la nueva página de opciones

A pesar de que la página de opciones ha recibido un propósito utilizando el archivo "functions.php" dentro de la carpeta de inicio de un tema, aún no ha sido reconocida por WordPress ni incluida entre las muchas otras páginas de configuración dentro del Panel de WordPress. Esto se debe a que la página de opciones del tema debe identificarse en la página de funciones y debe indicarse a dónde ir (ya sea como un elemento de barra lateral independiente o dentro de la agrupación "Configuración"). Esto se hace usando una función relativamente simple que se agrega al archivo "functions.php" debajo de las matrices de personalizaciones potenciales:

función experimental_theme_save_values ​​() {
global $ longname, $ shortcode, $ settings;
if ($ _GET ['page'] == basename (__ FILE__)) {
if ('save' == $ _REQUEST ['action']) {
foreach ($ configuraciones como $ valor) {
update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); }
foreach ($ configuraciones como $ valor) {
if (isset ($ _REQUEST [$ value ['id']])) {update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); } else {delete_option ($ value ['id']); }}
header ("Ubicación: themes.php? page = functions.php & saved = true");
morir;
} else if ('reset' == $ _REQUEST ['action']) {
foreach ($ configuraciones como $ valor) {
delete_option ($ valor ['id']); }
header ("Ubicación: themes.php? page = functions.php & reset = true");
morir;
}
}
add_menu_page ($ nombre largo. ”Configuración de apariencia”, “”. $ nombre largo ”. Configuración de apariencia”, 'edit_themes', nombre base (__ ARCHIVO__), 'experimental_theme_save_values');

Este código hace dos cosas. Primero, permite guardar la configuración del tema a través del panel de opciones de administración. En segundo lugar, coloca un botón independiente en la barra lateral del Panel de WordPress que permite al usuario hacer clic en él e ir directamente al panel de opciones de tema. Está etiquetado como "Configuración de apariencia" al igual que la página en sí. La consistencia es la clave para eliminar la confusión y dirigir a los usuarios a la página sin decirles específicamente que se dirijan al panel de opciones para personalizar la apariencia del tema.

Paso 4: agregar mensajes de error y cerrar el archivo PHP

El paso final para completar todos los elementos del panel de opciones del tema es definir los mensajes de error que un usuario puede encontrar y luego asegurarse de que los elementos del formulario puedan presentarse en el estilo de WordPress predeterminado dentro de la página de opciones. La adición de los mensajes de error se realiza pegando este código en el archivo de funciones de PHP:

función experimental_theme_save_values ​​() {
global $ longname, $ shortcode, $ settings;
if ($ _REQUEST ['guardado']) echo '
'. $ themename.' Las personalizaciones de apariencia se han guardado correctamente.
';
if ($ _REQUEST ['reset']) echo '
'. $ themename.' Las personalizaciones de apariencia se han restablecido correctamente.
';

Debajo de estas dos líneas de código, la sección PHP del archivo functions.php puede cerrarse usando la etiqueta?> Final. Debajo de esto, el código XHTML se colocará para dar estilo a los elementos utilizando la hoja de estilos estándar de WordPress Dashboard.

Paso 5: Dando un poco de estilo a la página de opciones

Actualmente, los usuarios de WordPress Dashboard pueden ver la nueva página de error, pero no pueden hacer mucho con ella. Esto se debe a que los elementos del formulario y la hoja de estilo aún no se han colocado en el archivo functions.php para su uso dentro de la interfaz de administración. Todo eso está a punto de cambiar, ya que incluimos la hoja de estilo y los elementos de formulario predeterminados para uso del nuevo panel:

<div class = "wrap">
<h2> <? php echo $ longname; ? > Configuraciones </ h2>

<form method = "post" action = "options.php">

<? php break; caso 'texto':? >

<tr>
<td ancho = ”20%” rowspan = ”2 ″ valign =” medio ”> <fuerte> <? php echo $ valor ['nombre']; ? > </ strong> </ td>
<td width = ”80%”> <input style = ”width: 100%;” name = ”<? php echo $ value ['id']; ? > ”Id =” <? Php echo $ valor ['id']; ? > ”Type =” <? Php echo $ value ['type']; ? > ”Value =” <? Php if (get_settings ($ value ['id'])! = “”) {Echo get_settings ($ value ['id']); } else {echo $ value ['std']; }? > ”/> </ Td>
</ tr>

<tr>
<td> <small> <? php echo $ value ['desc']; ? > </ pequeño> </ td>
</ tr> <tr> <td colspan = ”2 ″> </ td>
</ tr>

<? php break;}? >

<input type = ”submit” value = ”<? php _e ('Guardar configuración del tema')? > ”/>

Este código se pega debajo de la etiqueta de cierre del archivo de funciones PHP y se puede personalizar para cada tipo de formulario que pueda incluir un panel de opciones de tema. La variable "caso" se puede cambiar de "texto" a elementos como cuadro de texto, casilla de verificación, selección y título. Estos formularios solo deben incluirse, definirse y diseñarse si el tema los está utilizando. De lo contrario, su inclusión no es necesaria y dejarla fuera del archivo de funciones del tema promoverá la eficiencia y el código limpio.

Paso 9: habilitar la opción personalizada para que se vea en el tema real

Hay dos pasos para ejecutar al asegurarse de que cualquier cambio se puede ver en las plantillas públicas de un tema. El primero es colocar una variable en el pie de página del tema que mostrará los derechos de autor y el texto de versiones definidos por el usuario que habilitamos en los pasos anteriores de este tutorial. Esto se hace colocando el siguiente código en el área de copyright del pie de página:

<? php echo $ apdt_custom_footer; ? >

Este texto llama a la matriz personalizada para el texto de pie de página que se definió anteriormente y, según la declaración "Eco", imprime ese texto en el pie de página. Esta etiqueta puede estar contenida dentro de cualquier etiqueta XHTML que el usuario considere adecuada, pero no aparecerá sin un código agregado al encabezado del sitio.

En el encabezado, se debe indicar al tema que busque las opciones definidas por el usuario que se configuran en el Tablero de WordPress, y debe conocer las variables que se definen en el archivo personalizado “functions.php” para que pueda imprimir su contenido. en el sitio web. Esto se hace colocando la siguiente variable de PHP en el encabezado del sitio web (normalmente el archivo “header.php”):

<? php global $ settings;
foreach ($ configuraciones como $ valor) {
if (get_settings ($ value ['id']) === FALSE) {$$ value ['id'] = $ value ['std']; } else {$$ value ['id'] = get_settings ($ value ['id']); }
}
? >

Eso es todo al respecto. Ahora, todas las opciones definidas en el archivo functions.php personalizado se pueden reflejar en la apariencia de la página simplemente al incluir una variable PHP definida a medida donde se supone que las personalizaciones y el contenido designados tienen efecto.

Paso 10: prueba la nueva configuración y la página de opciones

Ningún esfuerzo de desarrollo de WordPress está completamente completo hasta que se haya probado exhaustivamente en busca de errores, errores y errores accidentales en el código PHP colocado en el archivo "functions.php". Dicho esto, ¡es hora de hacerse la prueba! Inicie sesión en el Panel de WordPress y, si el tema en el que ha estado trabajando no está seleccionado actualmente, asegúrese de navegar a la categoría "Apariencia" en la barra lateral y active el tema relevante.

A partir de ahí, comprueba algunas cosas:

  1. Asegúrese de que el enlace de configuración del tema aparezca como su propia entidad en la barra lateral debajo del encabezado de categoría de la barra lateral "Configuración".
  2. Asegúrese de que se pueda acceder a la opción de personalización del texto del pie de página designado en el panel de control de opciones personalizadas; modifique el contenido predeterminado del pie de página y guarde la preferencia. Asegúrese de que se guarda sin un error.
  3. Visite su sitio web público actual y asegúrese de que se muestran los cambios realizados en el Panel de control con respecto al contenido del pie de página.
  4. Si todo funciona correctamente, respira con alivio y disfruta de la primera página del panel de control de las opciones de tema de WordPress.

Acerca de Jerry Low

Fundador de WebHostingSecretRevealed.net (WHSR): una revisión de alojamiento confiable y utilizada por los usuarios de 100,000. Más de 15 años de experiencia en alojamiento web, marketing de afiliación y SEO. Colaborador de ProBlogger.net, Business.com, SocialMediaToday.com y más.