WordPress Beginner tot Master, deel 5

Gedurende deze zesdelige beginners-tot-masterreeks zullen we de geavanceerde functies van WordPress gebruiken om ons eigen portfolio en blog te maken, compleet met een optiespagina, meerdere stijlen en ondersteuning voor de nieuwe WordPress 2.7-functies. Vandaag behandelen we de opmerkingen, de zoekopdracht en het archief.

Dit deel gaat voornamelijk over het repareren van de extra onderdelen die we nog niet hebben. In het eerste gedeelte maken we de sjabloon Opmerkingen - met ondersteuning voor de nieuwe functies in WP 2.7, maar ook geschikt voor oudere versies.

In het tweede gedeelte maken we de archief- en zoeksjablonen.

Ook verkrijgbaar in deze serie:

WordPress: Beginner tot Master, deel 1
WordPress: Beginner tot Master, deel 2
WordPress: van beginner tot meester, deel 3
WordPress: Beginner tot Master, deel 4
WordPress: Beginner tot Master, deel 5
WordPress: van beginner tot meester, deel 6

Spring naar een sectie

Comments
- Opmerkingen voor WP 2.7+
- Styling Reacties
- Opmerkingen voor WP 2.6-
Het archief
- zoekformulier
Zoekresultaten pagina
Samenvatting

Comments

WordPress 2.7 introduceerde verschillende nieuwe functies voor de commentarensectie, waaronder opmerkingen met opmerkingen, pagina's met opmerkingen, afwisselende stijlen en gestroomlijnde code. Deze functies zullen echter niet correct werken in oudere versies van WordPress. Om dit te bestrijden, zullen we een WordPress Filter gebruiken, zodat oudere versies één commentaarbestand zullen gebruiken en nieuwere versies een ander.

Discussieopmerkingen in WP 2.7

Voeg de onderstaande code toe onderaan functions.php:

 // Gebruik bij gebruik van 2.6 of lager legacy-commentaren add_filter ('comments_template', 'legacy_comments'); function legacy_comments ($ file) if (! function_exists ('wp_list_comments')) $ file = TEMPLATEPATH. '/Comments.legacy.php'; return $ bestand;

De wp_list_comments () functie is een nieuwe toevoeging aan WordPress 2.7; dus we controleren of het bestaat met behulp van de function_exists () PHP-functie. Als dit niet het geval is, wordt een WordPress-filter toegevoegd om door te verwijzen naar de comments.legacy.php bestand wanneer de reactiesjabloon wordt aangevraagd.
Alle nieuwere WordPress-versies zullen dus blijven gebruiken comments.php (omdat ze de bevatten wp_list_comments () functie.)

Opmerkingen voor WP 2.7+

Maak een nieuw bestand met de naam comments.php. Binnen, begin met:

Als aan het huidige bericht opmerkingen zijn toegewezen, wordt het aantal reacties in het title-label uitgevoerd met behulp van de comments_number () functie. De opmerkingen worden vervolgens weergegeven in een geordende lijst met behulp van de nieuwe wp_list_comments () functie.
Elke opmerking wordt weergegeven met behulp van een ingebouwde sjabloon die op verschillende manieren gemakkelijk te stijlen is, maar als u meer controle wilt over hoe elke opmerking eruit ziet, raadpleegt u deze pagina op de WordPress Codex.

De commentaarnavigatietags zijn ook nieuw voor 2.7 en staan 'paginering' toe tussen een bepaald aantal opmerkingen (net zoals je hebt tussen blogposts).

In de volgende code wordt een bericht weergegeven als reacties zijn gesloten voor de post:

 comment_status): // Als opmerkingen open zijn, maar er zijn geen opmerkingen. anders: echo "Reacties zijn gesloten op dit bericht.
"; endif; endif;?>

De volgende taak is om het eigenlijke reactieformulier weer te geven:

 comment_status):?>  
   
  U moet /wp-login.php?redirect_to= zijn"> ingelogd om een reactie te plaatsen.

Als opmerkingen zijn ingesteld om te openen, wordt de titel 'Leave a Reply' weergegeven met de nieuwe comment_form_title () functie. Als de gebruiker reageert op een opmerking, de % s in 'Laat een antwoord op% s' wordt vervangen door de naam van de auteur van de reactie waarop ze reageren.
Een annuleringsantwoordlink wordt ook weergegeven als dit een antwoord is met cancel_comment_reply_link ().
Ten slotte, als alleen ingelogde gebruikers commentaar kunnen geven (en de gebruiker niet is aangemeld), wordt een foutmelding weergegeven die naar de inlogpagina verwijst.

Als registratie niet vereist is (of als de gebruiker is aangemeld):

   Ingelogd als /wp-admin/profile.php "> . "title =" Log uit van dit account "> Uitloggen»
  Naam: 
 E-mail: 
 Website:

Het reactieformulier is geopend. Als de gebruiker is aangemeld, een "Aangemeld als ... Afmelden?" bericht wordt weergegeven - anders worden de velden 'Naam', 'E-mail' en 'Website' weergegeven.

Ten slotte worden het tekstbericht 'Bericht' en de knoppen Verzenden weergegeven, het formulier gesloten en de als verklaringen gesloten:

 Commentaar: 
     
 ID KAART); ?>

comment_id_fields () voert de ID van de huidige post uit in een verborgen veld. In WP 2.6- moest je dit handmatig doen, maar nu is het verplicht om deze functie te gebruiken.

Ga in het Dashboard naar Instellingen -> Discussie en vink de opties 'Reacties met draad inschakelen' en 'Reacties in pagina's doorbreken'. Bekijk een voorbeeld van de reactiesjabloon door naar een blogpost te gaan:

Styling Reacties

Toevoegen aan style.css:

 / * Opmerkingen * / h4 # reacties duidelijk: beide; marge: 45 px 0 5 px 0;  .commentlist li font-size: inherit;  .commentlist li .avatar float: right;  .commentlist citeren font-weight: bold; lettertype: normaal; lettergrootte: 0.95em;  .commentlist p font-size: 0.8em; font-gewicht: normaal; regelhoogte: 1.5em; marge: 10px 5px 10px 0; text-transform: none;  .commentmetadata display: block; font-size: 0.8em; font-gewicht: normaal; regelhoogte: 1.1em; marge: 0;  .commentlist .reply font-size: 0.8em; lettertype: vet;  .commentlist marge: 0 0 20px 0;  .commentlist li margin: 15px 0 10px; opvulling: 10px; lijststijl: geen;  .commentlist li ul li margin-right: -5px; marge links: 10 px;  .comms-navigation, .navigation clear: beide; weergave: blok; margin-bottom: 20px; overloop verborgen;  .kinderen opvulling: 0;  .nomomments text-align: center; marge: 0; opvulling: 0;  / * Commentaarformulier * / #respond h4 duidelijk: beide; marge: 45px 0 10px 0;  form p padding-bottom: 10px; marge: 5px 0;  form p label display: inline-block; margin-right: 10px; text-align: right; breedte: 5em;  form p label [for = "comment"] vertical-align: top;  input, textarea padding: 3px;  textarea font-family: Arial, Helvetica, sans-serif; lettergrootte: 0.9em; overloop: automatisch;  input # submit opvulling: 5px 3px;

En het volgende in deepblue.css:

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

Merk op dat 2.7 automatisch speciale klassennamen zoals toevoegt alt, zelfs, kinderen, bypostauthor, thread-alt, thread-even enz. waar nodig om elke andere opmerking een andere kleur te geven om de leesbaarheid in lange threads te vergroten. Zie de WordPress Codex voor meer informatie hierover.

Binnen header.php, direct daarvoor invoegen:

Hiermee wordt een ingebouwd Javascript-bestand geladen dat het reactieformulier kan 'verplaatsen' wanneer u op een antwoordkoppeling klikt. De pagina hoeft dus niet opnieuw te worden geladen:

Klik op 'Antwoorden' en het formulier wordt verplaatst naar uw huidige positie:

Opmerkingen voor WP 2.6

Ik ga deze code niet uitleggen, omdat deze verouderd is en alleen wordt opgenomen voor de paar mensen die geen WP 2.7 gebruiken. Maar ik heb toegevoegd in a $ teller dus afwisselende opmerkingen kunnen anders worden gestyled, zoals ze in 2.7 zijn.

Maak een nieuw bestand met de naam comments.legacy.php en kopieer in de volgende code. Als u WP 2.6 gebruikt, zal de lay-out exact hetzelfde zijn als in 2.7 als threaded-opmerkingen zijn uitgeschakeld.

 post_password)) // als er een wachtwoord is als ($ _COOKIE ['wp-postpass_'. COOKIEHASH]! = $ post-> post_password) // en het komt niet overeen met de cookie?> Dit bericht is beveiligd met een wachtwoord. Voer het wachtwoord in om reacties te bekijken.
    
        zegt: 
  #commentaar-">  
 comment_approved == '0'): echo 'je opmerking moet nog beoordeeld worden.'; stop als; ?> 
 
  
 comment_status):?>    Reacties zijn gesloten.
  comment_status):?> Laat een antwoord achter
  U moet /wp-login.php?redirect_to= zijn"> ingelogd om een reactie te plaatsen.
    Ingelogd als /wp-admin/profile.php ">. /wp-login.php?action=logout "title =" Log uit van dit account "> Uitloggen»
  Naam: 
 E-mail: 
 Website: 
  Commentaar: 
     
 ID KAART); ?>

Download de bronbestanden voor dit bericht als u wilt dat dit bestand correct gespatieerd en opgemaakt is om het bewerken te vergemakkelijken.

Opmerkingen worden weergegeven in WP 2.6 of lager

Notitie: Als je meer wilt weten over de oude reacties loop, bekijk dan "Ontrafelen van de geheimen van WordPress" Comments.php File "door Gilles Maes.

Het archief

De archive.php sjabloon wordt gebruikt om elk soort archief voor de blog weer te geven - bijvoorbeeld. categorieën, maanden, tags, enz.

Maak een nieuw bestand met de naam archive.php en begin met het volgende:

 '; ?>

Zoals u ziet, laadt de pagina het bestand als het archief voor de categorie Portfolio is page-portfolio.php sjabloon. Uitgang; zorgt ervoor dat er na die regel geen code meer wordt uitgevoerd als de portfoliosjabloon wordt gebruikt.
Volgende:

  Archief voor de ''Categorie
  Posts Tagged '’
  Archief voor 
  Archief voor 
  Archief voor 
  Schrijvers archief
  blog archieven

Elke sectie geeft een iets andere titel weer, afhankelijk van waar het archief voor is. Als het bijvoorbeeld een archief is voor de categorie 'Algemeen', zegt de titel 'Archief voor de' Algemene 'Categorie "; of een maandelijks archief voor januari 2009 zou zijn "Archief voor januari 2008".
Op de laatste regel wordt de lus geopend.

#commentaar ">

De bovenstaande code is de normale code voor een blogbericht (zoals we verschillende keren hebben gebruikt op de blogpagina, enkele pagina's enz.). Op de laatste regel is de lus gesloten.
Als het archief niet bestaat:

 # Archive bestaat niet: else: get_header (); ?>  Niet gevonden

Een eenvoudige 'Not Found' header wordt getoond, en de searchform.php bestand is opgenomen (die we hierna zullen maken). U moet waarschijnlijk meer informatie op deze pagina opnemen om deze gebruiksvriendelijker te maken.

Voeg tot slot de paginakoppelingen, de zijbalk en voettekst toe:

Probeer nu uw archiefpagina door op een van de links in een Categorie / Archieven / Labels-widgets te klikken. Maar als u naar een archief gaat dat niet bestaat (bijvoorbeeld een categorie-ID dat niet bestaat), wordt u begroet met de volgende foutpagina omdat de searchform.php bestand bestaat niet.

zoekformulier

Dit bestand kan echt niet eenvoudiger - alleen een zoekformulier. Voeg het volgende toe aan een nieuw bestand met de naam searchform.php:

Probeer opnieuw naar een niet-bestaand archief te gaan en het zoekformulier zal verschijnen. Het maakt gebruik van dezelfde styling als die we gebruikten in het zoekscherm van de zijbalk, dus er is geen extra styling vereist.

Zoekresultaten pagina

Het uiteindelijke sjabloonbestand is vereist search.php welke de resultaten van een zoekopdracht toont. Voor het grootste deel is dit een gewone lus, maar omdat Portfolio-items in de resultaten kunnen worden weergegeven, moeten ze anders worden weergegeven dan blogberichten.

Maak het search.php bestand en begin met het volgende:

    Zoekresultaten

De lus wordt geopend en is dan een als statement om een portfolio-item weer te geven:

 ID, 'preview', true); $ date = get_post_meta ($ post-> ID, 'date', true); $ client = get_post_meta ($ post-> ID, 'client', true); $ link = get_post_meta ($ post-> ID, 'link', true); ?>   ">    "> ($ Date)";?>

Als de opgehaalde post afkomstig is uit de portfolio-categorie, wordt de post weergegeven met behulp van de bovenstaande lay-out - om er hetzelfde uit te zien als de portfolio-items. Anders…

    "title =" Ga door met lezen """>  
  
 #commentaar ">

De normale indeling van het blogbericht wordt gebruikt.
Ten slotte wordt een foutmelding met een zoekformulier weergegeven als er geen resultaten zijn geretourneerd, de pagineringstags worden gebruikt en de zijbalk- en voettekstbestanden de volgende bevatten:

  Geen berichten gevonden. Probeer een andere zoekopdracht?

Voeg gewoon de volgende CSS toe style.css en we zijn hier klaar:

 .werkzoek helder: beide; marge: 0 0 45 px 0; opvulling: 0 0 40px 0; breedte: 690 px;

Samenvatting

Morgen is de laatste dag van de serie. (Deel 6) We zullen enkele bugs met de duivel strijken (IE6) en de serie voltooien door de RedSpace kleurenschema voor innovatie!!

Code