WordPress Débutant à maîtriser, Partie 5

Tout au long de cette série en six parties, du débutant au maître, nous utiliserons les fonctionnalités avancées de WordPress pour créer notre propre portfolio et blog, avec une page d'options, plusieurs styles et la prise en charge des nouvelles fonctionnalités de WordPress 2.7. Aujourd'hui, nous allons traiter des commentaires, de la recherche et des archives.

Cette partie concerne principalement la correction des parties supplémentaires que nous n’avons pas encore eues. Dans la première section, nous créons le modèle Commentaires - avec prise en charge des nouvelles fonctionnalités de WP 2.7, tout en prenant en charge les versions plus anciennes..

Dans la deuxième section, nous créons les modèles d’archive et de recherche..

Aussi disponible dans cette série:

WordPress: Débutant à maîtriser, 1ère partie
WordPress: Débutant à maîtriser, partie 2
WordPress: Débutant à maître, Partie 3
WordPress: Débutant à maître, Partie 4
WordPress: Débutant à maîtriser, Partie 5
WordPress: Débutant à maître, Partie 6

Aller à une section

commentaires
- Commentaires pour WP 2.7+
- Commentaires de style
- Commentaires pour WP 2.6-
Les archives
- formulaire de recherche
Page de résultats de recherche
Résumé

commentaires

WordPress 2.7 introduit plusieurs nouvelles fonctionnalités pour la section commentaires, y compris commentaires filetés, commentaires paginés, styles alternés et code simplifié. Cependant, ces fonctions ne fonctionneront pas correctement dans les anciennes versions de WordPress. Pour lutter contre cela, nous utiliserons un filtre WordPress afin que les anciennes versions utilisent un fichier de commentaires et les versions plus récentes, un autre..

Commentaires filetés dans WP 2.7

Ajoutez le code suivant au bas de functions.php:

 // Si vous utilisez 2.6 ou des versions antérieures, utilisez les commentaires hérités display add_filter ('comments_template', 'legacy_comments'); function legacy_comments ($ file) if (! function_exists ('wp_list_comments')) $ $ file = TEMPLATEPATH. '/comments.legacy.php'; retourne le fichier $;

le wp_list_comments () la fonction est une nouvelle addition à WordPress 2.7; donc nous vérifions s'il existe en utilisant le function_exists () Fonction PHP. Si ce n'est pas le cas, un filtre WordPress est ajouté pour rediriger vers le comments.legacy.php fichier lorsque le modèle de commentaires est demandé.
Toutes les nouvelles versions de WordPress continueront donc à utiliser commentaires.php (puisqu'ils contiennent le wp_list_comments () une fonction.)

Commentaires pour WP 2.7+

Créer un nouveau fichier nommé commentaires.php. À l'intérieur, commencez par:

Si des commentaires sont attribués au message en cours, le nombre de commentaires est publié dans une balise de titre à l'aide de la touche commentaires_numéro () une fonction. Les commentaires sont ensuite affichés dans une liste ordonnée à l'aide du nouveau wp_list_comments () une fonction.
Chaque commentaire sera affiché à l'aide d'un modèle intégré facile à styler de différentes manières. Toutefois, si vous avez besoin de plus de contrôle sur l'apparence de chaque commentaire, reportez-vous à cette page sur le codex WordPress.

Les balises de navigation dans les commentaires sont également nouvelles dans la version 2.7 et permettent la "pagination" entre un nombre défini de commentaires (comme vous le faites entre les articles de blog)..

Dans le code suivant, un message est affiché si les commentaires sont fermés pour le message:

 comment_status): // Si les commentaires sont ouverts, mais qu'il n'y en a pas. sinon: echo "Les commentaires sont fermés sur ce post.
"; endif; endif;?>

La tâche suivante consiste à afficher le formulaire de commentaire actuel:

 comment_status):?>  
   
  Vous devez être /wp-login.php?redirect_to="> connecté pour poster un commentaire.

Si les commentaires doivent être ouverts, un titre "Laisser une réponse" est affiché à l'aide du nouveau comment_form_title () une fonction. Si l'utilisateur répond à un commentaire, le % s dans 'Laisser une réponse à% s' est remplacé par le nom d'auteur du commentaire auquel ils répondent.
Un lien d'annulation de réponse est également affiché s'il s'agit d'une réponse utilisant cancel_comment_reply_link ().
Enfin, si seuls les utilisateurs connectés peuvent commenter (et que l'utilisateur n'est pas connecté), un message d'erreur indiquant la page de connexion s'affiche..

Si l'inscription n'est pas requise (ou si l'utilisateur est connecté):

   Connecté en tant que /wp-admin/profile.php "> . "title =" Déconnexion de ce compte "> Déconnexion»
  Prénom: 
 Email: 
 Site Internet:

Le formulaire de commentaire est ouvert. Si l'utilisateur est connecté, un message "Connecté en tant que… Déconnexion?" le message est affiché - sinon les champs 'Nom', 'Email' et 'Site Web' sont affichés.

Enfin, les boutons 'Message' et Envoyer sont affichés, le formulaire est fermé et le bouton si déclarations fermées:

 Commentaire: 
     
 ID); ?>

comment_id_fields () affiche l'identifiant de la publication en cours dans un champ caché. Dans WP 2.6, vous deviez le créer manuellement, mais il est maintenant nécessaire d'utiliser cette fonction..

Dans le tableau de bord, accédez à Paramètres -> Discussion et cochez les options "Activer les commentaires filetés" et "Scinder les commentaires en pages". Puis prévisualisez le modèle de commentaire en accédant à n’importe quel article de blog:

Commentaires de style

Ajouter à style.css:

 / * Commentaires * / h4 # commentaires clear: both; marge: 45px 0 5px 0;  .commentlist li font-size: inherit;  .commentlist li .avatar float: right;  .commentlist cite font-weight: bold; style de police: normal; taille de police: 0.95em;  .commentlist p font-size: 0.8em; poids de police: normal; hauteur de ligne: 1.5em; marge: 10px 5px 10px 0; transformation de texte: aucune;  .commentmetadata display: block; taille de police: 0.8em; poids de police: normal; hauteur de ligne: 1.1em; marge: 0;  .commentlist .reply font-size: 0.8em; poids de police: gras;  .commentlist margin: 0 0 20px 0;  .commentlist li margin: 15px 0 10px; rembourrage: 10px; style de liste: aucun;  .commentlist li ul li marge-droite: -5px; marge gauche: 10px;  .comms-navigation, .navigation clear: les deux; bloc de visualisation; marge inférieure: 20 px; débordement caché;  .children padding: 0;  .nocomments text-align: center; marge: 0; rembourrage: 0;  / * Formulaire de commentaire * / #pond h4 clear: both; marge: 45px 0 10px 0;  forme p padding-bottom: 10px; marge: 5px 0;  form p label display: inline-block; marge droite: 10px; text-align: right; largeur: 5em;  form p label [for = "comment"] vertical-align: top;  input, textarea padding: 3px;  textarea font-family: Arial, Helvetica, sans-serif; taille de police: 0.9em; débordement: auto;  input # submit padding: 5px 3px;

Et ce qui suit dans deepblue.css:

 / * Liste des commentaires * / .commentlist li .avatar border: 2px solid # f2e9ea;  .commentlist cite a: link, .commentlist cite a: visited color: # 333;  .commentlist .commentmetadata a: lien: premier-enfant, .commentlist .commentmetadata a: visité: premier-enfant color: # 333;  .thread-alt background-color: # F6F6EC;  .thread-even background-color: # F9F9F3;  .depth-1 border: 1px solid # E8E3C8;  .even, .alt border-left: 1px solid # E8E3C8;  input, textarea background-color: # F6F6EC; bordure: 1px solide # E8E3C8;  entrée: focus, zone de texte: focus border: 1px solid # dad4b6;

Notez que 2.7 ajoute automatiquement des noms de classe spéciaux comme alt, même, les enfants, bypostauthor, thread-alt, fil-même etc., si nécessaire, pour permettre à tous les autres commentaires de styler une couleur différente d'augmenter la lisibilité dans les longs fils. Voir le Codex WordPress pour plus d'informations à ce sujet.

À l'intérieur header.php, directement avant insérer:

Cela charge un fichier Javascript intégré qui peut "déplacer" le formulaire de commentaire lorsque vous cliquez sur un lien de réponse - la page n'a donc pas besoin de recharger:

Cliquez sur 'Répondre' et le formulaire se déplacera à votre position actuelle:

Commentaires pour WP 2.6

Je ne vais pas expliquer ce code car il est obsolète et n'est inclus que pour les quelques personnes qui n'utilisent pas WP 2.7. Mais j'ai ajouté dans un compteur $ donc les commentaires alternés peuvent être coiffés différemment, comme ils le sont dans 2.7.

Créer un nouveau fichier nommé comments.legacy.php et copier dans le code suivant. Si vous utilisez WP 2.6, la présentation sera exactement la même que dans 2.7 si threaded-comments est désactivé.

 post_password)) // s'il existe un mot de passe if ($ _COOKIE ['wp-postpass_'. COOKIEHASH]! = $ post-> post_password) // et s'il ne correspond pas au cookie?> Cet article est protégé par mot de passe. Entrer le mot de passe pour voir les commentaires.
    
        dit: 
  #commentaire-">  
 comment_approved == '0'): echo 'Votre commentaire est en attente de modération.'; fin si; ?> 
 
  
 comment_status):?>    Les commentaires sont fermés.
  comment_status):?> Laisser une réponse
  Vous devez être /wp-login.php?redirect_to="> connecté pour poster un commentaire.
    Connecté en tant que /wp-admin/profile.php ">. /wp-login.php?action=logout "title =" Déconnexion de ce compte "> Déconnexion»
  Prénom: 
 Email: 
 Site Internet: 
  Commentaire: 
     
 ID); ?>

Téléchargez les fichiers source de cet article si vous voulez que ce fichier soit correctement espacé et formaté afin de le rendre plus facile à modifier..

Les commentaires s'affichent dans WP 2.6 ou inférieur

Remarque: Si vous souhaitez en savoir plus sur l’ancienne boucle de commentaires, consultez la rubrique "Expliquer les secrets du fichier Comments.php de WordPress" par Gilles Maes.

Les archives

le archive.php Le modèle est utilisé pour afficher n'importe quel type d'archive pour le blog - par exemple. catégories, mois, tags, etc..

Créer un nouveau fichier nommé archive.php et commencez par ce qui suit:

 '; ?>

Comme vous pouvez le constater, si l’archive concerne la catégorie Portfolio, la page charge le page-portfolio.php modèle. sortie; garantit que plus aucun code n'est exécuté après cette ligne si le modèle de portefeuille est utilisé.
Suivant:

  Archive pour le' Catégorie
  Articles étiquetés '"
  Une archive pour 
  Une archive pour 
  Une archive pour 
  Archive de l'auteur
  archives du blog

Chaque section affichera un titre légèrement différent en fonction de l'objectif de l'archive. Par exemple, s'il s'agit d'une archive pour la catégorie "Général", le titre dirait "Archives pour la catégorie" Général "; ou une archive mensuelle pour janvier 2009 serait "Archives pour janvier 2008".
Sur la dernière ligne, la boucle est ouverte.

#comments ">

Le code ci-dessus est le code normal d'un article de blog (comme nous l'avons utilisé plusieurs fois sur la page du blog, sur des pages simples, etc.). Sur la dernière ligne, la boucle est fermée..
Si l'archive n'existe pas:

 # L'archive n'existe pas: else: get_header (); ?>  Pas trouvé

Un simple en-tête 'Not Found' est affiché et le searchform.php le fichier est inclus (que nous créerons ensuite). Vous devriez probablement inclure plus d’informations sur cette page pour la rendre plus conviviale..

Enfin, incluez les liens de pagination, la barre latérale et le pied de page:

Essayez maintenant votre page d’archives en cliquant sur l’un des liens du widget Catégorie / Archives / Balises. Mais si vous accédez à une archive qui n’existe pas (par exemple un ID de catégorie qui n’existe pas), la page d’erreur suivante vous searchform.php le fichier n'existe pas.

formulaire de recherche

Ce fichier ne pouvait vraiment pas être plus simple - juste un formulaire de recherche. Ajouter ce qui suit dans un nouveau fichier nommé searchform.php:

Essayez à nouveau de consulter une archive inexistante et le formulaire de recherche s'affichera. Il utilise le même style que celui utilisé dans le formulaire de recherche de la barre latérale, de sorte qu'aucun style supplémentaire n'est requis..

Page de résultats de recherche

Le fichier de modèle final requis est search.php qui affiche les résultats d'une recherche. Pour la plupart, il s’agit d’une boucle ordinaire. Toutefois, étant donné que les éléments de portefeuille peuvent apparaître dans les résultats, ils doivent être affichés différemment des articles de blog..

Créer le search.php déposer et commencer par ce qui suit:

    Résultats de la recherche

La boucle est ouverte, puis est un si instruction pour afficher un élément de portefeuille:

 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)";?>

Si le message récupéré provient de la catégorie de portfolio, le message sera affiché en utilisant la présentation ci-dessus - pour qu'il corresponde aux éléments du portefeuille. Autrement…

    "title =" Continuer la lecture """>  
  
 #comments ">

La mise en page normale du blog est utilisée.
Enfin, un message d'erreur avec un formulaire de recherche s'affiche si aucun résultat n'a été renvoyé, les balises de pagination sont utilisées et les fichiers de la barre latérale et du pied de page inclus:

  Aucun article trouvé. Essayez une autre recherche?

Ajoutez simplement le CSS suivant dans style.css et nous avons fini ici:

 .travauxrecherche clair: les deux; marge: 0 0 45 px 0; remplissage: 0 0 40px 0; largeur: 690px;

Résumé

Demain est le dernier jour de la série. (Partie 6) Nous allons régler quelques bugs avec le diable (IE6) et terminer la série en créant le RedSpace jeu de couleurs pour l'innovation!!

Code