Share
WordPress è fantastico. Ancora più impressionante è il fatto che può essere personalizzato per alimentare qualsiasi tipo di sito che ti piace! Qui, impareremo come creare una sezione di presentazione e "ultimi post" - facilmente un "must" per tutti i buoni temi di notizie / riviste. Continueremo anche a utilizzare i "campi personalizzati" al massimo potenziale.
Questo tutorial illustra il processo di creazione della pagina indice di un tema di rivista / notizia per WordPress. Le caratteristiche principali di questa pagina saranno:
Dalla directory di installazione di WordPress, sfogliare "wp-content / themes" e creare una nuova cartella. Chiamalo come desideri (sto usando 'WordPress Times'). Quindi, crea 5 nuovi file:
Questo è il layout di base per cui andremo:
Quindi un documento 940px, con due sezioni:
Contenuto a 600px e barra laterale a 300px - lasciando un margine di 40 pixel tra i due.
Apri i tuoi header.php file e inserire quanto segue:
><?php bloginfo('name'); ?> <?php wp_title('-'); ?> Seguendo questo, per prima cosa definiamo il DOCType come XHTML 1.0 Transitional. Nella sezione head abbiamo quindi impostato tutti i meta tag, i fogli di stile e i titoli delle pagine da recuperare da WordPress; e includiamo i nostri 3 file JavaScript.
Infine, apriamo una divisione "container" e inseriamo il nome del nostro blog come titolo di intestazione.Passaggio 3 - Post di "Breaking News"
Includeremo un numero definito di post da una categoria "Breaking News" nella parte superiore della nostra pagina. Apri index.php e digita quanto segue, non ti preoccupare, ti spiegherò tutto quanto segue:
?> )
"title ="">
- #commenting "title =" Visualizza commenti ">
3.1 - Apertura
La prima linea è una semplice funzione PHP di WordPress per includere prima il nostro file header.php. Di seguito, apriamo il nostro "Content" div per avvolgere tutti i post insieme. Ho incluso un commento HTML alla chiusura di ogni tag div affermando quale div si sta chiudendo. Consiglio vivamente di iniziare a farlo nei tuoi progetti, se non lo fai già, in quanto aiuta a mantenere il tuo codice il più organizzato possibile.
3.2 - Il tag $ in più
Questo codice ci consente di includere solo parte di ogni post fino a dove l'autore ha incluso il <--more--> tag - questo interrompe tutto il testo nei messaggi lunghi dalla visualizzazione nella home page.
3.3 - ID di categoria
$ breaking_cat = "83"; $ breaking_num = "3"; $ latest_num = "4"; $ latest_ignore = "-1";Per rendere più semplice la personalizzazione del tema, includiamo qualsiasi opzione qui. Ogni riga è commentata ulteriormente. Facciamo questo in modo che se qualcun altro usa il tuo tema - invece di dover strisciare attraverso tutto il tuo codice per trovare dove mettere i loro ID di categoria - sono tutti facilmente accessibili nella parte superiore del file. Durante questo tutorial, useremo queste variabili nel ciclo di WordPress.
3.4 - Abbiamo messaggi?
Questa è una variante del ciclo WordPress che emette i nostri messaggi dal database. Come puoi vedere, stiamo usando le prime due delle nostre variabili dalla sezione precedente. Le variabili si sostituiscono con la stringa associata a esse. Ad esempio, utilizzando il codice predefinito, la linea diventerebbe automaticamente:
query_posts ( 'showposts = 3 & cat = 83')La seconda riga dice quindi, se abbiamo i post, li inseriamo nella pagina nel formato descritto di seguito.
3.5 - Pubblica contenuto
"title ="">
Questo non è così spaventoso come sembra, fidati di me.
- Immagine - Nella nostra anteprima della home page, noterai che ogni post ha la sua immagine. Questo è incluso utilizzando la sezione "Campi personalizzati" di WordPress quando si scrive un post. Basta impostare la 'chiave' su miniature quindi inserisci il link all'immagine:
Il codice in sostanza dice "Prendi i dati dal campo personalizzato del post chiamato" miniatura "e incollali in un tag img."
- Titolo - Questo inserisce il nostro titolo del post come collegamento tra i tag h2. the_permalink () ottiene il link del post e il titolo() recupera il titolo. Abbastanza semplice, eh?
- Appuntamento - Qui, otteniamo il tempo in cui è stato creato il post, nel formato di: l, F j, Y G: i - o in inglese: giorno, data, anno (ad esempio sabato 2 agosto 2008 14:27).
- Soddisfare - Recupera il contenuto del post fino a (grazie al codice che abbiamo incluso in precedenza). 'Continua ...' è il testo visualizzato alla fine del post. Personalizza questo come preferisci.
3.6 - Post Meta
- #commenting "title =" Visualizza commenti ">
Questo recupera le categorie da cui proviene il post. Se ce n'è più di uno, saranno separati da virgole. Viene quindi recuperato un collegamento alla sezione dei commenti e il numero di commenti nell'articolo.
Questo semplicemente chiude il "div.breaking" in cui si trovava il nostro post; e poi chiude il ciclo una volta fatto.
Step 4 - Ultimi post
Sotto i nostri tre post di "Breaking News", includeremo un numero specificato di post più recenti specificati dall'utente, ignorando eventuali post dalla categoria "Interruzione" e qualsiasi altra categoria specificata dall'utente da ignorare. Aggiungeremo quanto segue nella parte inferiore del nostro codice corrente:
"title ="">
- #commenting "title =" Visualizza commenti ">
4.1 - Il ciclo
- showposts = '$ latest_num.' - Indica al ciclo di visualizzare solo il numero di post recenti che l'utente ha specificato nella variabile '$ last_num'.
- cat = - '$ breaking_cat. '' $ latest_ignore..' - Questo ordina al loop di ignorare (notare il simbolo 'meno' che si richiede all'utente di usare nelle variabili) post che sono nella categoria 'Breaking' in modo da non duplicare alcun post; e anche per ignorare i post di una delle categorie che l'utente specifica nella variabile '$ latest_ignore'.
Il resto è autoesplicativo e identico alla funzione Breaking News. Alcune differenze sono la mancanza del 'soddisfare' sezione da ogni post, e anche l'immagine post è data la classe di 'Postimg-s' anziché. Questo ci consentirà di richiedere solo un'immagine in miniatura, che verrà ridimensionata nel nostro CSS da 200x200 a 50x50.
4.2 - Chiusura della pagina
Per terminare la pagina corrente, dobbiamo chiudere il contenuto div # e includere il nostro footer:
4.3 - Footer.php
In questo file, è sufficiente chiudere i tag #container, body e html:
In questo momento, se hai creato alcuni post, il tuo design dovrebbe assomigliare a questo:
Molto brutto, eh? Beh, non per molto più tempo.
Apri il tuo style.css file e incolla nel seguente codice:
/ * ------------------------------------------------ ------------------------ Nome del tema: URI del tema di WordPress Times: http://www.vivawp.com/ Descrizione: un tutorial per NETTUTS.com di Dan Harper Versione: 1.00 Autore: Dan Harper Autore URI: http://danharper.me ------------------------------ ------------------------------------------ * /
Questo è richiesto all'inizio di questo file, in quanto fornisce al Gestore temi in WordPress alcune informazioni sul tema. Compila le sezioni in esso a tuo piacimento.
Di seguito è riportato tutto il codice CSS utilizzato per lo styling del documento. È documentato di seguito.
* margin: 0; padding: 0; body background-color: # faf9f5; colore: # 3d3d3d; font-size: 75%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; #container width: 940px; margine: 15px auto; h1, h2, h3, h4, h5, h6 font-family: Georgia, "Times New Roman", Times, serif; / * BLUEPRINT CSS TYPOGRAPHY * / h1, h2, h3, h4, h5, h6 font-weight: normal; color: # 111; h1 font-size: 3em; line-height: 1; margin-bottom: 0.5em; h2 font-size: 2em; margin-bottom: 0.75em; h3 font-size: 1.5em; line-height: 1; margin-bottom: 1em; h4 font-size: 1.2em ; altezza della linea: 1,25; margine inferiore: 1,25em; altezza: 1,25em; h5 dimensione font: 1em; peso font: grassetto; margin-bottom: 1.5em; h6 font-size: 1em; font-weight: bold; h1 img, h2 img, h3 img, h4 img, h5 img, h6 img margine: 0; p margine: 0 0 1.5em; li ul, li ol margine: 0 1.5 em; ul, ol margin: 0 1.5em 1.5em 1.5em; / * / BLUEPRINT CSS TYPOGRAPHY * / h1 # header margin-bottom: 20px; #content width: 600px; fluttuare: a sinistra; .breaking, .recent padding: 10px; border: 1px solid # 3d3d3d; margin-bottom: 15px; .postimg float: right; larghezza: 200 px; altezza: 200 px; imbottitura-fondo: 10px; .postimg-s float: right; larghezza: 50 px; altezza: 50 px; imbottitura-fondo: 10px; .breaking h2 font-size: 2.5em; line-height: 1em; margin-bottom: 0px; .breaking h2 a, .recent h3 a text-decoration: none; colore: # 3d3d3d; .breaking h2 a: hover, .recent h3 a: hover decorazione del testo: sottolineatura; p.datetime font-style: italic; font-size: 0.9em; / * POST META * / .postmeta margin: -10px; imbottitura: 4px; background-color: # dedbd1; chiaro: entrambi; .postmeta p margin: 0; padding-left: 6px; text-transform: maiuscolo; font-weight: bold; .postmeta span.comm font-weight: normal; .postmeta a: link, .postmeta a: visited color: # 3d3d3d; decorazione del testo: nessuna; .postmeta a: hover, .postmeta a: active text-decoration: underline; #sidebar width: 300px; margin-left: 620px;
La pagina apparirà ora come questa. Molto più pulito!
Congratulazioni. Hai creato con successo le nozioni di base per la prima pagina di un tema di notizie per WordPress, completo di un'area post in primo piano - un "must" per quanto riguarda i temi di News. Puoi anche essere in vantaggio rispetto alla concorrenza con le tue semplici opzioni di personalizzazione utilizzando le variabili PHP.
Cerca il lancio di vivaWP - una nuova famiglia di temi Premium WordPress in arrivo a metà agosto. Il nostro primo tema, CocoaNews, condivide parte del codice di base mostrato in questo tutorial.
Accentsconagua
?> )
