Share
Les critiques sont peut-être l'une des plus grandes puissances du blogging en termes d'autorité. Lorsqu'ils sont effectués correctement (avec un travail acharné et des informations cohérentes), les blogs de synthèse sont sans doute la catégorie la plus rentable de la blogosphère. Mais chaque blog doit offrir un design solide dans ses messages, y compris les critiques. Dans cet article, nous allons parler de la création de la boîte de commentaire parfaite, car les boîtes de commentaire sont probablement la première partie vérifiée par les lecteurs avant de lire un commentaire.
Par exemple, nous allons créer une boîte de commentaire pour un film.
Prenons l'un de mes films préférés de tous les temps, The Pursuit of Happyness. Nous allons afficher les informations suivantes sur le film:
Important: Cette information est empruntée à Internet Movie Database.
Nous allons conserver les données sous forme de valeurs de champs personnalisés, mais l'ajout manuel de champs personnalisés pour chaque révision peut s'avérer une tâche ardue. Pour cette raison, nous allons créer une méta-boîte personnalisée pour enregistrer nos données sous forme de champs personnalisés..
Premièrement, nous devons utiliser le add_meta_box () fonction pour construire la meta box et créer une fonction de rappel:
Accentsconagua
fonction wptuts_review_box_add_meta () add_meta_box ('review-box', 'The Review Box', 'wptuts_review_box_meta', 'post', 'normal', 'haut'); add_action ('add_meta_boxes', 'wptuts_review_box_add_meta'); function wptuts_review_box_meta () // Salut à tous! La fonction de rappel créera les champs de saisie pour contenir nos données. Je pense que nous pouvons utiliser une texarea pour le champ "storyline" et des champs de saisie de texte pour tout le reste:
ID); // extrait les membres du tableau $ values dans leurs propres variables (voir ci-dessous, dans le code HTML) extract ($ values, EXTR_SKIP); wp_nonce_field ('review_box_meta_action', 'review_box_meta_nonce'); ?>
Ensuite, nous devons créer la fonction pour que WordPress enregistre les valeurs d’entrée sous forme de champs personnalisés:
fonction wptuts_review_box_save_meta ($ post_id) if (défini ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; if (! isset ($ _POST ['review_box_meta_nonce']) ||! wp_verify_nonce ($ _POST ['review_box_meta_nonce'], 'review_box_meta_action')) return; if (! current_user_can ('edit_post')) return; créer un tableau de la liste ; // crée les valeurs "par défaut" du tableau $ review_array_defaults = array ('_wptuts_review_name' => 'Aucun', '_wptuts_review_year' => 'Aucun', '_wptuts_review_director' => 'Aucun', '_wptuts_review_year' => 'Aucun', '_wptuts_review_director' => 'Aucun', '_wptuts_review_year' = ',' _wptuts_review_stars '=>' Aucune ',' _wptuts_review_genre '=>' Aucune ',' _wptuts_review_runtime '=>' Aucune ',' _wptuts_review_image '=>' Aucune ',' _wptuts_review_runtime '=>' Aucune ',; // les analyser! $ review_array = wp_parse_args ($ review_array, $ review_array_defaults); // éléments HTML autorisés dans les champs $ allowed_html = array ('a' => array ('href' => array (), 'title' => array ()), 'em' => array (), 'strong' => array ()); // met à jour les champs de méta de publication avec les champs de saisie (s'ils sont définis) poureach ($ review_array sous forme de $ 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'); Terminé!
Pour trouver plus d'informations sur la création de méta-boîtes personnalisées (et ce que signifient réellement ces lignes de code), vous pouvez lire cet article fantastique écrit par Christopher Davis et publié sur Wptuts.+.Maintenant que nous avons couvert comment ensemble l'information, nous devons apprendre à obtenir l'information. Si vous avez déjà travaillé avec des champs personnalisés auparavant, cela sera facile car nous allons simplement chercher les valeurs de champs personnalisés..
WordPress a une fonction facile à utiliser pour obtenir des valeurs de champ personnalisées:
$ meta_values = get_post_meta ($ post_id, $ key, $ single);
Nous devons charger les valeurs de champ personnalisées dans du code HTML. Il serait donc sage de penser au HTML maintenant. Je pense à quelque chose comme ça:
- Prénom: La Poursuite du Bonheur
- Année: 2006
- Réalisateur: Gabriele Muccino
- Écrivain: Steve Conrad
- Étoiles: Will Smith, Jaden Smith et Thandie Newton
- Genre: Biographie, Drame
- Durée d'exécution: 117 minutes
- Scénario: Basé sur une histoire vraie d'un homme nommé Christopher Gardner. Gardner a beaucoup investi dans un appareil appelé "scanner de densité osseuse". Il a l'impression d'avoir fabriqué ces appareils. Cependant, ils ne vendent pas car ils sont légèrement meilleurs que la technologie actuelle à un prix beaucoup plus élevé. Alors que Gardner essaie de trouver un moyen de les vendre, sa femme le quitte, il perd sa maison, son compte bancaire et ses cartes de crédit. Forcé de vivre dans la rue avec son fils, Gardner cherche maintenant désespérément à trouver un emploi stable. il occupe un poste de courtier en valeurs mobilières, mais avant de pouvoir recevoir une rémunération, il doit suivre une formation de 6 mois et vendre ses appareils..
Et si nous les mettons ensemble, nous aurons notre fonction prête!
fonction wptuts_review_box () global $ post; // récupère les valeurs de champs personnalisés sous forme de tableau $ values = get_post_custom ($ post-> ID); // extrait les membres du tableau $ values dans leurs propres variables (voir ci-dessous, dans le code HTML) extract ($ values, EXTR_SKIP); // s'il n'y a pas de lien d'image dans le champ personnalisé "review_image", essayez d'obtenir l'image sélectionnée si ($ _ wptuts_review_image == ") if (has_post_thumbnail ()) $ get_wptuts_review_image = wp_get_attachment_image_src (get_post_thumbnail_id) ; $ _wptuts_review_image = $ get_wptuts_review_image [0]; autre $ _wptuts_review_image = 'http://placehold.it/150x200&text=No+Image'; // échapper à la sortie, uniquement dans le cas où $ allowed_html = array ('a '=> array (' href '=> array (),' title '=> array ()),' em '=> array (),' strong '=> array ()); $ _wptuts_review_name_output = wp_kses ($ _ wptuts_review_name [0], $ autorisé 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 = ' 
- Prénom: '. $ _ wptuts_review_name_output.'
- Année: '. $ _ wptuts_review_year_output.'
- Réalisateur: '. $ _ wptuts_review_director_output.'
- Écrivain: '. $ _ wptuts_review_writer_output.'
- Étoiles: '. $ _ wptuts_review_stars_output.'
- Genre: '. $ _ wptuts_review_genre_output.'
- Durée d'exécution: '. $ _ wptuts_review_runtime_output.'
- Scénario: '. $ _ wptuts_review_storyline_output.'
'; return $ output; Bien sûr, vous pouvez définir le style de votre boîte de commentaire comme vous le souhaitez. Si vous ne le souhaitez pas, vous pouvez utiliser le nôtre:
.review-box width: 550px; border: 1px solid #DDD; border-radius: 5px; margin: 10px; .review-box-image float: right; largeur: 150px; border: 10px solid #fff; border- width: 0 0 10px 10px; margin: 10px 10px 0 0; .review-box-list margin: 10px; padding: 0; style de liste: aucun; .review-box-list li margin-bottom: 5px ; padding-top: 5px; border-top: 1px solide #EEE; .review-box-list li: premier-enfant border-top: 0; .review-box-list li strong display: inline-block ; largeur: 75px;Si vous souhaitez placer la zone de révision à gauche ou à droite, n'oubliez pas d'ajouter le
float: gauche; (ou Flotter à droite;) déclaration pour .boîte à commentaires. Vous pouvez même le centrer en modifiant le marge: 10px; déclaration en marge: auto 10px;. Nous savons comment définir l’information, nous savons comment obtenir l’information… Il est temps que nous spectacle l'info! :)
Nous pouvons toujours ajouter la boîte automatiquement à la fin (ou au début) du message comme ceci:
fonction wptuts_review_box_add ($ content) $ review_box = wptuts_review_box (); // affiche la boîte à la fin de l'article: return $ content. $ review_box; // affiche la boîte au début de l'article: // return $ review_box. $ content; add_action ('the_content', 'wptuts_review_box_add'); Mais si nous voulons inclure la boîte à l'intérieur la poste? C'est là que ma partie préférée est utile: les codes courts!
Cette étape serait encore plus facile que la précédente, puisque nous avons effectivement fait tout le travail pour charger la zone de revue. Tout ce que nous avons à faire est d’appeler la fonction en tant que shortcode comme ceci:
add_shortcode ('reviewbox', 'wptuts_review_box'); Voici ce que vous obtiendrez si vous suivez les étapes ci-dessus exactement comme elles sont écrites:
Ces boîtes de commentaire pourraient être utilisées pour des tas de revues différentes telles que logiciels, sites Web, livres, émissions télévisées, etc. Ou, si vous pouvez faire preuve de créativité, vous pouvez même les utiliser dans des blogs réguliers juste pour s'amuser!
Pour bien comprendre le code et même l’améliorer, vous devriez lire quelques autres articles de Wptuts +:
Voulez-vous améliorer quelque chose ou avez-vous une idée? Partagez vos pensées avec nous en commentant ci-dessous.
