Cara Mengubah Heading pada Wordpress

Heading bukanlah Header, akan tetapi heading bisa menjadi header. Pusingkan? Ga usah khawatir, kalian dapat mempelajarinya disini.

Cara Mengatur Heading Pada Blog WordPress

Heading sederhananya serupa dengan sebuah judul penting dalam sebuah artikel. Pada format HTML heading disusun dengan tag seperti H1, H2, H3 dan H4. Biasanya tulisan yang memiliki heading akan menjadi besar dan tebal.

Pada blog WordPress, H1 biasanya disediakan untuk nama blog yang berada pada header atau masthead dari halaman. Sedangkan untuk H2 pada umumnya akan ditemukan pada judul postingan, judul komentar dan judul sidebar. Untuk H3 terkadang ada yang menggunakannya untuk judul komentar, namun dapat digantikan oleh H2. Setiap tema atau themes disusun dengan cara yang berbeda, tergantung pada penyedia blog itu sendiri.

Heading H1

Standar pengaturan atau default untuk H1 berada di header, pada umumnya dikenal sebagai Masthead pada halaman utama tema / themes anda. H1 sering menggunakan tag bloginfo():

Contoh : <h1><?php bloginfo(‘name’); ?></h1>

Kalian dapat menemukan susunan css nya di bagian style.css yang pada umumnya dibuat seperti:

Contoh :

h1 {attributes}

or

#header h1 {attributes}

Pada bagian ini, anda dapat mengatur bagaimana tampilan judul yang kalian inginkan dalam #header di halaman utama web kalian.

Sebagian orang ingin mengganti header mereka dengan menggunakan logo, namun ada yang menggunakan text untuk memenuhi standar untuk kemudahan akses bagi mesin pencari atau search engine. Anda dapat membiarkan H1 dan deskripsinya pada tempatnya dengan menambahkan logo di header dengan melakukan pengaturan di style.css atau di header.php dengan contoh seperti:

h1 {display: none; font-size: 150%; color: white;}

Heading H2

Heading H2 dapat ditemukan di setiap bagian pada themes WordPress. H2 pada umumnya dapat ditemukan pada judul postingan, judul komentar, judul sidebar ataupun menu. Styling ini memiliki banyak judul H2 dan sedikit rumit.

Mari kita lihat apa saja yang menjadi style dalam style.css untuk H2:

h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%; color: green; font-weight: bold; }

#comments h2 {font-size: 90%; color: yellow; font-weight: bold;
padding: 2px; background: green; border: solid 1px navy; }

#sidebar h2 {font-size: 85%; color: navy; background: transparent;
font-weight: bold; border-bottom: dashed 2px yellow; }

Masing-masing bagian memiliki Heading H2 di WordPress, namun masing-masing disusun pada tempat yang berbeda.

Standarnya, contoh pertama setiap H2 terdaftar akan terlihat seperti itu. Dengan meletakkan sebuah ID (#) atau Class (.) dibagian depan tag Heading H2, anda dapat memodifikasi tampilannya. Tapi, akan selalu ada tapi dengan style.css. Diluar ID atau Class akan bertindak seperti parent untuk mempengaruhi judul heading H2 lainnya.

Misalnya, jika kita tidak memodifikasi warna tulisan untuk #comments H2, maka warna tulisan lainnya akan sama seperti parent H2 yang berwarna hijau. Hati-hati untuk menambahkan atau memodifikasi setiap style yang berbeda jika anda ingin merubahnya. Ingat bahwa parent Heading H2 akan mengisi setiap kekosongan yang di tinggalkan.

Anda dapat mempelajari lebih lanjut tentang hubungan CSS untuk parent/child dalam artikel Codex pada masalah CSS yang disebut CSS Parent dan Child Relationship.

Heading H3 dan H4

Jika anda ingin menulis artikel yang panjang, gunakan heading untuk memisahkan bagian seperti mengumumkan perubahan dalam subjek atau hanya menambahkan sedikit artistik “ruang” atau menggunakan gambar. Bagian heading dibuat oleh anda sendiri ketika anda menulis artikel. Pada umumnya, H3 dan H4 dapat digunakan dan terkadang H5 juga dapat digunakan.

Pada themes atau tema anda berkemungkinan atau tidak termasuk heading H3 dan H4. Dalam beberapa tema, tag H3 digunakan dalam judul komentar. Anda dapat dengan mudah memeriksa style.css anda dengan mencari H3. Apabila tidak ditemukan, anda dapat membuatnya sendiri.

Untuk menggunakannya, secara manual anda mengetik tag pada sekitar judul dengan menggunakan spasi ganda sebelum dan sesudah, jika anda tidak menggunakan HTML dalam postingan anda. Dengan cara ini, WordPress akan tahu secara otomatis menambahkan tag paragraf saat anda membuat postingan. Mungkin akan terlihat seperti ini di layar Write Post Screen :

…uses with WordPress that I enjoy using.

<h4>More Talk About WordPress Features</h4>

We enjoy talking more about the many 
features WordPress has to offer the blogger….

Standar tema fitur tag H3 dengan jenis yang standar sedikit lebih kecil dari tag H2 akan tetapi lebih besar dari font tag H4. Anda dapat mengatur perbedaan ukuran di style.css.

Membagi konten anda dalam postingan bisa memiliki lebih dari tulisan warna-warni dan lebih besar. Anda dapat menambahkannya dengan menggunakan gambar dan style untuk pembagian pada bagian ini untuk meningkatkan tampilan situs anda. Mari kita lihat dua contoh pada gambar dibawah ini.

Dalam contoh pertama, kita menggunakan gambar dari daun yang diatur di latar belakang dari judul di sebelah kiri text. Sesuaikan padding sehingga text judul akan pindah 45px untuk membuat ruang bagi gambar latar belakang. Perhatikan kami juga telah menetapkan gambar pada latar belakang dengan format no-repeat sehingga hanya terdapat satu gambar daun yang muncul. Jika tidak menggunakan format no-repeat, maka akan terdapat seluruh daun pada postingan anda.

Membicarakan Fitur WordPress
Kami senang membicarakan lebih banyak fitur WordPress untuk menawarkan kepada blogger….

CSS dalam style.css untuk ini mungkin terlihat seperti ini:

h3 {font-size:130%; color:#A30000; font-weight:bold; 
background:url(leaf.gif) left no-repeat; 
padding: 10px 10px 10px 45px}

Membicarakan Fitur WordPress
Kami senang membicarakan lebih banyak fitur WordPress untuk menawarkan kepada blogger….

Dalam contoh pada pos kedua, kita sudah memindahkan gambar daun sehingga berada diatas postingan dan terlihat seperti mengambang diatas tulisan. Hal tersebut menambah lebih banyak ruang. Pada bagian CSS dalam style.css mungkin akan terlihat seperti ini:

h3 {font-size:130%; color:#A30000; font-weight:bold; 
background:url(leaf.gif) no-repeat top center; 
padding: 60px 10px 10px; text-align:center}

Heading dapat dengan banyak menambahkan desain untuk situs anda secara keseluruhan, jadi gunakanlah imajinasi anda dan bersenang-senanglah dengan style.css.

Rincian Heading

Di WordPress, banyak judul postingan dalam fitur informasi selain hanya judul postingan. Banyak judul termasuk pada waktu, tanggal, penulis, dan kategori untuk sebuah artikel. Anda dapat memilih elemen apa yang akan menyertakan atau mengecualikan dalam judul postingan.

Berikut adalah contoh dari judul postingan :

<h2>
<a href=”<?php the_permalink() ?>” 
rel=”bookmark” title=”Permanent Link to 
<?php the_title_attribute(); ?>”>
<?php the_title(); ?></a>
</h2>
<small>
Posted <?php the_time(‘F jS, Y’) ?> 
by <?php the_author() ?>
in <?php the_category(‘, ‘) ?></small>

Dimulai dengan tag heading H2, dan kemudian mencakup link ke dalam judul postingan. Pada bagian berikutnya, dikendalikan oleh tag <small>, adalah tag template untuk waktu, penulis, dan kategori. Akan terlihat seperti ini :

Menulis Artikel Menggunakan Wordpress
Posted Monday, 21 February 2005 by Harriet Smith in WordPress, Tales

Anda dapat mengubah tag penulis untuk the_author_post_link (), atau menambahkan informasi lebih seperti waktu untuk informasi judul postingan atau menghapus tag ini. Anda dapat mempelajari lebih lanjut tentang data postingan meta dalam artikel pada Customizing Your Post Meta Data Section.

Merancang Heading

Sekarang anda telah belajar dimana anda dapat menemukan judul dasar dalam Tema di WordPress, saatnya untuk anda bersenang-senang dengan merancang atau memodifikasi tema anda sendiri. Ada banyak cara untuk mengendalikan desain judul anda. Anda dapat mengubah ukuran tulisan, warna tulisan dan gaya tulisan atau menambahkan gambar dan latar belakang yang menarik. Biarkan anda berimajinasi sendiri :).

Sumber : https://codex.wordpress.org/