WordPress Beginner to Master, Part 5

In questa serie da sei a principianti 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. Oggi tratteremo i commenti, la ricerca e l'archivio.

Questa parte riguarda principalmente la riparazione delle parti extra che non abbiamo ancora avuto. Nella prima sezione, creiamo il modello Commenti, con il supporto per le nuove funzionalità in WP 2.7, ma anche per le versioni precedenti.

Nella seconda sezione, creiamo i modelli di archivio e di ricerca.

Disponibile anche in questa serie:

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

Vai a una sezione

Commenti
- Commenti per WP 2.7+
- Commenti di stile
- Commenti per WP 2.6-
L'archivio
- Modulo di ricerca
Pagina dei risultati di ricerca
Sommario

Commenti

WordPress 2.7 ha introdotto diverse nuove funzionalità per la sezione commenti, tra cui commenti a thread, commenti a pagine, stili alternati e codice semplificato. Tuttavia queste funzioni non funzioneranno correttamente nelle versioni precedenti di WordPress. Per combatterlo, utilizzeremo un filtro WordPress in modo che le versioni precedenti usino un file di commenti e le versioni più recenti un altro.

Commenti filettati in WP 2.7

Aggiungi il seguente codice in fondo a functions.php:

 // Se si utilizza 2.6 o versioni precedenti, utilizzare i commenti legacy visualizza add_filter ('comments_template', 'legacy_comments'); function legacy_comments ($ file) if (! function_exists ('wp_list_comments')) $ file = TEMPLATEPATH. '/Comments.legacy.php'; return $ file;

Il wp_list_comments () la funzione è una nuova aggiunta a WordPress 2.7; quindi stiamo controllando se esiste usando il function_exists () Funzione PHP. In caso contrario, viene aggiunto un filtro WordPress per reindirizzare a comments.legacy.php file quando viene richiesto il modello di commenti.
Tutte le versioni più recenti di WordPress continueranno quindi a essere utilizzate comments.php (dal momento che contengono il wp_list_comments () funzione.)

Commenti per WP 2.7+

Crea un nuovo file chiamato comments.php. Dentro, inizia con:

Se al post corrente sono stati assegnati commenti, il numero di commenti viene visualizzato in un tag del titolo utilizzando il comments_number () funzione. I commenti vengono quindi visualizzati in un elenco ordinato utilizzando il nuovo wp_list_comments () funzione.
Ogni commento verrà visualizzato utilizzando un modello incorporato che è facile da modificare in vari modi, tuttavia se hai bisogno di un maggiore controllo sul modo in cui ogni commento appare, fai riferimento a questa pagina sul codice WordPress.

Anche i tag di navigazione dei commenti sono nuovi a 2.7 e consentono l'impaginazione tra un determinato numero di commenti (proprio come nei post del blog).

Nel prossimo codice, viene visualizzato un messaggio se i commenti sono chiusi per il post:

 comment_status): // Se i commenti sono aperti, ma non ci sono commenti. altro: echo "I commenti sono chiusi in questo post.
"; endif; endif;?>

Il prossimo compito è visualizzare il modulo di commento effettivo:

 comment_status):?>  
   
  Devi essere /wp-login.php?redirect_to="> registrato per pubblicare un commento.

Se i commenti sono impostati per l'apertura, viene visualizzato il titolo "Lascia un commento" utilizzando il nuovo comment_form_title () funzione. Se l'utente sta rispondendo a un commento, il %S in "Lascia una risposta a% s" viene sostituito con il nome dell'autore del commento a cui stanno rispondendo.
Viene visualizzato anche un link di annullamento della risposta se si utilizza una risposta cancel_comment_reply_link ().
Infine, se solo gli utenti loggati possono commentare (e l'utente non ha effettuato l'accesso), viene visualizzato un messaggio di errore che punta alla pagina di accesso.

Se la registrazione non è richiesta (o se l'utente ha effettuato l'accesso):

   Registrato come /wp-admin/profile.php "> . "title =" Esci da questo account "> Esci»
  Nome: 
 E-mail: 
 Sito web:

Il modulo dei commenti è aperto. Se l'utente ha effettuato il login, un messaggio "Connesso come ... Esci?" viene visualizzato il messaggio - altrimenti vengono visualizzati i campi "Nome", "Email" e "Sito web".

Infine, vengono visualizzati la textarea "Messaggio" ei pulsanti Invia, il modulo chiuso e il Se dichiarazioni chiuse:

 Commento: 
     
 ID); ?>

comment_id_fields () restituisce l'ID del post corrente in un campo nascosto. In WP 2.6- dovevi farlo manualmente, ma ora è necessario usare questa funzione.

Nella Dashboard, vai su Impostazioni -> Discussione e seleziona le opzioni "Abilita commenti con thread" e "Interrompi commenti in pagine". Quindi visualizza l'anteprima del modello di commento andando su qualsiasi post del blog:

Commenti di stile

Aggiungere a style.css:

 / * Commenti * / h4 # commenti chiaro: entrambi; margine: 45px 0 5px 0;  .commentlist li font-size: inherit;  .commentlist li .avatar float: right;  .commentlist cite font-weight: bold; stile font: normale; font-size: 0.95em;  .commentlist p font-size: 0.8em; font-weight: normal; line-height: 1.5em; margine: 10px 5px 10px 0; Trasformazione del testo: nessuno;  .commentmetadata display: block; font-size: 0.8em; font-weight: normal; line-height: 1.1em; margine: 0;  .commentlist .reply font-size: 0.8em; font-weight: bold;  .commentlist margin: 0 0 20px 0;  .commentlist li margin: 15px 0 10px; imbottitura: 10px; stile elenco: nessuno;  .commentlist li ul li margin-right: -5px; margin-left: 10px;  .comms-navigation, .navigation clear: both; blocco di visualizzazione; margin-bottom: 20px; overflow: nascosto;  .children padding: 0;  .nocomments text-align: center; margine: 0; padding: 0;  / * Modulo per i commenti * / #respond h4 clear: both; margine: 45px 0 10px 0;  forma p padding-bottom: 10px; margine: 5px 0;  forma p label display: inline-block; margin-right: 10px; allineamento del testo: giusto; larghezza: 5em;  form p label [for = "comment"] vertical-align: top;  input, textarea padding: 3px;  textarea font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; overflow: auto;  input # submit padding: 5px 3px;

E il seguente in deepblue.css:

 / * Elenco commenti * / .commentlist li .avatar border: 2px solid # f2e9ea;  .commentlist cite a: link, .commentlist cite a: visited color: # 333;  .comlistlist .commentmetadata a: link: first-child, .commentlist .commentmetadata a: visited: first-child color: # 333;  .thread-alt background-color: # F6F6EC;  .thread-even background-color: # F9F9F3;  .depth-1 border: 1px solid # E8E3C8;  .even, .alt border-left: 1px solid # E8E3C8;  input, textarea background-color: # F6F6EC; border: 1px solid # E8E3C8;  input: focus, textarea: focus border: 1px solid # dad4b6;

Si noti che 2.7 aggiunge automaticamente nomi di classi speciali come alt, anche, bambini, bypostauthor, thread-alt, filo-even ecc. ove necessario per consentire di stilare commenti ogni altro un colore diverso per aumentare la leggibilità nei thread lunghi. Vedi il codice WordPress per ulteriori informazioni su questo.

Dentro header.php, direttamente prima inserire:

Carica un file Javascript incorporato che può "spostare" il modulo di commento quando fai clic su un link Rispondi, quindi la pagina non deve essere ricaricata:

Fai clic su "Rispondi" e il modulo si sposta nella posizione corrente:

Commenti per WP 2.6

Non ho intenzione di spiegare questo codice, perché è obsoleto e viene incluso solo per le poche persone che non utilizzano WP 2.7. Ma ho aggiunto in a $ contatore i commenti così alternati possono essere disegnati in modo diverso, così come sono in 2.7.

Crea un nuovo file chiamato comments.legacy.php e copiare nel seguente codice. Se si utilizza WP 2.6, il layout sarà esattamente lo stesso come in 2.7 se i commenti con thread sono disabilitati.

 post_password)) // se c'è una password if ($ _COOKIE ['wp-postpass_'. COOKIEHASH]! = $ post-> post_password) // e non corrisponde al cookie?> Questo post è protetto da password. Immettere la password per visualizzare i commenti.
    
        dice: 
  #commento-">  
 comment_approved == '0'): echo 'Il tuo commento è in attesa di approvazione.'; finisci se; ?> 
 
  
 comment_status):?>    I commenti sono chiusi.
  comment_status):?> lascia un commento
  Devi essere /wp-login.php?redirect_to="> registrato per pubblicare un commento.
    Registrato come /wp-admin/profile.php ">. /wp-login.php?action=logout "title =" Esci da questo account "> Disconnetti»
  Nome: 
 E-mail: 
 Sito web: 
  Commento: 
     
 ID); ?>

Scarica i file sorgente per questo post se desideri che questo file sia spaziato e formattato in modo appropriato per facilitare la modifica.

I commenti vengono visualizzati in WP 2.6 o successivi

Nota: Se vuoi saperne di più sul vecchio ciclo di commenti, consulta "Svelare i segreti di WordPress 'File Commenti.php" di Gilles Maes.

L'archivio

Il archive.php template è usato per mostrare qualsiasi tipo di archivio per il blog - es. categorie, mesi, tag ecc.

Crea un nuovo file chiamato archive.php e inizia con il seguente:

 '; ?>

Come puoi vedere, se l'archivio è per la categoria Portfolio, la pagina caricherà il file Pagina-portfolio.php modello. Uscita; assicura che non venga eseguito più codice dopo quella linea se viene utilizzato il modello di portfolio.
Il prossimo:

  Archivio per l'''Categoria
  Posts tagged '’
  Archivio per 
  Archivio per 
  Archivio per 
  Archivio dell'autore
  Archivi del blog

Ogni sezione mostrerà un titolo leggermente diverso a seconda di cosa è l'archivio. Ad esempio, se si tratta di un archivio per la categoria "Generale", il titolo direbbe "Archivio per la categoria" Generale "; o un archivio mensile per gennaio 2009 sarebbe "Archive for January, 2008".
Sull'ultima riga, il ciclo è aperto.

Il prossimo:

"title =" Continua a leggere """>

#commenti ">

Il codice sopra riportato è il codice normale per un post del blog (come abbiamo usato più volte nella pagina del blog, nelle singole pagine, ecc.) Nell'ultima riga, il ciclo è chiuso.
Se l'archivio non esiste:

 # L'archivio non esiste: else: get_header (); ?>  Non trovato

Viene visualizzata una semplice intestazione "Not Found" e il file searchform.php il file è incluso (che verrà creato successivamente). Probabilmente dovresti includere più informazioni su questa pagina per renderlo più user-friendly.

Infine, includi i collegamenti di paginazione, la barra laterale e il piè di pagina:

Ora prova la tua pagina di archivio facendo clic su uno dei link in un widget Category / Archives / Tags. Ma se vai in un archivio che non esiste (ad esempio un ID di categoria che non esiste), sarai accolto con la seguente pagina di errore perché il searchform.php il file non esiste.

Modulo di ricerca

Questo file non potrebbe davvero essere più semplice - solo un modulo di ricerca. Aggiungi quanto segue in un nuovo file chiamato searchform.php:

Prova di nuovo a visitare un archivio inesistente e verrà visualizzato il modulo di ricerca. Utilizza lo stesso stile utilizzato nel modulo di ricerca della barra laterale, quindi non è richiesto uno stile aggiuntivo.

Pagina dei risultati di ricerca

Il file modello finale richiesto è search.php che mostra i risultati di una ricerca. Per la maggior parte, si tratta di un ciclo normale, tuttavia poiché gli elementi del portfolio possono essere visualizzati nei risultati, devono essere visualizzati in modo diverso dai post del blog.

Crea il search.php file e iniziare con quanto segue:

    risultati di ricerca

Il ciclo è aperto e quindi è un Se dichiarazione per visualizzare un elemento del portfolio:

 ID, 'anteprima', vero); $ date = get_post_meta ($ post-> ID, 'date', true); $ client = get_post_meta ($ post-> ID, 'client', vero); $ link = get_post_meta ($ post-> ID, 'link', vero); ?>   ">    "> ($ Data)";?>

Se il post recuperato proviene dalla categoria portfolio, il post verrà visualizzato utilizzando il layout sopra - per apparire uguale agli articoli del portfolio. Altrimenti…

    "title =" Continua a leggere """>  
  
 #commenti ">

Viene utilizzato il normale layout del post del blog.
Infine, viene visualizzato un messaggio di errore con un modulo di ricerca se non vengono restituiti risultati, vengono utilizzati i tag di impaginazione e inclusi i file della barra laterale e del piè di pagina:

  Nessun post trovato. Prova una ricerca diversa?

Basta aggiungere il seguente CSS in style.css e abbiamo finito qui:

 .ricerca di lavoro chiaro: entrambi; margine: 0 0 45 px 0; riempimento: 0 0 40px 0; larghezza: 690 px;

Sommario

Domani è l'ultimo giorno della serie. (Parte 6) Stiriamo alcuni bug con il diavolo (IE6) e finiamo la serie creando il RedSpace combinazione di colori per l'innovazione!!

Codice