Paano magdagdag ng mga widget ng WordPress?Pagsasama-sama ng tema Widgets area

Mga tampok ng custom na menu at sidebar widget, ooWordPressMga tampok na tampok sa tema.

• Ang paggawa ng tema, kung hindi kasama ang dalawang function na ito, ay parang tadyang ng manok...

Chen WeiliangDati paBumuo ng istasyonSa tutorial na ito, ibinabahagi ko kung paano magbigay ng isang tema ng WordPressMagdagdag ng custom na menu.

Inilalarawan ng artikulong ito kung paano magdagdag ng mga custom na function ng widget kapag gumagawa ng tema.

Tulad ng pagdaragdag ng mga custom na menu sa mga tema, ang custom na pagdaragdag ng mga widget ay tumatagal lamang ng 3 hakbang.

Ang unang hakbang, pagpaparehistro ng gadget

Upang magamit ang widget, kailangan mo munang magparehistro, buksan ang functions.php file sa ilalim ng tema ng WordPress,

Sa functions.php file, idagdag ang sumusunod na code:

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

?>

Baguhin ang li at h2 tag sa functions.php upang tumugma sa mga tag sa sidebar.php:

Ang li at module h2 na mga pamagat ng 'before_widget' at 'after_widget', baguhin ang code ayon sa aktwal na sitwasyon.

(siguro walang pagbabago)

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

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

Ang code sa itaas ay nagrerehistro ng isang lugar ng widget na pinangalanang "top-sidebar":

• Ang ipinapakitang pangalan ay "Top Sidebar".
• Magdagdag ng h2 tag sa pamagat.
• Ang mga item ng nilalaman ay na-tag ng li.

mag-log inWordPress backendDashboard, pumunta sa Hitsura → Mga Widget.

Kung makikita mo ang Top Sidebar widget area sa kanang bahagi ng larawan sa ibaba, nangangahulugan ito na matagumpay ang pagpaparehistro ▼

Ang pangalawang hakbang, gadget call

Matapos mairehistro ang gadget, maaari itong tawagan sa file ng template ng tema, at ang sumusunod na code ay maaaring tawagan sa sidebar.php file.

1) Sa sidebar.php file, sa ibaba ng pinakamalaking li o div tag, ilagay ang ▼

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

2) Sa sidebar.php file, ang pinakamalakioSa itaas, magdagdag ng ▼

<?php endif; ?>

Hakbang XNUMX: Mag-set up ng mga widget

1) Nakarehistro ang gadget, at tinukoy din ang posisyon ng display sa theme file.

• Maaari mong itakda ang lugar ng pangkat ng widget sa background ng WordPress ▼

2) Pagkatapos i-save, i-refresh ang front page.

• Ang sidebar ng aming website ay magiging katulad ng larawan sa ibaba ▼

Maaari mong makita ang larawan sa itaas, na nagpapahiwatig na ang aming gadget ay ginawa at gumagana tulad ng dati.

Paano magdagdag ng maramihang mga widget ng WordPress sa iba't ibang lugar?

Ulitin ang mga hakbang XNUMX at XNUMX upang gawin ang iyong WordPress theme support widgets sa iba't ibang lokasyon.

Ipagpalagay na kailangan mong magdagdag ng widget sa header, sidebar, at ibaba ng tema.

1) Una, kailangan mong kopyahin ang sumusunod na code sa functions.php file ▼

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) Susunod, idagdag ang sumusunod na code sa header.php, sidebar.php at footer.php file ayon sa pagkakabanggit.

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>

Ito ay isang tagumpay!

• Siyempre, maaari mo ring baguhin ang iba't ibang mga detalye sa code ayon sa iyong mga pangangailangan ^_^
• Ang 2 hakbang sa itaas, payagan ang natitirang bahagi ng tema na isama ang functionality ng widget.

Susunod, patuloy na magbahagi ng mga tip para sa paggamit ng mga widget sa WordPress.

Mga Tip sa Widget ng Widget sa Pagsasama ng Tema ng WordPress

Mahusay na pamahalaan ang mga custom na widget:

1) Pagkatapos magdagdag ng mga widget sa tema, maaari kang lumikha ng isang hiwalay na file at pangalanan itowidgets.php.

• Upang i-save ang lahat ng custom na widget code na idinagdag sa hakbang 1 sa folder na ito.

2) Idagdag ang code sa functions.php file:

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

3) I-save ang lahat ng custom na widgets widget code na idinagdag sa hakbang 1 sa widgets.php file.

Tinitiyak ng pamamaraang ito na ang lahat ng mga widget ay naglo-load nang maayos at gumagana sa lahat ng mga bersyon ng WordPress na sumusuporta sa mga widget.

Sa ganitong paraan, mas mahusay mong mapamahalaan ang iyong mga file ng tema ng WordPress.