Share
Hoy voy a discutir el ordenable Opción de tipo en Titan Framework. Proporciona al usuario final una serie de opciones que se pueden reorganizar a través de una interfaz de arrastrar y soltar y se pueden habilitar o deshabilitar. Puede integrar esta opción en lugares donde desee que los usuarios reorganicen las secciones de un tema dinámicamente.
Hoy en día, algunos temas premium de WordPress permiten a los usuarios finales reorganizar / ordenar diferentes bloques en un tema. Desarrollar una interfaz de arrastrar y soltar puede ser una tarea intimidante para los nuevos desarrolladores. Titan Framework proporciona una manera fácil y sin exageraciones de proporcionar esta opción. Con su ordenable tipo de opción, puede crear una lista de opciones que se pueden ordenar que se pueden reorganizar de la forma que desee. Tiene un diseño vertical como se muestra en la siguiente imagen:
Esta opción soporta algunos parámetros:
Accentsconagua
ordenable opción de tipo.cierto, luego se ocultan los valores ordenables alternados. Si falso, el botón no se muestra. La configuración predeterminada es cierto.botón visible se establece en falso y usted proporciona un valor predeterminado aquí, botón visible se ajustará automáticamente a cierto. Todos los parametros son cuerda por tipo, excepto 'opciones ' cual es formación ybotón 'visible' cual es booleano en naturaleza.
Puedes agregar esta opción dentro de:
Estos contenedores se pueden crear fácilmente con Titan Framework. Si no sabe cómo hacerlo, hojee los artículos anteriores de esta serie..
Este tipo de opción se agrega siguiendo estos pasos.
obtener Instancia() función.createOption () función.getOption () función.Esta es una de las grandes opciones que ofrece Titan Framework, así que implementémosla..
Vamos a crear esta opción dentro de un panel de administración primero.
createOption (array ('id' => 'aa_sortable_opt', // El ID que se usará para obtener el valor de esta opción 'type' => 'sortable', // Tipo de opción que estamos creando 'name' => 'Mi opción seleccionable', // Nombre de la opción que se mostrará en el panel de administración 'desc' => 'Esta es nuestra opción', // Descripción de la opción que se mostrará en el panel de administración 'opciones' = > array (// Una matriz de pares de etiqueta de valor. 'aa_products_blk' => 'Products Block', 'aa_features_blk' => 'Features Block', 'aa_stats_blk' => 'Statistics Block', 'aa_comments_blk' => ' Bloque '))); He añadido un ordenable escriba la opción en la línea # 8 a través de la createOption () funciona en un panel de administración personalizado $ aa_panel. A continuación he definido una lista de parámetros, es decir. nombre, id, tipo, opciones y desc. El valor de ID es aa_sortable_opt, que siempre debe ser único.
Un parámetro único en este opciones está en la línea # 15. Ocupa una serie de etiqueta de valor Parejas que aparecen como opciones que pueden ser ordenadas. En este código, he definido cuatro pares de este tipo, y cada uno de ellos es una opción clasificable única.
Por lo tanto, las etiquetas aa_products_blk, aa_features_blk, aa_stats_blk y aa_commenst_blk mostrar las opciones correspondientes, es decir, 'Bloque de productos ',' Bloque de características ',' Bloque de estadísticas ' yBloque de comentarios. Piense en estas opciones como bloques de su tema, que desea que un usuario final pueda reorganizar o deshabilitar.
En la captura de pantalla anterior, existe una ordenable opción de tipo en un panel de administración Opciones aseadas. Mira cómo se muestran las opciones de ordenación.
Junto a cada nombre de opción hay dos iconos. El primer icono muestra un ojo que controla 'opción de visibilidad'. Si hace clic en él, esa opción en particular se deshabilita.
He deshabilitado la visibilidad de las dos primeras opciones en la captura de pantalla anterior.
El segundo icono muestra líneas que se pueden ordenar, lo que ayuda a arrastrar y soltar estas opciones.
Consigamos valores de opciones guardados.
getOption ('aa_sortable_opt'); / ** * * Imprimiendo los contenidos de la matriz * * / var_dump ($ aa_getsortable_array); ?>Para obtener valores guardados, primero obtenga una instancia a través de obtener Instancia() Funciona en la línea # 3. A continuación, registre el ID de opción. aa_sortable_opt dentro de getOption () Funciona como su parámetro. Los valores se guardan dentro de una variable que es una matriz, $ aa_getsortable_array.
El valor de retorno contiene una matriz de los valores en orden de cómo un usuario final organizó y guardó las etiquetas en el panel de administración personalizado.
Volcé la matriz con el var_dump () comando en la línea # 15. Vamos a ver los resultados.
Así es como organizé las opciones en el panel de administración (habilité las dos primeras opciones nuevamente haciendo clic en ojo icono).
Veamos qué sucede si cambio el orden en el panel de administración y lo guardo.
En la imagen de arriba, el orden de los contenidos de la matriz se cambia en consecuencia.
Ahora, permítame mostrarle otra forma de usar esta opción en la parte delantera.
getOption ('aa_sortable_opt'); / ** * * Obtención de resultados en el front-end * * / if ($ aa_getsortable_array) foreach ($ aa_getsortable_array como opción $) switch ($ option) caso 'aa_products_blk': echo "Aquí se usa el código del Bloque de Producto. "; break; case 'aa_features_blk': echo" El código del Bloque de funciones se usa aquí. "; break; case 'aa_stats_blk': echo" Stats El código de bloque se usa aquí. "; break; case 'aa_comments_blk': echo" Comentarios El código de bloque se usa aquí. "; break; // end of switch // end of foreach // end si Entonces, registré una instancia única de Titan en la línea # 3, y en la línea # 6 usé la getOption () funcionar con aa_sortable_opt como el parámetro para recuperar el valor de la opción clasificable establecido por el usuario final. Recuerde que establecemos pares de valores-etiqueta. Los valores anteriores se utilizan en el código, mientras que las etiquetas se muestran dentro de la configuración del panel de control..
Por lo tanto, obtendremos una serie de valores seleccionados por el usuario en el orden en que ordenó las opciones clasificables dentro del panel de administración. Ahora necesitamos imprimir esos bloques en el mismo orden seleccionado por el usuario final. solía caja de interruptores cheques para imprimir los nombres de bloque.
Verifiqué aquí si había un valor en la matriz $ aa_getsortable_array.
Aquí utilicé un para cada bucle para ir a través de todos los elementos de la $ aa_getsortable_array matriz y nombrado un solo elemento de esta matriz como $ opción.
Utilicé switch-case para imprimir las opciones en el mismo orden en que estaban presentes en la matriz (que fue el orden seleccionado por el usuario). Si observa las líneas 26 a 28, es un caso que comprueba que si el valor dentro de $ opción es aa_products_blk luego haga eco en el Bloque de Productos que fue seleccionado y luego salga de él. Del mismo modo hay tres más.
Vamos con la configuración por defecto primero. Aquí hay una captura de pantalla de la salida que apareció en la parte delantera.
¿Qué pasa si deshabilito algunas opciones? ¿Y reorganizar todos ellos? Me gusta esto:
Por lo tanto, el Bloque de productos no debería mostrarse ya que lo deshabilité, y los otros bloques deberían organizarse.
Eso es exactamente lo que sucedió, como se muestra en la captura de pantalla anterior.
Ahora crearé esta opción dentro de una pestaña de administrador..
createOption (array ('id' => 'aa_sortable_opt_in_tab', // El ID que se usará para obtener el valor de esta opción 'type' => 'sortable', // Tipo de opción que estamos creando 'name' => 'Mi opción seleccionable', // Nombre de la opción que se mostrará en el panel de administración 'desc' => 'Esta es nuestra opción', // Descripción de la opción que se mostrará en el panel de administración 'visible_button' = > 'false', 'options' => array (// Una matriz de pares de etiqueta de valor. 'aa_products_blk' => 'Bloque de productos', 'aa_features_blk' => 'Bloque de características', 'aa_stats_blk' => 'Bloque de estadísticas ',' aa_comments_blk '=>' Bloque de comentarios '))); Ahora agregué un ordenable escriba la opción en una pestaña de administrador $ aa_tab1 con identificación aa_sortable_opt_in_tab. Esta vez he definido el parámetro. cuenta_ visible en la línea # 15 y su valor se establece en falso. Significa el indicador de visibilidad. ojo el icono no debería aparecer.
En esta imagen, puedes encontrar un ordenable escriba la opción en Pestaña 1 de panel Opciones aseadas 2. Tenga en cuenta que el icono de visibilidad no aparece con los nombres de las opciones.
Usa este código para obtener valores guardados.
getOption ('aa_sortable_opt_in_tab'); / ** * * Obtención de la salida en el front-end * * / if ($ aa_tab_getsortable_array) foreach ($ aa_tab_getsortable_array como $ option) switch ($ option) caso 'aa_products_blk': echo "El código del Bloque de Producto se usa aquí. "; break; case 'aa_features_blk': echo" El código del Bloque de funciones se usa aquí. "; break; case 'aa_stats_blk': echo" Stats El código de bloque se usa aquí. "; break; case 'aa_comments_blk': echo" Comentarios El código de bloque se usa aquí. "; break; // end of switch // end of foreach // end si Este código es bastante similar a lo que he escrito en el caso de un panel de administración. Así que permítanme resumir todos sus pasos:
obtener Instancia() función en la línea # 3.getOption () funciona y registra el ID de opción como su parámetro en la línea # 6.caja de interruptores Declaraciones en las líneas 19 a 37..Aquí hay una captura de pantalla del front-end..
A continuación crearé esta opción dentro de un metabox..
createOption (array ('id' => 'aa_sortable_opt_in_metabox', // El ID que se usará para obtener el valor de esta opción 'type' => 'sortable', // Tipo de opción que estamos creando 'name' => 'Mi opción seleccionable', // Nombre de la opción que se mostrará 'desc' => 'Esta es nuestra opción', // Descripción de la opción que se mostrará 'opciones' => matriz (// Una matriz de pares de etiqueta de valor. 'aa_products_blk' => 'Bloque de productos', 'aa_features_blk' => 'Bloque de características', 'aa_stats_blk' => 'Bloque de estadísticas', 'aa_comments_blk' => 'Comentarios Bloque'))); Aquí creé una opción en un metabox. $ aa_metbox. Su ID única es aa_sortable_opt_in_metabox. El resto de los parámetros son los mismos..
En la imagen de arriba, existe una ordenable opción de tipo en un metabox llamado Mi opción clasificable. Aparece en todas las pantallas de edición de página y post..
Ahora obtendré valores guardados para un metabox.
getOption ('aa_sortable_opt_in_metabox', get_the_ID ()); / ** * * Obtención de resultados en el front-end * * / if ($ aa_metabox_getsortable_array) foreach ($ aa_metabox_getsortable_array como $ option) switch ($ option) caso 'aa_products_blk': echo "El código del Bloque de Producto se usa aquí. "; break; case 'aa_features_blk': echo" El código del Bloque de funciones se usa aquí. "; break; case 'aa_stats_blk': echo" Stats El código de bloque se usa aquí. "; break; case 'aa_comments_blk': echo" Comentarios El código de bloque se usa aquí. "; break; // end of switch // end of foreach // end siEste código es prácticamente el mismo que antes. La diferencia se puede ver en la línea 6 donde he usado get_the_ID () Funcionar como un parámetro adicional. Se utiliza para obtener una página específica o ID de publicación.
Desactivemos algunos de los bloques y observemos qué cambios se producen en el front-end.
El front-end imprimirá lo siguiente:
Al final, crearé esta opción dentro de una sección del personalizador de temas..
createOption (array ('id' => 'aa_sortable_opt_in_sec', // El ID que se usará para obtener el valor de esta opción 'type' => 'sortable', // Tipo de opción que estamos creando 'name' => 'Mi opción seleccionable', // Nombre de la opción que se mostrará 'desc' => 'Esta es nuestra opción', // Descripción de la opción que se mostrará 'opciones' => matriz (// Una matriz de pares de etiqueta de valor. 'aa_products_blk' => 'Bloque de productos', 'aa_features_blk' => 'Bloque de características', 'aa_stats_blk' => 'Bloque de estadísticas', 'aa_comments_blk' => 'Bloque de comentarios')));Creé un ordenable opción de tipo con ID aa_sortable_opt_in_sec dentro de una sección de personalizador de tema $ aa_section1.
La captura de pantalla muestra esta opción en una sección del personalizador llamada Mi seccion.
Usa el siguiente código.
getOption ('aa_sortable_opt_in_sec'); / ** * * Obtención de resultados en el front-end * * / if ($ aa_sec_getsortable_array) foreach ($ aa_sec_getsortable_array como $ option) switch ($ option) caso 'aa_products_blk': eco "El código del Bloque de Producto se usa aquí. "; break; case 'aa_features_blk': echo" El código del Bloque de funciones se usa aquí. "; break; case 'aa_stats_blk': echo" Stats El código de bloque se usa aquí. "; break; case 'aa_comments_blk': echo" Comentarios El código de bloque se usa aquí. "; break; // end of switch // end of foreach // end siEste código es bastante similar a lo que he usado anteriormente. Solo los nombres de ID y variables son diferentes.
Aquí hay una captura de pantalla que muestra los cambios en el modo de vista previa en vivo.
Eso es todo sobre el ordenable Opción de tipo en Titan Framework. Las posibilidades aquí son infinitas. Puede requerir un archivo que contenga el código de ese bloque en particular en lugar de repetir el nombre de ese bloque. Deja fluir tu creatividad..
He cubierto casi todos los tipos de opciones principales ahora, así que nos quedamos con algunas de las cosas más pequeñas que cubriré en mis próximos artículos. Si tiene alguna pregunta, no dude en comentar a continuación o comuníquese con Twitter.
