Cara memodifikasi tema superfast wordpress supaya tampilan makin indah

Note: Halo, tampilan tema superfast saya saat ini, sudah tidak sama dengan tutrial modifikasi yang saya uraikan dibawah ini ya. Karena pernah ganti tema, dan saat balik lagi tidak sempat mengulang settingan modifikasi.

Tetapi jika teman-teman ingin coba menerapkan modifikasi custom dibawah, silakan saja. Asih tetap work.

**

Modifikasi tema superfast yang saya lakukan, yaitu mengubah bagian header sampai footer sehingga ada banyak sekali perubahan. Yang paling menonjol terlihat pada menu footer, yang saya adopsi dari idenya mas Arie.

Optimized for User Experience

Selain memperhatikan faktor kecepatan. Saya berusaha menyajikan tampilan yang membuat pembaca nyaman saat landing. Blog yang cepat loadingnya, sudah pasti disukai pembaca begitu juga google.

Tema superfast alhamdulillah mendukung fitur yang membuat loading lebih cepat. Bahkan di beberapa pengecekan melalui gtmetrix, skor rata-rata B, pernah juga A. Kalau pun C, itu penyebabnya dari pihak ketiga seperti script google adsense atau faktor paket hosting.

Gambar yang nggak benar-benar perlu, saya kurangi supaya blog makin ringan. Saya usahakan iklan yang tampil juga tidak terlalu mengganggu.

Tipografi

Untuk tipografi, Saya pilih tampilan jenis font yang paling nyaman untuk membaca dalam layar. Yaitu menggunakan font jenis Georgia.

Note: Karena lisensi georgia tidak free for commercial use. Saat ini tidak saya gunakan. Opsinya, saya menggunakan typeface: Droid Sans, Open Sans.

Line height, line spacing, ukuran H1, H2, H3, H4, H5, H6 serta atribut lainnya sudah saya custom melalui tampilan css.

Untuk membantu mendapatkan ukuran font yang tepat, saya menerapkannya dengan menggunakan saran dari alat bernama GRT Kalkulator atau kalkulator Golden Ratio Typografi.

Pemilihan warna, saya putuskan menggunakan warna merah.

Tujuan saya membuat kenyamanan pengguna. Supaya pembaca fokus dengan konten artikel yang saya buat sehingga waktu yang diinvestasikan saat membaca tulisan saya nggak sia-sia. Atau pergi dengan perasaan kecewa.

Saya juga terus mengupdate artikel lama, karena di awal-awal saya menulis tidak dengan hati dan belum melalui proses penyuntingan (editing). Insyaallah mulai sekarang sudah mulai saya perbaiki.

Kustom Header

Pergi ke Tampilan – Penyunting Tema – Superfast (select). Cari header.php – cari

<nav id="site-navigation" class="gmr-mainmenu"

Lalu tambahkan kode ini

<?php do_action( 'gmr_the_custom_logo' );?>

Persis diatasnya.

Beralih ke tema superfast child. Tambahin kode ini:

/* Menambahkan logo pada website dan membuat menu float rata kanan */
.gmr-logo {
    margin-top: 5px!important;
}
@media (max-width: 1200px) {
.gmr-logo {
    text-align: left;
    display: block;
    width: inherit;
	max-width:200px;
    margin-bottom: 0px;
}
}
#site-logo {
    float: left;
    margin: 10px 0px;
    padding-top: 13px;
    font-size: 18px;
	font-weight:600;
    background: #2eb86c;
    padding: 3px 7px;
    border-radius: 2px;
}
#site-logo a {
	color: white;
}
.gmr-mainmenu {
    float: right;
}

Klik Update.

Kustomisasi Footer Menu Tema Superfast

Menu footer tema siluperfast telah saya ubah dari aslinya. Saya hilangkan juga garis warna-warni yang terdapat di bagian pembatas antara body dengan footer.

Menu footer saya terinspirasi dari postingannya mas arie setiyawan bahkan saya juga sempat japri beliau untuk membantu custom saat pertama kali saya salah menerapkan kode. Thanks, mas Ari.

Untuk langkah-langkah custom footer, berikut ini caranya jika kalian ingin menerapkan hal sama.

1. Sunting Berkas Tema

Pergi ke Dashboard WordPress, lalu klik Tampilan – Penyunting Tema – Pilih Superfast (Induk) – Functions.php

Tekan CTRL + F, lalu paste: register_nav_menus(
Kalo sudah ketemu, tambahkan kode ini di bagian bawah secondary.

Kodenya:

'footermenu' => esc_html__( 'Footermenu', 'superfast' )

Terus, kalo sudah. Jangan lupa klik save update file berkas php nya.

2. Pindah ke footer.php

Tekan CTRL + F, cari bagian :

</div><!--.site-info -->

Di bagian bawahnya persis, tambahkan kode ini:

<div class="bottomMenu">
<?php wp_nav_menu( array(  'theme_location' => 'footermenu' ));?>
</div>

3. Remove BG Stipe (Menghilangkan garis pelangi)

Terus untuk menghilangkan garis pelangi melalui footer.php, tekan Ctrl+F, cari kode:

<div class="gmr-bgstripes">

Caranya bisa delete atau bisa dissmiss. Saya lebih menyaarankan dismiss saja. Caranya, kasih kode <!– & –> diantara class gmr-bgstripe. Selain lewat footer.php, menghilangkan bgstripes bisa dilakukan juga melalui CSS Customizer di WordPress dengan cara Hide.

4. Setting Rata Kanan menu footer

Lalu, agar rata ke kanan berikan kode css ini di tema anak (superfast child) nya. Lalu nanti yang diaktifkan pada blog, tema anak ini. Bukan tema induk, ya.

Karena jika yang diaktifkan tema induk tampilannya akan beda.

@media only screen and (max-width:480px){
.content-thumbnail {
display:block;
}
}
.bottomMenu {
display: block;
float: right;
}
.site-info {
float:left;
font-weight:300;
padding: 0 7px 0 3px;
}
.bottomMenu { display: inline-block;}
.bottomMenu ul { float:right;margin-bottom: 0;padding-left: 0;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 13px; }
.bottomMenu li a {
line-height:15px;
text-decoration:none;
font-weight:300;
padding: 0 7px 0 7px;
}
.bottomMenu li a:hover { color:#03324C; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;}

5. Color Select (Berwarna saat diseleksi)

Ini tambahan saja, biar teks yang terseleksi warnanya berubah. Sifatnya, opsional. Suka-suka temen-temen.

Kalo mau menggunakan, kode ini taruh tepat dibawah kode CSS menu rata kanan. Kalian bisa ganti warnanya sesuai tema blog. Gunakan kode RGB yang kalian sukai.

::selection {
background: #FFD700;
color: #000000;
}
::-moz-selection {
background: #FFD700;
color: #000000;
}

6. Buat Menu Footer

Susun daftar menu-nya, di bagian tampilan-menu.

Kustomisasi Jumlah View

Dalam setiap artikel blog, saya beri code untuk menghitung jumlah pembacaan artikel. Jadi membuatnya tidak menggunakan plugin, tapi langsung mengedit file pada file editor dan menaruhnya disitu.

Tujuan saya hanya ingin mengetahui jumlah artikel yang saya buat sudah dibaca sebanyak berapa kali sejak awal dibikin.

Namun kelemahan dari kode ini, saat ada penyimpanan otomatis ketika melakukan update konten, jumlah view juga ikut bertambah. Jadi view organik yang sebenarnya adalah kurang dari jumlah yang tertera.

Akhirnya saat ini sudah tidak saya gunakan lagi. Dan untuk tema blog ini, saat ini menggunakan tema galepro.

Kustom pada Last Update Article

Last update ternyata bermanfaat bagi perayapan google. Google akan secara berkala melakukan pengecekan konten kita, kapan terakhir dilakukan update.

Nha, fitur pada tema asalnya ini belum tersedia. Sehingga jika Anda membutuhkannya harus melakukannya dengan bantuan plugin. Untuk plugin yang bisa melakukan tugas ini namanya adalah last update wp.

Penambahan Table of Content

Ya, table of content alias daftar isi juga sangat bermanfaat bagi google. Karena itu akan menjadi item rich content yang akan ditampilkan pada halaman hasil pencarian google.

Fitur ini dibuat dengan bantuan plugin bernama ‘table of content plus’ yang bisa disearching melalui dashboar -> plugin.

Nah, kira-kira begitulah sedikit info customisasi yang bisa saya bagikan buat temen-temen. Jika kawan-kawan sedang membutuhkan referensi tema superfast ini untuk diterapkan ke dalam blog silakan bisa langsung memesan ke situs officialnya.

Oh iya, disana juga ada banyak tema lain yang bagus, yang mirip seperti situsnya liputan6 atau kumparan. Langsung cek saja.