Blogging · Juli 29, 2021

Cara Menyingkat Judul Posting di Homepage WP dengan CSS

Cara membatasi tampilan daftar judul artikel di WordPress dengan Additional CSS

Yabdhi.comCara Menyingkat Judul Posting atau Tampilan Daftar Artikel di WordPress – Apakah Sobat bloggers suka menulis judul posting dengan kalimat yang panjang untuk membuat isi artikel blog langsung bisa difahami pembaca dari judulnya?

Namun hal itu akan tampil kurang menarik di homepage atau daftar artikel di blog. Karena judul yang terlalu panjang nampak tidak rapi.

Daftar Artikel sebelum gunakan cara menyingkat judul posting
Contoh Daftar Artikel dengan judul panjang – nampak tidak rapi

Jika Sobat ingin membatasi jumlah kata atau baris judul artikel pada tampilan daftar artikel di homepage blog WordPress, tanpa menghilangkan estetika karena ada tambahan titik-titik di akhir judul, ternyata ada cara yang sederhana melalui Additional CSS di Customisasi thema WP.

Berikut cara menyingkat judul posting di Homepage WP:

1. Temukan kode kolom judul artikel melalui fitur ‘Inspect‘.

Caranya, klik kanan pada kolom atau judul posting yang ingin kita custom, kemudian pilih ‘Inspect’ yang biasanya ada di pilihan paling bawah.

Klik Kanan pada judul yang ingin dicustom, pilih inspect atau inspeksi
Klik Kanan pada judul yang ingin dicustom, pilih inspect atau inspeksi

Lalu cari kode yang berkaitan dengan mencoba-coba klik pada kolom kode inspect yang akan keluar di sebelah kanan, biasanya akan diberi tanda jika kode tersebut mengarah pada kolom yang akan kita custom.

Mencari kode kolom judul artikel melalui inspeksi pada browser
Mencari kode kolom judul artikel melalui inspeksi pada browser

Copy-paste kode tersebut pada ‘Additional CSS‘ di halaman Customize WordPress.

2. Buka halaman ‘Customize‘ thema WP.

Pada dashboard WP, halaman customize thema bisa ditemukan melalui pilihan ‘Appearance‘ atau ‘Tampilan‘ pada toolbar di sebelah kiri dashboard.

Halaman Customize di Dashboard WordPress
Halaman Customize di Dashboard WordPress

3. Pilih ‘Additional CSS’

Ketik kode kolom judul artikel yang sudah dicopy dan tambahkan kode berikut setelahnya:

{height: 40px; overflow: hidden;}

Jika ingin sekaligus mengatur ukuran huruf dan ketebalannya, bisa ditambahkan kode pengaturan tersebut. Sehingga untuk contok dengan kode yang saya pilih sebelumnya, kodenya di Additional CSS menjadi seperti berikut:

.alx-tab .tab-item-title {height: 40px; overflow: hidden; font-size: 14px; font-weight: 500;}
Copy-paste Kode di Additional CSS lalu Publish
Copy-paste Kode di Additional CSS lalu Publish

Atur berapa ukuran tinggi kolom judul yang diingikan dengan mengganti angka 40px dengan ukuran yang lebih cocok untuk memuat semua huruf hingga terlihat sempurna pada batas baris yang diinginkan.

Jangan lupa klik ‘Publish‘ setelah pengaturan selesai.

Hasil Akhir dari tips Menyingkat Judul Posting

Tampilannya akan jadi lebih rapi seperti berikut:

tampilan setelah gunakan cara menyingkat judul posting
Daftar artikel setelah dirapikan dengan membatasi tampilan judul artikel

Sebagai informasi tambahan, tips ini bisa digunakan tidak hanya untuk tampilan judul artikel, tapi juga yang lainnya seperti excerp, gambar atau komponen tertentu di sidebar blog, intinya adalah temukan kode kolom yang ingin kita batasi ukuran tampilannya, melalui fitur ‘Inspect‘ pada browser.

Demikian cara menyingkat judul posting di homepage WordPress, semoga tips sederhana ini bermamfaat bagi Sobat Bloggers yang sedang merapikan tampilan blog-nya.

Baca juga: