Accentsconagua

WordPress Beginner to Master, Part 3

Codice
Share

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 modificheremo i post del nostro blog e lo stile "post singoli" in base alla categoria.

Oggi focalizzeremo il nostro focus sulla parte del blog del tema. Codificheremo la vista principale del "blog", creando la barra laterale e terminando con la visualizzazione di un singolo post.

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

Vai a una sezione

  • Il blog
  •   - Il ciclo di WordPress
  •   - Messa in piega
  • Sidebar
  •   - Registrati Sidebar
  •   - Mostra la barra laterale
  •   - Disegnare la barra laterale
  •   - Colore barra laterale
  • Display a singolo post
  •   - Controlla la categoria dei messaggi
  •   - Layout post blog singolo
  • Sommario

Il blog

Il codice per la vista principale del blog siederà all'interno index.php. Questa è la pagina che visualizzerà tutti i post del nostro blog, con collegamenti alla loro vista principale / singola in cui di solito continuerai il post e consentirai agli utenti di commentare.

Di seguito è riportata un'anteprima di come sarà il layout per tutte le sezioni del blog, con la barra laterale a destra:


Iniziamo. Nel index.php inserisci il seguente codice Iniziamo includendo la nostra pagina di intestazione e quindi creando il nostro div # mainarea che, come puoi vedere nella prima immagine, manterrà i post del blog (con la barra laterale a destra).

Aggiungi il seguente a style.css impostare #mainarea con gli stili corretti:

 #mainarea float: left; padding-right: 30px; larghezza: 690 px;

Il ciclo di WordPress

Successivamente, inizieremo un ciclo WordPress con alcuni criteri personalizzati:

La prima riga ci consente di utilizzare la paginazione nel ciclo di WordPress, ad es. dicendo al loop di includere solo x post, quindi mostrare un link 'Post più recenti' al lotto successivo. Il codice controlla se la pagina corrente richiede una certa pagina di impaginazione, altrimenti mostra la prima.

Dentro query_posts () specifichiamo per usare la paginazione; e anche dire al ciclo di escludere i post dalla nostra categoria Portfolio (notare il simbolo meno).

Il prossimo è il codice all'interno del ciclo. Come menzionato nel Giorno 2, qualsiasi cosa nel ciclo verrà eseguita per ogni post disponibile.


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

Iniziamo includendo ogni post all'interno del proprio div. Noi usiamo the_ID () per dare a ogni div un ID univoco (nel caso in cui tu abbia mai bisogno di stilare un post specifico in modo diverso); e abbiamo anche dato a ciascuno una classe di post sul blog perché sia ​​in stile.

Successivamente il titolo del post viene visualizzato utilizzando il titolo() e the_permalink () è usato per includere il link al post completo.

Dentro ul.meta sono alcune informazioni extra per il post. the_category () è usato per produrre i nomi delle categorie a cui è assegnato il post (separato da una virgola).

Quindi colleghiamo ai commenti per il post, usando ancora the_permalink (), e comments_number () è usato per produrre il numero di commenti per il post.

il tempo() fornisce la data di pubblicazione del post. F jS è un codice di data PHP per 'Month Name' (J); "Data" (j) e il suffisso della data (ad esempio "st", "nd", "rd" o "th") (S).
Ad esempio, questo produrrebbe il 31 gennaio. Potresti anche aggiungere Y alla fine per produrre l'anno. Per maggiori informazioni, consultare il manuale PHP: date ().

Infine, il contenuto effettivo del corpo per il post viene generato utilizzando il contenuto(). Se richiesto, il link "Leggi altro" verrà automaticamente aggiunto al post.

Avanti, chiudiamo il Loop con ENDWHILE, e includi i pulsanti Paginazione per scorrere i post vecchi / nuovi (che è il nostro $ paging il codice è utile) usando il next_posts_link () e previous_posts_link () funzioni:

Abbiamo anche incluso il nostro sidebar.php e footer.php File.

Messa in piega

Visualizza l'anteprima della pagina Blog nel tuo browser. Ho già aggiunto un post in più con alcuni dati di esempio. L'immagine sotto evidenzia cosa dobbiamo cambiare:


Metti in gioco quanto segue style.css. Aggiungiamo un po 'di separazione tra ogni post del blog (.post sul blog), e impostare il ul.meta elementi da visualizzare in linea. Il .allineare a sinistra, .AlignRight e .allinea al centro anche le classi sono impostate - queste classi sono usate da WordPress per allineare le immagini, e sono anche usate sulla nostra impaginazione.

 .blogpost clear: both; margin-bottom: 45px; imbottitura-fondo: 40px; overflow: nascosto;  .singleblog overflow: hidden; ul.meta margin: 0 0 25px 0;  ul.meta li display: inline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; line-height: 1.3em; margin-right: 10px; padding-left: 12px; text-transform: maiuscolo;  ul.meta li: first-child border: none; padding-left: 0;  .alignleft float: left; margine: 0 10px 8px 0;  .alignright float: right; margine: 0 0 8px 10px;  .aligncenter margin: 10px auto;

Nel deepblue.css aggiungi un sottile bordo chiaro tra ogni post del blog, un bordo per separare ciascun elemento della lista dei meta e imposta H2 per # 333:

 .blogpost, .worksearch border-bottom: 1px solid # e8e3c8;  h2 a: link, h2 a: visited color: # 333;  ul.meta li border-left: 1px solid # e3e8ed;

Sidebar

La barra laterale avrà il seguente aspetto e verrà utilizzata in tutto il sito, ad eccezione delle pagine frontali e di portfolio:


Registrati Sidebar

In primo luogo, dobbiamo registrare l'area del widget della barra laterale - questo è fatto nello stesso modo in cui l'area sulla home page. Dentro functions.php e il seguente codice all'interno delle parentesi per if (function_exists ('register_sidebar')) dopo l'array della homepage:

 register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
  • ',' after_widget '=>'
    • ',' before_title '=>'
    ',' after_title '=>'
    ',));

    In altre parole, dovrebbe apparire come segue:

     if (function_exists ('register_sidebar')) register_sidebar (array ('name' => 'Homepage Bottom', 'before_widget' => '
    ',' after_widget '=>'
    ',' before_title '=>'
    ',' after_title '=>'
    ',)); register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
  • ',' after_widget '=>'
    • ',' before_title '=>'
    ',' after_title '=>'
    ',));

    Mostra la barra laterale

    Successivamente, visualizza la barra laterale aggiungendo quanto segue a sidebar.php:

    E assicurati che la barra laterale si attacchi alla destra della pagina fissando la larghezza in style.css:

     #sidebar float: left; larghezza: 220 px;  #sidebar ul margin: 0;  #sidebar ul li list-style: none; margin-left: 0; margin-bottom: 25px;

    Dalla dashboard, aggiungi alcuni widget all'opzione "Barra laterale" e visualizzali in anteprima:



    Disegnare la barra laterale

    Aggiungi i seguenti stili in style.css per creare una struttura per ciascun widget della barra laterale:

     li h3 font-size: 1.3em; line-height: 1.4em; margine: 5px 0 5px 0;  / * Modulo di ricerca della sidebar * / #sidebar ul li # search margin-bottom: 25px; . hidden display: none; #sidebar ul li # forma di ricerca #s padding: 7px 29px 7px 7px; larghezza: 182 px;  #sidebar ul li # modulo di ricerca #searchsubmit display: none;  / * Liste della barra laterale (ad esempio Meta, Archivi, Categorie) * / #sidebar ul li ul padding: 15px 5px 15px 8px;  #sidebar ul li ul li list-style-position: outside; margine: 0 0 5px 20px;

    Colore barra laterale

    Salva le due immagini di seguito come bullet.gif e search.png nel tuo / Stili / deepblue / cartella (le immagini qui sotto sono state ridimensionate, ma saranno corrette quando salvate):

    Aggiungi il seguente a deepblue.css. Usiamo le due immagini sui loro rispettivi elementi e impostiamo colori di sfondo e bordo per gli elementi del widget.

     #sidebar ul li # forma di ricerca #s background: url ("deepblue / search.png") no-repeat right # f6f6ec; border: 1px solid # E8E3C8;  #sidebar ul li # forma di ricerca #s: focus border: 1px solid # dad4b6;  #sidebar ul li ul background-color: # f6f6ec; border: 1px solid # E8E3C8;  #sidebar ul li ul li list-style: url ("deepblue / bullet.gif");  #sidebar ul li a: link, #sidebar ul li a: visited color: # 333;

    Display a singolo post

    WordPress usa il single.php file per la visualizzazione di un singolo post - es. l'intero post, in cui i visitatori possono postare commenti ecc. Tuttavia, dal momento che ci sono due diversi tipi di post che stiamo visualizzando: Portfolio items e Blog post, entrambi richiedono il proprio layout nella singola pagina del post, quindi è necessario distinguere tra loro.

    Controlla la categoria del post

    Creare un single.php file e aggiungi il seguente codice:

     inviare; if (in_category ("$ ts_portfolio_cat")) / * È un elemento del portfolio * / require ('single-portfolio.php');  else / * È un post sul blog * / require ('single-blog.php'); ?>

    Usiamo WordPress ' in_category () funzione per verificare se il post da visualizzare è assegnato alla categoria Portfolio. Se lo è, richiediamo il single-portfolio.php file.
    Se non è nella categoria Portfolio, allora single-blog.php viene usato.

    Oggi creeremo solo il single-blog.php file. La pagina del portfolio singolo verrà creata nella parte successiva della serie.

    Layout post blog singolo

      
      
     
     
       
      •  
    • #commenti "> 
      •  
      •

    Noterai che è molto simile al codice che abbiamo usato index.php, ma con alcune eccezioni:

    1. Stiamo usando if (have_posts ()) invece di query_posts (). Questo è il ciclo WordPress predefinito.
    2. Abbiamo incluso l'area dei commenti usando comments_template ().

    Sul tuo blog, fai clic su un post e dovresti essere indirizzato alla singola pagina del post. Potresti anche vedere l'area dei commenti predefinita che è stata inclusa automaticamente poiché non abbiamo ancora creato i nostri.
    Dovremo creare un modello di commenti personalizzato nella quinta parte.

    Sommario

    Torna a controllare domani quando creeremo le nostre pagine Portfolio. (Parte 4)

    Codice
    ×