Bagaimana untuk menambah widget WordPress?Kawasan Widget integrasi tema

Ciri menu tersuai dan widget bar sisi, yaWordPressCiri yang ditampilkan dalam tema.

• Membuat tema, jika tidak termasuk dua fungsi ini, ibarat tulang rusuk ayam...

Chen Weiliangdalam sebelumnyamembina laman webDalam tutorial ini, saya berkongsi cara memberikan tema WordPressTambah menu tersuai.

Artikel ini menerangkan cara menambah fungsi widget tersuai semasa mencipta tema.

Sama seperti menambahkan menu tersuai pada tema, menambahkan widget tersuai hanya mengambil 3 langkah.

Langkah pertama, pendaftaran gajet

Untuk menggunakan widget, anda mesti mendaftar dahulu, buka fail functions.php di bawah tema WordPress,

Dalam fail functions.php, tambahkan kod berikut:

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

?>

Ubah suai tag li dan h2 dalam functions.php agar sepadan dengan tag dalam sidebar.php:

Tajuk li dan modul h2 'before_widget' dan 'after_widget', ubah suai kod mengikut situasi sebenar.

(mungkin tanpa pengubahsuaian)

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

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

Kod di atas mendaftarkan kawasan widget bernama "bar sisi atas":

• Nama yang dipaparkan ialah "Bar Sisi Atas".
• Tambahkan tag h2 pada tajuk.
• Item kandungan ditandakan dengan li.

log masukBahagian belakang WordPressPapan pemuka, pergi ke Rupa → Widget.

Jika anda dapat melihat kawasan widget Top Sidebar di sebelah kanan gambar di bawah, bermakna pendaftaran berjaya ▼

Langkah kedua, panggilan gajet

Selepas alat didaftarkan, ia boleh dipanggil dalam fail templat tema, dan kod berikut boleh dipanggil dalam fail sidebar.php.

1) Dalam fail sidebar.php, di bawah teg li atau div terbesar, masukkan ▼

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

2) Dalam fail sidebar.php, yang terbesaratauDi atas, tambah ▼

<?php endif; ?>

Langkah XNUMX: Sediakan widget

1) Alat didaftarkan, dan kedudukan paparan juga ditentukan dalam fail tema.

• Anda boleh menetapkan kawasan kumpulan widget dalam latar belakang WordPress ▼

2) Selepas menyimpan, muat semula halaman hadapan.

• Bar sisi laman web kami akan kelihatan seperti imej di bawah ▼

Anda boleh lihat gambar di atas, menandakan gajet kami telah dibuat dan berjalan seperti biasa.

Bagaimana untuk menambah berbilang widget WordPress di kawasan yang berbeza?

Ulang langkah XNUMX dan XNUMX untuk menjadikan tema WordPress anda menyokong widget di lokasi yang berbeza.

Katakan anda perlu menambah widget pada pengepala, bar sisi dan bahagian bawah tema.

1) Mula-mula, anda perlu menyalin kod berikut ke dalam fail 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) Seterusnya, tambahkan kod berikut pada fail header.php, sidebar.php dan footer.php.

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>

Ini satu kejayaan!

• Sudah tentu, anda juga boleh mengubah suai pelbagai butiran dalam kod mengikut keperluan anda ^_^
• 2 langkah di atas, benarkan seluruh tema menyepadukan kefungsian widget.

Seterusnya, teruskan berkongsi petua untuk menggunakan widget dalam WordPress.

Petua Widget Widget Integrasi Tema WordPress

Urus widget tersuai dengan cekap:

1) Selepas menambah widget pada tema, anda boleh mencipta fail berasingan dan menamakannyawidgets.php.

• Untuk menyimpan semua kod widget tersuai yang ditambahkan dalam langkah 1 pada folder ini.

2) Tambahkan kod pada fail functions.php:

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

3) Simpan semua kod widget widget tersuai yang ditambahkan dalam langkah 1 pada fail widgets.php.

Kaedah ini memastikan semua widget dimuatkan dengan lancar dan berfungsi pada semua versi WordPress yang menyokong widget.

Dengan cara ini, anda boleh mengurus fail tema WordPress anda dengan lebih cekap.