Share
Hemos llegado al artículo final de la serie. En la última publicación, echamos un vistazo a la introducción de la validación, el saneamiento y un par de elementos de entrada básicos que podemos aprovechar al crear páginas de opciones..
En este artículo, vamos a echar un vistazo al conjunto final de tres opciones y cómo conectarlas al inicio del tema..
Antes de empezar: Al igual que con los últimos, este artículo asume que ha estado siguiendo el resto de la serie, tiene instalada una copia de trabajo del código de muestra y ahora está relativamente familiarizado con la API de configuración y las opciones de tema. Si no está seguro de alguno de los anteriores, le recomiendo que lea el resto de los artículos antes de sumergirse en este post..
Anteriormente en esta serie, agregamos casillas de verificación. Podríamos volver atrás y revisarlos, pero mantengámonos coherentes con lo que hemos hecho hasta este momento e introduzcamos nuevas opciones. Una vez que hayamos terminado, puede revisar el código que agregamos al principio de la serie para revisar.
En primer lugar, vamos a introducir el elemento de casilla de verificación a la sandbox_theme_initialize_input_examples función:
Accentsconagua
add_settings_field ('Checkbox Element', 'Checkbox Element', 'sandbox_checkbox_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); A continuación, debemos seguir adelante y definir la devolución de llamada que hemos especificado anteriormente. Agregue la siguiente función a su proyecto:
function sandbox_checkbox_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; echo $ html; // end sandbox_checkbox_element_callback Volveremos a revisar esta función momentáneamente, pero primero note que he agregado un elemento de etiqueta junto a la casilla de verificación. Las casillas de verificación a menudo tienen un elemento asociado con ellas que también permite hacer clic para activar la casilla de verificación. Esto facilita que los usuarios alternen una opción sin tener que hacer clic con precisión en la casilla de verificación.
Para asociar una etiqueta con una casilla de verificación, debe proporcionar la etiqueta para atribuir el valor de la CARNÉ DE IDENTIDAD Atributo de la casilla de verificación a la que está vinculado. Bastante fácil, cierto?
Ahora, actualice su página de opciones y debería ver el nuevo elemento visible en su página de opciones. Pero, por ahora, en realidad no guarda ni recupera un valor. En primer lugar, vamos a introducir un valor atributo en la casilla de verificación. Esto es algo arbitrario, pero es una práctica común dar a un elemento marcado un valor de '1'. Vamos a hacer eso ahora:
$ html = '';
A continuación, pensemos exactamente qué debe suceder cuando guardamos un valor. Idealmente:
Relativamente claro, ¿verdad? En lugar de leer la opción, configurar un condicional y verificar la presencia o ausencia de un valor, podemos aprovechar WordPress ' comprobado función.
La función acepta tres argumentos, de los cuales solo se requiere el primero:
check = "check" al navegadorAsí que vamos a actualizar nuestro código para usar esta función:
$ html = '';
Actualice la página y marque la opción, guardar y repetir.
Si algo de esto parece un poco confuso, revise el artículo anterior en el que cubrimos los significados de cada atributo en un elemento de opción.
Finalmente, actualicemos la parte frontal del tema para marcar esta opción y generar una cadena de texto en función de si la opción ha sido marcada. Recordemos que cuando creamos el elemento, le dimos el valor de '1'. Esto significa que cuando la casilla de verificación esté marcada y serializada, mantendrá un valor de uno. En pocas palabras, necesitamos escribir un condicional que verifique el valor de la opción y luego presente el texto de manera apropiada. En index.php, añade este bloque de código:
La casilla de verificación ha sido marcada.
La casilla de verificación no ha sido marcada.
Ahora, vuelva a la página de configuración, active la casilla de verificación y actualice la página.
Como se mencionó al principio de esta sección, mire hacia atrás en las "Opciones de visualización" que presentamos anteriormente en esta serie y vea si está mucho más claro ahora que hemos examinado cómo introducir y administrar los elementos de las casillas de verificación..
Los botones de radio son elementos que son útiles en grupos; después de todo, nunca usarás un solo botón de radio. Lo que pasa con los elementos de radio es que proporcionan una manera de permitir a los usuarios elegir una de un conjunto de opciones mutuamente excluyentes..
Por una razón u otra, los botones de opción son a menudo un desafío para los desarrolladores de WordPress. Con suerte, lo haremos lo más fácil posible para incluirlo en nuestros proyectos. Al igual que con el resto de los ejemplos de esta serie, detalle lo que vamos a hacer:
Parece lo suficientemente claro: continuemos y agreguemos el elemento de campo a nuestra página de opciones:
add_settings_field ('Elementos del botón de radio', 'Elementos del botón de radio', 'sandbox_radio_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Y vamos a implementar la devolución de llamada del elemento de radio. Primero, especificaremos el código, luego lo revisaremos:
function sandbox_radio_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; $ html. = ''; $ html. = ''; echo $ html; // end sandbox_radio_element_callback Lo primero que hay que notar cuando se trabaja con botones de radio es que lo hacen no siga los ejemplos típicos de cómo configurar el CARNÉ DE IDENTIDAD y nombre atributos Tenga en cuenta que el CARNÉ DE IDENTIDAD el atributo es único y no tiene relación con el resto de los atributos en el elemento. Observe también que la etiqueta asociada a cada elemento utiliza el CARNÉ DE IDENTIDAD por su para atributo. Esto une la etiqueta al botón de radio para que los usuarios puedan hacer clic en la etiqueta para seleccionar el elemento de radio.
A continuación, observe que el nombre los atributos son los mismos para cada elemento de radio pero el valores son diferentes. Esto es lo que hace que los botones de radio sean mutuamente exclusivos: cada elemento de radio debe tener el mismo nombre Pero los valores deben ser únicos..
Finalmente, podemos configurar un condicional en la página de inicio verificando el valor del elemento. En su tema funciones.php, Agregue el siguiente bloque de código:
La primera opción fue seleccionada.
La segunda opción fue seleccionada.
Cargue la página de inicio de su tema, alterne las opciones y actualice. Debería ver las dos oraciones cambiando según el valor de los elementos de opción.
El último elemento que vamos a revisar es el elemento de selección. Este elemento ofrece a los usuarios un menú desplegable de opciones entre las que elegir. Planifiquemos exactamente lo que necesitamos introducir para este elemento:
En este punto de la serie, esto debería ser bastante rutinario. Empecemos, primero, introduciremos el campo de configuración:
add_settings_field ('Seleccionar Elemento', 'Seleccionar Elemento', 'sandbox_select_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); A continuación, vamos a definir la función de devolución de llamada. Revise el código y luego lo discutiremos después del ejemplo:
function sandbox_select_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; echo $ html; // end sandbox_radio_element_callback Primero, actualice la página de opciones para asegurarse de que aparezca el elemento seleccionado. Suponiendo que sí, revisemos el código anterior.
Al definir el elemento select, le hemos dado un CARNÉ DE IDENTIDAD atributo y un nombre atribuye tanto como lo hacemos con el resto de los elementos que hemos demostrado. A continuación, cada opción tiene un valor único y un texto que corresponde al valor. Aunque no tiene que hacer esto, normalmente lo encuentro útil cuando trabajo en mis proyectos. Finalmente, hemos aprovechado la seleccionado Ayudante que ofrece WordPress. Esto es muy parecido al comprobado Función que hemos utilizado en el ejemplo anterior, excepto que está orientada a seleccionar opciones.
El último paso será actualizar el extremo delantero del tema para que compruebe el valor del elemento seleccionado una vez que se haya guardado. Agregue el siguiente bloque de código a su index.php:
Nunca mostrar esto. Algo irónico incluso para mostrar esto.
A veces mostrar esto.
Mostrar siempre esto.
Vuelva a visitar la página de inicio de su tema, cambie las opciones y luego actualice la página: debería notar la actualización de texto según la opción que haya seleccionado..
Con eso, finalmente llegamos al final de esta serie. La API de configuración es una característica poderosa de WordPress y nos brinda la capacidad de implementar páginas de opciones seguras y bien diseñadas, pero requiere que lo usemos correctamente. Desafortunadamente, esta es una de las características más ignoradas de la plataforma por muchos desarrolladores..
En última instancia, mi objetivo era guiar a los desarrolladores a través de la API desde el principio para comprender por qué es importante, a la configuración, desde las páginas del menú, a la navegación por pestañas y cómo trabajar con cada uno de los tipos de elementos..
Finalmente, recuerde que puede encontrar el código de ejemplo en GitHub. A medida que continúe trabajando con la API de configuración o encuentre una característica que no esté clara, contribuya. Me encantaría que esta serie y el código de ejemplo sigan proporcionando una fuente de educación para la comunidad de WordPress.
comprobadoseleccionado