web-dev-qa-db-fra.com

Aide Créer un diaporama avec un type de message personnalisé avec des méta-boîtes personnalisées?

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

  • Titre (champ de texte)
  • Image (un champ de texte pour l'URL img ou, idéalement, une liste déroulante affichant les vignettes des images jointes au message)
  • Code incorporé (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 de méta de publication renseignés par cette diapositive)

Je voudrais aussi un bouton quelque part qui me permette "Ajouter une diapositive" alors quand on clique dessus, il ajoute une autre "diapositive" Boîte méta personnalisée qui est une copie du premier mais ajoute un numéro incrémental à chaque champ méta personnalisé. Je n'ai actuellement que 15 métaboxes et le modèle de diaporama est configuré de manière à ce que si seulement 5 métaboxes sont remplis, 5 diapositives s'affichent.

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

Je l'ai eu presque là où j'en ai besoin avec le plugin "More Fields" et une aide en 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 incorporé (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 manière dont je l'ai configuré via le plugin "More Fields":

alt text

Le problème, c’est qu’il n’ya aucun moyen de supprimer une diapositive une fois celle-ci créée, car "Plus de champs" n’utilise pas <?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 qu'il casse fréquemment avec les mises à jour.

J'ai été en mesure d'implémenter une solution similaire avec mes propres métabox personnalisés, notamment:

  • Titre (champ de texte)
  • Image (champ de texte pour l'URL img)
  • Code incorporé (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 ni la liste déroulante des images. Le code TinyMCE semble fonctionner jusqu'à ce que j'ajoute le code qui crée des copies incrémentielles de la première métabox, point auquel j'obtiens cette erreur juste au-dessus du champ où les boutons TinyMCE devraient être: Warning: array_Push() [function.array-Push]: First argument should be an array....

En outre, pour le moment, je compte sur mes rédacteurs pour savoir de placer SOIT une vidéo ou une image pour chaque diapositive et c’est correct, mais il peut être préférable d’avoir un bouton radio qui leur permette de choisir la diapositive (probablement par défaut). image) qui est liée à une instruction d'affichage conditionnel dans le modèle de diaporama.

Je gère les ajouts d'image via la boîte intégrée "Image en vedette" dans la barre latérale, même si une métabox personnalisée 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 férus de technologie et ne sont pas fiables en utilisant HTML et/ou des codes abrégés). 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é mais ce serait cool. J'ai trouvé un plugin qui gère très bien ceci: SlideDeck . Malheureusement, le plugin ne répond pas à mes besoins, mais la façon dont ils gèrent la commande des diapositives est plutôt astucieuse. C'est un metabox séparé dans la barre latérale qui vous permet de faire glisser les diapositives dans l'ordre de votre choix. C’est également ainsi que vous ajoutez des diapositives en cliquant sur le bouton "Ajouter une diapositive" qui ajoute une autre métabox de diapositive au panneau d’écriture. Voici une capture d'écran:

alt text

Vous pouvez également voir plusieurs captures d'écran en action dans le référentiel wordpress .

Voici tout mon code:

Les fonctions de configuration de mon type de message de diaporama et de la pagination du diaporama: http://loak.Pastebin.com/g63Gf186

Le code d'origine 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 obtenir 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éé pour permettre plusieurs instances de TinyMCE: http://loak.Pastebin.com/Mqb3pKhx _ ​​Avec ce code, les TinyMCE fonctionnent.

Ma modification du code de Burbridge qui tente d’intégrer 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 le menu déroulant ne fonctionne pas.

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

Ceci est une version modifiée de la question d'origine afin de refléter l'état actuel du projet et de répondre aux questions posées dans les commentaires. Merci à Chris_O d’avoir mis la prime à profit. Merci également à Rarst et à Justin de m'avoir beaucoup aidé dans le forum ThemeHybrid.com . J'ai passé des heures et des heures à ce sujet et je suis coincé (j'ai passé quelques heures seul sur cette question). Toute aide serait grandement appréciée.

custom-post-typescustom-fieldmetabox
15
matt

À première vue, votre solution la plus sûre et la plus simple serait de créer le plug-in More Fields spécifiquement pour votre usage. Les deux fonctionnalités les plus importantes dont votre fourche a besoin sont une "usine" de terrain et une interface glisser-déposer.

Champs multiples

Ma suggestion serait d’examiner la classe WordPress Widget et de l’utiliser comme modèle pour votre fabrique de champs. En gros, empruntez la possibilité de créer plusieurs instances d’un champ une fois que vous avez construit le cadre.

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

  • Vous définissez le code pour chaque widget une fois en étendant la classe WP_Widget.
  • 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 la table d'options
  • Vous pouvez personnaliser chaque widget, les supprimer à l'aide d'une simple commande delete et définir leur positionnement de manière explicite via l'interface de glisser-déposer Apparence.

Drag-and-drop

Encore une fois, je suggère de rechercher l'inspiration dans le système de widgets WordPress. Nous avons déjà 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 être chic, 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 méta-boîte personnalisée liée à la publication. L'ordre des diapositives serait défini par une méta-boîte personnalisée distincte qui est également liée à la publication. Je vous recommande de soumettre les mises à jour des diapositives via AJAX pour vous permettre de mettre à jour de manière dynamique la méta-boîte de commandes de diapositives en fonction des informations (cela évite d'avoir à appuyer sur "update" et d'attendre que la page se recharge avant de déplacer des éléments. ).

jQuery UI a une excellente interface " glissable " que vous pouvez facilement manipuler pour vos besoins dans cette méta-boîte personnalisée. La partie la plus difficile n’est pas la construction de l’interface, mais bien la cohérence, précise la communication entre la méta-boîte et la collection de méta-boîtes de diapositives située ailleurs sur la page.

En résumé

Ce que j'ai compris de votre message, c'est que vous avez une solution assez pratique:

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

La façon dont je procéderais consiste à résumer 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. J'étendais ensuite la classe pour qu'elle initialise deux types de boîtes de méta: une pour les diapositives, l'autre pour la structure des diapositives. Je construisais également dans la méta-boîte de la structure de diapositive la possibilité de créer dynamiquement de nouvelles boîtes de méta-diapositives (les boîtes de méta-diapositives hébergeraient leur propre action "supprimer").

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

Entre SlideDeck, More Fields et le code personnalisé que vous avez mis en place jusqu'à présent, vous avez déjà la majeure partie de votre solution en main ... il vous suffit de la faire fonctionner ensemble en même temps. Je me concentrerais d'abord sur la mise en œuvre racine avant d'ajouter les ornements JavaScript. La création, la modification, l'enregistrement et la suppression de diapositives sont plus importants qu'un éditeur de texte enrichi, IMO. Obtenez ça craqué en premier. Ensuite, descendez le système de commande. Ensuite vous pouvez vous concentrer sur l’utilisation de plusieurs instances de TinyMCE sur la page.

6
EAMann

J'ai trouvé ceci, et c'est exactement ce que vous cherchez (>) -> http://pippinsplugins.com/drag-and-drop-order-for-plugin-options/

0
Ben Racicot