Hoe om WordPress-widgets by te voeg?Tema-integrasie Widgets-area

Pasgemaakte spyskaartkenmerke en sidebar-legstukke, jaWordPressUitgestalte kenmerke in die tema.

• Om 'n tema te maak, as dit nie hierdie twee funksies insluit nie, is soos 'n hoenderrib...

Chen Weiliangin die vorige'n webwerf te bouIn hierdie tutoriaal deel ek hoe om 'n WordPress-tema te geeVoeg pasgemaakte spyskaart by.

Hierdie artikel beskryf hoe om gepasmaakte legstukfunksies by te voeg wanneer 'n tema geskep word.

Net soos om gepasmaakte spyskaarte by temas by te voeg, neem gepasmaakte widgets net 3 stappe.

Die eerste stap, gadget registrasie

Om die widget te gebruik, moet jy eers registreer, die functions.php-lêer oopmaak onder die WordPress-tema,

Voeg die volgende kode in die functions.php-lêer by:

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

?>

Verander die li- en h2-merkers in functions.php om te ooreenstem met die merkers in sidebar.php:

Die li- en module h2-titels van 'before_widget' en 'after_widget', verander die kode volgens die werklike situasie.

(dalk sonder verandering)

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

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

Die bogenoemde kode registreer 'n legstuk area genaamd "top-sidebar":

• Die vertoonde naam is "Top Sidebar".
• Voeg 'n h2-merker by die titel.
• Inhouditems is gemerk met li.

登录WordPress-agterkantDashboard, gaan na Voorkoms → Widgets.

As jy die Top Sidebar-legstuk-area aan die regterkant van die prentjie hieronder kan sien, beteken dit die registrasie is suksesvol ▼

Die tweede stap, gadget-oproep

Nadat die gadget geregistreer is, kan dit in die tema-sjabloonlêer geroep word, en die volgende kode kan in die sidebar.php-lêer geroep word.

1) In die sidebar.php-lêer, onder die grootste li- of div-merker, voeg ▼ in

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

2) In die sidebar.php-lêer, die grootsteofVoeg ▼ hierbo by

<?php endif; ?>

Stap XNUMX: Stel legstukke op

1) Die gadget is geregistreer, en die vertoonposisie word ook in die temalêer gedefinieer.

• U kan die widget-groeparea in die WordPress-agtergrond ▼ instel

2) Nadat u gestoor het, verfris die voorblad.

• Die sybalk van ons webwerf sal soos die prent hieronder lyk ▼

Jy kan die prentjie hierbo sien, wat aandui dat ons gadget gemaak is en soos gewoonlik loop.

Hoe om verskeie WordPress-widgets in verskillende gebiede by te voeg?

Herhaal stappe XNUMX en XNUMX om jou WordPress-tema-ondersteuningslegstukke op verskillende plekke te maak.

Gestel jy moet 'n legstuk by die kopskrif, sybalk en onderkant van die tema voeg.

1) Eerstens moet jy die volgende kode na die functions.php-lêer ▼ kopieer

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 dan die volgende kode by header.php, sidebar.php en footer.php lêers onderskeidelik.

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>

sidebar.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 'n sukses!

• Natuurlik kan jy ook verskeie besonderhede in die kode verander volgens jou behoeftes ^_^
• Die 2 stappe hierbo laat die res van die tema toe om die funksionaliteit van die legstuk te integreer.

Gaan voort om wenke te deel vir die gebruik van widgets in WordPress.

WordPress Tema Integrasie Widget Widget Wenke

Bestuur pasgemaakte legstukke doeltreffend:

1) Nadat u widgets by die tema gevoeg het, kan u 'n aparte lêer skep en dit 'n naam geewidgets.php.

• Om al die pasgemaakte legstukkode wat in stap 1 bygevoeg is, by hierdie gids te stoor.

2) Voeg die kode by die functions.php-lêer:

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

3) Stoor al die pasgemaakte widget-legstukkode wat in stap 1 bygevoeg is na die widgets.php-lêer.

Hierdie metode verseker dat alle legstukke glad laai en werk op alle WordPress-weergawes wat legstukke ondersteun.

Op hierdie manier kan u u WordPress-temalêers doeltreffender bestuur.