Share
Recensies zijn misschien een van de grootste bevoegdheden van bloggen in termen van autoriteit. Als het goed wordt gedaan (met hard werken en consistente informatie), zijn herziene blogs misschien wel de meest winstgevende categorie in de blogosfeer. Maar elk blog moet een degelijk ontwerp bieden in zijn berichten, inclusief recensies. In deze post gaan we het hebben over hoe u de perfecte beoordelingskist kunt bouwen, aangezien revisiekaders waarschijnlijk de eerste deellezers zijn die controleren voordat ze een recensie lezen.
We gaan bijvoorbeeld een beoordelingsvak maken voor een film.
Laten we een van mijn favoriete films aller tijden, The Pursuit of Happyness, nemen. We gaan de volgende informatie over de film weergeven:
Belangrijk: Deze informatie is geleend van The Internet Movie Database.
We gaan de gegevens opslaan als aangepaste veldwaarden, maar het handmatig toevoegen van aangepaste velden voor elke beoordeling kan zo vervelend zijn. Daarom gaan we een nette aangepaste metabox maken om onze gegevens als aangepaste velden op te slaan.
Ten eerste moeten we de add_meta_box () functie om de metabox te bouwen en een callback-functie aan te maken:
Accentsconagua
functie 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'); function wptuts_review_box_meta () // Hallo daar! De callback-functie creëert de invoervelden om onze gegevens te bewaren. Ik denk dat we een texarea kunnen gebruiken voor het "verhaallijn" -veld en tekstinvoervelden voor al het andere:
ID KAART ); // extraheer de leden van de array $ values naar hun eigen variabelen (die u hieronder in de HTML-code kunt zien) extract ($ values, EXTR_SKIP); wp_nonce_field ('review_box_meta_action', 'review_box_meta_nonce'); ?>
Vervolgens moeten we de functie maken om WordPress de invoerwaarden als aangepaste velden te laten opslaan:
functie wptuts_review_box_save_meta ($ post_id) if (defined ('DOING_AUTOSAVE') && DOING_AUTOSAVE) terug; if (! isset ($ _POST ['review_box_meta_nonce']) ||! wp_verify_nonce ($ _POST ['review_box_meta_nonce'], 'review_box_meta_action')) terug; als (! current_user_can ('edit_post')) terugkomt; // maak een array van onze custom velden $ 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') ; // maak de "standaard" waarden voor de array $ review_array_defaults = array ('_wptuts_review_name' => 'Geen', '_wptuts_review_year' => 'Geen', '_wptuts_review_director' => 'Geen', '_wptuts_review_writer' => 'Geen ',' _wptuts_review_stars '=>' Geen ',' _wptuts_review_genre '=>' Geen ',' _wptuts_review_runtime '=>' Geen ',' _wptuts_review_image '=>' Geen ',' _wptuts_review_storyline '=>' Geen '); // ontleed ze! $ review_array = wp_parse_args ($ review_array, $ review_array_defaults); // HTML-elementen die zijn toegestaan in de velden $ allowed_html = array ('a' => array ('href' => array (), 'title' => array ()), 'em' => array (), 'sterk' => array ()); // update de bericht-metavelden met invoervelden (als ze zijn ingesteld) foreach ($ review_array als $ item) if (isset ($ _POST [$ item])) update_post_meta ($ post_id, $ item, wp_kses ($ _ POST [$ item], $ allowed_html)); add_action ('save_post', 'wptuts_review_box_save_meta'); Gedaan!
Als u meer informatie wilt over het maken van aangepaste metaboxen (en wat deze regels eigenlijk betekenen), kunt u dit fantastische artikel lezen dat is geschreven door Christopher Davis en is gepubliceerd op Wptuts+.Nu hebben we besproken hoe reeks de informatie, we moeten leren hoe krijgen de informatie. Als je eerder met aangepaste velden hebt gewerkt, zal dit gemakkelijk zijn omdat we alleen aangepaste veldwaarden gaan ophalen.
WordPress heeft een eenvoudig te gebruiken functie voor het verkrijgen van aangepaste veldwaarden:
$ meta_values = get_post_meta ($ post_id, $ key, $ single);
We moeten aangepaste veldwaarden laden in een HTML-code, dus het is verstandig om nu over de HTML na te denken. Ik denk zoiets als dit:
- Naam: Het streven naar geluk
- Jaar: 2006
- Regisseur: Gabriele Muccino
- Auteur: Steve Conrad
- sterren: Will Smith, Jaden Smith, Thandie Newton
- Genre: Biografie, Drama
- runtime: 117 minuten
- Verhaallijn: Gebaseerd op een waargebeurd verhaal over een man genaamd Christopher Gardner. Gardner heeft zwaar geïnvesteerd in een apparaat dat bekend staat als een "botdensiteitsscanner". Hij heeft het gevoel dat hij deze apparaten heeft gemaakt. Ze verkopen echter niet omdat ze marginaal beter zijn dan de huidige technologie voor een veel hogere prijs. Terwijl Gardner probeert te achterhalen hoe hij ze kan verkopen, verlaat zijn vrouw hem, hij verliest zijn huis, zijn bankrekening en creditcards. Wil hij met zijn zoon op straat leven, Gardner is nu wanhopig op zoek naar een vaste baan; hij neemt een baan als effectenmakelaar aan, maar voordat hij loon kan ontvangen, moet hij 6 maanden training doorlopen en zijn apparaten verkopen.
En als we ze samenvoegen, hebben we onze functie klaarliggen!
functie wptuts_review_box () global $ post; // ontvang de aangepaste veldwaarden als een array $ values = get_post_custom ($ post-> ID); // extraheer de leden van de array $ values naar hun eigen variabelen (die u hieronder in de HTML-code kunt zien) extract ($ values, EXTR_SKIP); // als er geen afbeeldingslink in het aangepaste veld "review_image" is, probeer dan de afgebeelde afbeelding te krijgen ($ _ 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'; // ontsnappen aan de uitvoer, voor het geval $ allowed_html = array ('a '=> array (' href '=> array (),' title '=> array ()),' em '=> array (),' strong '=> array ()); $ _wptuts_review_name_output = wp_kses ($ _ wptuts_review_name [0], $ allowed_html); $ _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 = ' 
- Naam: '$ _ Wptuts_review_name_output.'
- Jaar: '$ _ Wptuts_review_year_output.'
- Regisseur: '$ _ Wptuts_review_director_output.'
- Auteur: '$ _ Wptuts_review_writer_output.'
- sterren: '$ _ Wptuts_review_stars_output.'
- Genre: '$ _ Wptuts_review_genre_output.'
- runtime: '$ _ Wptuts_review_runtime_output.'
- Verhaallijn: '$ _ Wptuts_review_storyline_output.'
'; return $ output; Natuurlijk kunt u uw beoordelingsdoos op elke gewenste manier inrichten. Als je geen zin hebt, kun je de onze gebruiken:
.review-box width: 550px; border: 1px solid #DDD; border-radius: 5px; margin: 10px; .review-box-image float: right; width: 150px; border: 10px solid #fff; border- width: 0 0 10px 10px; margin: 10px 10px 0 0; .review-box-list margin: 10px; padding: 0; lijststijl: none; .review-box-list li margin-bottom: 5px ; padding-top: 5px; border-top: 1px solid #EEE; .review-box-list li: first-child border-top: 0; .review-box-list li strong display: inline-block ; width: 75px;Als u het beoordelingsvak naar links of rechts wilt laten zweven, vergeet dan niet om het vakje toe te voegen
float: left; (of float: right;) verklaring voor .recensie-box. U kunt het zelfs centreren door de margin: 10px; verklaring in marge: 10px auto;. We weten hoe we de info moeten instellen, we weten hoe we de info moeten krijgen ... Nu is het tijd voor ons laten zien de info! :)
We kunnen het vak altijd aan het einde (of aan het begin) van het bericht als volgt automatisch toevoegen:
function wptuts_review_box_add ($ content) $ review_box = wptuts_review_box (); // toon het vakje aan het einde van de post: return $ content. $ review_box; // toon het vakje aan het begin van het bericht: // return $ review_box. $ content; add_action ('the_content', 'wptuts_review_box_add'); Maar wat als we de doos willen opnemen binnen de post? Dat is waar mijn favoriete onderdeel van pas komt: shortcodes!
Deze stap zou zelfs eenvoudiger zijn dan de vorige, omdat we al het werk hebben gedaan om het beoordelingsvenster te laden. Het enige dat we moeten doen is de functie als een shortcode als deze aanroepen:
add_shortcode (reviewbox ',' wptuts_review_box);
Dit is wat u krijgt als u de bovenstaande stappen uitvoert precies zoals ze zijn geschreven:
Deze beoordelingsvakken kunnen worden gebruikt voor veel verschillende recensies, zoals software, websites, boeken, tv-programma's, enzovoort. Of, als je creatief kunt worden, kun je ze zelfs gebruiken in reguliere blogs om plezier te hebben!
Om de code volledig te begrijpen en zelfs te verbeteren, moet u enkele andere artikelen van Wptuts + lezen:
Is er iets dat je wilt verbeteren of heb je een idee? Deel uw mening met ons door hieronder een reactie te geven.
