Aiuto per la creazione di un tipo di post personalizzato di presentazione con meta box personalizzate?


16

Devo creare una meta box (s) personalizzata per il mio tipo di post personalizzato "Presentazione" (questo tipo di post è già stato creato). Ogni metabox conterrà il contenuto di ciascuna diapositiva e lo salverà nei corrispondenti campi personalizzati. Ogni metabox dovrebbe contenere i seguenti campi:

  • Titolo (campo di testo)
  • Immagine (o un campo di testo per l'URL img o idealmente un elenco a discesa che mostra le anteprime delle immagini allegate al post)
  • Codice da incorporare (area di testo)
  • Descrizione (wysiwyg)
  • Nascondi la diapositiva (casella di controllo da utilizzare per nascondere temporaneamente una diapositiva senza eliminarla)
  • Elimina diapositiva (pulsante che elimina i contenuti dei meta campi post compilati da questa diapositiva)

Vorrei anche un pulsante da qualche parte che mi permetta di "Aggiungi una diapositiva", quindi quando viene cliccato, aggiunge un'altra Meta Box "Slide" personalizzata che è un duplicato del primo ma aggiunge un numero incrementale a ciascun campo meta post personalizzato. Al momento ho solo 15 metabox e il modello di presentazione è impostato in modo tale che se solo 5 dei metabox sono compilati, vengono visualizzate solo 5 diapositive.

Infine, vorrei poter riordinare le diapositive, sia con "Trascina selezione" sia tramite un altro campo di testo in cui posso digitare il numero dell'ordine.

L'ho ottenuto quasi dove ne ho bisogno con il plug-in "Altri campi" e un po 'di aiuto con il codice da Rarst. Con il plug-in "Altri campi" ho i seguenti campi in ogni metabox:

  • Titolo (campo di testo)
  • Immagine (un elenco a discesa delle immagini allegate al post)
  • Codice da incorporare (area di testo)
  • Descrizione (wysiwyg)
  • Nascondi la diapositiva (casella di controllo da utilizzare per nascondere temporaneamente una diapositiva senza eliminarla)

Ecco uno screenshot di come l'ho installato tramite il plug-in "Altri campi":

testo alternativo

Il problema è che non è possibile eliminare una diapositiva una volta creata perché "Altri campi" non viene utilizzato da <?php delete_post_meta($post_id, $key, $value); ?>nessuna parte. L'altro problema con il plug-in è che è troppo inaffidabile e si interrompe frequentemente con gli aggiornamenti.

Sono stato in grado di implementare una soluzione simile con i miei metabox personalizzati che include:

  • Titolo (campo di testo)
  • Immagine (campo di testo per l'URL img)
  • Codice da incorporare (area di testo)
  • Descrizione (area di testo)
  • Nascondi la diapositiva (casella di controllo da utilizzare per nascondere temporaneamente una diapositiva senza eliminarla)

Con questa implementazione non riesco a far funzionare i molteplici campi TinyMCE o la casella a discesa delle immagini. Il codice TinyMCE sembra funzionare fino a quando aggiungo il codice che creano copie incrementali del primo METABOX ea quel punto ho questo diritto errore di cui sopra il campo in cui i pulsanti TinyMCE dovrebbero essere: Warning: array_push() [function.array-push]: First argument should be an array....

Inoltre, in questo momento sto facendo affidamento sui miei scrittori per sapere di inserire IN OGNI un video o un'immagine per ogni diapositiva e va bene, ma potrebbe essere meglio avere un pulsante di opzione che consente loro di scegliere quale sia la diapositiva (probabilmente l'impostazione predefinita è immagine) collegata a un'istruzione di visualizzazione condizionale nel modello di presentazione.

Sto gestendo i caricamenti di immagini tramite la casella "Immagine in primo piano" integrata nella barra laterale, anche se non mi dispiacerebbe un metabox personalizzato che dicesse semplicemente "Carica immagini" nella parte superiore del pannello di scrittura.

Alla fine sto cercando una presentazione simile a questa: http://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html . Voglio che anche il mio sia in grado di avere un video come contenuto nella diapositiva anziché un'immagine. Ho bisogno di un pannello di amministrazione intuitivo e facile da usare per i miei scrittori (non sono molto esperti di tecnologia e non sono affidabili usando HTML e / o codici brevi). Nel caso in cui non sia chiaro dall'esempio, ogni diapositiva dovrebbe generare una nuova visualizzazione di pagina.

Il riordino Drag'n'Drop non è una priorità, ma sarebbe bello. Ho trovato un plugin che lo gestisce davvero bene: SlideDeck . Sfortunatamente il plugin non soddisfa le mie esigenze, ma il modo in cui gestiscono l'ordinamento delle diapositive è piuttosto fluido. È un metabox separato nella barra laterale che ti consente di trascinare le diapositive nell'ordine che preferisci. Questo è anche il modo in cui aggiungi le diapositive, facendo clic sul pulsante "Aggiungi diapositiva" che aggiunge un'altra diapositiva Metabox al pannello di scrittura. Ecco uno screenshot:

testo alternativo

Puoi anche vedere altri screenshot in azione nel repository wordpress .

Ecco tutto il mio codice:

Le funzioni che impostano il mio tipo di post e l'impaginazione dello slideshow: http://loak.pastebin.com/g63Gf186

Il codice originale di DeluxeBloggingTips.com (DBT) su cui ho basato i miei Metabox: http://loak.pastebin.com/u9YTQrxf

La versione del codice DBT che ho modificato per fornirmi versioni incrementali dello stesso metabox: http://loak.pastebin.com/WtxGdPrN

Una versione modificata del codice DBT creata da Chris Burbridge per consentire più istanze di TinyMCE: http://loak.pastebin.com/Mqb3pKhx Con questo codice i TinyMCE funzionano.

La mia modifica del codice di Burbridge che tenta di incorporare la mia incrementazione e un campo che consente di scegliere l'immagine da un elenco a discesa di tutte le immagini allegate al post: http://loak.pastebin.com/xSuenJTK In questo tentativo, TinyMCE è rotto e il menu a discesa non funziona.

Questo probabilmente non importa, ma nel caso ti stia chiedendo, ecco il codice che uso per estrarre il codice di incorporamento dal meta post personalizzato, ridimensionarlo e inserirlo nel post: http://loak.pastebin.com / n7pAzEAw

Questa è una versione modificata della domanda originale per riflettere lo stato corrente del progetto e rispondere alle domande postate nei commenti. Grazie a Chris_O per avermi dato la grazia. Inoltre, grazie a Rarst e Justin per avermi aiutato molto con questo nel forum ThemeHybrid.com . Ho trascorso ore e ore su questo e sono bloccato (ho trascorso un paio d'ore da solo su questa domanda). Qualsiasi aiuto sarebbe molto apprezzato.


Riesci a disegnare un'immagine semplice che mostra l'intera immagine, come uno schizzo o giù di lì? Penso che sia utile per capire meglio le tue esigenze.
Hacre,

Ho aggiunto alcuni esempi in fondo. Se questo non chiarisce sufficientemente le cose fammi sapere.
matt

Non è ancora chiaro?
matt

Chiunque? È accesa questa cosa?
matt

@Hakre, ci sei?
matt

Risposte:


6

Dall'aspetto delle cose, la scommessa più sicura e il percorso più semplice sarebbe quello di biforcare il plug-in More Fields appositamente per il tuo uso. Le due principali funzionalità di cui ho bisogno per il tuo fork sono un campo "factory" e un'interfaccia drag-and-drop.

Campi multipli

Il mio suggerimento sarebbe quello di guardare la classe Widget di WordPress e usarla come modello per la tua fabbrica di campi - fondamentalmente, prendi in prestito la possibilità di creare più istanze di un campo una volta che hai costruito il framework per esso.

Questo è il nucleo di come funzionano più widget in una barra laterale:

  • È possibile definire il codice per ciascun widget una volta estendendo la WP_Widgetclasse.
  • Quindi, puoi creare tutte le copie del widget che desideri
    • Le specifiche di ciascun widget sono memorizzate come dati serializzati nella tabella delle opzioni
  • Puoi personalizzare ciascun widget, rimuoverlo con un semplice deletecomando e impostarne il posizionamento esplicitamente tramite l'interfaccia di trascinamento della visualizzazione dell'Apparenza

Trascinare e rilasciare

Ancora una volta, suggerisco di cercare ispirazione nel sistema di widget di WordPress. Abbiamo già installato un'interfaccia drag-and-drop abbastanza intuitiva, quindi sarebbe abbastanza facile riutilizzare gran parte dello stesso codice altrove. Oppure, se vuoi essere davvero fantasioso, puoi implementare il tuo sistema di trascinamento della selezione all'interno di un meta campo personalizzato separato.

Quindi ogni diapositiva verrebbe definita da una meta box personalizzata collegata al post. L'ordine delle diapositive verrebbe impostato da una meta box personalizzata separata che è anche collegata al post. Ti consiglio di inviare gli aggiornamenti delle diapositive tramite AJAX in modo da poter aggiornare dinamicamente la meta box dell'ordine delle diapositive in base alle informazioni (questo impedisce di dover premere manualmente "aggiorna" e attendere che la pagina venga ricaricata prima di spostare le cose).

L'interfaccia utente di jQuery ha un'interfaccia " trascinabile " che puoi facilmente manipolare per i tuoi scopi all'interno di questa meta box personalizzata. La parte difficile non è costruire l'interfaccia, sta ottenendo una comunicazione coerente e accurata tra la meta-box e la raccolta di meta-box slide altrove nella pagina.

In sintesi

Quello che ho raccolto dal tuo post è che hai una soluzione in qualche modo praticabile:

  • Hai aggiunto 15 campi personalizzati al tuo tipo di post personalizzato tramite il widget Altri campi ma desideri aggiungere / rimuovere i campi in modo dinamico anziché lavorare con un numero impostato
  • Volete un modo per regolare l'ordine di questi campi personalizzati in modo che le diapositive vengano caricate in ordine

Il modo in cui mi avvicinerei a questo è quello di astrarre il processo di creazione meta personalizzata in una classe che posso usare più e più volte per creare nuovi campi meta personalizzati. Quindi estenderei la classe per inizializzare due tipi di meta-box: uno per le diapositive, uno per la struttura delle diapositive. Costruirò anche nella meta box della struttura di diapositive la possibilità di creare dinamicamente nuove meta box di diapositive (le meta box di diapositive ospiterebbero la loro azione "elimina").

L'intera presentazione non verrebbe memorizzata dalle meta box delle diapositive, ma dalla meta box della struttura delle diapositive in un meta campo personalizzato per il post - la meta personalizzata sarebbe una matrice frastagliata, con ciascuna delle diapositive rappresentate come matrici al suo interno - in ordine . La personalizzazione dell'ordine della presentazione nella meta box della struttura riorganizza l'array e salva nuovamente la meta meta. In questo modo ho solo 1 meta valore da leggere quando voglio accedere alla presentazione.

Tra SlideDeck, More Fields e il codice personalizzato che hai messo insieme finora, hai già in mano la maggior parte della tua soluzione ... devi solo far funzionare tutto insieme allo stesso tempo. Mi concentrerei su come ridurre l'implementazione di root prima di aggiungere gli abbellimenti JavaScript: creare, modificare, salvare ed eliminare dinamicamente le diapositive è più importante di un editor di testo avanzato, IMO. Fallo prima scoppiare. Quindi spegnere il sistema di ordinazione. Quindi puoi concentrarti su come far funzionare più istanze di TinyMCE sulla pagina.


Grazie per l'aiuto! Al momento questo è un po 'fuori dal mio set di competenze ma servirà da buona guida attraverso il processo di apprendimento. Sono a conoscenza di "classi" e mi rendo conto che uso già una classe sul codice metaboxes ma ancora non li capisco. Un'altra cosa di cui sono "consapevole" ma che non capisco completamente è l'uso di array.
matt

Il tuo consiglio su come abbattere i fondamenti prima ha un senso, ma sono contro alcuni vincoli del mondo reale che mi richiedono di inserirli nell'ambiente di produzione al più presto e uno dei fattori più importanti è l'editore wysiwyg perché molti degli scrittori sono molto non tecnici . Non mi dispiace rendere il progetto incrementale e fare affidamento sulle stampelle lungo la strada, ma ovviamente questo approccio deve essere scalabile. Detto questo, mi sembra che l'uso del plug-in "più campi" possa servire come soluzione temporanea fino a quando non lo capirò, tuttavia non sono sicuro che funzionerà con ...
matt

il tuo approccio per salvare l'intera presentazione in un campo personalizzato. Pensi davvero che mettere tutto in un campo sia meglio? Questo può sembrare ignorante, ma mi sembra che ci sia molto più spazio per gli errori se wp deve riscrivere l'intera presentazione ogni volta che viene apportata una modifica minore.
matt

Salvare l'intero spettacolo in un metacampo previene e introduce problemi: consente di risparmiare tempo sul sito di presentazione non costringendo l'utente a selezionare, leggere e scorrere in più campi. Tuttavia, se qualcosa si rompe in una diapositiva e viene scritta nel DB, interrompe l'intera presentazione. Sicuramente un compromesso, ma scelgo sempre velocità e facilità di sviluppo.
EAMann,

Stai dicendo che risparmia tempo sul front-end del sito? Perché sarebbe se mostra solo una diapositiva alla volta?
matt

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.