Hoe WordPress-widgets toevoegen?Thema-integratie Widgets-gebied

Aangepaste menufuncties en zijbalkwidgets, jaWordPressUitgelichte functies in het thema.

• Een thema maken, als het deze twee functies niet bevat, is als een kippenrib...

Chen WeiliangVoordateen website bouwenIn deze tutorial deel ik hoe je een WordPress-thema kunt gevenVoeg aangepast menu toe.

In dit artikel wordt beschreven hoe u aangepaste widgetfuncties kunt toevoegen bij het maken van een thema.

Net zoals het toevoegen van aangepaste menu's aan thema's, duurt het toevoegen van aangepaste widgets slechts 3 stappen.

De eerste stap, gadgetregistratie

Om de widget te gebruiken, moet u zich eerst registreren, het bestand Functions.php openen onder het WordPress-thema,

Voeg in het bestand Functions.php de volgende code toe:

<?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>',
    ) );
}

?>

Pas de li- en h2-tags in functions.php aan zodat ze overeenkomen met de tags in sidebar.php:

De li en module h2 titels van 'before_widget' en 'after_widget', passen de code aan volgens de actuele situatie.

(misschien zonder aanpassingen)

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

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

De bovenstaande code registreert een widgetgebied met de naam "top-sidebar":

• De weergegeven naam is "Top Sidebar".
• Voeg een h2-tag toe aan de titel.
• Inhoudsitems zijn getagd met li.

登录WordPress-backendDashboard, ga naar Uiterlijk → Widgets.

Als u het widgetgebied Top Sidebar aan de rechterkant in de onderstaande afbeelding kunt zien, is de registratie geslaagd ▼

De tweede stap, gadgetoproep

Nadat de gadget is geregistreerd, kan deze worden aangeroepen in het themasjabloonbestand en de volgende code kan worden aangeroepen in het sidebar.php-bestand.

1) In het sidebar.php-bestand, onder de grootste li- of div-tag, voeg je ▼ . in

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

2) In het sidebar.php-bestand, de grootsteofVoeg hierboven ▼ . toe

<?php endif; ?>

Stap XNUMX: Widgets instellen

1) Het gadget is geregistreerd en de weergavepositie is ook gedefinieerd in het themabestand.

• U kunt het widgetgroepsgebied instellen op de WordPress-achtergrond ▼

2) Ververs na het opslaan de voorpagina.

• De zijbalk van onze website ziet eruit als de afbeelding hieronder

Je kunt de afbeelding hierboven zien, wat aangeeft dat onze gadget is gemaakt en werkt zoals gewoonlijk.

Hoe voeg je meerdere WordPress-widgets toe in verschillende gebieden?

Herhaal stap XNUMX en XNUMX om uw WordPress-thema-widgets op verschillende locaties te ondersteunen.

Stel dat u een widget moet toevoegen aan de koptekst, zijbalk en onderkant van het thema.

1) Eerst moet je de volgende code kopiëren naar het bestand 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) Voeg vervolgens de volgende code toe aan respectievelijk header.php, sidebar.php en footer.php bestanden.

header.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>

zijbalk.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>

footer.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>

Dit is een succes!

• Natuurlijk kunt u ook verschillende details in de code aanpassen aan uw behoeften ^_^
• Met de 2 bovenstaande stappen kan de rest van het thema de functionaliteit van de widget integreren.

Ga vervolgens door met het delen van tips voor het gebruik van widgets in WordPress.

Widget-tips voor Widget-widgets voor integratie van WordPress-thema

Beheer aangepaste widgets efficiënt:

1) Nadat je widgets aan het thema hebt toegevoegd, kun je een apart bestand maken en het een naam gevenwidgets.php.

• Om alle aangepaste widgetcode die in stap 1 is toegevoegd aan deze map op te slaan.

2) Voeg de code toe aan het bestand Functions.php:

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

3) Bewaar alle widgetcode voor aangepaste widgets die in stap 1 is toegevoegd aan het bestand widgets.php.

Deze methode zorgt ervoor dat alle widgets soepel laden en werken op alle WordPress-versies die widgets ondersteunen.

Op deze manier kunt u uw WordPress-themabestanden efficiënter beheren.