Kita akan melengkapi bangunan tema template kita dengan template sidebar dan footer.

Mendaftarkan Sidebars

Mari kita mulai dengan sidebar (sidebars). Di WordPress, istilah “sidebar” mengacu pada bagian dari tema yang berisi widget (widgets).

Tema kita akan memiliki dua wilayah widget. Dengan begitu kita bisa kembali menggunakan kode ini untuk tema 2-kolom atau 3-kolom (pada tema-2 kolom sidebar ditumpuk, satu di atas yang lain).

Ini cukup sederhana. Dalam file functions.php kita akan mendaftarkan daerah widget. Pada dasarnya, kita berkata kepada WordPress: hey, buat dua daerah baru bagi orang-orang untuk menyeret widget dalam Appreance>Widgets di Dashboard.

Paste kode berikut di functions.php. Anda bisa menempelkannya di akhir file jika Anda suka. Saya selalu ingin menempelkannya tepat setelah add_action('after_setup_theme', 'shape_setup');, tapi itu terserah Anda.

/**
 * Register widgetized area and update sidebar with default widgets
 *
 * @since Shape 1.0
 */
function shape_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Primary Widget Area', 'shape' ),
        'id' => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h1 class="widget-title">',
        'after_title' => '</h1>',
    ) );
 
    register_sidebar( array(
        'name' => __( 'Secondary Widget Area', 'shape' ),
        'id' => 'sidebar-2',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h1 class="widget-title">',
        'after_title' => '</h1>',
    ) );
}
add_action( 'widgets_init', 'shape_widgets_init' );

Sekarang kita punya dua area widget: Primary Widget Area (‘sidebar-1′) dan Secondary Widget Area (‘sidebar-2′). Tidak ada gunanya penamaan mereka, Primary Sidebar atau Secondary Sidebar. Dalam beberapa layout mereka bahkan mungkin tidak sidebars-tetapi mereka akan selalu menjadi wilayah widget. Perhatikan nilai-nilai ‘id’ di atas (sidebar-1 dan sidebar-2), karena kita akan menggunakannya di kemudian hari untuk menyebut daerah widget ke dalam template sidebar.

Selain nilai-nilai ‘id’, fungsi register_sidebar() memungkinkan kita untuk menentukan informasi lainnya tentang area widget:

name => __( 'Secondary Widget Area', 'shape' ), - ini adalah nama yang daerah widget partikular ini akan miliki pada halaman Administrasi Widgets (Dashboard> Widgets).

'before_widget' => '<aside id="%1$s">', - Ini adalah elemen HTML terbuka yang akan memuat konten widget. Di sini, kita membungkus setiap widget individu dalam sebuah artikel elemen. Sangat penting untuk meninggalkan placeholder “%1$s” dan “%2$s” dalam ID dan kelas atribut di tempatnya, masing-masing, karena WordPress mengisi mereka dengan ID unik dan widget-kelas khusus. Ini sangat membantu mendekorasi widget individu atau jenis widget dengan CSS.

'after_widget' => '</aside>', - Ini menutup elemen artikel yang membungkus setiap widget individu.

'before_title' => '<h1>', - Di sini, kita menetapkan bahwa setiap judul widget yang harus dibungkus dalam elemen h1 dengan nama kelas dari “widget-title”.

'after_title' => '</h1>', - Di sini, kita menutup elemen h1 setelah akhir title widget.

WordPress Codex memiliki informasi lebih untuk register_sidebar() jika Anda tertarik.

Coding Template Sidebar

Oke, WordPress tahu daerah widget kita ada, dan tahu bagaimana mereka harus diformat.Sekarang kita hanya perlu membuat mereka muncul dalam tema kita. Di situlah template sidebar.php yang masuk. Teruskan dan buka sekarang.

Untuk “Primary Widget Area”, kita akan kode-sulit beberapa widget default: Search, Arsip, dan Widgets Meta. Jika pengguna tidak menyeret widget dalam “Primary Widget Area” di Dashboard mereka, mereka akan melihat widget default ini.

“Secondary Widget Area” tidak akan mengandung widget default. Bahkan, Secondary Widget Area akan muncul hanya jika mengandung widget aktif.

Mari kita menyiapkan template sidebar, dan menciptakan Primary Widget Area pertama. Dalam sidebar.php, paste berikut ini.

<?php
/**
* The Sidebar containing the main widget areas.
*
* @package Shape
* @since Shape 1.0
*/
?>
<div id="secondary" class="widget-area" role="complementary">
    <?php do_action( 'before_sidebar' ); ?>
    <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
 
        <aside id="search" class="widget widget_search">
            <?php get_search_form(); ?>
        </aside>
 
        <aside id="archives" class="widget">
            <h1 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h1>
            <ul>
                <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
            </ul>
        </aside>
 
        <aside id="meta" class="widget">
            <h1 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h1>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
            </ul>
        </aside>
 
    <?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->

Khusus Primary Widget kita dibungkus dalam div #secondary. Artinya, kode mengatakan, “Jika ‘sidebar-1′ (” Primary Widget Area”) tidak berisi widget aktif, tampilkan widget default. Jika tidak, tampilkan widget aktif yang ditambahkan melalui Widgets> Appreance.

Sekarang, mari kita ciptakan markup untuk Secondary Widget Area. Paste kode berikut setelah </div><!– #secondary .widget-area –>

<div id="tertiary" class="widget-area" role="supplementary">
     <?php dynamic_sidebar( 'sidebar-2' ); ?>
</div><!-- #tertiary .widget-area -->

Sangat sederhana. Daerah sidebar seluruh dibungkus dalam sebuah pernyataan kondisional yang menampilkan markup untuk sidebar hanya jika itu mengandung widget. Jika Anda pergi ke halaman widget admin dan tarik semua widget dari “Primary Widget Area”, pernyataan kondisional menjaga markup akan gagal. Banyak waktu. Dan untuk kepentingan kita. Tidak ada widget. Tanpa markup. Mati sederhana.

Hanya cara kita menyukai hal-hal di sekitar sini.

Template Footer

Akhirnya, mari kita membangun template footer kita. Ini sangat sederhana. Ini akan berisi hal-hal sebagai berikut:

• Penutup dari div konten #utama membungkus isi seluruh situs
• Bagian footer yang mencetak baris nama dan tema “Powered by WordPress”.
• Hook penting wp_footer penting(), yang banyak dimanfaatkan plugin.
• Penutup dari div wrapper kita, body, dan tag html.

Di bawah bagaimana ini terlihat seperti (paste semuanya di footer.php ):

<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* @package Shape
* @since Shape 1.0
*/
?>
 
</div><!-- #main .site-main -->
 
<footer id="colophon" class="site-footer" role="contentinfo">
    <div class="site-info">
        <?php do_action( 'shape_credits' ); ?>
        <a href="http://wordpress.org/" title="<?php esc_attr_e( 'A Semantic Personal Publishing Platform', 'shape' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'shape' ), 'WordPress' ); ?></a>
        <span class="sep"> | </span>
        <?php printf( __( 'Theme: %1$s by %2$s.', 'shape' ), 'Shape', '<a href="http://themeshaper.com/" rel="designer">ThemeShaper</a>' ); ?>
    </div><!-- .site-info -->
</footer><!-- #colophon .site-footer -->
</div><!-- #page .hfeed .site -->
 
<?php wp_footer(); ?>
 
</body>
</html>

Isi sesuai dengan rincian kredit.

Dan kita sudah melakukannya. Dengan template kita dibangun, nantikan belajar bagaimana mewarnai ‘em up a bit.