Fermer

novembre 21, 2018

Comment construire un thème WordPress à partir de zéro: Étapes finales –14 minutes de lecture



Dans cet article, nous complétons notre incursion dans la création d'un thème WordPress en partant de zéro, en nous concentrant sur le raffinement de nos modèles, l'ajout d'informations méta, des miniatures de messages, des barres latérales, des commandes conviviales et plus encore.

et dernière partie de la série WordPress sur la construction d’un thème WordPress. Partie 1 a introduit le thème WordPress et, dans la partie 2, nous avons construit un thème de base . Nous avons utilisé le modèle Clean Blog de StartBootstrap pour ajouter du style à notre thème WordPress. Le code que nous avons écrit jusqu'à présent est disponible sur GitHub .

Nous avons ajouté les archives single.php page.php . Les modèles php et index.php jusqu'à présent, mais nous avons laissé la tâche de les finaliser à cette partie de la tâche. Nous avons introduit le fichier functions.php – un fichier utilisé par WordPress pour inclure automatiquement des fonctionnalités propres à notre thème, et nous y avons ajouté des fonctions. Nous avons ajouté une fonction d'en-tête dynamique à notre header.php et nous l'avons séparée dans notre functions.php . Idéalement, cela devrait être organisé dans un fichier séparé – peut-être dans un dossier inc de notre thème – afin de garder les choses propres.

Dans la partie 2, nous avons également introduit les partiels – footer.php [ et header.php .

Raffinage des modèles

Dans l'article précédent, nous avons séparé notre balise – la première – dans header.php et nous y avons ajouté . Cela ajoute quelques classes sémantiques au corps qui nous indiquent si nous sommes sur une page si nous sommes connectés ou non, et ainsi de suite. on - nous permet de styler différents éléments de notre site Web en fonction des pages visitées, etc.

Si nous visitons la page d'accueil et ouvrons la console du navigateur pour inspecter ces classes, nous verrons que les informations de modèle actuelles ne sont pas disponibles. parmi ces classes:

 Inspection des classes dans la console du navigateur

Pour pouvoir modifier les éléments affichés par WordPress, nous devons savoir quel fichier est utilisé. Dans notre cas, index.php est utilisé comme modèle de secours par défaut. Cette infographie montre la hiérarchie des modèles utilisés. Cela peut s'avérer très utile pour remplacer ou créer des thèmes.

Dans l'article précédent, nous avons commencé à affiner la boucle archive.php en ajoutant des métadonnées et en affichant des vignettes dans les articles générés. Nous allons séparer cette boucle dans un fichier séparé, l'inclure dans archive.php et index.php et finir de l'affiner.

Dans un premier temps, nous allons remplacer le contenu. dans les deux fichiers entre tandis que et à la fin de avec une seule ligne demandant le fichier partiel, ainsi index.php ressemblera à quelque chose comme ceci :



    


Ensuite, nous placerons le contenu que nous avons remplacé dans archive.php dans le fichier partials / content.php :

 <div  id = "post- ">

    <? php     if (is_singular ()):         the_title ('

', '

');     autre :         the_title ('

', '

');     fin si;     if ('post' === get_post_type ()):         ?>         
<a class="post-thumbnail" href="" aria-hidden="true" tabindex="-1">             

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:

. liens date et 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)::

 L'extrait flotte autour de l'image

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' => '',
        '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' => '',         '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:

 Les différentes barres latérales

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 résultat du remplissage des zones de widgets

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 .

Une fois nos paramètres et contrôles ajoutés, nous avons ajouté nos fonctions. php nous ajoutons le code suivant au bas de la fonction bsimple_scripts () créée pour mettre en file d'attente nos scripts et nos styles:

 $ css = '';
$ home_header_bg_image = get_theme_mod ('home_header_bg_img', get_stylesheet_directory_uri (). '/images/basic_header_bg.jpg');
$ frontpage_header_bg_image = get_theme_mod ('frontpage_header_bg_img', get_stylesheet_directory_uri (). '/images/basic_header_bg.jpg');
$ global_header_bg_image = get_theme_mod ('global_header_bg_img', get_stylesheet_directory_uri (). '/images/basic_header_bg.jpg');

$ css. = (! empty ($ home_header_bg_image))? sprintf ('
# main_header.phome {
    fond: url (% s) centre sans répétition;
}
', $ home_header_bg_image):' ';

$ css. = (! empty ($ frontpage_header_bg_image))? sprintf ('
# main_header.pfront {
    fond: url (% s) centre sans répétition;
}
', $ frontpage_header_bg_image):' ';

$ css. = (! empty ($ global_header_bg_image))? sprintf ('
# main_header.pglobal {
    fond: url (% s) centre sans répétition;
}
', $ global_header_bg_image):' ';

si ($ css) {
    wp_add_inline_style ("bsimple-style", $ css);
}

Nous avons ajouté les classes phome pfront et pglobal à nos conteneurs d’entête. Nous utilisons maintenant les éléments wp_add_inline_style () et le style bsimple que nous utilisions pour mettre en file d'attente notre style de thème de base au début – pour afficher les paramètres de personnalisation que nous venons de créer. Nous utilisons get_theme_mod () pour obtenir chaque paramètre enregistré.

Ainsi, nous pouvons définir des images pour les en-têtes que nous avons séparés dans la fonction dynamic_header () dans . partie 2 du guide:

 if (! function_exists ('dynamic_header')) {

function dynamic_header () {

    global $ post;

    ?>

    

        

Pages uniques et publications

La hiérarchie des modèles WordPress nous permet de cibler l’URL exacte et la publication chargée lors de la visite, de sorte que nous puissions concevoir de manière atomique la sortie HTML pour chacune d’elles. Souvent, nous n’avons pas besoin de créer tous les modèles.

Ajouter une image d’arrière-plan générique à tous les articles ou toutes les pages n’aurait pas beaucoup de sens. Ainsi, notre stratégie Customizer fonctionnera pour les archives, pour la liste des articles sur le blog, pour la page d'accueil et même pour les termes. Mais pour des pages et des messages spécifiques, nous voudrons probablement définir les images individuellement.

Comment procéder

Dans notre fonction dynamic_header () nous avons repéré l'en-tête de pages nous allons donc utiliser un style en ligne et la fonction get_the_post_thumbnail_url () pour définir le fond d'écran de la page comme arrière-plan:

 

    <header class = "mthead ppage" id = "main_header" style = "background-image: url ()">
        

ID, "subtitle_", true)??>                     
                
            
        
    

L'utilisateur peut maintenant définir une image d'en-tête pour chaque page. Nous pouvons faire la même chose pour le cas is_single () qui appliquera la même solution pour tous les messages – y compris les types d'articles personnalisés.

Cette ligne permettra aux utilisateurs d'ajouter un champ personnalisé à chaque page. , nommé subtitle_ et sera envoyé à l'en-tête de page:

   ID, "subtitle_", true);?> 

 Ajout d'un champ personnalisé à chaque page

Si nous ne voyons pas la section Champs personnalisés, nous pouvons l'activer dans les options d'écran dans le coin supérieur droit de l'écran d'édition:

 Activation des champs personnalisés

Ensuite, notre champ méta subtitle_ apparaît sous le titre de la page:

 Le champ meta de subtitle_ est affiché en dessous du titre de la page

Toutes ces choses et styles peuvent également être appliqués aux messages de .

Nous devons maintenant formater la sortie en single.php et page.php également

En raison des contraintes d'espace de ce guide, nous allons créer le contenu que nous allons utiliser dans ces deux modèles, mais la structure permettra aux lecteurs d'adapter et de personnaliser ces modèles plus précisément si nécessaire:

 

    

Nous utilisons ici une disposition à une colonne, largeur 10/12, centrée avec la classe mx-auto . Nous utilisons le partiel content-single.php pour afficher le contenu réel.

Dans ce partiel, nous utilisons le_content () et wp_link_pages () :

 


Nous avons maintenant le minimum de base pour les pages individuelles et les publications, mais vous pouvez en ajouter d'autres à l'aide de fonctions WordPress. Nous pouvons spécifier automatiquement les détails que nous souhaitons que WordPress apparaisse dans un seul post, une seule page et des pages appartenant à des catégories spécifiques, etc.

Nous avons créé trois zones de widget (barre latérale) pour notre pied de page et nous avons ajouté le résultat à footer.php . Nous avons également ajouté une section – ou zone de widget – juste au-dessus de la balise footer . Ces widgets ne sont pas spécifiques à la page d'accueil, aux pages ou aux archives, mais ils sont plutôt globaux. Une fois que nous leur avons assigné des widgets, ils s'afficheront sur l'ensemble du site:

 

    
     
          
       
        
    
      
     
     
     
      
    
  

Nous obtenons un simple fond et pied de page que nous pouvons renseigner avec des widgets:

 Le pied de page

Nous avons maintenant un thème minimal mais fonctionnel que nous pouvons utiliser pour afficher du contenu. ] Ce guide s’arrête là, mais un créateur de thème potentiel peut également souhaiter s’assurer que tous les cas d’utilisation sont couverts et que le thème est complet. pour ce faire, installez le thème Plugin entre autres outils, pour inspecter ce qui manque à notre thème et pour vous assurer que tout est conforme aux normes:

 Exemple de sortie du plugin Theme Check

Conclusion

Ce guide a pour objectif d'être une introduction approfondie à la construction de thèmes WordPress. J'espère qu'il a introduit tous les concepts fondamentaux de la création de thèmes WordPress et a montré comment ils se combinent.

Mais il reste encore des choses à apprendre – comme des commentaires partiels, des modèles d'auteur, 404 pages et de nombreux autres petits détails qui devraient être couverts si nous le souhaitions. pour aller plus professionnel avec ce thème.

Le code initial de cette série est disponible sur GitHub ici et la version finale du thème que nous avons construit dans ce guide est disponible ici .

Sur ces fondations, il est possible de construire beaucoup plus, avec l’aide de la complète WordPress Codex .


Cette série comporte trois articles sur la construction d’un thème WordPress à partir de rien:




Source link

Revenir vers le haut