Accentsconagua

WordPress Débutant à maître, Partie 3

Code
Share

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 mettre en page nos articles de blog et styler les 'articles uniques' en fonction de la catégorie.

Aujourd'hui, nous allons nous concentrer sur la partie blog du thème. Nous allons coder la vue principale "blog", créer la barre latérale et terminer avec la vue "publication unique".

Aussi disponible dans cette série:

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

Aller à une section

  • Le blog
  •   - La boucle de WordPress
  •   - Coiffant
  • Barre latérale
  •   - Enregistrer la barre latérale
  •   - Afficher la barre latérale
  •   - Styliser la barre latérale
  •   - Couleur de la barre latérale
  • Affichage simple
  •   - Vérifier la catégorie de poste
  •   - Mise en page de blog unique
  • Résumé

Le blog

Le code pour la vue principale du blog sera assis à l'intérieur index.php. C’est la page qui affichera tous les articles de notre blog, avec des liens vers leur vue principale / unique, dans laquelle vous continuerez généralement l’article et permettant aux utilisateurs de commenter..

Vous trouverez ci-dessous un aperçu de la présentation de toutes les sections de blog, avec la barre latérale à droite:


Commençons. Dans index.php entrez le code suivant. Nous commençons par inclure notre page d’en-tête, puis nous créons notre div # mainarea qui, comme vous pouvez le voir dans la première image, tiendra les articles du blog (avec la barre latérale à droite).

Ajouter ce qui suit à style.css mettre en place #Zone principale avec les styles corrects:

 #mainarea float: left; rembourrage à droite: 30px; largeur: 690px;

La boucle de WordPress

Ensuite, nous allons commencer une boucle WordPress avec des critères personnalisés:

La première ligne nous permet d’utiliser la pagination dans la boucle WordPress - ie. Dire à la boucle d'inclure uniquement x postes, puis d'afficher un lien "Articles plus récents" vers le prochain lot. Le code vérifie si la page en cours demande une certaine page de pagination, sinon il affiche la première.

À l'intérieur query_posts () nous spécifions d'utiliser la pagination; et indiquez également la boucle pour exclure les publications de notre catégorie Portfolio (notez le symbole moins).

La prochaine étape est le code dans la boucle. Comme mentionné dans le jour 2, tout ce qui est dans la boucle sera exécuté pour chaque poste disponible..


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

Nous commençons par inclure chaque message dans sa propre division. Nous utilisons l identité() donner à chaque div un identifiant unique (au cas où vous auriez besoin de styler différemment un message spécifique); et nous avons également donné à chacun une classe de blogpost pour qu'il soit appelé.

Ensuite, le titre de l'article est généré à l'aide de le titre() et the_permalink () est utilisé pour inclure le lien vers le post complet.

À l'intérieur ul.meta est quelques informations supplémentaires pour le poste. la_catégorie () est utilisé pour afficher les noms des catégories auxquelles l'article est affecté (séparés par une virgule).

Nous faisons ensuite un lien vers les commentaires pour le post, en utilisant à nouveau the_permalink (), et commentaires_numéro () est utilisé pour afficher le nombre de commentaires pour le post.

le temps() fournit la date de publication de l'article. F jS est un code de date PHP pour 'Nom du mois' (J); "Date" (j) et le suffixe de date (c'est-à-dire "st", "nd", "rd" ou "th") (S).
Par exemple, cela produirait le 31 janvier. Vous pouvez aussi ajouter Y à la fin pour sortir l'année. Pour plus d'informations, voir le manuel PHP: date ().

Enfin, le contenu du corps de la publication est généré à l'aide de le contenu(). Un lien "Lire la suite" sera automatiquement ajouté à l'article si nécessaire.

Ensuite, nous fermons la boucle avec en attendant, et inclure les boutons de pagination pour parcourir les anciens / nouveaux messages (c’est là que notre $ paginé le code est utile) en utilisant le next_posts_link () et previous_posts_link () les fonctions:

Nous avons également inclus notre sidebar.php et footer.php des dossiers.

Coiffant

Prévisualisez la page de blog dans votre navigateur. J'ai déjà ajouté un article supplémentaire avec quelques exemples de données. L'image ci-dessous met en évidence ce que nous devons changer:


Jeter le suivant dans style.css. Nous ajoutons un peu de séparation entre chaque article de blog (.blogpost) et régler le ul.meta éléments à afficher en ligne. le .alignez à gauche, .aligner droit et .aligneur les classes sont également définies - ces classes sont utilisées par WordPress pour aligner les images et sont également utilisées dans notre pagination.

 .blogpost clear: both; marge inférieure: 45px; rembourrage en bas: 40px; débordement caché;  .singleblog débordement: masqué; ul.meta margin: 0 0 25px 0;  ul.meta li display: inline; famille de polices: Verdana, Arial, Helvetica, sans serif; taille de la police: 0.7em; hauteur de ligne: 1.3em; marge droite: 10px; padding-left: 12px; text-transform: majuscule;  ul.meta li: premier enfant border: aucun; rembourrage à gauche: 0;  .alignleft float: left; marge: 0 10px 8px 0;  .alignright float: right; marge: 0 0 8px 10px;  .aligncenter margin: 10px auto;

Dans deepblue.css ajoutez une bordure fine et légère entre chaque article de blog, une bordure pour séparer chaque élément de la liste meta et définissez le H2 sur # 333:

 .article de blog, .worksearch border-bottom: 1px solid # e8e3c8;  h2 a: lien, h2 a: visité color: # 333;  ul.meta li border-left: 1px solid # e3e8ed;

Barre latérale

La barre latérale se présentera comme suit et sera utilisée sur l’ensemble du site, à l’exception des pages de couverture et de portefeuille:


Enregistrer la barre latérale

Tout d'abord, nous devons enregistrer la zone du widget de la barre latérale. Cette opération est identique à celle de la page d'accueil. À l'intérieur functions.php et le code suivant entre les crochets pour if (function_exists ('register_sidebar')) après le tableau de la page d'accueil:

 register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
  • ',' after_widget '=>'
    • ',' before_title '=>'
    ',' after_title '=>'
    ',));

    En d'autres termes, cela devrait ressembler à ceci:

     if (function_exists ('register_sidebar')) register_sidebar (array ('name' => 'Homepage Bottom', 'before_widget' => '
    ',' after_widget '=>'
    ',' before_title '=>'
    ',' after_title '=>'
    ',)); register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
  • ',' after_widget '=>'
    • ',' before_title '=>'
    ',' after_title '=>'
    ',));

    Afficher la barre latérale

    Ensuite, rendez la barre latérale en ajoutant ce qui suit à sidebar.php:

    Et assurez-vous que la barre latérale se colle à droite de la page en fixant la largeur style.css:

     #sidebar float: left; largeur: 220px;  #sidebar ul margin: 0;  #sidebar ul li list-style: none; marge gauche: 0; marge inférieure: 25 px;

    À partir de votre tableau de bord, ajoutez des widgets à l'option "Barre latérale" et prévisualisez-la:



    Styliser la barre latérale

    Ajouter les styles suivants dans style.css pour créer une structure pour chaque widget de la barre latérale:

     li h3 taille de la police: 1.3em; hauteur de ligne: 1.4em; marge: 5px 0 5px 0;  / * Formulaire de recherche de la barre latérale * / #sidebar ul li # search margin-bottom: 25px;  .hidden display: none; #sidebar ul li # formulaire de recherche #s padding: 7px 29px 7px 7px; largeur: 182px;  #sidebar ul li # formulaire de recherche #searchsubmit display: none;  / * Listes de la barre latérale (p.ex. Meta, Archives, Catégories) * / #sidebar ul li ul padding: 15px 5px 15px 8px;  #sidebar ul li ul li list-style-position: outside; marge: 0 0 5 pixels 20 pixels;

    Couleur de la barre latérale

    Enregistrez les deux images ci-dessous sous le nom bullet.gif et search.png dans ton / styles / deepblue / dossier (les images ci-dessous ont été redimensionnées, mais seront correctes une fois enregistrées):

    Ajouter ce qui suit à deepblue.css. Nous utilisons les deux images sur leurs éléments respectifs et définissons des couleurs d'arrière-plan et de bordure pour les éléments de widget..

     #sidebar ul li # formulaire de recherche #s background: url ("deepblue / search.png") no-repeat right # f6f6ec; bordure: 1px solide # E8E3C8;  #sidebar ul li # formulaire de recherche #s: focus border: 1px solid # dad4b6;  #sidebar ul li ul couleur d'arrière-plan: # f6f6ec; bordure: 1px solide # E8E3C8;  #sidebar ul li ul li list-style: url ("deepblue / bullet.gif");  #sidebar ul li a: lien, #sidebar ul li a: visité color: # 333;

    Affichage simple

    WordPress utilise le single.php fichier pour afficher un seul post - c'est à dire. l’ensemble du message, où les visiteurs peuvent poster des commentaires, etc. Cependant, étant donné que nous affichons deux types différents de messages: les éléments de portefeuille et les articles de blog, ils nécessitent tous deux leur propre mise en page sur la page du message. Nous devons donc différencier les éléments suivants: leur.

    Vérifier la catégorie de poste

    Créer un single.php fichier et ajoutez le code suivant:

     poster; if (in_category ("$ ts_portfolio_cat")) / * Est un élément du portefeuille * / require ('single-portfolio.php');  else / * Est un article de blog * / require ('single-blog.php'); ?>

    Nous utilisons WordPress ' in_category () fonction permettant de vérifier si le message à afficher est affecté à la catégorie Portfolio. Si tel est le cas, nous avons besoin du single-portfolio.php fichier.
    Si ce n’est pas dans la catégorie Portfolio, alors single-blog.php est utilisé.

    Aujourd’hui, nous ne créerons que le single-blog.php fichier. La page de portefeuille unique sera créée dans la prochaine partie de la série.

    Mise en page de blog unique

      
      
     
     
       
      •  
    • #comments "> 
      •  
      •

    Vous remarquerez que cela ressemble beaucoup au code que nous avons utilisé dans index.php, mais à quelques exceptions près:

    1. Nous utilisons if (have_posts ()) au lieu de query_posts (). Ceci est la boucle WordPress par défaut.
    2. Nous avons inclus la zone de commentaires en utilisant commentaires_template ().

    Sur votre blog, cliquez sur un article et vous devriez être redirigé vers la page d'article unique. Vous pouvez également voir que la zone de commentaires par défaut a été incluse automatiquement car nous n’avons pas encore créé notre propre.
    Nous allons créer un modèle de commentaires personnalisé dans la cinquième partie.

    Résumé

    Revenez demain lorsque nous créerons nos pages Portfolio. (Partie 4)

    Code
    ×