Share
Anmeldelser er kanskje en av de største kreftene til blogging når det gjelder autoritet. Når det er gjort riktig (med hardt arbeid og konsistent informasjon), er blogger kanskje den mest lønnsomme kategorien i blogosfæren. Men hver blogg har å tilby en solid design i sine innlegg, inkludert anmeldelser. I dette innlegget skal vi snakke om hvordan du bygger den perfekte vurderingsboksen, siden gjennomgangskasser er trolig de første delleserne sjekker før du leser en anmeldelse.
Som et eksempel skal vi lage en anmeldelse boks for en film.
La oss ta en av mine favorittfilmer fra hele tiden, The Pursuit of Happyness. Vi skal vise følgende informasjon om filmen:
Viktig: Denne informasjonen er lånt fra Internet Movie Database.
Vi skal holde dataene som egendefinerte feltverdier, men å legge til egendefinerte felt manuelt for hver gjennomgang kan være en slik smerte. På grunn av det, skal vi lage en fin, tilpasset meta-boks for å lagre dataene våre som egendefinerte felt.
Først må vi bruke add_meta_box () funksjon for å bygge meta-boksen og opprette en tilbakeringingsfunksjon:
Accentsconagua
funksjon wptuts_review_box_add_meta () add_meta_box ('review-box', 'The Review Box', 'wptuts_review_box_meta', 'post', 'normal', 'high'); add_action ('add_meta_boxes', 'wptuts_review_box_add_meta'); funksjon wptuts_review_box_meta () // Hi there! Tilbakeringingsfunksjonen vil skape inngangsfeltene for å holde dataene våre. Jeg tror vi kan bruke en texarea for feltet "storyline" og tekstfelt for alt annet:
ID); // trekk medlemmene av $ values-arrayet til sine egne variabler (som du kan se nedenfor, i HTML-koden) utdrag ($ verdier, EXTR_SKIP); wp_nonce_field ('review_box_meta_action', 'review_box_meta_nonce'); ?>
Da må vi opprette funksjonen for å få WordPress til å lagre inngangsverdiene som egendefinerte felt:
funksjon wptuts_review_box_save_meta ($ post_id) hvis (definert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) tilbake; hvis (! isset ($ _POST ['review_box_meta_nonce']) ||! wp_verify_nonce ($ _POST ['review_box_meta_nonce'], 'review_box_meta_action')) returnere; hvis (! current_user_can ('edit_post')) returnere; // lage en rekke av våre tilpassede felt $ review_array = array ('_wptuts_review_name', '_wptuts_review_year', '_wptuts_review_director', '_wptuts_review_writer', '_wptuts_review_stars', '_wptuts_review_genre', '_wptuts_review_runtime', '_wptuts_review_image', '_wptuts_review_storyline') ; // opprett standardverdiene for array $ review_array_defaults = array ('_wptuts_review_name' => 'Ingen', '_wptuts_review_year' => 'Ingen', '_wptuts_review_director' => 'Ingen', '_wptuts_review_writer' => 'Ingen ',' _wptuts_review_stars '=>' Ingen ',' _wptuts_review_genre '=>' Ingen ',' _wptuts_review_runtime '=>' Ingen ',' _wptuts_review_image '=>' Ingen ',' _wptuts_review_storyline '=>' Ingen '); // parse dem! $ review_array = wp_parse_args ($ review_array, $ review_array_defaults); // HTML-elementer som er tillatt innenfor feltene $ allowed_html = array ('a' => array ('href' => array (), 'title' => array ()), 'em' => 'strong' => array ()); // oppdatere postmetalfeltene med inntastingsfeltene (hvis de er angitte) foreach ($ review_array som $ item) hvis (isset ($ _POST [$ item])) update_post_meta ($ post_id, $ item, wp_kses ($ _ POST [$ element], $ allowed_html)); add_action ('save_post', 'wptuts_review_box_save_meta'); Ferdig!
For å finne mer informasjon om å lage tilpassede metakasser (og hva disse kodelinjene faktisk betyr), kan du lese denne fantastiske artikkelen skrevet av Christopher Davis og publisert på Wptuts+.Nå som vi dekket hvordan sett informasjonen, vi trenger å lære å gjøre få informasjonen. Hvis du jobbet med tilpassede felt før, vil dette være enkelt siden vi bare skal hente tilpassede feltverdier.
WordPress har en brukervennlig funksjon for å få tilpassede feltverdier:
$ meta_values = get_post_meta ($ post_id, $ key, $ single);
Vi må laste tilpassede feltverdier til noen HTML-koden, så det ville være lurt å tenke på HTML-koden nå. Jeg tenker på noe slikt:
- Navn: Jakten på lykke
- År: 2006
- Regissør: Gabriele Muccino
- Forfatter: Steve Conrad
- Stjerner: Will Smith, Jaden Smith, Thandie Newton
- Sjanger: Biografi, Drama
- Spilletid: 117 minutter
- Handling: Basert på en sann historie om en mann som heter Christopher Gardner. Gardner har investert tungt i en enhet kjent som en "Bone Density Scanner". Han føler at han har laget disse enhetene. De selger imidlertid ikke som de er marginalt bedre enn dagens teknologi til en mye høyere pris. Som Gardner prøver å finne ut hvordan man selger dem, forlater sin kone ham, han mister sitt hus, bankkonto og kredittkort. Tvunget til å leve ut i gatene med sønnen hans, Gardner er nå desperat etter å finne en jevn jobb; han tar jobben som aksjemegler, men før han kan motta lønn, må han gå gjennom 6 måneders trening og selge sine enheter.
Og hvis vi legger dem sammen, har vi vår funksjon klar!
funksjon wptuts_review_box () global $ post; // få de egendefinerte feltverdiene som en array $ values = get_post_custom ($ post-> ID); // trekk medlemmene av $ values-arrayet til sine egne variabler (som du kan se nedenfor, i HTML-koden) utdrag ($ verdier, EXTR_SKIP); // hvis det ikke er noen bildekobling i det tilpassede feltet "review_image", prøv å få det kjente bildet hvis ($ _ wptuts_review_image == ") if (has_post_thumbnail ()) $ get_wptuts_review_image = wp_get_attachment_image_src (get_post_thumbnail_id (), 'full') ; $ _wptuts_review_image = $ get_wptuts_review_image [0]; else $ _wptuts_review_image = 'http://placehold.it/150x200&text=No+Image'; // unnslippe utdata, bare i tilfelle $ allowed_html = array '=> array (),' title '=> array ()),' em '=> array (),' strong '=> array ()); $ _wptuts_review_name_output = wp_kses ($ _ wptuts_review_name $ _Wptuts_review_year_output = wp_kses ($ _wptuts_review_year [0], $ allowed_html); $ _wptuts_review_director_output = wp_kses ($ _wptuts_review_director [0], $ allowed_html); $ _wptuts_review_writer_output = wp_kses ($ _ wptuts_review_writer [0], $ allowed_html); $ _wptuts_review_stars_output = wp_kses ($ _ wptuts_review_stars [0], $ allowed_html); $ _wptuts_review_genre_output = wp_kses ($ _ wptuts_review_genre [ 0], $ allowed_html); $ _wptuts_review_runtime_output = wp_kses ($ _ wptuts_review_runtime [0], $ allowed_html); $ _wptuts_review_storyline_output = wp_kses ($ _ wptuts_review_storyline [0], $ allowed_html); $ _wptuts_review_image_output = wp_kses ($ _ wptuts_review_image [0], $ allowed_html); $ output = ''; returnere $ output;
- Navn: '. $ _ Wptuts_review_name_output.
- År: '. $ _ Wptuts_review_year_output.
- Regissør: '. $ _ Wptuts_review_director_output.
- Forfatter: '. $ _ Wptuts_review_writer_output.
- Stjerner: '. $ _ Wptuts_review_stars_output.
- Sjanger: '. $ _ Wptuts_review_genre_output.
- Spilletid: '. $ _ Wptuts_review_runtime_output.
- Handling: '. $ _ Wptuts_review_storyline_output.
Selvfølgelig kan du stille din boks slik som du vil. Hvis du ikke har lyst på det, er du velkommen til å bruke vår:
.review-box width: 550px; border: 1px solid #DDD; border-radius: 5px; margin: 10px; .review-box-image float: høyre; bredde: 150px; grense: 10px solid #fff; bredde: 0 0 10px 10px; margin: 10px 10px 0 0; .review-box-list margin: 10px; padding: 0; listestil: none; .review-box-list li marginbunn: 5px ; padding-top: 5px; border-top: 1px solid #EEE; .review-box-list li: første barn border-top: 0; .review-box-list li strong display: inline-block ; bredde: 75px;Hvis du vil flyte gjennom boksen til venstre eller høyre, ikke glem å legge til
float: venstre; (eller float: right;) erklæring for .gjennomgang-box. Du kan selv sentrere det ved å endre margin: 10px; erklæring til margin: 10px auto;. Vi vet hvordan du skal sette inn informasjonen, vi vet hvordan du får informasjonen ... Nå er det tid vi vise fram infoen! :)
Vi kan alltid legge til boksen automatisk på slutten (eller i begynnelsen) av innlegget slik:
funksjon wptuts_review_box_add ($ content) $ review_box = wptuts_review_box (); // Vis boksen på slutten av innlegget: returner $ innhold. $ review_box; // vis boksen i begynnelsen av innlegget: // return $ review_box. $ content; add_action ('the_content', 'wptuts_review_box_add'); Men hva om vi vil inkludere boksen innsiden posten? Det er der min favoritt del kommer til nytte: kortkoder!
Dette trinnet ville være enda enklere enn det forrige, siden vi faktisk gjorde alt arbeidet for å laste gjennom boksen. Alt vi trenger å gjøre er å ringe funksjonen som en kortkode som dette:
add_shortcode ( 'reviewbox', 'wptuts_review_box');
Her er hva du får hvis du følger trinnene over akkurat slik de er skrevet:
Disse vurderingsboksene kan brukes til mange forskjellige vurderinger som programvare, nettsteder, bøker, TV-programmer og så videre. Eller, hvis du kan bli kreativ, kan du til og med bruke dem i vanlige blogger bare for å ha det gøy!
For å forstå koden helt og til og med for å forbedre den, bør du lese noen andre artikler av Wptuts +:
Er det noe du vil forbedre eller har du en ide? Del dine tanker med oss ved å kommentere nedenfor.
