Merancang Header Pada WordPress Untuk Pemula

Secara default, header WordPress adalah bagian kode sederhana. Anda tidak perlu masuk ke kode untuk mengubah header yang datang dengan apa pun Theme WordPress Anda pilih. Anda mengatur judul blog atau website dan deskripsi dalam Administrasi> Settings> General panel, dan WordPress melakukan sisanya.

Dalam bentuk yang paling sederhana, WordPress Tema Klasik fitur kode header seperti ini di wp-content/themes/classic/file header.php Template:

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

Header diatur dalam sebuah tag HTML h1 dan memiliki satu tag template yang digunakan dengan dua pilihan yang berbeda atau parameter. Anda dapat mempelajari lebih lanjut tentang parameter ini di dokumentasi untuk bloginfo (). Pada dasarnya, yang pertama menampilkan URL dari website di link, dan yang kedua menampilkan nama blog atau website sebagaimana termaktub dalam Administrasi> Settings> General panel. Ketika pengguna bergerak mouse di atas judul header, header dapat diklik untuk kembali ke halaman utama atau depan situs sebagaimana diatur dalam Administrasi> Settings> General panel. WordPress Tema Default memiliki gambar di latar belakang dan menyajikan header seperti ini di wp-content/themes/default/header.php:

<div id="header">
 <div id="headerimg">
   <h1>
    <a href="<?php echo get_option('home'); ?>">
       <?php bloginfo('name'); ?></a>
   </h1>
     <div class="description">
       <?php bloginfo('description'); ?>
     </div>
  </div>
</div>

Styling Header

Seperti tercantum dalam dua contoh di atas, gaya untuk header yang terkandung dalam pemilih h1, header, headerimg, dan deskripsi CSS. Ini semua ditemukan dalam style.css, meskipun dapat ditemukan dalam gaya di header.php dari Theme yang Anda gunakan. Anda harus memeriksa kedua tempat.

Di Theme Classic, CSS untuk header yang ditemukan dalam satu pemilih, #header tersebut.

#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% 'Times New Roman', Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}

Warna latar belakang diatur ke warna hijau dan ada perbatasan sepanjang jalan di sekitar header yang berubah warna menciptakan tersembunyi, efek bayangan. The Times font diatur dengan ukuran 230% dengan luas daripada huruf spasi normal. Padding di sisi kiri indentasi teks dari kiri.

Semua ini dapat dengan mudah diubah, memberikan perbatasan lebar tebal dan membuat semuanya warna yang sama, mengubah warna latar belakang, ukuran font dan gaya, surat jarak, dan lebih dengan memodifikasi informasi dalam setiap atribut gaya.

Hal yang sama juga berlaku Default Theme WordPress header, kecuali ada lebih gaya untuk memikirkan dan mereka ditemukan dalam “kepala” tag header.php dan style.css, meskipun setelah Anda gaya Anda set, Anda dapat memindahkan informasi ke style sheet Anda.

Gaya yang mengontrol tampilan header ditemukan dalam penyeleksi h1, header, headerimg, dan deskripsi CSS. Sama seperti tema klasik, cari referensi ini dan membuat modifikasi Anda di sana untuk mengubah tampilan.

Mengubah gambar header dari Default Theme WordPress telah disederhanakan dengan pengenalan utilitas yang disebut Kubrickr. Ini hanya meminta Anda untuk mengisi nama file gambar baru untuk header dan kemudian beralih untuk Anda, sehingga Anda tidak harus menggali ke dalam kode. Jika semua yang Anda ingin mengubah adalah gambar header, ini adalah alat yang sangat berguna dan mudah.

Jika Anda ingin mendapatkan tangan Anda ke dalam kode, menggali ke dalam gaya header dan membuat perubahan. Di bawah ini adalah tutorial sederhana pada perubahan hanya gambar header secara manual.