Accentsconagua

WordPress Beginner to Master, Part 1

Codice
Share

In questa serie da sei a sei, da principiante a master, utilizzeremo le funzionalità avanzate di WordPress per creare il nostro portfolio e blog, completo di una pagina di opzioni, più stili e supporto per le nuove funzionalità di WordPress 2.7.

Nel primo giorno, gestiremo le sezioni preparazione e amministrazione creando la nostra pagina Opzioni.

Disponibile anche in questa serie:

  1. WordPress: Beginner to Master, Part 1
  2. WordPress: Beginner to Master, Part 2
  3. WordPress: Beginner to Master, Part 3
  4. WordPress: Beginner to Master, Part 4
  5. WordPress: Beginner to Master, Part 5
  6. WordPress: Beginner to Master, Part 6

Panoramica

Entro la fine di questa serie, avremo creato Innovazione - un modello WordPress di qualità premium perfetto per mostrare un portfolio e ospitare un blog; completa con le seguenti funzionalità:

  • Pagina Opzioni per la gestione della natura avanzata del modello, senza dover modificare manualmente alcun file.
  • 3 combinazioni di colori incorporate - con facile passaggio da una all'altra.
  • Modelli di pagina di home page e portfolio, con un footer e una barra laterale pronti per il widget.
  • Compatibilità con WordPress 2.5+.
  • Supporto per commenti threaded e pagati per WordPress 2.7.
  • Un widget personalizzato per visualizzare i tuoi post più recenti, con un'immagine di anteprima, sulla tua home page.

Il tema includerà tre stili incorporati, DeepBlue, RedSpace e SoftLight, ma sarà possibile aggiungere facilmente le proprie combinazioni di colori:




Il piano per ogni giorno:

  1. Pagina Opzioni di preparazione e amministrazione.
  2. Layout della home page. Creazione di un ciclo WordPress personalizzato. Utilizzando le aree del widget. footer.
  3. Ciclo di blog post. Sidebar. Layout del blog singolo.
  4. Pagina del portfolio Separare le pagine 'singole' in base alla categoria. Pagina del portfolio unico.
  5. Layout commenti. Archives. Ricerca.
  6. Face lift: lo schema di colori alternativi 'RedSpace'. Creazione di un widget personalizzato.

Quale esperienza precedente ho bisogno?
L'esperienza con xHTML e CSS è un must (dato che non approfondirò gran parte di questo codice in dettaglio).
Sarebbe anche molto utile avere una conoscenza di base di PHP (come l'uso di variabili, array, istruzioni condizionali e cicli 'foreach' e 'while'. Scopri l'eccellente serie screencast di "Immersione in PHP" di Jeffrey.

Avere una certa conoscenza di WordPress (anche solo sapendo come aggirare il Dashboard!) Migliorerebbe sicuramente la tua esperienza. Dai un'occhiata alla serie di screencast di Drew "WordPress for Designers".

Vai a una sezione

  • Iniziare
  •   - Preparazione dei file
  •   - Categorie e pagine
  •   - Fai di WordPress un CMS
  • Pagina delle opzioni
  •   - Categorie a discesa
  •   - Pagine a discesa
  •   - Elenco a discesa dei fogli di stile
  •   - La matrice di opzioni
  •   - Opzioni back-end
  • Recupero delle opzioni
  • Sommario

Iniziare

Oggi gestiremo il codice di back-end di base su cui si baserà il resto del tema. Per prima cosa sarà necessaria una nuova installazione di WordPress, preferibilmente l'ultima versione (2.7 al momento della scrittura); tuttavia il modello funzionerà con qualsiasi versione sopra 2.5. Dentro il / Wp-content / themes / cartella, creare nuove cartelle e file con la seguente struttura:

  • /innovazione/
    • / stili /
      • /profondo blu/
      • deepblue.css
    • functions.php
    • index.php
    • page.php
    • Pagina-home.php
    • Pagina-portfolio.php
    • style.css
    • var.php

functions.php conterrà il codice per la nostra pagina di opzioni e widget tra le altre cose.
index.php è usato per mostrare gli ultimi messaggi.
page.php sarà il modello utilizzato per la maggior parte delle singole pagine.
Pagina-home.php sarà il nostro modello di prima pagina.
Pagina-portfolio.php sarà la nostra pagina portfolio.
var.php sarà usato per recuperare le nostre opzioni dal database.
style.css conterrà la maggior parte del nostro stile.
/styles/deepblue.css conterrà lo stile per la nostra prima combinazione di colori.

Questi non sono tutti i file di cui avremo bisogno. Creeremo gli altri mentre procediamo in modo che tu possa capire a cosa servano.

Preparazione dei file

Il due pagina- i file sono modelli di pagina personalizzati, in modo che possiamo disporre il contenuto in modo diverso nelle pagine assegnate a questi modelli. Per WordPress riconoscerli, dentro Pagina-home.php Digita il seguente:

Allo stesso modo, dentro Pagina-portfolio.php accedere:

Il nome del modello è il nome utilizzato da WordPress quando si seleziona un modello di pagina. get_header (); è una funzione di WordPress per caricare il file header.php file (che creeremo in seguito).

E aggiungere il seguente a page.php. Non è necessario assegnare a questo file il nome di un modello, poiché è il modello predefinito.

Abbiamo anche bisogno di assegnare alcuni dettagli come nome, descrizione e autore per il nostro tema. Questo viene fatto in un blocco di commenti nella parte superiore di style.css:

 / * Nome del tema: URI del tema di innovazione: http://www.danharper.me/innovation Descrizione: Un tema avanzato di portfolio e blog realizzato da Dan Harper come parte di una serie di tutorial per NETTUTS.com Versione: 1.0 Autore: Dan Harper Autore URI: http://www.danharper.me * /

Categorie e pagine

Per risparmiare tempo dopo, creeremo le categorie e le pagine pertinenti di cui avremo bisogno ora. Nella dashboard di WordPress, attiva il tema (userà il nome che abbiamo definito precedentemente nel CSS) - non preoccuparti che il tema sia vuoto, ci stiamo passando in seguito.


Ora crea tre nuovi pagine. Uno chiamato "Home" e l'altro "Portfolio". Seleziona il modello di pagina per ciascuno di essi come "Homepage" e "Portafoglio" rispettivamente. Assegna un nome alla pagina finale "Blog" e utilizza il modello di pagina predefinito.


Crea anche una nuova categoria chiamata 'Portfolio'. Questo è ciò che useremo per pubblicare gli articoli del portfolio in.


Fai di WordPress un CMS

Dalla tua Dashboard, vai su Impostazioni -> Lettura. Per "Visualizzazione Pagina Frontale" imposta la prima pagina sulla pagina "Home" che hai creato e la pagina Post su "Blog":


Pagina delle opzioni

Questo probabilmente sembrerà un po 'indietro, ma creeremo una pagina delle opzioni per il nostro tema prima di fare qualsiasi lavoro sul front-end vero e proprio. Questo perché l'intero tema dipende dalle opzioni sulla pagina e non avrebbe senso prima fare quelle altre parti.

Per coloro che non lo sanno, la pagina delle opzioni è una pagina in più nella Dashboard di WordPress che stiamo aggiungendo che contiene un numero di opzioni per il nostro tema. Questi sono:

  • Schema colore
  • Portfolio Category
  • Pagina del blog
  • Codice di Google Analytics

Dentro functions.php iniziare con il seguente. Il $ THEMENAME variabile definisce il nome del tema che verrà utilizzato per il titolo della pagina in Dashboard (Innovazione). E $ shortname è usato per rendere uniche le nostre opzioni - se lo cambi, dovrai cambiare diverse istanze in tutto il codice (quindi non cambiarlo;)).

  
Categorie Drop-Down
 
Successivamente creeremo il codice che ottiene tutte le categorie da utilizzare nell'opzione a discesa "Portfolio":
 
 / * Ottieni categorie in un elenco a discesa * / $ categories_list = get_categories ('hide_empty = 0 & orderby = name'); $ getcat = array (); foreach ($ categories_list as $ acategory) $ getcat [$ acategory-> cat_ID] = $ acategory-> cat_name;  $ category_dropdown = array_unshift ($ getcat, "Scegli una categoria:");
 
Questo codice utilizza WordPress ' get_categories (); funzione per recuperare un elenco di tutti i nomi delle categorie e utilizzando a per ciascuno(); loop per aggiungere ogni nome e ID in un array chiamato $ getcat per uso più avanti nel codice. Finalmente, usiamo array_unshift per inserire "Scegli una categoria:" nella parte superiore della matrice.
 
Pagine a discesa
 
La prossima è un'altra opzione a discesa simile che seleziona il nome di una pagina. Il codice per questo è molto simile al precedente:
 
 / * Ottieni pagine in un elenco a discesa * / $ pages_list = get_pages (); $ getpag = array (); foreach ($ pages_list as $ apage) $ getpag [$ apage-> ID] = $ apage-> post_title;  $ page_dropdown = array_unshift ($ getpag, "Seleziona una pagina:");
 
Come ottenere le categorie, stiamo usando WordPress ' get_pages (); funzione per ottenere un elenco di tutti i nomi delle pagine e il risultato viene inserito nel $ getpag array da utilizzare in seguito.
 
Elenco a discesa dei fogli di stile
 
C'è anche un'opzione a discesa per selezionare un foglio di stile. Questo codice è un po 'più complicato:
 
 / * Trova fogli di stile in un elenco a discesa * / $ styles = array (); if (is_dir (TEMPLATEPATH. "/ styles /")) if ($ open_dirs = opendir (TEMPLATEPATH. "/ styles /")) while (($ style = readdir ($ open_dirs))! == false) if (stristr ($ style, ".css")! == false) $ styles [] = $ style;  $ style_dropdown = array_unshift ($ styles, "Scegli una combinazione di colori:");
 
Il codice sopra utilizza il PHP opendir (); funzione, seguita da readdir (); per aprire il nostro / stili / cartella e ottenere un elenco di tutti i file in là.
 
Quindi usiamo stristr (); per limitare la lista al solo .css file (per impedire che le cartelle vengano emesse) e i risultati vengono passati al $ stili schieramento.
 
La matrice di opzioni
 
Tutte le nostre opzioni saranno archiviate nei propri array in modo da poterli elaborare in serie più avanti nel codice:
 
 / * Le opzioni * / $ options = array (array ("nome" => "Generale", "tipo" => "titolo"), array ("tipo" => "aperto"), array ("nome" = > "Color Scheme", "desc" => "Quale combinazione di colori vorresti?", "Id" => $ shortname. "_ Colourscheme", "type" => "select", "std" => "Scegli un color scheme: "," options "=> $ styles), array (" name "=>" Portfolio Category "," desc "=>" Seleziona gli articoli del portfolio della categoria che vengono pubblicati in. "," id "=> $ shortname "_ portfolio_cat", "type" => "select", "std" => "Scegli una categoria:", "options" => $ getcat), array ("name" => "Blog page", "desc "=>" Seleziona la pagina utilizzata come pagina del blog (post). "," Id "=> $ shortname." _ Blogpage "," type "=>" select "," std "=>" Seleziona una pagina: " , "options" => $ getpag), array ("name" => "Google Analytics", "desc" => "Inserisci qui il tuo codice di Google Analytics (o altro).", "id" => $ shortname. " _analytics_code "," type "=>" textarea "), array (" type "=>" close "));
 
Ogni array è un'opzione e contiene nome, disc, id e genere parametri. L'ID è molto importante ed è quello che useremo per fare riferimento all'opzione più avanti nel codice. Ad esempio, per ottenere la Categoria Portfolio, verificheremo il $ ts_portfolio_cat (ts è il nome breve a cui abbiamo fatto riferimento nella parte superiore del documento).
 
Opzioni back-end
 
Il codice seguente mostra la nostra pagina delle opzioni in Dashboard (è in "Design" in WordPress 2.6 o in basso) e salva le opzioni nel database.
  
 
 function mytheme_add_admin () global $ themename, $ shortname, $ options; if ($ _GET ['page'] == basename (__ FILE__)) if ('save' == $ _REQUEST ['action']) foreach ($ opzioni come $ valore) update_option ($ value ['id' ], $ _REQUEST [$ value ['id']]);  foreach ($ options as $ value) if (isset ($ _REQUEST [$ value ['id']])) update_option ($ value ['id'], $ _REQUEST [$ value ['id']])) ;  else delete_option ($ value ['id']);  header ("Location: themes.php? page = functions.php & saved = true"); morire;  else if ('reset' == $ _REQUEST ['action']) foreach ($ options as $ value) delete_option ($ value ['id']);  header ("Location: themes.php? page = functions.php & reset = true"); morire;  if (! function_exists ('wp_list_comments')) add_theme_page ($ themename. "Opzioni", $ themename, 'edit_themes', basename (__ FILE__), 'mytheme_admin');  else add_menu_page ($ themename. "Opzioni", $ themename, "edit_themes", basename (__ FILE__), "mytheme_admin");  function mytheme_admin () global $ themename, $ shortname, $ options; if ($ _REQUEST ['saved']) echo '
'$ THEMENAME.' impostazioni salvate.
'; if ($ _REQUEST ['reset']) echo '
'$ THEMENAME.' impostazioni ripristinate.
'; ?> 
 
 
 impostazioni
 
 
Non stiamo andando a passare attraverso il codice in quanto richiederebbe troppo tempo per questo tutorial. Basta copiarlo e incollarlo e pensarlo come un codice magico dalle divinità di WordPress che fa funzionare il tuo tema.
 
Il prossimo codice controlla ciascuna delle nostre opzioni per loro genere attributo e li modifica in una tabella. Quindi opzioni con "tipo" => "seleziona" sarebbe uscita come una casella a discesa, o "type" => "textarea" sarebbe uscita come una textarea.
 
  
 

 
 
  
 		 
 
   "/>                                />         
   
  
 
   
 
  
Infine, alla fine del file, inserisci:
 
 require (TEMPLATEPATH. "/var.php");
 
Noi richiedere() nostro var.php file che conterrà il codice per recuperare le nostre opzioni.
Nota che dobbiamo usare TEMPLATEPATH nel richiedere() o includere() tag in modo che stia navigando nella nostra directory dei temi, e non nella directory di WordPress di root.
 
Recupero di queste opzioni
 
Ora quelle opzioni sono nella Dashboard, dobbiamo essere in grado di usarle nel nostro tema. Inserire il seguente codice in var.php:
 
 get_var ("SELECT term_id FROM $ wpdb-> terms". "WHERE name =" $ ts_portfolio_cat ""); / * Ottieni ID pagina blog dal nome * / $ ts_blogpage = $ wpdb-> get_var ("SELECT 'ID' FROM $ wpdb-> posts". "WHERE post_title =" $ ts_blogpage "AND post_type =" pagina "LIMIT 1" ); ?>
 
La prima sezione del codice recupera tutte le nostre opzioni dal database. Tuttavia abbiamo un problema: le nostre opzioni di categoria e pagina rimandano il nome della categoria o della pagina - ma preferiremmo l'ID in quanto è più facile da usare nelle funzioni di WordPress.
 
Le prossime due parti del codice fanno esattamente questo. Eseguiamo una query SQL per ottenere l'ID appropriato. Queste opzioni sono ora memorizzate nel $ ts_portfolio_cat e $ ts_blogpage variabili.
 
Ora abbiamo finito il lato amministrativo, accedi al tuo Dashboard e imposti le impostazioni appropriate per ciascuna opzione. Scegliere deepblue.css per lo schema dei colori per ora.
  
 
Sommario
 
Con questo si conclude il primo giorno di WordPress Week. Domani creeremo il layout della nostra home page, realizzando un personalizzato 'WordPress Loop' e aree widget di handeling.
 
Parte 2 - Cicli e widget.





	
	
			
	   
	







Codice
×