Share
Cuando se trata de desarrollar Temas y Complementos de WordPress, hay varias formas diferentes en que los desarrolladores están creando sus menús, opciones y funcionalidad de validación. La cuestión es que, en realidad, solo hay una forma de hacerlo correctamente dentro de WordPress: la API de configuración.
Esta serie pretende ser la guía definitiva sobre cómo aprovechar las ventajas de la API de configuración de WordPress para que tenga un único punto de referencia para desarrollar adecuadamente sus temas y complementos..
En el primer artículo de esta serie analizamos la API de configuración y por qué es importante. Aquí, comenzaremos a sumergirnos en la API y cómo aprovechar todo lo que ofrece..
Examinaremos las unidades fundamentales de las opciones de WordPress (secciones, campos y configuraciones) y cómo incluirlas en el Panel de WordPress nativo..
Antes de escribir cualquier código, es importante comprender los tres componentes principales de la API de configuración de WordPress.
En este punto, no se preocupe si aún no está seguro de alguno de los componentes principales. Vamos a analizar en profundidad cada componente junto con el código fuente de ejemplo que lo une todo.
Para comenzar a programar con la API de configuración, configuremos un tema básico que se pueda usar a lo largo de este artículo y el resto de la serie. Todo el código fuente está disponible en GitHub, también.
En su instalación local de WordPress, vaya al directorio "temas" y cree un nuevo directorio vacío y llámelo "WordPress-Settings-Sandbox". Agregue los siguientes tres archivos:
Agregue el siguiente código a style.css:
/ * Nombre del tema: Configuración de WordPress Zona de prueba URI URI: SU URI Descripción: Un tema simple utilizado para mostrar la API de configuración de WordPress. Autor: SU NOMBRE Autor URI: SU SITIO WEB Versión: 0.1 Licencia: Copyright 2012 SU NOMBRE (SU DIRECCIÓN DE CORREO ELECTRÓNICO) Este programa es software libre; puede redistribuirlo y / o modificarlo según los términos de la Licencia Pública General de GNU, versión 2, tal como lo publica Free Software Foundation. Este programa se distribuye con la esperanza de que sea útil, pero SIN NINGUNA GARANTÍA; sin ni siquiera la garantía implícita de COMERCIABILIDAD o APTITUD PARA UN PROPÓSITO PARTICULAR. Vea la Licencia Pública General de GNU para más detalles. Debería haber recibido una copia de la Licencia Pública General de GNU junto con este programa; si no, escriba a la Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 EE. UU. * /
A continuación, agregue el siguiente código a index.php:
La guía completa de la API de configuración | Tema de la caja de arena Encabezado de Sandbox
Este es el contenido del tema..
© Todos los derechos reservados.
Tenga en cuenta que el marcado anterior es extraordinariamente simple y lo hago no Recomiendo usar esto como una base para el desarrollo del tema. Está diseñado para esta serie de artículos y simplemente proporciona los medios por los cuales leeremos los valores de la API de configuración..
En el Temas En la pantalla de administración, actualice la página y debería ver aparecer el nuevo tema de Sandbox. Adelante, actívalo..
En este punto, estamos listos para empezar.
Observe que en la plantilla de índice anterior, hemos definido tres regiones de contenido específicas: encabezado, contenido y pie de página. Usando la API de configuración, creemos una sección "General" que contiene tres campos, cada uno de los cuales corresponde a una de las regiones de contenido específicas que acabamos de definir.
Antes de escribir cualquier código, siempre me resulta útil enumerar exactamente lo que debo hacer. En este caso, tenemos que hacer lo siguiente:
Para evitar bloques de código masivos y para asegurarnos de que cubrimos todas nuestras bases, tomaremos cada uno de los puntos anteriores punto por punto.
Para encontrar nuestra sección de opciones "General", necesitaremos usar la función add_settings_section de la API de configuración. Según el códice de WordPress, add_settings_section requiere tres argumentos:
Con eso, sigamos adelante y definamos nuestra sección. Eche un vistazo al siguiente código comentado. Estamos agregando esto a nuestro archivo functions.php.
Una palabra sobre los fragmentos de código de esta serie: no solo copie y pegue este código. Tómese el tiempo para leer cada línea, vea cómo se corresponden los argumentos con cada función de API que cubrimos y siga los comentarios correspondientes para asegurarse de entender lo que estamos haciendo:
Seleccione las áreas de contenido que desea mostrar.'; // finalizar sandbox_general_options_callback?>
¿Tener sentido? En general, no parece mucho, pero navega hasta tu Ajustes menú y haga clic en General. Desplácese hasta el final de la página y verá su nueva sección de opciones.
Puede agregar esta sección a cualquiera de las páginas bajo el Ajustes menú. En el ejemplo anterior, hemos pasado "general" como último parámetro a add_settings_section, pero si desea agregarlo a una página diferente, puede proporcionar un título de página diferente. Aquí hay una referencia para cada uno de los Ajustes Páginas y su correspondiente clave:
Ahora que tenemos una sección definida, podemos introducir algunas opciones. Recuerde que en nuestra plantilla de índice definimos tres elementos contenedores específicos: encabezado, contenido y pie de página.
A pesar de que presentaremos más opciones a lo largo de esta serie, hoy presentaremos una manera de alternar la visibilidad de cada uno de los elementos anteriores..
Al igual que hicimos con la sección de configuración, me gusta enumerar exactamente lo que debemos hacer antes de escribir cualquier código. Ya que vamos a estar alternando cada una de las áreas de contenido ...
En este punto, estamos listos para introducir el primer campo de configuración. Para hacer esto, usaremos la función add_settings_field. Esta función toma seis parámetros (cuatro requeridos, dos opcionales). Son los siguientes:
Dicho esto, avancemos y definamos nuestro primer campo de configuración. Específicamente, presentaremos una opción para alternar la visibilidad del encabezado.
Primero, hacemos una llamada a add_settings_field justo debajo de la función add_settings_section llamada en la función de inicialización que escribimos en la primera parte del tutorial. Revise cada línea y los comentarios para cada opción:
Accentsconagua
// A continuación, introduciremos los campos para alternar la visibilidad de los elementos de contenido. add_settings_field ('show_header', // ID utilizada para identificar el campo en todo el tema 'Header', // La etiqueta a la izquierda del elemento de la interfaz de opción 'sandbox_toggle_header_callback', // El nombre de la función responsable de representar la interfaz de la opción 'general', // La página en la que se mostrará esta opción 'general_settings_section', // El nombre de la sección a la que pertenece este campo array (// La matriz de argumentos para pasar a la devolución de llamada. En este caso, solo una descripción. 'Active esta configuración para mostrar el encabezado.')); A continuación, definimos la devolución de llamada referida en la función anterior. Esta devolución de llamada se utiliza para representar la casilla de verificación y la descripción en la página de administración:
/ ** * Esta función representa los elementos de la interfaz para alternar la visibilidad del elemento del encabezado. * * Acepta una matriz de argumentos y espera que el primer elemento de la matriz sea la descripción * que se muestra al lado de la casilla de verificación. * / function sandbox_toggle_header_callback ($ args) // Tenga en cuenta que el ID y el atributo de nombre del elemento deben coincidir con el del ID en la llamada a add_settings_field $ html = ''; // Aquí, tomaremos el primer argumento de la matriz y lo agregaremos a una etiqueta junto a la casilla de verificación $ html. = ''; echo $ html; // end sandbox_toggle_header_callback
En lo que respecta a la casilla de verificación, preste atención a los comentarios, pero no se preocupe demasiado por algunos de los atributos que no reconoce (como una llamada a la función de marcada ()). Más adelante en esta serie, veremos cada elemento de entrada y sus funciones auxiliares correspondientes..
Por ahora, su archivo functions.php debería verse así:
Seleccione las áreas de contenido que desea mostrar.'; // End sandbox_general_options_callback / * ------------------------------------------- ----------------------------- * * Field Callbacks * ---------------- -------------------------------------------------- ------ * / / ** * Esta función representa los elementos de la interfaz para alternar la visibilidad del elemento del encabezado. * * Acepta una matriz de argumentos y espera que el primer elemento de la matriz sea la descripción * que se muestra al lado de la casilla de verificación. * / function sandbox_toggle_header_callback ($ args) // Tenga en cuenta que el ID y el atributo de nombre del elemento coinciden con el del ID en la llamada a add_settings_field $ html = ''; // Aquí, tomaremos el primer argumento de la matriz y lo agregaremos a una etiqueta junto a la casilla de verificación $ html. = ''; echo $ html; // finalizar sandbox_toggle_header_callback?>
En este punto, actualice el Configuración general página. Debería ver su casilla de verificación con la etiqueta "Encabezado" y una descripción junto a la casilla de verificación.
Desafortunadamente, aún no está guardando el valor en la base de datos.
Para que nuestros campos se guarden realmente en la base de datos, debemos registrarlos con WordPress. Hacer esto es relativamente fácil: solo tenemos que aprovechar la función register_setting.
Esta función acepta tres argumentos (dos requeridos, uno opcional):
En este punto, registremos la configuración que acabamos de crear. Echa un vistazo al código de abajo. Agregue esta línea de código directamente debajo de la llamada a add_settings_field en la función de inicialización que definimos anteriormente en el artículo. Podría decirse que es el más fácil de seguir de todos los fragmentos de este artículo:
// Finalmente, registramos los campos con WordPress register_setting ('general', 'show_header'); Pruébelo: marque la casilla de verificación, haga clic en "Guardar cambios" y observe que cuando se actualiza la página, la opción ha cambiado. Desmarque la casilla de verificación, guarde y vea cómo se guarda..
Bastante fácil, cierto?
Todavía tenemos que introducir las opciones para alternar la visibilidad del área de contenido y el área del pie de página. Es casi exactamente lo mismo que cómo configuramos la opción para alternar el encabezado.
Primero, definamos el campo para mostrar el área de contenido. Esto irá bajo la primera llamada a add_settings_field:
add_settings_field ('show_content', 'Content', 'sandbox_toggle_content_callback', 'general', 'general_settings_section', array ('Activar esta configuración para mostrar el contenido.')); Y vamos a configurar la función de devolución de llamada:
function sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_content_callback
A continuación, definamos el campo para mostrar el área del pie de página:
add_settings_field ('show_footer', 'Footer', 'sandbox_toggle_footer_callback', 'general', 'general_settings_section', array ('Activar esta configuración para mostrar el pie de página.')); Y configura la devolución de llamada para este campo, también:
función sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_footer_callback
Finalmente, registremos estos dos nuevos campos con WordPress. Estas dos llamadas de función van al final de la función de inicialización que definimos anteriormente en el artículo.
register_setting ('general', 'show_content'); register_setting ('general', 'show_footer'); La versión final de functions.php debería verse así:
Seleccione las áreas de contenido que desea mostrar.'; // End sandbox_general_options_callback / * ------------------------------------------- ----------------------------- * * Field Callbacks * ---------------- -------------------------------------------------- ------ * / / ** * Esta función representa los elementos de la interfaz para alternar la visibilidad del elemento del encabezado. * * Acepta una matriz de argumentos y espera que el primer elemento de la matriz sea la descripción * que se muestra al lado de la casilla de verificación. * / function sandbox_toggle_header_callback ($ args) // Tenga en cuenta que el ID y el atributo de nombre del elemento coinciden con el del ID en la llamada a add_settings_field $ html = ''; // Aquí, tomaremos el primer argumento de la matriz y lo agregaremos a una etiqueta junto a la casilla de verificación $ html. = ''; echo $ html; // finalizar la función sandbox_toggle_header_callback sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // finalizar la función sandbox_toggle_content_callback sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // finalizar sandbox_toggle_footer_callback?>
Ahora actualice el Configuración general Página y aviso que tiene las tres casillas de verificación completamente funcionales.
¿De qué sirven las opciones si no podemos aprovecharlas en nuestro tema o en nuestro complemento? Necesitamos poder leer los valores para poder administrar adecuadamente nuestras nuevas opciones.
Para hacer esto, necesitamos usar la función get_option. Esta función acepta dos argumentos (uno requerido, uno opcional):
Primero, intentemos cambiar la visibilidad del encabezado. En la plantilla de índice que creamos anteriormente en este artículo, ubique el elemento con el ID del encabezado. Debe tener un aspecto como este:
Encabezado de Sandbox
A continuación, hagamos una llamada a get_option en el contexto de un condicional. Si el condicional se evalúa como verdadero (es decir, la opción se ha marcado en la Configuración general página), entonces se mostrará el elemento; de lo contrario, el elemento no se mostrará.
Encabezado de Sandbox
Después de eso, espero a la Configuración general página, marque la opción para ocultar el elemento del encabezado y actualice su página de inicio. El elemento de encabezado ya no debería aparecer.
En este punto, es simplemente una cuestión de repetir el proceso para el elemento de contenido y pie de página, también. Necesitamos envolver el contenido y los elementos del pie de página con condicionales que evalúen el resultado de las llamadas get_option.
Echar un vistazo:
Este es el contenido del tema..
© Todos los derechos reservados.
Revisar la Configuración general página, active cada casilla de verificación y actualice la página del tema. Tus elementos deben alternar cada uno independientemente del otro..
¡Eso es todo por ahora! Hemos examinado todas las funciones necesarias para introducir nuevas secciones, campos y configuraciones en WordPress. Por supuesto, hay mucho más que cubrir..
En el siguiente artículo, veremos cómo agregar elementos de menú personalizados al menú de WordPress y cómo podemos introducir nuestras propias páginas en el Panel de WordPress..
Cubrimos mucho material en este articulo. Aquí hay una referencia para todo lo que usamos en este artículo..
