Errori comuni di sviluppo di WordPress e come risolverli

Con WordPress sempre più popolare c'è una quantità enorme di codice generata da utenti, agenzie e mercati. Lavoro con WordPress da molto tempo e mi stupisce il fatto che molti sviluppatori stanno ripetendo gli stessi errori più e più volte.

Ho intenzione di passare attraverso alcuni degli errori di sviluppo più comuni e di come puoi risolverli facilmente, e andando avanti a rendere il tuo codice migliore!


Perché il tuo codice succhia

Se fai una ricerca su Google per "WordPress" restituisce 1,9 miliardi di risultati. Ci sono milioni di siti con esempi di codice, tutorial e snippet che sono molto utili come sviluppatore WordPress. Il problema è di 2 volte:

  1. Le persone non seguono gli standard di codifica di WordPress
  2. Le persone si limitano a copiare e incollare

Quindi, come nuovo sviluppatore WordPress fai una ricerca su Google, trova un articolo, copia e incolla il codice e funziona! Brillante dici a te stesso e ricordi o aggiungi il codice a un segnalibro. Il grosso problema qui è che il codice potrebbe non essere perfetto, ma tu sei nuovo, quindi non te ne accorgi. Mentre funziona, puoi semplicemente continuare a usarlo per sempre.

Iniziamo a capire come evitare alcuni errori comuni!


Standard di codifica WordPress

Gli stessi WordPress ammettono che alcune parti della struttura del codice WordPress per il markup PHP sono incoerenti nel loro stile (le loro parole esatte). Stanno lavorando per ripulire il codice e renderlo coerente e hanno definito uno standard per TUTTO il codice WordPress. Non importa se si tratta di un plugin o di un tema, tutti dovrebbero seguire gli stessi standard.

Standard di codifica WordPress

Se non hai mai letto prima questa pagina leggilo! Questo dovrebbe essere uno dei primi posti in cui uno sviluppatore lavora con le visite di WordPress. Non ho intenzione di passare attraverso i punti qui, ma si dovrebbe prendere il tempo di leggere e leggere.

Io stesso sono colpevole di aver infranto un paio di queste regole, ma la vera chiave è la coerenza. L'unica regola che faccio rompere mi rompe tutto il tempo. Personalmente quando si tratta di Se le affermazioni preferisco usare la sintassi alternativa per le strutture di controllo. Per me sono più facili da leggere. Essendo coerente nel mio codice, almeno le persone possono vedere immediatamente che sto facendo qualcosa di diverso e seguimi attraverso il mio codice.

Ricorda: Gli standard di coerenza e codifica fanno davvero molto per rendere il tuo codice più leggibile e leggibile!


Codex, Codex, Codex

Nella sezione precedente abbiamo esaminato gli standard di codifica di WordPress, questo documento si trova nella risorsa di sviluppo più utile per gli sviluppatori di WordPress. Il codice WordPress. Disponibile in quasi 50 lingue, il Codex è la bibbia degli sviluppatori. Contiene documentazione su quasi ogni singola funzione, classe e variabile all'interno di WordPress, come usarli ed esempi di codice. Di solito ho 3 o 4 schede aperte sul codice in qualsiasi momento, infatti al momento ne ho 4 aperte! Non importa se sei nuovo su WordPress o lavori con esso da anni la documentazione qui è inestimabile.

La bellezza del Codice è che è una comunità vivente e che respira per la documentazione. Puoi contribuire con le tue conoscenze per renderlo migliore o aggiungere una pagina se manca, basta ricordare se si aggiunge codice per seguire gli standard di codifica di WordPress!

Il mio più grande consiglio per il Codice è di cercare! Come con qualsiasi sito basato su Wiki, la navigazione è un po 'complicata e non ha necessariamente alcun senso all'inizio. La ricerca integrata dovrebbe aiutarti a trovare ciò che stai cercando. Se hai difficoltà a trovare ciò che stai cercando, passa al canale IRC #WordPress, di solito ci sono alcune persone che ti indirizzano alla pagina del Codex corretta.


Lo strumento giusto per il lavoro giusto

Quindi ora sappiamo degli standard di codifica e dove trovare la documentazione giusta e diamo un'occhiata a parte del codice.

    Ciao 

Il frammento di cui sopra è il tipico prime poche righe della maggior parte dei temi WordPress, tuttavia non dovrebbe essere. Gli script e gli stili possono essere gestiti in modo molto migliore con WordPress e ci danno alcune grandi funzioni per lavorare con loro. Ora sto parlando di temi, ma qualsiasi plugin che abbia bisogno di script o stili dovrebbe fare le cose esattamente allo stesso modo. Introduzione wp_enqueue_style () e wp_enqueue_script ()! Se non sai cosa fanno queste funzioni, allora dobbiamo risolverlo! Passiamo attraverso ciò che devi fare.

Lascia che WordPress sappia tutto a riguardo!

Indipendentemente dal fatto che si tratti di uno script o di uno stile, la cosa migliore da fare è far sapere a WordPress. Lo facciamo usando wp_register_script () o wp_register_style (). Questi sono entrambi i modi sicuri di registrare uno script o uno stile con WordPress in modo da poterli utilizzare in seguito. Ora questa funzione non produce nulla sul tuo tema o sito, semplicemente prepara WordPress per usarli.

 

$ maniglia (Necessario) Questo è il tuo nome per il foglio di stile o lo script. Questo può essere tutto ciò che ti piace finché è unico. Puoi sempre aggiungere il prefisso al nome per evitare conflitti.

$ src (Necessario) Questo è l'URL del foglio di stile o dello script. Può essere esterno o interno al tuo sito a seconda di ciò che stai facendo. L'esterno è utile se si utilizza un servizio di font di terze parti come Type Kit o Google Fonts o per Social Media Javascript. Dovresti mai hardcode l'URL per fogli di stile o script locali, ci sono funzioni appropriate che puoi usare per questo di cui parleremo in seguito.

$ dipendenze (Opzionale) Questo è molto utile anche se è facoltativo. Questo ti permette di specificare una serie di dipendenze per il tuo script o foglio di stile. Inoltre assicurerà che le dipendenze siano caricate prima che lo script o lo stile siano.

$ ver (Opzionale) Qui puoi specificare lo script o il numero di versione dello stile, se ne ha uno. Questo è utile per garantire che la versione corretta sia inviata al browser di un utente, indipendentemente dalla cache. Naturalmente è possibile impostare i propri numeri di versione per i propri script e stili oppure è possibile utilizzare un piccolo trucco per ottenere i numeri di versione dinamici.

$ in_footer (Opzionale, solo script) Normalmente gli script sono collocati nel tuttavia se si imposta questo parametro su true lo script verrà posizionato nella parte inferiore del . Se si desidera eseguire l'output nel footer, è necessario assicurarsi che il tema abbia il wp_footer () agganciare nel posto giusto.

$ supporti (Opzionale, solo lo stile) Questa può essere una stringa per specificare il supporto per il quale è stato definito il foglio di stile. (Per esempio. 'tutti', 'schermo', 'Tenuto in mano', 'stampare').

Mettiamo tutto insieme in un bell'esempio:

 

Molto brevemente, abbiamo un JavaScript che chiamiamo dalla nostra cartella dei temi, dipende da jQuery, impostato sulla versione 1 e vogliamo uscire alla fine della nostra pagina. Inoltre abbiamo il nostro style.css che stiamo chiamando dalla nostra cartella dei temi, non ha dipendenze, è la versione 1.0 ed è per lo schermo. È anche importante ricordare che è necessario eseguire questi script utilizzando un hook di azione. In questo caso usiamo wp_enqueue_scripts come il nostro gancio di azione come raccomandato dal Codex.

È tutto molto facile una volta capito e preso l'abitudine di farlo!

Lascia che WordPress faccia il sollevamento pesante

Ora abbiamo registrato i nostri script e stili WordPress sa tutto di loro e ora possiamo iniziare a usarli. Tornando al nostro wp_enqueue_script () e wp_enqueue_style () ora possiamo accodare gli stili e gli script che abbiamo registrato nel passaggio precedente. Lo script di accodamento e le funzioni di stile funzionano in modo molto simile alle funzioni di registro. La grande differenza è che WordPress ora genererà il JavaScript o lo stile nella pagina che genera.

 

Dato che abbiamo già registrato i nostri script e stili, è molto semplice scovarli. La bellezza di questo è che possiamo accodare in modo condizionale i nostri script e stili in modo da caricarli solo sulle pagine su cui sono necessari. Inoltre, dato che vengono chiamati nello stesso hook di azione, puoi eseguirli tutti in un'unica funzione. Dai un'occhiata all'esempio qui sotto:

 

Quindi abbiamo registrato i nostri stili e script nel modo corretto e li abbiamo accodati. Abbiamo anche uno script e uno stile che vengono solo accodati sulla nostra home page usando un'istruzione condizionale.

Questo è un perfetto esempio di uno dei più grandi errori che vedo guardando temi o plugin scritti da altri. Imparando un paio di semplici funzioni di WordPress puoi caricare i tuoi stili e script in sicurezza e assicurarti che tutte le dipendenze siano a posto. Inoltre, se qualcuno sta usando un plug-in che hai scritto, è facile per loro apportare modifiche senza che vengano cancellati dagli aggiornamenti. Tutto quello che devono fare è copiare i CSS sul loro tema, e possono annullare la registrazione del proprio stile e registrarne uno!

Puoi vedere un tutorial completo su come utilizzare queste funzioni nella parte inferiore di questo tutorial.


Il tuo JavaScript uccide i gattini

 

Se hai mai inserito questo tema, plugin o qualsiasi cosa abbia a che fare con WordPress, hai appena ucciso un gattino. Abbiamo già discusso l'importanza della registrazione e dell'accodamento dei tuoi script e stili, quindi perché annullare tutto il tuo duro lavoro. WordPress viene fornito in bundle con un sacco di script da utilizzare semplicemente inserendoli. Certo che puoi, anche quando fai le cose correttamente, puoi annullare la registrazione della versione in bundle di uno script e registrare la tua versione. Come sopra, forse vogliamo utilizzare la versione di Google CDN. Questo va bene se stai lavorando sul tuo sito, sul tuo tema o plugin privato e non lo rilascerai. Tuttavia se pubblichi pubblicamente il tuo codice attenersi alle librerie incluse. Altri plug-in potrebbero rompersi, i temi potrebbero smettere di funzionare perché nessuno segue le regole. Trovo spesso siti con 3 o 4 versioni diverse di jQuery caricate semplicemente perché le persone non registrano e accodano correttamente o qualche autore di plugin desidera utilizzare una versione diversa di qualcosa.

Facciamo l'un l'altro un favore e seguiamo alcuni standard!

Avvertimento: Plugin o temi che utilizzano una libreria non raggruppata verranno rifiutati se inviati a ThemeForest e al repository WordPress.org!

Adesso è anche importante parlare brevemente di jQuery. È enorme, tutti lo usano, i temi lo adorano e i plugin lo adorano. Tuttavia può causare problemi se non viene usato correttamente. La libreria jQuery in bundle con WordPress viene caricata in modalità "nessun conflitto". Ciò gli consente di lavorare a fianco delle altre librerie che possono essere utilizzate da WordPress. Tuttavia in modalità no-conflict il $ il collegamento non funziona ed è stato sostituito con un po 'più lungo jQuery.

 $ (document) .ready (function () $ (# myfuntion) ...);

Quanto sopra deve essere riscritto per funzionare, il modo più semplice è usare il seguente wrapper:

 jQuery (document) .ready (function ($) $ (# myfunction) // Ora $ () funziona come alias per jQuery () all'interno di questa funzione!);

Il problema con il caricamento di una versione esterna di jQuery è che potrebbe non caricarsi in modalità no-conflict, può rompere altri script e l'autore potrebbe aver scritto JavaScript senza seguire le regole precedenti. Significa che tutto si interrompe quando si tenta di utilizzare la versione jQuery in bundle! Cerca sempre di utilizzare le librerie in bundle e scrivi sempre il tuo JavaScript / jQuery in modalità no-conflict!

Puoi ottenere maggiori informazioni su WordPress e jQuery nella Pagina del codice.


Trova il modo per aggirare

Come si ottiene il percorso della directory del tema? Come indirizzare le persone alla home page del sito? Un sacco di sviluppatori non sanno ancora come fare alcune cose basilari con WordPress. Ho intenzione di tirare fuori alcuni dei più comuni.

  1. Ottenere la posizione del tema: Se stai usando TEMPLATEPATH o bloginfo ('template_directory'). Stop! Dovresti usare il molto utile get_template_directory () come si vede nei miei esempi sopra.

    Ci sono in realtà 4 varianti di questa funzione:

    1. get_template_directory () restituisce il PERCORSO alla cartella del tema. Utile per l'uso all'interno di funzioni PHP o include.
    2. get_template_directory_uri () restituisce l'URL alla cartella del tema. Utile per l'accodamento e la registrazione di script e stili e se si desidera includere e immagini.
    3. get_stylesheet_directory () restituisce il PERCORSO alla cartella del foglio di stile. Questo punterà sempre al tema figlio se uno è in uso mentre get_template_directory () punterà sempre al tema principale.
    4. get_stylesheet_directory_uri () restituisce l'URL alla cartella del foglio di stile. Come per quanto sopra, questo rimanda sempre al tema secondario se è in uso.

    Assicurati di utilizzare la funzione giusta. Se si prevede che gli utenti eseguano l'override del tema in un tema figlio, è preferibile utilizzare la funzione corretta.

  2. Ottenere la posizione del plugin: Con i plugin ci sono 2 diverse funzioni da usare:
    1. plugin_dir_url () restituisce l'URL del file del plugin passato.
    2. plugin_dir_path () restituisce il percorso della directory del file del plugin passato.

    Con i plugin trovo sempre più facile definire una costante all'inizio e usarla nel mio plugin.

     
  3. Ottenere l'URL del tuo sito: È un requisito abbastanza comune, forse vuoi semplicemente aggiungere un link alla tua home page? Come far smettere di usare la directory dei temi bloginfo (). L'esempio seguente fornisce un esempio molto semplice di come farlo correttamente.
     "> Questo è un link alla nostra home page

Se hai dei dubbi su qualcosa allora leggi il Codice che aiuta davvero! Usando le funzioni corrette per aggirare WordPress, è molto più probabile che il tuo plugin o il tuo tema non interferiscano o interferiscano con il codice degli altri. Non c'è niente di più frustrante che provare a risolvere un bug nel proprio codice solo per scoprire che si tratta di un altro plugin che sta incasinando tutto il resto!


Plugin o tema?

Questo è stato un punto di discussione tra la comunità per secoli. Dovrei inserire la mia funzionalità all'interno del mio tema o in un plugin? Trovo sempre che la risposta semplice è questa: la tua funzionalità funzionerà se tu stia usando un tema diverso? Ciò che intendo qui è se si aggiungono funzionalità extra, magari un tipo di post personalizzato o un effetto lightbox personalizzato per le immagini, funzionerà con qualsiasi tema o può funzionare con qualsiasi tema? Non c'è niente di peggio di passare un po 'di tempo a creare un sito con tantissimi tipi di post personalizzati che aggiungono un sacco di contenuti solo per scoprire che cambi tema e tutto scompare.

Di solito seguo questa semplice regola, se può essere un plugin rendilo uno. I temi hanno lo scopo di trattare specificamente lo stile visivo di un sito e non la funzionalità. I plugin sono per funzionalità. Ora se il tuo plug-in sta emettendo qualcosa, come la maggior parte di loro, puoi facilmente controllare il tema attivo per i file di modello richiesti e, se necessario, ricorrere ai file modello del tuo plugin. Infatti nella maggior parte dei casi i miei plugin arrivano così. Almeno allora offri all'utente la possibilità di modificare il suo aspetto senza perdere le modifiche se pubblichi un aggiornamento. Cercherò di coprirlo in un futuro tutorial, tuttavia la lezione qui è di mantenerla semplice. Rompendo le tue funzionalità in bei blocchi di dimensioni mordenti, gli utenti possono scegliere, se non gradiscono i pulsanti di Social Sharing, lasciali spegnere o sostituirli con i propri. Più plug-in, meno opzioni per le pagine a tema complicate!


Filtri di azione e ganci, perché non li usi?

Questo è un altro punto che volevo sollevare molto brevemente perché so che ci sono alcuni fantastici tutorial là fuori su Azioni e Filtri (uno è collegato in basso per te). Indipendentemente dal tipo di sviluppo di WordPress che stai facendo, scopri le azioni e i filtri. Questo è uno dei più grandi errori che vedo le persone fanno. WordPress ha una grande API per lo sviluppo di temi e plugin e puoi migliorare lo sviluppo utilizzando gli strumenti che WordPress mette a tua disposizione. I migliori plugin là fuori fanno ampio uso di azioni e filtri in modo che se si vuole personalizzare come funziona per voi è semplice.

Un esempio di questo è WooCommerce di WooThemes. Ora, anche se non sono un fan dei massicci pannelli di opzioni tematiche che hanno inserito nei loro temi, WooCommerce è stato creato pensando ad altri sviluppatori. Quasi tutto può essere personalizzato o sostituito semplicemente rimuovendo le azioni o sostituendole. La loro azione e filtro di riferimento è ampia e ti permette davvero di lavorare fianco a fianco esattamente come vuoi. Ora non mi aspetto che tu vada fino a questo punto per i tuoi progetti, ma possiamo imparare lezioni importanti qui. Se il tuo codice è facile da personalizzare senza hackerarlo a pezzi, è più probabile che le persone lo utilizzino, lo rivedono e lo raccomandano!

Azioni e filtri sono una delle cose più importanti che dovresti imparare sullo sviluppo di WordPress, prenditi un po 'di tempo e arriverai lì!


Conclusione

Abbiamo parlato molto in questo articolo e spero che sia stato utile. Voglio solo abbatterlo ulteriormente per te:

  1. Segui gli standard di codifica WordPress
  2. Sii coerente con il tuo codice
  3. Usa la documentazione! Il codice è la tua bibbia
  4. Usa le funzioni che ci sono per i giusti motivi
  5. Pensa a dove hai messo il tuo codice
  6. Fare uso di azioni e filtri

Quando copi e incolli il codice che hai trovato da Google, dedica un minuto a consultarlo, comprenderlo e provare ad applicare quanto sopra. Segue gli standard di codifica? Sta usando le funzioni corrette? Che cosa fa quel jQuery? Sei solo un tema o un plugin lontano da tutti questi punti che diventano una seconda natura. La prossima volta che vedi un errore, prova a risolverlo!

Post correlati
  • Come includere Javascript e CSS nei temi e nei plugin di WordPress
  • La guida per principianti alle azioni e ai filtri di WordPress