it-swarm.com.de

Hilfe beim Erstellen einer Diashow Benutzerdefinierter Beitragstyp mit benutzerdefinierten Meta-Boxen?

Ich muss ein benutzerdefiniertes Post-Meta-Feld für meinen benutzerdefinierten Post-Typ "Diashow" erstellen (dieser Post-Typ ist bereits erstellt). Jede Metabox enthält den Inhalt jeder Folienfolie und speichert ihn in den entsprechenden benutzerdefinierten Feldern. Jede Metabox sollte folgende Felder enthalten:

  • Titel (Textfeld)
  • Bild (entweder ein Textfeld für die Bild-URL oder idealerweise eine Dropdown-Liste mit Miniaturansichten der an den Beitrag angehängten Bilder)
  • Code einbetten (Textbereich)
  • Beschreibung (wysiwyg)
  • Folie ausblenden (Kontrollkästchen, um eine Folie vorübergehend auszublenden, ohne sie zu löschen)
  • Folie löschen (Schaltfläche zum Löschen des Inhalts der Post-Meta-Felder, die von dieser Folie ausgefüllt wurden)

Ich möchte auch irgendwo eine Schaltfläche, mit der ich eine Folie hinzufügen kann. Wenn ich darauf klicke, wird eine weitere benutzerdefinierte Metabox "Folie" hinzugefügt, die ein Duplikat der ersten ist, aber jedem benutzerdefinierten Post-Metafeld eine inkrementelle Nummer hinzufügt. Ich habe derzeit nur 15 Metaboxen und die Diashow-Vorlage ist so eingerichtet, dass nur 5 Folien angezeigt werden, wenn nur 5 der Metaboxen ausgefüllt sind.

Schließlich möchte ich die Folien nachbestellen können, entweder per "Drag and Drop" oder über ein anderes Textfeld, in das ich die Bestellnummer eingeben kann.

Ich habe es mit dem "More Fields" -Plugin und einigen Code-Hilfen von Rarst fast dort hingekommen, wo ich es brauche. Mit dem Plugin "Weitere Felder" habe ich in jeder Metabox folgende Felder:

  • Titel (Textfeld)
  • Bild (Eine Dropdown-Liste der an den Beitrag angehängten Bilder)
  • Code einbetten (Textbereich)
  • Beschreibung (wysiwyg)
  • Folie ausblenden (Kontrollkästchen, um eine Folie vorübergehend auszublenden, ohne sie zu löschen)

Hier ist ein Screenshot davon, wie ich es über das Plugin "More Fields" eingerichtet habe:

alt text

Das Problem dabei ist, dass es keine Möglichkeit gibt, eine Folie zu löschen, sobald sie erstellt wurde, da "More Fields" <?php delete_post_meta($post_id, $key, $value); ?> nirgendwo verwendet. Das andere Problem mit dem Plugin ist, dass es zu unzuverlässig ist und häufig mit Updates bricht.

Ich konnte eine ähnliche Lösung mit meinen eigenen benutzerdefinierten Metaboxen implementieren, die Folgendes umfassen:

  • Titel (Textfeld)
  • Bild (Textfeld für die img URL)
  • Code einbetten (Textbereich)
  • Beschreibung (Textbereich)
  • Folie ausblenden (Kontrollkästchen, um eine Folie vorübergehend auszublenden, ohne sie zu löschen)

Mit dieser Implementierung kann ich nicht scheinen, die mehrfachen TinyMCE-Felder zum Arbeiten oder das Bild-Dropdown-Feld zu erhalten. Der TinyMCE-Code scheint zu funktionieren, bis ich den Code hinzufüge, der inkrementelle Kopien der ersten Metabox erstellt. An diesem Punkt wird dieser Fehler direkt über dem Feld angezeigt, in dem sich die TinyMCE-Schaltflächen befinden sollten: Warning: array_Push() [function.array-Push]: First argument should be an array....

Außerdem verlasse ich mich im Moment darauf, dass meine Autoren wissen, ob sie für jede Folie ein Video oder ein Bild einfügen, und das ist in Ordnung, aber es ist möglicherweise besser, ein Optionsfeld zu haben, mit dem sie auswählen können, welche Folie die Folie ist (wahrscheinlich standardmäßig) Bild), das an eine bedingte Anzeigeanweisung in der Diashow-Vorlage gebunden ist.

Ich verwalte das Hochladen von Bildern über das integrierte Feld "Ausgewähltes Bild" in der Seitenleiste, obwohl mir eine benutzerdefinierte Metabox nichts ausmacht, in der oben im Schreibfeld einfach "Bilder hochladen" steht.

Letztendlich suche ich eine Diashow ähnlich der folgenden: http://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html . Ich möchte, dass ich anstelle eines Bildes auch ein Video als Inhalt in der Folie haben kann. Ich benötige ein intuitives und einfach zu bedienendes Admin-Panel für meine Autoren (sie sind nicht sehr technisch versiert und arbeiten nicht zuverlässig mit HTML und/oder Shortcodes). Für den Fall, dass es aus dem Beispiel nicht klar wird, sollte jede Folie einen neuen Seitenaufruf generieren.

Die Drag'n'Drop-Neuordnung hat keine hohe Priorität, aber es wäre cool. Ich habe ein Plugin gefunden, das das wirklich gut beherrscht: SlideDeck . Leider entspricht das Plugin nicht meinen Wünschen, aber die Art und Weise, wie die Folien bestellt werden, ist ziemlich raffiniert. Es ist eine separate Metabox in der Seitenleiste, mit der Sie die Folien in die von Ihnen gewünschte Reihenfolge ziehen können. Auf diese Weise können Sie auch Folien hinzufügen, indem Sie auf die Schaltfläche "Folie hinzufügen" klicken und dem Schreibfeld eine weitere Folien-Metabox hinzufügen. Hier ist ein Screenshot:

alt text

Sie können auch sehen weitere Screenshots davon in Aktion im WordPress-Repository .

Hier ist mein gesamter Code:

Die Funktionen zum Einrichten meines Diashow-Beitragstyps und der Diashow-Paginierung: http://loak.Pastebin.com/g63Gf186

Der ursprüngliche Code von DeluxeBloggingTips.com (DBT), auf dem meine Metaboxen basieren: http://loak.Pastebin.com/u9YTQrxf

Die Version des DBT-Codes, den ich geändert habe, um inkrementelle Versionen derselben Metabox zu erhalten: http://loak.Pastebin.com/WtxGdPrN

Eine modifizierte Version des DBT-Codes, der Chris Burbridge erstellt wurde, um mehrere Instanzen von TinyMCE zu ermöglichen: http://loak.Pastebin.com/Mqb3pKhxMit diesem Code funktionieren die TinyMCEs.

Meine Änderung von Burbridges Code, der versucht, meine Inkrementierung zu integrieren, und ein Feld, in dem Sie das Bild aus einer Dropdown-Liste aller an den Beitrag angehängten Bilder auswählen können: http://loak.Pastebin.com/xSuenJTKBei diesem Versuch ist der TinyMCE defekt und das Dropdown funktioniert nicht.

Dies spielt wahrscheinlich keine Rolle, aber für den Fall, dass Sie sich fragen, hier ist der Code, den ich verwende, um den Einbettungscode aus dem benutzerdefinierten Post-Meta zu ziehen, seine Größe zu ändern und ihn in den Post einzufügen: http: //loak.Pastebin .com/n7pAzEAw

Dies ist eine bearbeitete Version der ursprünglichen Frage, die den aktuellen Status des Projekts widerspiegelt und die in den Kommentaren gestellten Fragen beantwortet. Vielen Dank an Chris_O , der das Kopfgeld dafür gezahlt hat. Vielen Dank auch an Rarst und Justin , die mir im ThemeHybrid.com-Forum dabei geholfen haben. Ich habe Stunden und Stunden damit verbracht und stecke fest (ich habe ein paar Stunden alleine mit dieser Frage verbracht). Jede Hilfe wäre sehr dankbar.

15
matt

Wie es aussieht, ist es am sichersten und einfachsten, das Plugin More Fields speziell für Ihre Verwendung zu verwenden. Die zwei größten Funktionen, die Ihre Gabel benötigt, sind ein Feld "Factory" und eine Drag-and-Drop-Schnittstelle.

Mehrere Felder

Mein Vorschlag wäre, sich die Klasse WordPress Widget anzusehen und sie als Modell für Ihre Feldfactory zu verwenden - im Grunde die Möglichkeit zu leihen, mehrere Instanzen eines Felds zu erstellen, sobald Sie das Framework dafür erstellt haben.

Dies ist der Kern der Funktionsweise mehrerer Widgets in einer Seitenleiste:

  • Sie definieren den Code für jedes Widget einmal, indem Sie die Klasse WP_Widget erweitern.
  • Anschließend können Sie so viele Kopien des Widgets erstellen, wie Sie möchten
    • Die Besonderheiten jedes Widgets werden als serialisierte Daten in der Optionstabelle gespeichert
  • Sie können jedes Widget anpassen, mit einem einfachen Befehl delete entfernen und seine Position explizit über die Drag-and-Drop-Oberfläche von Appearance festlegen

Drag-and-drop

Noch einmal, ich schlage vor, das WordPress-Widget-System als Inspiration zu nutzen. Wir haben dort bereits eine ziemlich intuitive Drag-and-Drop-Oberfläche eingerichtet, so dass es ziemlich einfach wäre, einen Großteil desselben Codes an einer anderen Stelle neu zu verwenden. Wenn Sie wirklich ausgefallen sein möchten, können Sie Ihr eigenes Drag-and-Drop-System in einem separaten benutzerdefinierten Metafeld implementieren.

Jede Folie wird also durch eine benutzerdefinierte Meta-Box definiert, die mit dem Beitrag verknüpft ist. Die Reihenfolge der Folien wird durch ein separates benutzerdefiniertes Meta-Feld festgelegt, das auch mit dem Beitrag verknüpft ist. Ich würde empfehlen, Folienaktualisierungen über AJAX einzureichen, damit Sie das Meta-Feld für die Folienreihenfolge basierend auf den Informationen dynamisch aktualisieren können ).

die Benutzeroberfläche von jQuery verfügt über eine großartige " draggable " - Schnittstelle, die Sie in dieser benutzerdefinierten Meta-Box problemlos für Ihre Zwecke bearbeiten können. Der schwierige Teil besteht nicht darin, die Benutzeroberfläche zu erstellen, sondern darin, eine konsistente genaue Kommunikation zwischen der Meta-Box und der Sammlung von Folien-Meta-Boxen an anderer Stelle auf der Seite herzustellen.

In Summe

Was ich von Ihrem Beitrag erfuhr, ist, dass Sie eine etwas praktikable Lösung haben:

  • Sie haben Ihrem benutzerdefinierten Beitragstyp über das Widget "Weitere Felder" 15 benutzerdefinierte Felder hinzugefügt, möchten jedoch dynamisch Felder hinzufügen/entfernen, anstatt mit einer festgelegten Nummer zu arbeiten
  • Sie möchten eine Möglichkeit, die Reihenfolge dieser benutzerdefinierten Felder anzupassen, damit die Folien in der richtigen Reihenfolge geladen werden

Ich gehe so vor, indem ich den benutzerdefinierten Metaerstellungsprozess auf eine Klasse abstrahiere, die ich immer wieder zum Erstellen neuer benutzerdefinierter Metafelder verwenden kann. Dann würde ich die Klasse erweitern, um zwei Arten von Meta-Boxen zu initialisieren: eine für Folien, eine für die Folienstruktur. In die Meta-Box für die Folienstruktur würde auch die Fähigkeit eingebaut, dynamisch neue Meta-Boxen für Folien zu erstellen (die Meta-Boxen für Folien würden ihre eigene "Lösch" -Aktion enthalten).

Die gesamte Diashow wird nicht in den Folien-Metafeldern gespeichert, sondern in der Folienstruktur in einem benutzerdefinierten Metafeld für den Beitrag. Das benutzerdefinierte Metafeld ist ein gezacktes Array, in dem jede Folie als Array dargestellt wird. in Ordnung. Wenn Sie die Reihenfolge der Diashow im Struktur-Meta-Feld anpassen, wird das Array neu organisiert und das Post-Meta erneut gespeichert. Auf diese Weise kann ich nur 1 Metawert auslesen, wenn ich auf die Diashow zugreifen möchte.

Zwischen SlideDeck, More Fields und dem benutzerdefinierten Code, den Sie bisher zusammengestellt haben, haben Sie bereits den größten Teil Ihrer Lösung in der Hand ... Sie müssen nur dafür sorgen, dass alles gleichzeitig funktioniert. Ich würde mich darauf konzentrieren, die Root-Implementierung zuerst herunterzufahren, bevor ich die JavaScript-Verzierungen hinzufüge - das dynamische Erstellen, Ändern, Speichern und Löschen von Folien ist wichtiger als ein Rich-Text-Editor, IMO. Lass das zuerst raus. Dann schalten Sie das Bestellsystem aus. Dann Sie können sich darauf konzentrieren, dass mehrere Instanzen von TinyMCE auf der Seite funktionieren.

6
EAMann

Ich habe genau das gefunden, wonach Sie suchen -> http://pippinsplugins.com/drag-and-drop-order-for-plugin-options/

0
Ben Racicot