Comment ajouter des widgets WordPress ?Intégration du thème Zone Widgets

Fonctionnalités de menu personnalisées et widgets de la barre latérale, ouiOutils de gestionCaractéristiques en vedette dans le thème.

• Faire un thème, s'il n'inclut pas ces deux fonctions, c'est comme une côte de poulet...

Chen WeiliangAvant quecréer un site WebDans ce tutoriel, je partage comment donner un thème WordPressAjouter un menu personnalisé.

Cet article décrit comment ajouter des fonctions de widget personnalisées lors de la création d'un thème.

Tout comme l'ajout de menus personnalisés aux thèmes, l'ajout de widgets personnalisés ne prend que 3 étapes.

La première étape, l'enregistrement du gadget

Pour utiliser le widget, vous devez d'abord vous inscrire, ouvrir le fichier functions.php sous le thème WordPress,

Dans le fichier functions.php, ajoutez le code suivant :

<?php

//侧边栏小工具
if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
        'name' => __( 'Top Sidebar' ),
        'id' => 'top-sidebar',
        'description' => __( 'The top sidebar' ),
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

?>

Modifiez les balises li et h2 dans functions.php pour qu'elles correspondent aux balises dans sidebar.php :

Les titres li et module h2 de 'before_widget' et 'after_widget' modifient le code en fonction de la situation réelle.

(peut-être sans modification)

        'before_widget' => '<li>',
        'after_widget' => '</li>',

        'before_title' => '<h2>',
        'after_title' => '</h2>',

Le code ci-dessus enregistre une zone de widget nommée "top-sidebar":

• Le nom affiché est "Top Sidebar".
• Ajoutez une balise h2 au titre.
• Les éléments de contenu sont balisés avec li.

Connectez-vousMoteur WordPressTableau de bord, allez dans Apparence → Widgets.

Si vous pouvez voir la zone du widget Top Sidebar sur le côté droit de l'image ci-dessous, cela signifie que l'enregistrement est réussi ▼

La deuxième étape, l'appel gadget

Une fois le gadget enregistré, il peut être appelé dans le fichier de modèle de thème et le code suivant peut être appelé dans le fichier sidebar.php.

1) Dans le fichier sidebar.php, sous la plus grande balise li ou div, insérez ▼

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>

2) Dans le fichier sidebar.php, le plus grandouAu-dessus, ajoutez ▼

<?php endif; ?>

Étape XNUMX : Configurer les widgets

1) Le gadget est enregistré et la position d'affichage est également définie dans le fichier de thème.

• Vous pouvez définir la zone du groupe de widgets dans l'arrière-plan de WordPress ▼

2) Après avoir enregistré, actualisez la page d'accueil.

• La barre latérale de notre site Web ressemblera à l'image ci-dessous ▼

Vous pouvez voir l'image ci-dessus, indiquant que notre gadget a été créé et fonctionne comme d'habitude.

Comment ajouter plusieurs widgets WordPress dans différents domaines ?

Répétez les étapes XNUMX et XNUMX pour que votre thème WordPress prenne en charge les widgets à différents endroits.

Supposons que vous deviez ajouter un widget à l'en-tête, à la barre latérale et au bas du thème.

1) Tout d'abord, vous devez copier le code suivant dans le fichier functions.php ▼

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Header',
'id' => 'header',
'description' => 'This is the widgetized header.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'This is the widgetized sidebar.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'This is the widgetized footer.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

}

2) Ensuite, ajoutez le code suivant aux fichiers header.php, sidebar.php et footer.php respectivement.

en-tête.php ▼

<div id="widgetized-header">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

<div>
<p><strong>Widgetized Header</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

barre latérale.php ▼

<div id="widgetized-sidebar">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

<div>
<p><strong>Widgetized Sidebar</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

pied de page.php ▼

<div id="widgetized-footer">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

<div>
<p><strong>Widgetized Footer</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

C'est un succès !

• Bien sûr, vous pouvez également modifier divers détails dans le code en fonction de vos besoins ^_^
• Les 2 étapes ci-dessus, permettent au reste du thème d'intégrer les fonctionnalités du widget.

Ensuite, continuez à partager des astuces pour utiliser les widgets dans WordPress.

Conseils sur le widget d'intégration de thème WordPress

Gérez efficacement les widgets personnalisés :

1) Après avoir ajouté des widgets au thème, vous pouvez créer un fichier séparé et le nommerwidgets.php.

• Afin d'enregistrer tout le code de widget personnalisé ajouté à l'étape 1 dans ce dossier.

2) Ajoutez le code au fichier functions.php :

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

3) Enregistrez tout le code de widget de widgets personnalisés ajouté à l'étape 1 dans le fichier widgets.php.

Cette méthode garantit que tous les widgets se chargent en douceur et fonctionnent sur toutes les versions de WordPress prenant en charge les widgets.

De cette façon, vous pouvez gérer vos fichiers de thème WordPress plus efficacement.