Share
Stiamo per creare un tema personalizzato per il CMS open source "up and coming", Anchor. Anchor è un sistema di gestione dei contenuti super semplice, leggero e veloce. Puoi prendere una copia di Anchor dal sito Web di Anchor CMS, inoltre puoi anche controllare alcuni temi disponibili per Anchor on Anchor Themes.
Forse sei un web designer o uno sviluppatore front-end e stai cercando un modo per fare un passo in avanti? Forse hai un prototipo HTML statico di un sito web, vuoi essere in grado di creare rapidamente pagine e articoli, ma non vuoi il fastidio di scrivere codice ogni volta. Anchor CMS ti darà quel controllo senza darti un mal di testa per lo sviluppo.
Questo articolo presuppone almeno una conoscenza di base del web design e dei concetti di sviluppo, come l'hosting di un sito Web e la codifica dell'HTML. Avrai bisogno di un'installazione funzionante di Anchor CMS, che può essere locale o installata in remoto. Per installare l'Ancoraggio (in locale o in remoto) è sufficiente scaricare una copia e seguire le relative istruzioni di installazione.
Insieme alla tua installazione avrai bisogno di un prototipo del tuo tema. Il prototipo dovrebbe essere una visuale HTML chiaramente marcata, con un foglio di stile e qualsiasi risorsa che hai usato, come immagini e JavaScript. Per dimostrare questo intero processo, farò anche un tema. Puoi vedere il mio tema qui sotto, e puoi scaricare il prototipo HTML dal link nella parte superiore della pagina:
Mi piace pensare che l'idea di Anchor sia come fare un sandwich, e so che molte persone sono parziali di un buon sandwich. Quindi spero che le mie referenze ti aiutino nel cercare di capire i passi che passo. Inoltre, preferisco elencare ciò che effettivamente fanno alcune delle funzioni di Anchor, in quanto sembra un modo più semplice di spiegarle.
Affamato? Mangiamo allora ...
Proprio come gli altri sistemi di gestione dei contenuti, Anchor ha una directory solo per temi. Se vai alla radice della tua installazione ci sarà una cartella chiamata "temi". Crea una nuova cartella qui e chiamala come si chiamerà il tuo tema, nel mio caso chiamerò il mio tema "Cleat":
Dovrai anche creare un file "about.txt". Questo è solo un file di testo di base che spiega come viene chiamato il tema, chi è e qualsiasi informazione di riferimento. Il file "leggimi" in sostanza. Dai un'occhiata al mio esempio qui sotto:
Tema: Descrizione Descrizione: Un tema leggero e puro che è semplice nel cuore. Nome dell'autore: David Darnes Sito dell'autore: http://david.darn.es Licenza: http://licence.visualidiot.com
Insieme al tuo file about.txt, posiziona anche i tuoi file prototipo nella cartella. È meglio conservare le risorse, come le immagini, in una sottocartella separata. Per costruire il tema, prenderemo dei pezzi del tuo codice HTML e li inseriremo in file php di ancoraggio.
La maggior parte dei siti web sono strutturati con un'intestazione, un piè di pagina e un po 'nel mezzo. Anchor CMS sfrutta questa comunanza consentendo di suddividere il tema in queste sezioni separate. Questo aiuta con l'organizzazione e, soprattutto, la coerenza.
Crea un nuovo file nella cartella dei temi chiamata "header.php". Apri questo file e il tuo file HTML per il prototipo. Copia il codice HTML dall'alto, in basso, appena prima dell'avvio della parte principale del contenuto. Nel mio caso è appena dopo il menu. Ho deciso questo perché nel mio design tutto dal menu in su è identico su ogni pagina, quindi voglio mantenere questo coerente per tutto il mio tema.
Quello che faremo ora è sostituire le informazioni statiche con gli helper php forniti in Anchor. Di seguito è riportato il codice che ho copiato dalla parte superiore del mio prototipo HTML, ma con alcune modifiche:
<?php echo page_title("Page can't be found"); ?> - <?php echo site_name(); ?> "title ="">
Si noti che l'HTML è ancora attivo, ma ho sostituito qualsiasi contenuto o informazioni rilevanti per il sito con frammenti di codice PHP. Questi pezzi di codice PHP sono chiamati funzioni, agiscono come segnaposto per i contenuti. Quando viene utilizzato il tema, queste funzioni verranno sostituite con il contenuto tratto dal sito Web. Ecco un elenco delle funzioni che ho usato per sostituire il contenuto:
Accentsconagua
Se rimani bloccato con ciò che queste funzioni fanno, o hai bisogno di qualcosa di diverso da quello che ho mostrato sopra, controlla i documenti di Anchor CMS.
Creare un menu nel tuo tema è piuttosto semplice una volta capito come funziona. Anchor genera il menu da tutte le pagine pubblicate che hai creato. Qualsiasi pagina impostata su bozza o archiviata non verrà visualizzata nel menu.
Per utilizzare queste pagine pubblicate, abbiamo bisogno di un modo per individuarle e scorrerle. Dai un'occhiata al mio esempio qui sotto:
Usando questo, possiamo permettere al tema di creare un menu per il sito web. La riga 1 è dove stiamo controllando "se ci sono voci di menu", sulla linea 3 chiediamo "mentre li fai fare questo con ogni voce di menu". Alla riga 5 smettiamo di lavorare con quella voce di menu, il che significa che avvierà la stessa procedura con l'elemento successivo. Una volta esaurito le voci del menu, passerà oltre la riga 5 e sulla riga 7, dove termina l'intero processo di creazione del menu.
Ogni volta che una voce di menu viene iterata, viene elaborata anche una serie di funzioni:
Confronta questi al tuo menu e sostituisci il contenuto e le informazioni nel tuo menu con le funzioni sopra. Prendi nota di come funziona il codice del menu, poiché la conoscenza di questo processo sarà utile per i post successivi nel tutorial.
Proprio come il tuo file header.php, ti consigliamo di prendere la sezione footer del tuo markup e incollarla in un nuovo file chiamato "footer.php". Nel mio tema ho una linea chiave e una linea di credito, queste appaiono su ogni pagina quindi inserirò l'HTML di questa parte nel mio file footer.php.
Cleat per Anchor CMS, creato da David Darnes
Il tuo footer potrebbe non avere la stessa complessità dell'intestazione, ma è un ottimo posto per accreditare cose come te per creare il tema.
Ora che hai imburrato il tuo pane, possiamo passare alla parte gustosa, ai ripieni.
Al fine di soddisfare tutti i tipi di contenuti con cui si occuperà il tuo tema, abbiamo bisogno di creare tre file diversi. Questi file si trovano tra l'intestazione e il piè di pagina e mostreranno i tuoi post, i tuoi singoli articoli e pagine.
Proprio come abbiamo fatto per la nostra intestazione e il piè di pagina, copia l'area principale del tuo markup in un nuovo file chiamato "posts.php". Il markup dovrebbe continuare da dove è stato lasciato il tuo header.php e il tuo file footer.php dovrebbe continuare. Il tuo file posts.php viene utilizzato per visualizzare tutti i post pubblicati da un sito web. In altre parole, la tua pagina del blog.
Se hai creato un prototipo HTML per la tua pagina blog come me, è ancora meglio. Ora li abbiamo divisi in file separati, abbiamo bisogno di ricollegarli, è qui che entra in gioco la funzione "theme_include". Nella parte superiore del tuo file posts.php aggiungi:
Questa funzione estrae il file header.php nella pagina e aggiungendolo nella parte superiore in cui verrà inserito. Lo stesso vale per il footer, aggiungi quanto segue alla parte inferiore di posts.php:
L'utilizzo di questo metodo significa che l'intestazione e il piè di pagina rimangono coerenti in tutto il tema e rende la gestione del codice un compito molto più semplice.
Ricordi cosa ho detto riguardo al tenere in mente il metodo del menu? Dai un'occhiata a questo e vedi se riesci a individuare eventuali somiglianze:
"title ="">
Ci sono alcune somiglianze, non con i nomi delle funzioni, ma nel modo in cui funziona. Sulla linea 2 affermiamo "se abbiamo dei post e mentre abbiamo quei post" esegui tutti i post. Una volta esaurito i post, il processo termina sulla linea 12. E proprio come il menu, anche i messaggi passano attraverso una serie di funzioni. Ecco le funzioni in modo più dettagliato:
Proprio come hai fatto con il menu, confronta queste funzioni con il tuo markup e sostituisci il contenuto e le informazioni con le funzioni corrispondenti.
Questo è fantastico; abbiamo la nostra intestazione, il piè di pagina e tutti i post che vengono inseriti.
Questa è probabilmente la prima volta che puoi controllare il tema per vedere se funziona. Accedi a Anchor e seleziona il tema dall'opzione a discesa all'interno di Estendi> Metadati del sito.
Se hai seguito correttamente queste istruzioni finora, dovresti riuscire a visualizzare la pagina dei tuoi post.
Se ci sono errori allora non preoccuparti, probabilmente è solo qualcosa di un po 'fuori luogo. Usalo come un'opportunità per rileggere e controllare se hai preso tutto.
Ora, alcuni di voi potrebbero dire "E se avessi troppi messaggi?". Beh, non preoccuparti, come lo coprirò ora, in un modo molto semplice. Dai un'occhiata a questo snippet di codice:
Noterai che l'impaginazione viene creata in modo simile, ma più semplice, alla creazione del menu. Sulla linea 1 chiediamo se l'importo supera il limite, quindi creiamo i pulsanti successivo e precedente. Sulla linea 6 stiamo finendo il processo.
Nota: La quantità di post per pagina può essere selezionata in Estendi> Metadati del sito.
Questo codice dovrà essere inserito nel tuo file posts.php, ma non in nessuno degli altri loop. Nel mio disegno appare poco prima del mio piè di pagina, quindi l'ho aggiunto alla fine del mio file posts.php.
Rispetto alla pagina dei post, gli articoli sono deliziosamente semplici. Ancora una volta avrai bisogno di una copia della sezione principale del markup del prototipo o una copia dell'HTML che desideri utilizzare per gli articoli. Proprio come il tuo posts.php, questo dovrebbe coincidere con il tuo codice di intestazione e piè di pagina. Nel mio esempio l'articolo ha un titolo, una data e il contenuto.
Crea un nuovo file chiamato "article.php" nella cartella del tema e incolla il codice all'interno. Dovrai anche aggiungere le funzioni di intestazione e piè di pagina, come hai fatto per il file posts.php. Per il mio tema, il codice per gli articoli è minimo:
Ancora una volta, a parte le funzioni di inclusione, tutto ciò che ho fatto è stato sostituito dalle informazioni statiche e dal contenuto con determinate funzioni fornite da Anchor. Ecco una carrellata di loro:
Come prima, passare attraverso il codice e sostituire il contenuto statico e le informazioni con le funzioni pertinenti. Dopo aver terminato il file article.php puoi visualizzare un articolo in azione. Questo ti dà la possibilità di verificare se tutto funziona correttamente.
Potresti non crederci, ma le pagine sono ancora più semplici degli articoli. Copia di nuovo il tuo markup, ma questa volta incollalo in un nuovo file chiamato "page.php" e aggiungi le funzioni di inclusione nella parte superiore e inferiore del file. Le pagine sui siti Web contengono normalmente contenuto statico e informazioni che non cambiano molto spesso. Per questo motivo, le pagine non hanno bisogno di una data. Dai un'occhiata al codice qui sotto:
Questo è molto simile a article.php, ma stiamo usando solo due diverse funzioni:
Dopo aver completato l'inserimento delle funzioni, vai e prova a visualizzare una pagina normale. Il contenuto di esempio incluso in Anchor (al momento) non ti dà una pagina normale, quindi dovrai crearne uno e aggiungere contenuti.
Se hai seguito correttamente il tutorial, dovresti lasciare un tema semplice ma solido per Anchor CMS. Se riscontri problemi, ricordati di controllare attentamente il tuo codice. È facile perdere un personaggio o posizionare le cose nell'ordine sbagliato.
Se le cose non stanno andando per il verso giusto, c'è una fiorente comunità di utenti di Anchor CMS che può aiutarti con il tuo tema. Basta andare al Forum di Anchor CMS e cercare qualcuno con un problema simile o iniziare una nuova discussione.
Gestisco anche temi di ancoraggio, dove è possibile scaricare temi, controllare i siti Web che sono stati creati con Anchor e inviare il proprio lavoro. Spero che questo tutorial ti abbia aiutato a creare un tema per Anchor CMS e sono davvero interessato a vedere con cosa vieni! Godere.
