¿Ayuda para crear un tipo de publicación de presentación personalizada con meta cuadros personalizados?

16

Necesito crear una o varias casillas de meta personalizadas para mi tipo de publicación personalizada "Presentación de diapositivas" (este tipo de publicación ya está creado). Cada metabox mantendrá el contenido en cada diapositiva de diapositivas y lo guardará en los campos personalizados correspondientes. Cada metabox debe contener los siguientes campos:

  • Título (campo de texto)
  • Imagen (ya sea un campo de texto para la URL de img o, idealmente, una lista desplegable que muestre miniaturas de las imágenes adjuntas a la publicación)
  • Código de incrustación (área de texto)
  • Descripción (wysiwyg)
  • Ocultar la diapositiva (casilla de verificación para ocultar temporalmente una diapositiva sin eliminarla)
  • Eliminar diapositiva (botón que elimina el contenido de los metacampos de publicación que se completaron con esta diapositiva)

También me gustaría un botón en algún lugar que me permita "Agregar una diapositiva", de modo que cuando se hace clic, agrega otro Meta Box personalizado "Diapositiva", que es un duplicado del primero pero agrega un número incremental a cada metacampo de publicación personalizado. Actualmente solo tengo 15 metaboxes y la plantilla de presentación de diapositivas está configurada de manera que si solo se completan 5 de los metaboxes, solo se muestran 5 diapositivas.

Finalmente, me gustaría poder reordenar las diapositivas, ya sea por "Arrastrar y soltar" o por otro campo de texto en el que pueda escribir el número de pedido.

Lo he conseguido casi donde lo necesito con el complemento "Más campos" y un poco de ayuda de código de Rarst. Con el complemento "Más campos" tengo los siguientes campos en cada metabox:

  • Título (campo de texto)
  • Imagen (una lista desplegable de las imágenes adjuntas a la publicación)
  • Código de incrustación (área de texto)
  • Descripción (wysiwyg)
  • Ocultar la diapositiva (casilla de verificación para ocultar temporalmente una diapositiva sin eliminarla)

Aquí hay una captura de pantalla de cómo lo configuré a través del complemento "Más campos":

texto alternativo

El problema con esto es que no hay forma de eliminar una diapositiva una vez que se hace porque "Más campos" no se usa en <?php delete_post_meta($post_id, $key, $value); ?>ninguna parte. El otro problema con el complemento es que no es muy confiable y se rompe con frecuencia con las actualizaciones.

He podido implementar una solución similar con mis propios metaboxes personalizados que incluyen:

  • Título (campo de texto)
  • Imagen (campo de texto para la URL img)
  • Código de incrustación (área de texto)
  • Descripción (área de texto)
  • Ocultar la diapositiva (casilla de verificación para ocultar temporalmente una diapositiva sin eliminarla)

Con esta implementación, parece que no puedo hacer que funcionen los múltiples campos de TinyMCE o el cuadro desplegable de imágenes. El código TinyMCE parece funcionar hasta que añadir el código que crean copias incrementales de la primera METABOX momento en el que me sale este error anterior derecha del campo donde los botones TinyMCE deben ser: Warning: array_push() [function.array-push]: First argument should be an array....

Además, en este momento estoy confiando en que mis escritores sepan poner CUALQUIERA un video o una imagen para cada diapositiva y eso está bien, pero puede ser mejor tener un botón de opción que les permita elegir cuál es la diapositiva (probablemente por defecto imagen) que está vinculada a una declaración de visualización condicional en la plantilla de presentación de diapositivas.

Estoy manejando las cargas de imágenes a través del cuadro integrado "Imagen destacada" en la barra lateral, aunque no me importaría un metabox personalizado que simplemente dijera "Cargar imágenes" en la parte superior del panel de escritura.

En última instancia, estoy buscando una presentación de diapositivas similar a esta: http://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html . Quiero que el mío también pueda tener un video como contenido en la diapositiva en lugar de una imagen. Necesito un panel de administración intuitivo y fácil de usar para mis escritores (no son muy expertos en tecnología y no son confiables usando html y / o códigos cortos). En caso de que no esté claro en el ejemplo, cada diapositiva debería generar una nueva página vista.

El reordenamiento de Drag'n'Drop no es una alta prioridad, pero sería genial. Encontré un complemento que maneja esto muy bien: SlideDeck . Desafortunadamente, el complemento no satisface mis necesidades, pero la forma en que manejan el pedido de las diapositivas es bastante ingeniosa. Es un metabox separado en la barra lateral que le permite arrastrar las diapositivas en el orden que desee. También es así como agrega diapositivas, haciendo clic en el botón "Agregar diapositiva" que agrega otro Metabox de diapositiva al panel de escritura. Aquí hay una captura de pantalla:

texto alternativo

También puede ver más capturas de pantalla en acción en el repositorio de WordPress .

Aquí está todo mi código:

Las funciones que configuran mi Tipo de publicación de presentación de diapositivas y Paginación de presentación de diapositivas: http://loak.pastebin.com/g63Gf186

El código original de DeluxeBloggingTips.com (DBT) en el que basé mis Metaboxes: http://loak.pastebin.com/u9YTQrxf

La versión del código DBT que modifiqué para darme versiones incrementales del mismo metabox: http://loak.pastebin.com/WtxGdPrN

Una versión modificada del código DBT que Chris Burbridge creó para permitir múltiples instancias de TinyMCE: http://loak.pastebin.com/Mqb3pKhx Con este código, los TinyMCE funcionan.

Mi modificación del código de Burbridge que intenta incorporar mi incremento y un campo que le permite elegir la imagen de una lista desplegable de todas las imágenes adjuntas a la publicación: http://loak.pastebin.com/xSuenJTK En este intento, el TinyMCE está roto y el menú desplegable no funciona.

Esto probablemente no importa, pero en caso de que se lo esté preguntando, aquí está el código que uso para extraer el código de inserción de la meta personalizada de la publicación, cambiar su tamaño e insertarlo en la publicación: http://loak.pastebin.com / n7pAzEAw

Esta es una versión editada de la pregunta original para reflejar el estado actual del proyecto y responde las preguntas publicadas en los comentarios. Gracias a Chris_O por poner la recompensa por esto. Además, gracias a Rarst y Justin por ayudarme con mucho de esto en el foro ThemeHybrid.com . He pasado horas y horas en esto y estoy atrapado (pasé un par de horas solo en esta pregunta). Cualquier ayuda sería muy apreciada.

custom-post-types custom-field metabox mate
fuente
¿Puedes dibujar una imagen simple que muestre la imagen completa, como un boceto o algo así? Creo que es útil para comprender mejor sus necesidades.
hakre
Agregué algunos ejemplos al final. Si esto no aclara las cosas lo suficiente, hágamelo saber.
mate
¿Todavía no está claro?
mate
¿Nadie? ¿Está encendido esto?
mate
@Hakre, ¿estás ahí?
mate

Respuestas:

6

Por lo que parece, su apuesta más segura y la ruta más fácil sería bifurcar el complemento More Fields específicamente para su uso. Las dos características más importantes que puedo ver que necesita su tenedor son un campo "fábrica" ​​y una interfaz de arrastrar y soltar.

Campos múltiples

Mi sugerencia sería mirar la clase Widget de WordPress y usarla como modelo para su fábrica de campo; básicamente, tome prestada la capacidad de crear múltiples instancias de un campo una vez que tenga el marco creado para él.

Este es el núcleo de cómo funcionan varios widgets en una barra lateral:

  • Defina el código para cada widget una vez extendiendo la WP_Widgetclase.
  • Luego, puede crear tantas copias del widget como desee
    • Los detalles de cada widget se almacenan como datos serializados en la tabla de opciones
  • Puede personalizar cada widget, eliminarlos con un deletecomando simple y establecer su posición explícitamente a través de la interfaz de arrastrar y soltar Apariencia

Arrastrar y soltar

Una vez más, sugiero buscar inspiración en el sistema de widgets de WordPress. Ya tenemos una interfaz de arrastrar y soltar bastante intuitiva configurada allí, por lo que sería bastante fácil reutilizar gran parte del mismo código en otro lugar. O, si desea ser realmente elegante, puede implementar su propio sistema de arrastrar y soltar dentro de un metacampo personalizado separado.

Por lo tanto, cada diapositiva estaría definida por un cuadro de meta personalizado que está vinculado a la publicación. El orden de las diapositivas se establecería mediante un meta cuadro personalizado que también está vinculado a la publicación. Recomiendo enviar actualizaciones de diapositivas a través de AJAX para que pueda actualizar dinámicamente el meta cuadro de diapositivas en función de la información (esto evita tener que presionar manualmente "actualizar" y esperar a que la página se vuelva a cargar antes de mover las cosas).

jQuery UI tiene una gran interfaz " arrastrable " que puedes manipular fácilmente para tus propósitos dentro de esta meta caja personalizada. La parte difícil no es construir la interfaz, es obtener una comunicación consistente y precisa entre el meta cuadro y la colección de meta cuadros de diapositivas en otra parte de la página.

En resumen

Lo que deduje de su publicación es que tiene una solución algo viable:

  • Agregó 15 campos personalizados a su tipo de publicación personalizada a través del widget Más campos, pero desea agregar / eliminar dinámicamente campos en lugar de trabajar con un número establecido
  • Desea una forma de ajustar el orden de estos campos personalizados para que las diapositivas se carguen en orden

La forma en que abordaría esto es abstraer el proceso de metacreación personalizado a una clase que pueda usar una y otra vez para crear nuevos metacampos personalizados. Luego, extendería la clase para inicializar dos tipos de meta cuadros: uno para diapositivas, otro para estructura de diapositivas. También incorporaría en el meta cuadro de la estructura de diapositivas la capacidad de crear dinámicamente nuevos meta cuadros de diapositivas (los meta cuadros de diapositivas albergarían su propia acción de "eliminación").

Toda la presentación se almacenaría no por las cajas meta de diapositivas, sino por la caja de meta estructura de diapositivas en un campo de metadatos personalizados para el puesto - el meta encargo sería una matriz escalonada, con cada una de las diapositivas representan como matrices dentro de ella - en fin . Personalizar el orden de la presentación de diapositivas en el cuadro meta de estructura reorganizaría la matriz y volvería a guardar el mensaje meta. De esta manera, solo tengo 1 metavalor para volver a leer cuando quiero acceder a la presentación de diapositivas.

Entre SlideDeck, Más campos y el código personalizado que ha reunido hasta ahora, ya tiene la mayor parte de su solución a mano ... solo necesita que todo funcione al mismo tiempo. Me enfocaría en bajar la implementación raíz antes de agregar los adornos de JavaScript: crear, modificar, guardar y eliminar diapositivas dinámicamente es más importante que un editor de texto enriquecido, IMO. Primero descifra eso. Luego baje el sistema de pedidos. Entonces puede concentrarse en hacer que varias instancias de TinyMCE funcionen en la página.

EAMann
fuente
¡Gracias por la ayuda! Por el momento, esto está un poco fuera de mi conjunto de habilidades, pero servirá como una buena guía a través del proceso de aprendizaje. Soy consciente de las "clases" y me doy cuenta de que ya uso una clase en el código de metaboxes, pero todavía no las entiendo. Otra cosa que "conozco" pero que no entiendo completamente es el uso de matrices.
mate
Su consejo sobre cómo bajar los fundamentos primero tiene sentido, pero me enfrento a algunas limitaciones del mundo real que me obligan a introducir esto lo antes posible en el entorno de producción y uno de los factores más importantes es el editor wysiwyg porque muchos de los escritores no son muy técnicos. . No me importa hacer que el proyecto sea incremental y depender de muletas en el camino, pero este enfoque obviamente debe ser escalable. Dicho esto, me parece que usar el complemento "más campos" podría servir como una solución temporal hasta que me dé cuenta de esto, sin embargo, no estoy seguro de que funcione con ...
mate
su enfoque de guardar la presentación de diapositivas completa en un campo personalizado. ¿De verdad crees que poner todo en un solo campo es mejor? Esto puede sonar ignorante, pero me parece que hay mucho más espacio para errores si wp tiene que reescribir toda la presentación de diapositivas cada vez que se realiza un cambio menor.
mate
Guardar todo el programa en un metacampo evita y presenta problemas: ahorra tiempo en el sitio de presentación al no obligarlo a seleccionar, leer y recorrer múltiples campos. Sin embargo, si algo se rompe en una diapositiva y se escribe en el DB, se rompe toda la presentación de diapositivas. Definitivamente una compensación, pero siempre opto por la velocidad y la facilidad de desarrollo.
EAMann
¿Estás diciendo que ahorra tiempo en la parte frontal del sitio? ¿Por qué sería eso si solo muestra una diapositiva a la vez?
mate