I hela denna sexdelade nybörjare till mästarserien använder vi avancerade funktioner i WordPress för att skapa vår egen portfölj och blogg, komplett med en options sida, flera stilar och stöd för de nya WordPress 2.7-funktionerna. Idag behandlar vi kommentarerna, sökningen och arkivet.
Den här delen handlar huvudsakligen om att fixa de extra delar som vi ännu inte har fått. I det första avsnittet skapar vi kommandotemplaren - med stöd för de nya funktionerna i WP 2.7, samtidigt som det är lämpligt för äldre versioner.
I det andra avsnittet skapar vi arkiv- och sökmallar.
WordPress 2.7 introducerade flera nya funktioner för kommentarsektionen, inklusive gängade kommentarer, paged kommentarer, alternerande stilar och strömlinjeformad kod. Men dessa funktioner fungerar inte korrekt i äldre versioner av WordPress. För att bekämpa detta kommer vi att använda ett WordPress-filter så att äldre versioner kommer att använda en kommentarfil och nyare versioner en annan.
Lägg till följande kod längst ner på functions.php
:
// Om du använder 2.6 eller senare, använd äldre kommentarer visa add_filter ('comments_template', 'legacy_comments'); funktion legacy_comments ($ file) om (! function_exists ('wp_list_comments')) $ file = TEMPLATEPATH. '/Comments.legacy.php'; returnera $ file;
De wp_list_comments ()
funktion är ett nytt tillägg till WordPress 2.7; så vi kontrollerar om det existerar med function_exists ()
PHP-funktionen. Om det inte görs läggs ett WordPress-filter till omdirigering till comments.legacy.php
filen när kommentarmallen begärs.
Alla nyare WordPress versioner fortsätter därför att använda comments.php
(eftersom de innehåller wp_list_comments ()
fungera.)
Skapa en ny fil med namnet comments.php
. Insidan, börja med:
Om det aktuella inlägget har kommentarer tilldelas det, skickas antalet kommentarer till en titel tagg med hjälp av comments_number ()
fungera. Kommentarerna visas sedan i en beställd lista med den nya wp_list_comments ()
fungera.
Varje kommentar kommer att visas med en inbyggd mall som är lätt att ställa på olika sätt, men om du behöver mer kontroll över hur varje kommentar ser ut, hänvisar du till den här sidan på WordPress Codex.
Comment navigerings taggar är också nya till 2,7 och tillåter "pagination" mellan ett antal antal kommentarer (precis som du har mellan blogginlägg).
I nästa kod visas ett meddelande om kommentarer stängs för posten:
comment_status): // Om kommentarerna är öppna, men det finns inga kommentarer. annars: echo "Kommentarer är stängda på detta inlägg.
"; endif; endif;?>
Nästa uppgift är att visa den aktuella kommentarformen:
comment_status):?>Du måste vara /wp-login.php?redirect_to="> inloggad för att skicka en kommentar.
Om kommentarer är inställda för att öppnas visas en rubrik "Lämna en svar" med hjälp av det nya
comment_form_title ()
fungera. Om användaren svarar på en kommentar, kommer den% s
i "Lämna ett svar till% s" ersätts med författarens namn på den kommentar som de svarar på.
En avbryt svarlänk visas också om det här är ett svar medcancel_comment_reply_link ()
.
Slutligen, om bara inloggade användare kan kommentera (och användaren inte är inloggad) visas ett felmeddelande som pekar på inloggningssidan.Om registrering inte krävs (eller om användaren är inloggad):
comment_id_fields ()
matar ut det aktuella inläggets ID i ett dolt fält. I WP 2.6- var du tvungen att göra det manuellt, men nu måste man använda den här funktionen.
På instrumentpanelen går du till Inställningar -> Diskussion och kryssar på alternativet "Aktivera trådade kommentarer" och "Avbryt kommentarer till sidor". Förhandsgranska sedan kommentarsmallen genom att gå till något blogginlägg:
Lägg till style.css
:
/ * Kommentarer * / h4 # kommentarer clear: both; marginal: 45px 0 5px 0; .commentlist li font-size: inherit; .commentlist li .avatar float: right; .commentlist cite font-weight: bold; typsnittstyp: normal; typsnittstorlek: 0,95em; .commentlist p font-size: 0.8em; typsnitt: normal; linjehöjd: 1.5em; marginal: 10px 5px 10px 0; text-transform: ingen; .commentmetadata display: block; typsnittstorlek: 0,8em; typsnitt: normal; linjehöjd: 1.1em; marginal: 0; .commentlist .reply font-size: 0.8em; font-weight: bold; .commentlist margin: 0 0 20px 0; .commentlist li margin: 15px 0 10px; vaddering: 10px; listestil: none; .commentlist li ul li margin-right: -5px; marginal-vänster: 10px; .comms-navigation, .navigation clear: both; display: block; marginalbotten: 20px; överflöde: gömd; .barn vaddering: 0; .kommentarer text-align: center; marginal: 0; vaddering: 0; / * Kommentarformulär * / #respond h4 clear: both; marginal: 45px 0 10px 0; formulär p vaddering-botten: 10px; marginal: 5px 0; formulär p etikett display: inline-block; marginal-höger: 10px; textjustera: höger; bredd: 5em; form p etikett [för = "kommentar"] vertikal-align: top; inmatning, textarea padding: 3px; textarea font-family: Arial, Helvetica, sans-serif; typsnittstorlek: 0,9em; överflöde: auto; inmatning # skicka padding: 5px 3px;
Och följande in deepblue.css
:
/ * Kommentarlista * / .commentlist li .avatar border: 2px solid # f2e9ea; .commentlist cite a: länk, .commentlist cite a: visited color: # 333; .commentlist .commentmetadata a: länk: första barnet. .kommentlista .commentmetadata a: besökte: första barnet färg: # 333; .thread-alt bakgrundsfärg: # F6F6EC; .thread-even background-color: # F9F9F3; .depth-1 border: 1px solid # E8E3C8; .even, .alt border-left: 1px solid # E8E3C8; inmatning, textarea bakgrundsfärg: # F6F6EC; gräns: 1px fast # E8E3C8; inmatning: fokus, textarea: fokus border: 1px solid # dad4b6;
Observera att 2.7 automatiskt lägger till specialklassnamn som alt
, även
, barn
, bypostauthor
, tråd-alt
, thread-ens
etc. där det behövs för att möjliggöra utformning av varannan kommentar en annan färg för att öka läsbarheten i långa trådar. Se WordPress Codex för mer information om detta.
Inuti header.php
, direkt före Föra in:
Detta laddar in en inbyggd Javascript-fil som kan "flytta" kommentarformuläret när du klickar på länken Svara - så behöver sidan inte laddas om:
Klicka på "Svara" och formuläret flyttas till din nuvarande position:
Jag kommer inte att förklara någon av denna kod, eftersom den är outdated och bara ingår för de få personer som inte använder WP 2.7. Men jag har lagt till i a $ räknare
så alternerande kommentarer kan utformas annorlunda, som de är i 2.7.
Skapa en ny fil med namnet comments.legacy.php
och kopiera i följande kod. Om du använder WP 2.6 kommer layouten att vara exakt densamma som i 2.7 om gängade kommentarer är inaktiverade.
post_password)) // om det finns ett lösenord om ($ _COOKIE ['wp-postpass_'. COOKIEHASH]! = $ post-> post_password) // och det matchar inte cookien?>Det här inlägget är lösenordsskyddat. Ange lösenordet för att visa kommentarer.
comment_status):?>
säger:#kommentar-">comment_approved == '0'): echo 'Din kommentar väntar på moderering.'; endif; ?>Kommentarer är stängda.
comment_status):?>Lämna ett svar
Du måste vara /wp-login.php?redirect_to="> inloggad för att skicka en kommentar.
Hämta källfilerna för det här inlägget om du vill att den här filen ska vara korrekt inredd och formaterad för att underlätta för redigering.
Notera: Om du vill lära dig mer om den gamla kommentarloopen, kolla in "Unraveling the Secrets of WordPress" Comments.php File "av Gilles Maes.
De archive.php
mall används för att visa någon form av arkiv för bloggen - t.ex. kategorier, månader, taggar etc..
Skapa en ny fil med namnet archive.php
och börja med följande:
'; ?>
Som du kan se, om arkivet är för kategorin Portfölj laddar sidan page-portfolio.php
mall. utgång;
ser till att ingen kod körs efter den linjen om portföljmallen används.
Nästa:
Arkivera för ""Kategori
Inlägg taggade’
Arkivera för
Arkivera för
Arkivera för
Författararkiv
Bloggarkiv
Varje sektion kommer att visa en lite annorlunda titel beroende på vad arkivet är för. Om det till exempel är ett arkiv för kategorin "Allmänt" skulle titeln säga "Arkiv för kategorin Allmänt"; eller ett månadsarkiv för januari 2009 skulle vara "Arkiv för januari 2008".
På sista raden öppnas slingan.
Nästa:
"title =" Fortsätt läsa """>
- #comments ">
Ovanstående kod är den normala koden för ett blogginlägg (som vi har använt flera gånger på bloggsidan, enstaka sidor etc.) På den sista raden är slingan stängd.
Om arkivet inte existerar:# Arkiv existerar inte: annars: get_header (); ?>Hittades inte
En enkel "Ej funnen" -rubrik visas, och
searchform.php
filen ingår (som vi kommer att skapa nästa). Du bör förmodligen inkludera mer information på den här sidan för att göra det mer användarvänligt.Slutligen inkludera paginationslänkarna, sidofältet och sidfoten:
Nu kan du prova din arkivsida genom att klicka på en av länkarna i en kategori / Arkiv / Taggar widgets. Men om du går till ett arkiv som inte existerar (t.ex. ett kategori-ID som inte existerar), kommer du att hälsas med följande fel sida eftersom
searchform.php
filen existerar inte.
Sökformulär
Den här filen kunde verkligen inte bli enklare - bara ett sökformulär. Lägg till följande i en ny fil med namnet
searchform.php
:Försök att gå till ett obefintligt arkiv igen, och sökformuläret kommer att visas. Den använder samma stil som vi använde på sidofältets sökformulär, så ingen ytterligare styling krävs.
Sökresultat sida
Den slutliga mallfilen som krävs är
search.php
som visar resultaten från en sökning. För det mesta är detta en vanlig loop, men eftersom Portfolio-objekt kan dyka upp i resultaten måste de visas annorlunda från blogginlägg.
Skapa
search.php
fil och börja med följande:sökresultat
Slingan öppnas, och då är en
om
uttalande om att visa en portföljartikel:ID, förhandsvisning, sant); $ date = get_post_meta ($ post-> ID, 'date', true); $ client = get_post_meta ($ post-> ID, 'client', true); $ link = get_post_meta ($ post-> ID, 'länk', true); ?>">"> ($ Datum)";?>
Om det hämtade inlägget kommer från portföljkategorin, kommer inlägget att visas med ovanstående layout - för att visas som portföljobjekten. Annat…
"title =" Fortsätt läsa """>
- #comments ">
Den vanliga blogginställningen används.
Slutligen visas ett felmeddelande med ett sökformulär om inga resultat returnerades, pagineringstaggarna används och sidfält och sidfotfiler inkluderade:Inga inlägg hittades. Prova en annan sökning?
Lägg bara till följande CSS i
style.css
och vi är färdiga här:.worksearch clear: both; marginal: 0 0 45px 0; vaddering: 0 0 40px 0; bredd: 690px;
Sammanfattning
I morgon är serien sista dagen. (Del 6) Vi kommer att stryka några buggar med djävulen (IE6) och avsluta serien genom att skapa RedSpace färgschema för innovation!!