Share
Si acaba de unirse a nosotros, hemos cubierto muchos temas de esta serie: hemos intentado ofrecer una descripción general completa de la API de configuración de WordPress, así como las funciones relacionadas. Hemos discutido configuraciones, opciones, navegación y menús. También hemos estado trabajando con ejemplos prácticos empleando cada uno de los temas que hemos discutido.
Ya casi hemos terminado. En los dos últimos artículos de esta serie, analizaremos el saneamiento, la validación y los elementos de entrada básicos que podemos usar en nuestros complementos y temas de WordPress..
Antes de empezar: En este artículo se supone que ha estado siguiendo el resto de la serie, que tiene instalada una copia de trabajo del código de muestra y que 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..
Antes de comenzar a escribir cualquier código, debemos entender exactamente qué es lo que vamos a lograr: la validación y el saneamiento. En pocas palabras, estos son los dos aspectos de la escritura y lectura segura de datos de una página de opciones de WordPress y la base de datos subyacente.
Vamos a profundizar mucho más en esto mientras observamos cada uno de los tipos de entrada y trabajamos con los ejemplos, pero vamos a dar un poco de contexto a lo que realmente vamos a hacer:
Quizás el resumen más conciso es que la validación se debe hacer antes de escribir los datos en la base de datos y el saneamiento se debe hacer entre la lectura de los datos de la base de datos y su envío al navegador.
Muchas veces, la validación se relaciona con el almacenamiento de datos y la sanitización se relaciona con la recuperación de datos, pero también es completamente posible sanear los datos después de que haya pasado la validación para asegurarse de que solo se guardan datos limpios en la base de datos. Cuando trabajamos con nuestro propio código, es más fácil hacerlo; sin embargo, no siempre podemos depender de que otros desarrolladores hayan saneado sus datos, por lo que la responsabilidad de limpiar todos los datos que salen de la base de datos recae en nosotros.
Para facilitar la comprensión completa de la validación y el saneamiento, introduzcamos una nueva pestaña en nuestra página de opciones. Si ha introducido un nuevo menú de nivel superior, esto también requerirá que agregue un nuevo elemento de submenú y que se actualice la pestaña de visualización de opciones. Cuidemos eso ahora.
Primero, ubique el sandbox_example_theme_menu Funciona y agrega el siguiente submenú:
Accentsconagua
add_submenu_page ('sandbox_theme_menu', 'Ejemplos de entrada', 'Ejemplos de entrada', 'administrador', 'sandbox_theme_input_examples', create_function (null, 'sandbox_theme_display ("input_examples");')); Luego, debemos seguir adelante y apagar una función que creará el grupo de opciones para nuestra nueva pestaña de configuración. Asumiendo que has estado siguiendo la serie, esto debería ser fácil de seguir:
function sandbox_theme_initialize_input_examples () if (false == get_option ('sandbox_theme_input_examples')) add_option ('sandbox_theme_input_examples'); // end if // end sandbox_theme_initialize_input_examples add_action ('admin_init', 'sandbox_theme_initialize_input_examples'); Finalmente, necesitamos actualizar el sandbox_theme_display función para representar la pestaña y seleccionarla correctamente cuando se accede a través de las pestañas o del elemento del submenú. Primero, actualicemos el condicional que examina la cadena de consulta y los argumentos de la función. Específicamente, necesita manejar el caso para los ejemplos de entrada. Actualice el condicional para verse así:
if (isset ($ _GET ['tab'])) $ active_tab = $ _GET ['tab']; else if ($ active_tab == 'social_options') $ active_tab = 'social_options'; else if ($ active_tab == 'input_examples') $ active_tab = 'input_examples'; else $ active_tab = 'display_options'; // termina si / else
A continuación, debemos agregar una nueva pestaña a la navegación. Actualizar el nav-tab-wrapper Contenedor para incluir este nuevo anclaje:
"> Ejemplos de entrada
Finalmente, necesitamos agregar un condicional más al elemento de formulario responsable de mostrar las opciones. Actualice el condicional para verse así:
if ($ active_tab == 'display_options') settings_fields ('sandbox_theme_display_options'); do_settings_sections ('sandbox_theme_display_options'); elseif ($ active_tab == 'social_options') settings_fields ('sandbox_theme_social_options'); do_settings_sections ('sandbox_theme_social_options'); else settings_fields ('sandbox_theme_input_examples'); do_settings_sections ('sandbox_theme_input_examples'); // termina si / else Suponiendo que haya incluido todo el código correctamente, su panel de administración ahora debería tener este aspecto:
Ahora estamos listos para comenzar a introducir nuevos elementos de opción y la funcionalidad de validación y saneamiento. Si el código anterior no está claro, asegúrese de consultar los artículos que aparecen anteriormente en la serie, ya que las configuraciones, las páginas de menú y las pestañas se han cubierto..
Hay cinco tipos de elementos básicos que podemos usar para la entrada en nuestras páginas de opciones de WordPress. Estas son entradas, áreas de texto, casillas de verificación, botones de opción y casillas de selección. En el resto de este artículo, vamos a echar un vistazo a los elementos de entrada y las áreas de texto y revisaremos los últimos tres en el artículo final de la serie..
Los elementos de entrada son ideales para situaciones en las que necesitamos capturar una pequeña cantidad de texto de un usuario. Esto puede ser algo así como su nombre o número de teléfono o algo más complejo, como una URL, su dirección de correo electrónico o una clave API. De hecho, en realidad ya estamos usando los campos de entrada en la página "Opciones sociales" cuando pedimos las direcciones de los perfiles de redes sociales del usuario..
Validar la entrada de texto puede ser una operación compleja, especialmente si desea imponer ciertas restricciones. Por ejemplo, los números de teléfono siguen un formato específico y si le está pidiendo a un usuario su número de teléfono, puede configurar una función que determine si el número de teléfono cumple con el formato estricto. Obviamente, no podemos capturar todos esos casos de uso en nuestros ejemplos aquí, ya que es simplemente un campo demasiado amplio.
En cambio, lo que vamos a hacer es asegurarnos de que no se escriba ningún código malicioso en la base de datos. Esto significa que cuando un usuario ingresa texto en nuestro cuadro de texto, vamos a eliminar todas las etiquetas HTML y los caracteres potencialmente problemáticos. Pero antes de hacer eso, introduzcamos una nueva opción, entendamos el marcado, y luego veamos qué sucede si no hacer Hacer cumplir cualquier tipo de validación..
Adelante, introduzca la nueva sección y el campo usando el sandbox_theme_initialize_input_examples función:
add_settings_section ('input_examples_section', 'Input Example', 'sandbox_input_examples_callback', 'sandbox_theme_input_examples'); add_settings_field ('Elemento de entrada', 'Elemento de entrada', 'sandbox_input_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples'); A continuación, defina la devolución de llamada para la sección:
función sandbox_input_examples_callback () echo 'Proporciona ejemplos de los cinco tipos de elementos básicos.
';
Por último, introduzca el elemento de entrada real que vamos a utilizar para capturar la entrada:
function sandbox_input_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Renderizar el eco de salida ''; Su página de opciones ahora debería verse como la siguiente imagen:
Hasta este punto, hemos estado creando nuestros elementos de opción y he mencionado que eventualmente discutiríamos cada uno de los atributos más adelante en la serie. Este es el artículo en el que comenzamos a ver el significado de la carné de identidad y nombre atributos.
Tenga en cuenta que al inicio de la función, leemos las opciones para esta pestaña en particular usando WordPress ' get_option función. Esta función devolverá las opciones en una matriz. los carné de identidad El atributo del elemento de entrada identifica el valor de este elemento en la matriz. los nombre atributo es el nombre de la matriz codificada con el ID. Tener sentido?
Para estar completo, piénsalo de esta manera:
sandbox_theme_input_examples carné de identidad atributo. En este ejemplo, es "input_example"sandbox_theme_input_examples [input_example] Entonces el carné de identidad del elemento representa la clave del valor en la matriz de opciones, la nombre atributo representa el nombre de la matriz con la clave del valor en la matriz.
En este punto, es completamente posible comenzar a ingresar valores en el elemento de entrada y guardar la opción. Continúe y pruébelo: establezca un valor, haga clic en "Guardar cambios" y verá que el elemento de entrada muestra el valor que acaba de crear. Pero aquí está el problema: intente pegar algo como esto en el campo de entrada:
A continuación, salta a index.php y añade el siguiente bloque de código:
Actualice la página de inicio y notará que aparece un iframe en medio de la página de inicio de su tema:
Parece un problema relativamente menor, pero este es exactamente el tipo de cosas que debemos prevenir. No queremos que los usuarios tengan ese tipo de control sobre la base de datos, las páginas del sitio, etc. Por supuesto, guardar un iframe simple es un pequeño ejemplo: si los usuarios pueden insertar JavaScript, entonces pueden influir en ciertos aspectos de todo su sitio. Aún más serio, si los usuarios pueden insertar SQL malicioso, su base de datos podría verse comprometida.
Así que vamos a introducir alguna validación. Como se mencionó anteriormente, queremos eliminar cualquier marca y caracteres problemáticos. Para hacer esto, primero debemos definir una devolución de llamada de validación para nuestra sección de elementos de entrada. Para hacer esto, revisemos la register_setting Llama y actualiza para que se vea así:
register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples', 'sandbox_theme_validate_input_examples'); A continuación, definamos esa función:
función sandbox_theme_validate_input_examples ($ input) // fin de sandbox_theme_validate_input_examples
Tenga en cuenta que esta función acepta un único parámetro que hemos nombrado entrada. Este argumento representa el conjunto de opciones sin validar que WordPress está enviando a esta función desde la página de opciones que acabamos de guardar. Tenga en cuenta también que a medida que agregamos elementos de opción adicionales, usaremos esta misma función.
La creación de una función de validación generalmente sigue tres pasos:
Vamos a hacer eso ahora. Eche un vistazo a la siguiente implementación prestando mucha atención a los comentarios:
function sandbox_theme_validate_input_examples ($ input) // Crea nuestra matriz para almacenar las opciones validadas $ output = array (); // Recorra cada una de las opciones entrantes foreach ($ input as $ key => $ value) // Verifique si la opción actual tiene un valor. Si es así, procesalo. if (isset ($ input [$ key])) // Eliminar todas las etiquetas HTML y PHP y manejar adecuadamente las cadenas citadas $ output [$ key] = strip_tags (stripslashes ($ input [$ key])); // end if // end foreach // Devuelve la matriz procesando cualquier función adicional filtrada por esta acción. return apply_filters ('sandbox_theme_validate_input_examples', $ output, $ input); La mayoría del código debe ser relativamente sencillo, pero los dos aspectos más importantes se encuentran en la declaración que se encuentra dentro del condicional y la declaración de retorno..
strip_tags Función, que es nativa de PHP, para eliminar todas las etiquetas HTML y PHPtiras adhesivas función, que es otra función nativa de PHP, que manejará correctamente las comillas alrededor de una cadena.Finalmente, podríamos haber simplemente devuelto el $ salida matriz al final de la función, pero devolviendo el resultado de la llamada a apply_filters es una buena práctica Aunque excede el alcance de este artículo, vale la pena señalar que esta declaración básicamente llama a cualquier otra función que sea filtrada por esta función en particular antes de devolver el valor..
Ahora, intente dar alguna entrada de muestra en el elemento de entrada. Intente proporcionar una cadena simple, un número de teléfono, una dirección de correo electrónico, una URL, un bloque de HTML, una línea de JavaScript, etc. Limpio, eh?
Por último, volvamos a visitar index.php y proporcionar un último cambio para demostrar cómo podemos realizar el saneamiento de salida. Recuerde, es una buena práctica sanear las opciones incluso si está trabajando con valores que no provienen de su propio trabajo..
Localiza la línea que dice:
Y actualízalo para que lea:
los sanitize_text_field La función es otra función nativa de WordPress que está diseñada específicamente para sanear la entrada del usuario de los campos de texto o de la base de datos.
Veremos más a lo largo de este artículo y del siguiente, pero hay una lista completa de estas funciones disponibles en el Códice de WordPress..
Al mirar los elementos de entrada, cubrimos mucho de suelo. Afortunadamente, muchos de los mismos principios se aplican no solo a las áreas de texto, sino también al resto de los elementos. Como tal, no deberíamos tener que pasar tanto tiempo con cada elemento. Esto nos permitirá ver algunas de las idiosincrasias que vienen con cada uno de los tipos de elementos..
Por ahora, vamos a introducir un elemento textarea. En nuestro ejemplo, este elemento en particular permitirá a los usuarios ingresar algunas oraciones sobre ellos mismos. Piense en ello como una breve biografía. Primero, agregue la siguiente llamada a la sandbox_theme_initialize_input_examples función:
add_settings_field ('Elemento Textarea', 'Elemento Textarea', 'sandbox_textarea_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); A continuación, definamos la devolución de llamada necesaria para representar el área de texto:
function sandbox_textarea_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Renderizar el eco de salida ''; Observe que esta llamada se realiza de manera muy similar al elemento de entrada definido anteriormente. Específicamente, hemos suministrado un carné de identidad atributo para dar a este valor una clave en la matriz de opciones y hemos especificado el nombre exacto y la clave en el elemento nombre atributo. También le hemos dado al área de texto un tamaño particular, aunque esto es puramente arbitrario..
Recuerde que dado que este elemento pertenece a la misma sección que el elemento de entrada, se procesa utilizando la misma función de validación. Como tal, obtenemos el mismo nivel de validación de forma gratuita. Pruébelo: intente guardar marcas, scripts y otros tipos de código utilizando el área de texto..
Por último, actualicemos la página pública de nuestro tema para recuperar este valor y sanearlo adecuadamente para su visualización. En index.php, Agregue el siguiente bloque de código:
Aunque es prácticamente lo mismo que el campo de entrada, debemos asegurarnos de que estamos completos en nuestra validación y desinfección.
Aunque solo observamos dos tipos de elementos, cubrimos mucho terreno. Además de actualizar nuestro tema, también hemos implementado la validación básica y hemos comenzado a explorar las funciones de desinfección de WordPress..
En el artículo final, analizaremos los tres tipos de elementos restantes y cómo gestionarlos mediante la validación y el saneamiento. Mientras tanto, experimente con algo de lo que cubrimos aquí y recuerde revisar los artículos de fuentes relacionadas vinculados al final de la publicación..
get_optionstrip_tagstiras adhesivas apply_filterssanitize_text_field