• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 4 - Menyiapkan Fungsi-fungsi (Functions) Theme

02‘13
May

info80.jpg

Sekarang kita akan memulai sebuah tahapan yang lebih kompleks dalam membuat template Wordpress. Pada tahap ini kita akan menambahkan beberapa fungsi (function) PHP. Fungsi-fungsi yang akan dibuat memiliki tujuan sebagai berikut :

  • Menambahkan support untuk fitur Wordpress seperti custom background, header, post formats, dan lain sebagainya
  • Menyiapkan default theme
  • Bertindak sebagai "container" untuk kode-kode yang dapat digunakan kembali selanjutnya

Function PHP adalah kumpulan dari beberapa statement yang dibuat dengan tujuan untuk menyelesaikan suatu tugas tertentu. Apabila anda masih awam dengan PHP function anda dapat membaca artikel saya sebelumnya tentang : Penggunaan Function pada PHP (PHP Function)

Tanpa banyak basa-basi lagi silahkan buka file functions.php anda lalu pada baris pertama silahkan tuliskan baris perintah sebagai berikut:

<?php
/**
 * W3functionDesign functions and definitions
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */

Dengan kode diatas kita sekarang memiliki baris perintah didalam blok PHP comment (komentar) dengan beberapa inline documentation, mengenai PHPdoc Tags: "@package and @since" bisa anda baca lebih lanjut di halaman WordPress Codex tentang Inline Documentation.

$content_width

$content_width dalam PHP Wordpress adalah sebuah variable global yang menentukan nilai maksimum dari lebar suatu elemen didalam content seperti gambar-gambar yang anda masukan saat posting sebuah artikel. $content_width di gunakan untuk mencegah gambar atau elemen-elemen lain yang berukuran besar melebihi lebar area content utama <div id="primary" class="content-area">.

Nilai dari $content_width harus pas dengan ukuran content utama. Belakangan kita nanti di akhir Artikel akan menggunakan CSS untuk menentukan ukuran <div> content utama, karena artikel "Tahapan Belajar Membuat Desain Template Wordpress" untuk bagian CSS masih jauh dan akan dibahas di bagian belakang maka saya kasih bocoran untuk lebar <div id="primary" class="content-area">di CSS nanti adalah 600 pixel.

Ok setelah penulisan baris */ di functions.php tambahkan baris perintah selanjutnya sebagai berikut

/**
 * Set the content width based on the theme's design and stylesheet.
 *
 * @since W3functionDesign 1.0
 */
if ( ! isset( $content_width ) )
    $content_width = 600; /* pixels */

W3functionDesign_setup()

Selanjutnya kita akan membuat sebuah function yang menentukan theme default dari theme W3functionDesign dan mendaftarkan berbagai support fitur wordpress kedalamnya. Setelah fungsi sebelumnya lewati 1 (satu) baris perintah dan tuliskan tag PHP berikut

if ( ! function_exists( 'W3functionDesign_setup' ) ):
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which runs
 * before the init hook. The init hook is too late for some features, such as indicating
 * support post thumbnails.
 *
 * @since W3functionDesign 1.0
 */
function W3functionDesign_setup() {
 
    /**
     * Custom template tags for this theme.
     */
    require( get_template_directory() . '/inc/template-tags.php' );
 
    /**
     * Custom functions that act independently of the theme templates
     */
    require( get_template_directory() . '/inc/tweaks.php' );
 
    /**
     * Make theme available for translation
     * Translations can be filed in the /languages/ directory
     * If you're building a theme based on W3functionDesign, use a find and replace
     * to change 'W3functionDesign' to the name of your theme in all the template files
     */
    load_theme_textdomain( 'W3functionDesign', get_template_directory() . '/languages' );
 
    /**
     * Add default posts and comments RSS feed links to head
     */
    add_theme_support( 'automatic-feed-links' );
 
    /**
     * Enable support for the Aside Post Format
     */
    add_theme_support( 'post-formats', array( 'aside' ) );
 
    /**
     * This theme uses wp_nav_menu() in one location.
     */
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'W3functionDesign' ),
    ) );
}
endif; // W3functionDesign_setup
add_action( 'after_setup_theme', 'W3functionDesign_setup' );

Perhatikan dari tag diatas saya menuliskan berbagai dokumentasi di blok komentar PHP dalam bahasa inggris, kenapa? karena selain standard dokumentasi yang ditentukan wordpress juga karena theme kita suatu saat mungkin akan di pakai dan dikembangkan lagi sama orang lain di seluruh dunia. Bayangkan bagaimana jadinya apabila saya menulis dokumentasi dengan bahasa sansekerta dan ada orang asing mau mengembangkan theme nya bisa gk jadi deh rezeki nomploknya

Terlepas dari wordpress dalam mengembangkan website atau sebuah aplikasi biasakanlah menuliskan nilai, property, class dan lain sebagainya dengan bahasa inggris baik dalam PHP, HTML, CSS, JavaScript atau bahasa pemrograman lainnya sehingga kita bisa menjalin kemungkinan-kemungkinan kerjasama dengan orang asing suatu saat, siapa yang tau bukan. Ok, sekarang mari kita bahas fungsi-fungsi diatas satu persatu:

Kita akan memanggil 2 file yang nanti akan dibuat di folder inc/ yaitu file template-tags.php dan tweaks.php. Sabar dulu kita akan membuat kedua file tersebut belakangan di akhir artikel ini

Lalu kita akan memanggil load_theme_textdomain() yang berfungsi untuk memberitahu wordpress bahwa theme yang kita buat akan mendukung fitur translation dan file translation dapat ditemukan di folder yang bernama language

2 (dua) fungsi selanjutnya berfungsi untuk menambahkan fitur RSS di bagian <head> dan Post Format di bagian <aside>. Pada baris perintah fungsi terakhir kita mendaftarkan navigation menu location yang akan digunakan untuk navigasi menu utama theme wordpress kita.

Di akhir baris kita menutup fungsi dan pada fungsi add_action() kita mengisinya dengan parameter untuk memberitahu wordpress supaya menjalankan fungsi W3functionDesign_setup() setelah wordpress menjalankan fungsi after_setup_theme().

Ok, masih ingat dengan file template-tags.php dan tweaks.php silahkan buat kedua file tersebut di dalam folder inc/

template-tags.php

Template tag adalah sebuah fungsi wordpress yang disisipkan didalam sebuah theme untuk menampilkan informasi dinamis. Anda bisa mempelajari lebih lanjut tentang Template tag di halaman WordPress Codex. Untuk sekarang supaya tidak terlalu pusing, mari kita isi file template-tags.php dengan dokumentasi dasar

<?php
/**
 * Custom template tags for this theme.
 *
 * Eventually, some of the functionality here could be replaced by core features
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */

tweaks.php

Fungsi wordpress yang akan kita tanamkan pada tweaks.php tidak berhubungan dengan template tags, tweaks.php akan diisi dengan fungsi yang dapat meningkatkan fitur-fitur dasar wordpress. Fungsi-fungsi ini akan berjalan di belakang layar dengan tugas menambah kinerja theme yang akan kita buat

Seperti biasa dan anda akan terus terbisa untuk membuat dokumentasi dasar pada worpress, silahkan tambahkan inline documentation dibawah pada tweaks.php

<?php
/**
 * Custom functions that act independently of the theme templates
 *
 * Eventually, some of the functionality here could be replaced by core features
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */

Selanjutnya tuliskan baris perintah berikut

/**
 * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
 *
 * @since W3functionDesign 1.0
 */
function W3functionDesign_page_menu_args( $args ) {
    $args['show_home'] = true;
    return $args;
}
add_filter( 'wp_page_menu_args', 'W3functionDesign_page_menu_args' );
 
/**
 * Adds custom classes to the array of body classes.
 *
 * @since W3functionDesign 1.0
 */
function W3functionDesign_body_classes( $classes ) {
    // Adds a class of group-blog to blogs with more than 1 published author
    if ( is_multi_author() ) {
        $classes[] = 'group-blog';
    }
 
    return $classes;
}
add_filter( 'body_class', 'W3functionDesign_body_classes' );
 
/**
 * Filter in a link to a content ID attribute for the next/previous image links on image attachment pages
 *
 * @since W3functionDesign 1.0
 */
function W3functionDesign_enhanced_image_navigation( $url, $id ) {
    if ( ! is_attachment() && ! wp_attachment_is_image( $id ) )
        return $url;
 
    $image = get_post( $id );
    if ( ! empty( $image->post_parent ) && $image->post_parent != $id )
        $url .= '#main';
 
    return $url;
}
add_filter( 'attachment_link', 'W3functionDesign_enhanced_image_navigation', 10, 2 );

W3functionDesign_page_menu_args berhubungan dengan navigasi menu wordpress kita. Sebelumnya kita sudah mendaftarkan support untuk navigasi menu dengan fungsi W3functionDesign_setup(). Jiga tidak ada konfigurasi lebih lanjut, Wordpress akan menampilkan link daftar halaman yang dikendalikan oleh fungsi defaultnya yaitu wp_page_menu().

Pada fungsi kedua yaitu W3functionDesign_body_classes(), kita menambahkan class css yang bernama "group-blog" kedalam tag <body> tema yang kita buat. Class-class pada <body> (body class) akan memberikan kita cara untuk mendesign bagian dari tema wordpress berdasarkan kondisi-kondisi tertentu seperti tipe halaman yang dilihat atau jumlah author yang kita miliki.

Selanjutnya fungsi yang terakhir yaitu W3functionDesign_enhanced_image_navigation() digunakan untuk menambahkan id=main di akhir next/previous link gambar halaman attachment (yang akan kita buatkan nanti di bagian selanjutnya). Anda tentu masih ingat di bagian belajar sebelumnya tentang struktur html wordpress, "#main" adalah ID yang digunakan untuk membungkus content dan sidebar.

Untuk sementara fungsi di file tweaks.php kita cukupkan sampai disini, jangan menutup tag php (?>) di akhir baris. Ok, kita sudah banyak membuat fungsi wordpress tapi ini belum selesai, masih banyak yang akan datang di tahapan selanjutnya. Perjalanan jadi WP desainer baru dimulai jadi kunjungi terus ya dan subscribe RSS kami untuk mengetahui update article nya

Anda juga mungkin suka dengan artikel ini :

  1. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 9 - Membuat Template Komentar (comment.php)
  2. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 3 - Struktur File dan Folder Theme
  3. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 7 - Membuat Template Index
  4. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 6 - Membuat Template Header
  5. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 1 - Instalasi Wordpress dan Development Tool

Komentar

  • obat lambung perih (22 Oct 2015 03:56:27)

    I really like it

  • hasan (02 May 2014 11:27:41)

    artikelnya bagus, cek juga bro aplikasi akunting buatan anak Indonesia <a href="http://kiper.co.id">kiper.co.id</a>

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff