Menampilkan Judul dan Deskripsi Website Pada Header di WordPress | KafeinKode

Kursus bahasa arab berkualitas

Menampilkan Judul dan Deskripsi Website Pada Header di WordPress

Anonim Tue, March 17, 2015 2 Comments 4,069 views



Header yang dinamis bisa kita artikan sebagai header yang bisa menampilkan judul dan deskripsi website pada header di WordPress baik dalam bentuk tulisan maupun gambar, karena pada umumnya suatu website dapat dikenali dari judul suatu header beserta deskripsinya, dan wordpress menyediakan fitur tersebut, sebagai contoh pada website kafeinkode.com Anda bisa melihat bahwa title dari website tersebut adalah “kafeinkode” sedangkan deskripsinya adalah “its about soft skills here”, dengan title header dan deskripsi header, orang-orang akan lebih mudah mengenali suatu website, jenis suatu website dan apa yang dibicarakan atau ditulis di dalamnya.

Untuk menampilkan judul dan deskripsi website pada header di WordPress khususnya untuk menginput title dan deskripsi header di wordpress amatlah mudah, Anda cukup pergi ke halaman Dashboard > Appearance > Customize > Site Title & Tagline > kemudian pada Site Title isikan judul header Anda, lalu pada Tagline, isikan deskripsi header atau situs Anda.
NB: tutorial cara menampilkan judul dan deskripsi website pada header di WordPress ini mungkin tidak ada di http://wordpress.or.id/membuat-themes-wordpress, oleh karena itu perhatikan tutorial ini baik baik!

Menampilkan-Judul-dan-Deskripsi-Website-Pada-Header-di-WordPress

Menampilkan Judul dan Deskripsi Website Pada Header di WordPress

cuxcrop

customizecrop
aturan standarnya, ketika kita telah menyebutkan site title dan mendeskripsikannya, maka secara otomatis akan muncul pada elemen header.
headercrop
Anda bisa melihat bahwa apa yang tertulis pada header, itu tergantung dari apa yang kita input pada site title dan tagline, mungkin saat ini masih oke-oke saja, Anda masih merasa puas dengan keterbatasan ini, namun pada suatu saat nanti Anda akan berpikir, bagaimana mengganti tulisan yang terpampang pada header dengan gambar atau logo? artinya jika pengguna menginginkan judul dan deskripsi header yang tampil berupa gambar, atau pengguna ingin mengganti judul header dengan logo di WordPress maka secara otomatis site title dan tagline yang berupa tulisan yang tertera pada header akan hilang, begitu pula sebaliknya, jika Anda tidak menjadikan logo sebagai pengganti dari tulisan tersebut, maka yang nampak pada header adalah apa yang Anda input pada site title dan tagline. disinilah kita akan membahas, bagaimana membuat header yang dinamis, bagaimana menjadikan logo sebagai site title dan tagline, dan bagaimana menampilkan judul dan deskripsi website pada header di WordPress? ikuti terus tutorial ini.

Untuk menampilkan judul dan deskripsi website pada header di WordPress agar header menjadi dinamis, Anda harus mengetikkan script di bawah ini, namun sebelum mengetikkan script di bawah ini, pastikan Anda terlebih dahulu membuat logo berupa site title dan description, jika Anda sudah melakukannya, silahkan ikuti instruksi di bawah ini step by step:

 

Step 1: Buka functions.php dan ketikkan script dibawah ini, lalu save:

function sead_theme_customizer( $wp_customize ) {

$wp_customize->add_section( 'sead_logo_section' , array(
'title'       => __( 'Logo', 'sead' ),
'priority'    => 30,
'description' => 'Upload a logo to replace the default site name and description in the header',
) );

$wp_customize->add_setting( 'sead_logo' );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'sead_logo', array(
'label'    => __( 'logo', 'sead' ),
'section'  => 'sead_logo_section',
'settings' => 'sead_logo',
) ) );

}
add_action('customize_register', 'sead_theme_customizer');


Step 2: Buka header.php, ketikkan script dibawah ini, lalu save.





<header>




<div class="header-inner">
<?php if ( get_theme_mod( 'sead_logo' ) ) : ?>




<div class='site-logo'>
<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'sead_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
</div>




<?php else : ?>




<hgroup>




<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>








<h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>




</hgroup>




<?php endif; ?>
</div>




</header>




eits.. tunggu dulu! jika Anda mengikuti tutorial pembuatan template ini dari awal, sebelum memasukkan kode yang di atas tadi, yaitu kode untuk menampilkan judul dan deskripsi website pada header di WordPress, buka file header.php lalu hapus terlebih dahulu kode di bawah ini:



<header>


<h1>ini Judul Header</h1>




<h2>ini Deskripsi header</h2>


</header>


setelah kode tadi dihapus, silahkan masukkan kode yang ditulis pada step 2 tadi tepat dibawah kode:


<div class="outer-wrapper">


Step 3: Masuk ke Dashboard > Appearance > Customize > Logo, masukkan logo yang telah Anda buat tadi kemudian save, dan Anda akan melihat logo header yang telah Anda buat telah terpampang pada header sekaligus mewakili site title dan tagline.
headeCROP
tHat’s it! itulah mungkin penjelasan tentang cara menampilkan judul dan deskripsi website pada header di WordPress

Saya rasa tidak perlu menjelaskan kodenya sepotong demi sepotong, karena kodenya terlalu banyak dan juga memakan waktu, sedangkan kesibukan saya masih segudang banyaknya.

Kursus bahasa arab berkualitas

2 comments

Leave a Reply

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

  1. Pingback: Membuat Header Blog | KafeinKode

  2. akhi.purnomo@gmail.com'

    Jozz… makasih gan..

    Reply