Aide à la création d'un type de publication personnalisé de diaporama avec des métadonnées personnalisées?

16

J'ai besoin de créer une ou plusieurs boîtes méta de message personnalisé pour mon type de message personnalisé "Diaporama" (ce type de message est déjà créé). Chaque métabox contiendra le contenu de chaque diapositive de diapositive et l'enregistrera dans les champs personnalisés correspondants. Chaque métabox doit contenir les champs suivants:

  • Titre (champ de texte)
  • Image (soit un champ de texte pour l'URL img ou, idéalement, une liste déroulante montrant les vignettes des images jointes attachées au message)
  • Code d'intégration (zone de texte)
  • Description (wysiwyg)
  • Masquer la diapositive (case à cocher à utiliser pour masquer temporairement une diapositive sans la supprimer)
  • Supprimer la diapositive (bouton qui supprime le contenu des champs meta post qui ont été remplis par cette diapositive)

Je voudrais également un bouton quelque part qui me permette d '"ajouter une diapositive" donc quand il est cliqué, il ajoute une autre méta-boîte personnalisée "diapositive" qui est un double de la première mais ajoute un numéro incrémentiel à chaque champ méta personnalisé. Je n'ai actuellement que 15 métaboxes et le modèle de diaporama est configuré de telle sorte que si seulement 5 des métaboxes sont remplies, seules 5 diapositives s'affichent.

Enfin, j'aimerais pouvoir réorganiser les diapositives, que ce soit par "glisser-déposer" ou par un autre champ de texte dans lequel je peux taper le numéro de commande.

Je l'ai obtenu presque là où j'en ai besoin avec le plugin "More Fields" et l'aide du code de Rarst. Avec le plugin "More Fields" j'ai les champs suivants dans chaque metabox:

  • Titre (champ de texte)
  • Image (Une liste déroulante des images jointes au message)
  • Code d'intégration (zone de texte)
  • Description (wysiwyg)
  • Masquer la diapositive (case à cocher à utiliser pour masquer temporairement une diapositive sans la supprimer)

Voici une capture d'écran de la façon dont je l'ai configuré via le plugin "More Fields":

texte alternatif

Le problème avec cela est qu'il n'y a aucun moyen de supprimer une diapositive une fois qu'elle est créée car "More Fields" n'utilise <?php delete_post_meta($post_id, $key, $value); ?>nulle part. L'autre problème avec le plugin est qu'il est trop peu fiable et rompt fréquemment avec les mises à jour.

J'ai pu implémenter une solution similaire avec mes propres métaboxes personnalisées qui incluent:

  • Titre (champ de texte)
  • Image (champ de texte pour l'URL img)
  • Code d'intégration (zone de texte)
  • Description (zone de texte)
  • Masquer la diapositive (case à cocher à utiliser pour masquer temporairement une diapositive sans la supprimer)

Avec cette implémentation, je n'arrive pas à faire fonctionner les multiples champs TinyMCE ou la liste déroulante d'image. Le code TinyMCE semble fonctionner jusqu'à ce que j'ajouter le code qui crée des copies supplémentaires de la première METABOX à quel point je reçois ce droit d'erreur au- dessus du champ où les boutons TinyMCE doivent être: Warning: array_push() [function.array-push]: First argument should be an array....

De plus, en ce moment, je compte sur mes rédacteurs pour savoir mettre soit une vidéo ou une image pour chaque diapositive et ça va, mais il peut être préférable d'avoir un bouton radio qui leur permet de choisir celle qui est la diapositive (probablement par défaut à image) qui est liée à une déclaration d'affichage conditionnelle dans le modèle de diaporama.

Je gère les téléchargements d'images via la boîte intégrée "Image vedette" dans la barre latérale, bien que cela ne me dérange pas une métabox personnalisée qui dit simplement "Télécharger des images" en haut du panneau d'écriture.

En fin de compte, je recherche un diaporama similaire à celui-ci: http://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html . Je veux que le mien puisse également avoir une vidéo comme contenu dans la diapositive au lieu d'une image. J'ai besoin d'un panneau d'administration intuitif et facile à utiliser pour mes rédacteurs (ils ne sont pas très avertis en technologie et ne sont pas fiables en utilisant du HTML et / ou des shortcodes). Au cas où cela ne serait pas clair dans l'exemple, chaque diapositive devrait générer une nouvelle page vue.

La réorganisation de Drag'n'Drop n'est pas une priorité élevée mais ce serait cool. J'ai trouvé un plugin qui gère très bien cela: SlideDeck . Malheureusement, le plugin ne convient pas à mes besoins, mais la façon dont ils gèrent la commande des diapositives est assez simple. C'est une métabox séparée dans la barre latérale qui vous permet de faire glisser les diapositives dans l'ordre que vous souhaitez. C'est aussi comme cela que vous ajoutez des diapositives, en cliquant sur un bouton "Ajouter une diapositive" qui ajoute une autre diapositive de métabox au panneau d'écriture. Voici une capture d'écran:

texte alternatif

Vous pouvez également voir plus de captures d'écran de celui-ci en action dans le référentiel wordpress .

Voici tout mon code:

Les fonctions de configuration de mon type de publication de diaporama et de pagination de diaporama: http://loak.pastebin.com/g63Gf186

Le code original de DeluxeBloggingTips.com (DBT) sur lequel j'ai basé mes métaboxes: http://loak.pastebin.com/u9YTQrxf

La version du code DBT que j'ai modifiée pour me donner des versions incrémentielles du même métabox: http://loak.pastebin.com/WtxGdPrN

Une version modifiée du code DBT que Chris Burbridge a créée pour autoriser plusieurs instances de TinyMCE: http://loak.pastebin.com/Mqb3pKhx Avec ce code, les TinyMCE fonctionnent.

Ma modification du code de Burbridge qui essaie d'incorporer mon incrémentation et un champ qui vous permet de choisir l'image dans une liste déroulante de toutes les images jointes au message: http://loak.pastebin.com/xSuenJTK Dans cette tentative, le TinyMCE est cassé et la liste déroulante ne fonctionne pas.

Cela n'a probablement pas d'importance, mais juste au cas où vous vous poseriez la question, voici le code que j'utilise pour extraire le code intégré de la méta de publication personnalisée, le redimensionner et l'insérer dans la publication: http://loak.pastebin.com / n7pAzEAw

Il s'agit d'une version modifiée de la question d'origine pour refléter l'état actuel du projet et répond aux questions publiées dans les commentaires. Merci à Chris_O d' avoir mis la prime à ce sujet. Merci également à Rarst et Justin de m'avoir aidé avec beaucoup de choses sur le forum ThemeHybrid.com . J'ai passé des heures et des heures là-dessus et je suis coincé (j'ai passé quelques heures seul sur cette question). Toute aide serait grandement appréciée.

custom-post-types custom-field metabox mat
la source
Pouvez-vous dessiner une image simple qui montre l'image entière, comme un croquis ou plus? Je pense que c'est utile pour mieux comprendre vos besoins.
hakre
J'ai ajouté quelques exemples en bas. Si cela ne clarifie pas suffisamment les choses, faites-le moi savoir.
mat
N'est-ce pas encore clair?
mat du
N'importe qui? Cette chose est allumée?
mat
@Hakre, vous y êtes?
mat

Réponses:

6

D'après l'apparence des choses, votre pari le plus sûr et l'itinéraire le plus simple serait de créer le plugin More Fields spécifiquement pour votre usage. Les deux plus grandes fonctionnalités dont j'ai besoin pour votre fork sont un champ "usine" et une interface glisser-déposer.

Champs multiples

Ma suggestion serait de regarder la classe Widget WordPress et de l'utiliser comme modèle pour votre fabrique de champs - en gros, emprunter la possibilité de créer plusieurs instances d'un champ une fois que le cadre est construit pour lui.

C'est le cœur du fonctionnement de plusieurs widgets dans une barre latérale:

  • Vous définissez le code de chaque widget une fois en étendant la WP_Widgetclasse.
  • Ensuite, vous pouvez créer autant de copies du widget que vous le souhaitez
    • Les spécificités de chaque widget sont stockées sous forme de données sérialisées dans le tableau d'options
  • Vous pouvez personnaliser chaque widget, les supprimer avec une simple deletecommande et définir leur positionnement de manière explicite via l'interface de glisser-déposer Apparence

Glisser déposer

Encore une fois, je vous suggère de vous inspirer du système de widgets WordPress. Nous avons déjà mis en place une interface de glisser-déposer assez intuitive, il serait donc assez facile de réutiliser une grande partie du même code ailleurs. Ou, si vous voulez vraiment devenir fantaisiste, vous pouvez implémenter votre propre système de glisser-déposer dans un méta-champ personnalisé séparé.

Ainsi, chaque diapositive serait définie par une boîte méta personnalisée liée à la publication. L'ordre des diapositives serait défini par une boîte de méta personnalisée séparée qui est également liée à la publication. Je recommanderais de soumettre des mises à jour de diapositives via AJAX afin que vous puissiez mettre à jour dynamiquement la méta-boîte d'ordre des diapositives en fonction des informations (cela évite d'avoir à appuyer manuellement sur "mise à jour" et d'attendre que la page se recharge avant de déplacer les choses).

jQuery UI a une grande interface " glissable " que vous pouvez facilement manipuler à vos fins dans cette méta-boîte personnalisée. La partie difficile n'est pas la construction de l'interface, elle obtient une communication cohérente et précise entre la méta-boîte et la collection de méta-boîtes de diapositives ailleurs sur la page.

En résumé

Ce que j'ai compris de votre message, c'est que vous avez une solution quelque peu réalisable:

  • Vous avez ajouté 15 champs personnalisés à votre type de publication personnalisé via le widget Plus de champs mais vous souhaitez ajouter / supprimer dynamiquement des champs plutôt que de travailler avec un numéro défini
  • Vous voulez un moyen d'ajuster l'ordre de ces champs personnalisés afin que les diapositives se chargent dans l'ordre

La façon dont j'aborderais cela est d'abstraire le processus de création de méta personnalisé à une classe que je peux utiliser encore et encore pour créer de nouveaux champs de méta personnalisés. Ensuite, j'étendrais la classe pour initialiser deux types de métadonnées: une pour les diapositives, une pour la structure des diapositives. Je voudrais également intégrer à la méta-boîte de structure de diapositives la possibilité de créer dynamiquement de nouvelles méta-boîtes de diapositive (les méta-boîtes de diapositive hébergeraient leur propre action de «suppression»).

Le diaporama entier serait stocké non pas par les méta-boîtes de diapositives, mais par la méta-boîte de structure de diapositives dans un champ méta personnalisé pour la publication - la méta personnalisée serait un tableau dentelé, avec chacune des diapositives représentées comme des tableaux à l'intérieur - dans ordre . La personnalisation de l'ordre du diaporama dans la boîte de méta de structure réorganiserait le tableau et ré-enregistrerait la méta post. De cette façon, je n'ai qu'une seule méta-valeur à lire lorsque je veux accéder au diaporama.

Entre SlideDeck, More Fields et le code personnalisé que vous avez créé jusqu'à présent, vous avez déjà la plupart de votre solution en main ... il vous suffit de tout faire fonctionner ensemble en même temps. Je me concentrerais sur la suppression de l'implémentation racine avant d'ajouter les embellissements JavaScript - la création, la modification, la sauvegarde et la suppression dynamiques de diapositives sont plus importantes qu'un éditeur de texte enrichi, IMO. Obtenez cela en premier. Descendez ensuite le système de commande. Ensuite, vous pouvez vous concentrer sur le fonctionnement de plusieurs instances de TinyMCE sur la page.

EAMann
la source
Merci pour l'aide! Pour le moment, cela ne fait pas partie de mes compétences, mais servira de bon guide tout au long du processus d'apprentissage. Je connais les "classes" et je réalise que j'utilise déjà une classe sur le code des métaboxes mais je ne les comprends toujours pas. Une autre chose que je «connais» mais que je ne comprends pas complètement est l'utilisation de tableaux.
mat
Vos conseils pour maîtriser les bases en premier sont logiques, mais je suis confronté à des contraintes du monde réel qui m'obligent à intégrer cela dans l'environnement de production dès que possible et l'un des facteurs les plus importants est l'éditeur wysiwyg car de nombreux rédacteurs sont très non techniques. . Cela ne me dérange pas de rendre le projet incrémentiel et de compter sur des béquilles en cours de route, mais cette approche doit évidemment être évolutive. Cela dit, il me semble que l'utilisation du plugin "plus de champs" pourrait servir de solution temporaire jusqu'à ce que je comprenne cela, mais je ne suis pas sûr que cela fonctionnera avec ...
matt
votre approche consistant à enregistrer l'intégralité du diaporama dans un champ personnalisé. Pensez-vous vraiment qu'il est préférable de tout mettre dans un seul domaine? Cela peut sembler ignorant, mais il me semble qu'il y a beaucoup plus de place pour les erreurs si wp doit réécrire tout le diaporama chaque fois qu'un changement mineur est effectué.
mat
L'enregistrement de l'ensemble du spectacle dans un seul méta-champ évite et introduit des problèmes: il fait gagner du temps sur le site de présentation en ne vous forçant pas à sélectionner, lire et parcourir plusieurs champs. Cependant, si quelque chose se casse dans une diapositive et est écrit dans la base de données, il casse tout le diaporama. Certainement un compromis, mais j'opte toujours pour la rapidité et la facilité de développement.
EAMann
Êtes-vous en train de dire que cela fait gagner du temps sur le front-end du site? Pourquoi en serait-il si elle ne montre qu'une seule diapositive à la fois?
mat