Une fois ces modifications téléchargées sur le serveur, nous verrons que notre page d'accueil contient désormais des méta-informations dans chaque publication de la liste des publications - liens de date et d'auteur:

Cela signifie que nos oeuvres partielles.

Posts Miniatures

Nous pouvons voir qu’aucun de nos faux posts n’a d’image en général, et aucun image en vedette Plus précisément. Si nous consultons le tableau de bord WordPress et essayons d’ajouter l’image sélectionnée à notre publication / page, nous verrons qu’il n’ya pas de champ de téléchargement de fichier dans la barre latérale la plus à droite. (Pour ceux qui ne connaissent pas WordPress, vous pouvez en savoir plus sur cette fonctionnalité ici .)

Les miniatures de publication ne sont pas activées par défaut dans les thèmes WordPress. C’est une fonctionnalité qui doit être activée spécifiquement dans les nouveaux thèmes.

Pour ce faire, nous incluons la ligne add_theme_support ('post-thumbnails'); la ligne à notre function.php .

Désormais, les vignettes sont activées. .

Nous pouvons maintenant vider notre installation WordPress de tout le contenu en utilisant la commande wp-cli wp site empty --allow-root (ou nous pouvons le faire manuellement à partir de le tableau de bord WordPress) et le repeupler avec FakerPress. Il doit remplir les publications et les pages avec les images en vedette qu’il récupère sur Internet. (Nous devrons recréer le menu principal comme avant et attribuer des pages et des publications.)

Un conseil: si nous construisons des thèmes à vendre, ou plus généralement des thèmes qui seront diffusés à un public plus large, nous peut vouloir utiliser les données de test d'unité de thème fournies par Automattic, car elles peuvent fournir du contenu permettant de tester un plus grand nombre de cas et de détails de thème.

Nous pouvons spécifier la taille des images à FakerPress, mais ce sera toujours le cas les probabilités donnent toujours un aspect désordonné

Lorsque nous construisons un thème, l’une des techniques utilisées pour obtenir un aspect raffiné et normalisé consiste à spécifier la taille des vignettes . Ce sont des tailles standard WordPress redimensionnera toutes les images téléchargées pour les adapter. Nous allons utiliser la fonction WordPress add_image_size () pour ajouter plusieurs tailles d’image que notre thème utilisera:

 add_image_size ('list-thumb-1', 730, 400, true);
add_image_size ('small-list-thumb-1', 400, 200, true);
add_image_size ('small-list-thumb-2', 300, 200, true);
add_image_size ('small-list-thumb-3', 220, 140, true);

Ensuite, nous générerons l'une des images formatées en utilisant the_post_thumbnail () dans notre content.php :

 <a class = "post-thumbnail" href = "" aria-hidden = "true" tabindex = "- 1">
    

Pour obtenir un extrait bien formaté dans nos archives ou notre liste de blogs, nous allons augmenter la taille de la police. Pour ce faire, nous allons réduire le nombre de mots produits par the_excerpt (). :

 # functions.php
fonction custom_excerpt_length ($ length) {
    retourne 40;
}
add_filter ('excerpt_length', 'custom_excerpt_length', 999);

Pour pouvoir faire flotter image (miniature que nous venons de mentionner) et extrait, nous ajoutons ce qui suit au sélecteur d'élément parent dans notre css:

 .home .post-preview.post {
    débordement caché;
}

(Nous ne couvrons pas ici les ajustements de style plus petits qui ne sont pas cruciaux pour le thème lui-même.)

Nous pouvons maintenant augmenter la taille de la police et faire en sorte que l'extrait flotte autour de l'image en le faisant glisser (avec le un élément parent)::

Nous utiliserons également post_thumbnails plus tard, à l'unité /pages.

Theme Sidebars sont des zones sous forme de widget dans le thème. Ils doivent être enregistrés dans le système WordPress afin que nous puissions placer différents widgets dans ces zones. Une fois que nous avons fait cela, nous imprimons ou produisons ces widgets dans nos fichiers de modèle.

Nous allons enregistrer un certain nombre de barres latérales dans notre thème, que vous pouvez voir dans le référentiel GitHub du thème . . Nous faisons cela en ajoutant le code suivant à notre functions.php :

 // Enregistrer les barres de menu personnalisées
fonction sidebar_register () {

    $ args = array (
        'name' => __ ('home_header', 'bsimple'),
        'description' => __ ('home_header', 'bsimple'),
        'id' => 'h_h',
        'class' => 'home_header',
        'before_widget' => '
',
        'after_widget' => '
',
        'before_title' => '
',
        'after_title' => '
',
    )
    register_sidebar ($ args);

    $ args = array (
        'name' => __ ('archive_sidebar_1', 'bsimple'),
        'description' => __ ('Archive Sidebar no 1', 'bsimple'),
        'id' => 'a_s_1',
        'class' => 'archive_sidebar_1',
        'before_widget' => '
',
        'after_widget' => '
',
        'before_title' => '
',
        'after_title' => '
',
    )
    register_sidebar ($ args);

    $ args = array (
        'name' => __ ('bottom_center_sidebar', 'bsimple'),
        'description' => __ ('Barre latérale inférieure centrale', 'bsimple'),
        'id' => 'b_c_s',
        'class' => 'bottom_center_sidebar',
        'before_widget' => '
',
        'after_widget' => '
',
        'before_title' => '
',
        'after_title' => '
',
    )
    register_sidebar ($ args);

}
add_action ('widgets_init', 'sidebar_register');

Nous montrons ici comment enregistrer deux barres latérales. Vous trouverez plus de détails sur la fonction register_sidebar () à l'adresse sur wordpress.org .

Nous enregistrons onze encadrés, mais nous n'avons pas besoin de les afficher tous dans la page. modèles ou emplacements de sites Web. S'ils sont générés dans la page actuellement personnalisée, ils sont accessibles dans le Customizer sous les widgets:

Voici un exemple de sortie réelle de encadré ou zone de widget dans le footer.php - ce qui signifie qu'il peut être affiché de manière globale:

Nous utilisons ici un identifiant de barre latérale utilisé dans la fonction register_sidebar pour la fonction bottom_center_sidebar ci-dessus.

Nous avons également conditionné la largeur du conteneur de contenu central sur la page d'accueil dépendante. sur l'existence ou non de barres latérales avec des widgets actifs ( is_active_sidebar () ):

 # index.php

        
            

        
            

        


            

        

            
                


            

            
            
            

    

Nous produisons des classes Bootstrap en fonction de ces conditions, en nous assurant que le thème ne sera pas vide si nous omettons de configurer des widgets pour des pages telles que home .

Après avoir rempli ces zones de widgets et images, voici ce que nous obtenons:

Le thème se développe bien. Les lecteurs adapteront bien sûr le style à leur goût.

API Customizer

Lorsque nous parlons de style, nous mentionnons l'API du customizer et montrons comment l'utiliser pour permettre un contrôle convivial du fond. images pour les en-têtes.

Voici un exemple de la manière dont nous créons le nouveau panneau la section et le contrôle de notre thème ( functions.php à nouveau):

fonction register_customizer_controls ($ wp_customize) {
    // Créer un panneau personnalisé.
    $ wp_customize-> add_panel ('basic_stylings', array (
        'priorité' => 70,
        'theme_supports' => '',
        'title' => __ ('Basic Stylings', 'bsimple'),
        'description' => __ ('Définir les en-têtes du site principal.', 'bsimple'),
    ));


    // Ajouter une section
    $ wp_customize-> add_section ('frontpage_settings', array (
        'title' => __ ('Frontpage Settings', 'bsimple'),
        'panel' => 'basic_stylings',
        'priorité' => 20,
    ));


    // Ajouter un paramètre.
    $ wp_customize-> add_setting ('frontpage_header_bg_img', array (
        'default' => get_stylesheet_directory_uri (). '/images/basic_header_bg.jpg',
    ));

    // Ajouter un contrôle.
    $ wp_customize-> add_control (new WP_Customize_Image_Control (
        $ wp_customize, 'frontpage_background_image', array (
              'label' => __ ('Add Home Header Background Image Ici, la largeur doit être d'environ 1900px', 'bsimple'),
              'section' => 'frontpage_settings',
              'settings' => 'frontpage_header_bg_img',
              )
    ));

}

add_action ('personnaliser_enregistrement', 'register_customizer_controls');

La chose principale ici est le personnaliser_register crochet et l'ordre de $ wp_customize méthodes ( add_panel add_section ] add_setting add_control . L'ordre est important. Le codex WordPress dispose d'une référence détaillée de l'API Customizer .