19 March 2012

Cara Menambahkan Author Microformat di WordPress

WordPress adalah CMS yang cukup mempunyai nama di belantika dunia internet saat ini, dengan WordPress kita bisa menghasilkan “sesuatu” mulai dari Portfolio, Company Profile, Business Profile, Online Store sampai tujuan awal WordPress diciptakan sebagai Mesin Blogs.

Kali ini kami akan berbagi cara untuk menambahkan Data Microformat di WordPress blog kita. Kata menambahkan ini sebenarnya sedikit kurang tepat, karena apa yang kami coba bagikan ini adalah bagaimana mengatur data2 di WordPress kita akan bisa sesuati standard Microformat yang didukung Mesin Pencari seperti Bing, Google dan Yahoo.

Pada Tutorial Pertama ini kami akan memberikan panduan untuk menambahkan Author Microformat, pada sesi lanjutan kami akan kupas juga mengenai Breadcrumb Microformat, Reviews Microformat, TV Series dan sejenisnya…

Tentunya pada Tutorial Menambahkan Data Author Microformat WordPress ini dibutuhkan sedikit kemampuan memahami struktur WordPress, PHP, HTML dan juga CSS. Tapi kalaupun anda masih awam masih bisa mengikuti apa yang kami bagikan ini (semoga).

Alat-alat yang dibutukan ada beberapa diantaranya

  • Dekstop Browser
    Anda bisa menggunakan Safari, Chrome atau Firefox, pilih yang menurut bero dan sista paling nyaman.
  • Text Editor
    Untuk Editor ini jika anda di lingkungan Jendela anda bisa mencoba Notepad++, jika anda di OS X anda bisa mencoba Coda atau TextMate sedangkan di Linux bisa mencoba VIM dan sejenisnya
  • Online Server
    Untuk mengehatui apakah yang kita lakukan sudah tepat atau belum, pastikan sudah mempunyai Server yang terhubung di  Internet dengan WordPress sudah ter install.
  • FTP Client
    Sediakan FTP Client yang mengubungkan komputer lokal kita dengan Server Online kita. Banyak sekali layanan FTP Client di lingkungan Jendela, OS X dan juga Linux, pilih yang sesuai kebutuhan.

Langkah-langkah menambah Author Microformat di WordPress

  1. Buka functions.php dan tambahkan baris kode berikut (akan kami jelaskan kemudian)
    [sourcecode language=”php”]function my_new_contactmethods( $contactmethods ) {
    // Add Twitter
    $contactmethods[‘twitter’] = ‘Twitter’;
    //add Facebook
    $contactmethods[‘facebook’] = ‘Facebook’;// Add Google Profiles
    $contactmethods[‘google_profile’] = ‘Google Profile URL’;return $contactmethods;
    }add_filter(‘user_contactmethods’,’my_new_contactmethods’,10,1);
    [/sourcecode]
    Kode diatas bertujuan untuk menambahkan Informasi tambahan pada Profil WordPress kita, pada sample diatas kita menambahkan Twitter, Facebook dan juga Google Plus.
  2. Kemudian setelah kode tadi disimpan, silahkan masuk halaman Profil di WP Admin dan lengkapi data2 yang dibutuhkan (Twitter, Facebook dan Google Plus)
    Yang paling utama dari profil diatas adalah Google Plus, jika belum mempunyai silahkan daftar terlebih dahulu.
  3. Sekarang buka file single.php atau content-single.php untuk Twenty Eleven dan Turunannya biasanya menggunakan content-single.php, buka salah satu dan tambahkan kode berikut ini dibawah the_content()berikut ini
    [sourcecode language=”php”]
    <div id="author_box" class="about_box vcard">
    <h3 class="block_title fn"><?php __(‘About the Author’,’mediaflux’); ?> <?php the_author_meta(‘first_name’);?> <?php the_author_meta(‘last_name’);?></h3>
    div>
    <?php $gravatar = md5(get_the_author_meta(‘user_email’)); $default = get_bloginfo(‘template_url’).’/images/avatar.png’; ?>
    <!–<img src="/images/<?php the_author_meta(‘ID’);?>.png" alt="Author Image" id="authorpic"/>–>
    <img class="author_avatar left" src="https://www.gravatar.com/avatar/<?php echo $gravatar; ?>?d=<?php echo $default; ?>&amp;s=60" style="margin-top:5px;" />
    <!–<strong><?php the_author_meta(‘first_name’);?> <?php the_author_meta(‘last_name’);?></strong><div class="clear"></div>–>
    <p><?php the_author_meta(‘user_description’);?></p><div class="clear"></div>
    <a class="url" rel="author" href="<?php the_author_meta(‘user_url’); ?>" title="author website">Home Page</a>
    </div>
    </div>
    [/sourcecode]

    Pada kode diatas yang penting dan utama adalah bagian class yang digunakan Author Microformat seperti vcard, fn, dan url. Bagian class url tadi tambahan rel=”author” adalah bertujuan untuk memberi tahu kalau author dari tulisan2 tersebut.

  4. Lanjutkan edit file author.php
    Silahkan edit file author.php kalau belum ada tambahkan, dengan cara duplikat file archive.php kemudian paling atas kode sebelum Looping tambahkan kode berikut ini.
    [sourcecode language=”php”]
    <?php
    // If a user has filled out their description, show a bio on their entries.
    if ( get_the_author_meta( ‘description’ ) ) : ?>
    <div id="author-info">
    <div id="author-avatar">
    <?php echo get_avatar( get_the_author_meta( ‘user_email’ ), apply_filters( ‘twentyeleven_author_bio_avatar_size’, 60 ) ); ?>
    </div><!– #author-avatar –>
    <div id="author-description">
    <h2><?php printf( __( ‘About %s’, ‘twentyeleven’ ), get_the_author() ); ?></h2>
    <?php the_author_meta( ‘description’ ); ?>
    <div id="author-link">
    <?php if(get_the_author_meta(‘facebook’)): ?><a href="https://www.facebook.com/<?php the_author_meta(‘facebook’); ?>" title="Facebook Profile" class="a-fb">Facebook</a> | <?php endif; if(get_the_author_meta(‘twitter’)): ?><a href="https://twitter.com/#!/<?php the_author_meta(‘twitter’); ?>" title="Twitter Profile" class="a-twitter">Twitter</a> | <?php endif; $google_profile = get_the_author_meta( ‘google_profile’ );
    if ( $google_profile ) {
    echo ‘<a href="https://plus.google.com/’ . $google_profile . ‘" rel="me">Google Profile</a>’; } ?></div><!– #author-link –>
    </div><!– #author-description –>
    </div><!– #entry-author-info –>
    <?php endif; ?>
    [/sourcecode]

    Pada bagian ini yang penting adalah bagian tautan Google Plus dimana ditambahkan rel=”me” untuk menunjukkan bahwa yang disini benar adanya orang yang sama dengan akun Google Plus tersebut.

  5. Jangan lupa simpan semua konfigurasi diatas dan upload ke Online Server. Selamat anda sudah sukses menambahkan Microdata Author Format

Untuk melakukan test atau ujicoba apakah sudah berjalan dengan baik, silahkan buka halaman artikel dengan Rich Snippets Testing Tools milik Google. Jika sudah tampil seperti ini, berarti sudah benar.

Author Microformat di WordPress

Author Microformat di WordPress

Jika masih ada kesulitan ataupun hal2 yang belum berjalan dengan semestinya mari kita diskusinya disini.
Ngonoo lho…..

Kredit Gambar: https://webification.com dan https://wordpress.org

Share

Nurudin Jauhari

Petani dari @DesaPonjong yang suka wira-wiri dan ngetuit di @jauhari. Abahe @YahsfaJauhar dan @ShaffiyaJauhar. Kalau lagi BERLING *Nek Kober Orang Eling nek Eling ora Kober* bikin Tema WordPress

You may also like...

12 Responses

  1. rel=”me”.. 
    oooo… gitu yaaa… super sekali permirsa !!

  2. mak nyuzzz pak dhe, akhirnya nemu artikel sekeren ini…

  3. uyun says:

    penting inih… paman memang awesome 😀

  4. Yoanamriakbar says:

    kunjung balik yaa
    https://we90.wordress.com

  5. fitri says:

    bagus namba ilmu, tapi buka functions.php dimana

  6. giyanto says:

    artikel yang bagus!

  7. Hipnoterapi Banjarmasin says:

    terima ksh. ini artikel yg saya cari

  8. sumitra says:

    masih blom ngerti caranya, maklum otodidak

Leave a Reply

Your email address will not be published. Required fields are marked *