Artikel ini telah dilihat : 144 kali
Cover Blog's

Cara kustom tema superfast wordpress untuk kenyamanan baca (optimize for reading)

Diposting pada

Blog, Introveritukeren.com hadir dengan platform wordpress. berjalan menggunakan theme superfast child. Tema wordpress ini telah dioptimalkan untuk ‘reading experience’ first sehingga secara tampilan sudah tidak sama seperti tampilan default-nya.

Beberapa kustomisasi dalam tema superfast ini akan saya bagikan untuk Anda yang mungkin membutuhkan ide untuk eksplorasi tema atau bagi Anda yang sedang mencari referensi untuk melakukan pembelian tema superfast. (yang mau beli, boleh klik ya)

Sekilas tentang tema Superfast

Superfast Theme adalah tema yang didesain untuk platform wordpress. Tema ini dikembangkan Gian Muhammad Ramadhan. Tema superfast dijuluki sebagai ‘High CTR Theme’ karena tema ini dioptimalkan untuk para publisher karena mendukung beberapa penempatan jenis iklan.

Terdapat sembilan penempatan yang bisa dikustomisasi sesuai dengan kebutuhan. Yaitu:

  1. Disamping Logo
  2. Dibawah Menu
  3. Sidebar Kanan
  4. Footer
  5. Floating Footer
  6. Sisi Kiri & Kanan Mengambang
  7. Awal sebelum artikel post
  8. Tengah artikel
  9. Di akhir artikel post

Selain itu, yang juga nggak kalah seru adalah tema superfast sudah mendukung versi Accelerated Mobile Pages (AMP). Tema ini premium, untuk memilikinya Anda hanya perlu menginvestasikan sedikit dana Anda sekali saja dan kemudian bisa menggunakan selamanya bahkan bisa digunakan untuk banyak blog (selama masih milik pribadi). Terdapat dua jenis lisensi yang bisa dipilih, yaitu personal dan developer.

Dengan harga yang sangat terjangkau sekitar $20 sekitar 279.740 rb-an saja, tapi kalau mau order bulan ini ada diskon $5 jadi hanya sekitar rp. 209.000 an. Anda bisa mendapatkan layanan pertanyaan seputar setting dan banyak hal lainnya yang dijumpai selama penggunaan. Jika ada update, Anda bisa menikmati versi yang baru-nya tanpa dikenakan biaya tambahan.

Satu lagi, terdapat group facebook yang membahas seputar problem serta pertanyaan dari para user lain. Sehingga Anda bisa belajar banyak dari situ dan mendapatkan akses informasi berharga yang dialami oleh orang lain.

Jika Anda ingin memilikinya, silakan langsung memesan melalui situs resminya.

Alasan saya menggunakan tema superfast

Ada sembilan alasan kenapa akhirnya saya makai tema ini.

  1. Niat nggak mau gonta-ganti template
  2. Pengen ngilangin copyright dari tema versi yang gratis
  3. Ads ready yang bisa disetting melalui plugin bawaan bernama ‘idblogcore’ kebetulan ada akun google Adsense
  4. Ada dukungan Support yang hanya tersedia pada theme berbayar
  5. Seo Friendly, Mobile Friendly & Fast Loading
  6. Bisa dicustomize suka-suka, terdapat banyak font yang bisa dipilih dan warna yang bisa disetting semau kita.
  7. Terdapat related post pada akhir postingan.
  8. Mendukung schema.org dan card twitter data
  9. Woocomerce Ready

Nah, untuk penjelasannya saya akan ceritakan sedikit dibawah ini.

1. Niat nggak mau gonta-ganti template

Saya sudah cukup lama ngeblog dengan wordpress. Hal yang paling menyita waktu adalah ‘ngurusin tampilan’ padahal konten is king atau traffict is first! Dulu saya terjebak dalam mengutak-atik tampilan. Terlebih jika tema yang saya pakai versi gratis. Nggak suka dikit, pindah tema lain. Kan gratis nggak ada pertimbangan. Kalo berbayar ya sayang.,

Sementara sejak makai tema berbayar, mau pindah tema lain ya ‘itung-itung’ lagi dong. Wong sudah menginvestasi dana untuk membeli. Tapi, enaknya makai tema versi premiun berbayar saya jadi bisa fokus dalam membuat konten blog dan meningkatkan traffict kunjungan. Jujur, ini adalah pertama kalinya saya membeli tema premium.

2. Pengen ngilangin copyright dari tema versi yang gratis

Paling nggak bebas dalam ngeblog serta sedikit kurang puas adalah saat persoalan copyright milik orang lain ikut singgah ke dalam atribut blog. Termasuk ya salah satunya copyright identitas dari si pembuat tema untuk versi gratisan yang nggak boleh dihilangkan.

Sebenarnya, bisa aja ngilangin hak cipta. Tapi saya nggak mau ngelakuin itu karena itu pelanggaran. Dzalim. Khawatir hasil yang didapat menjadi tidak berkah. Selain itu dengan membeli tema premiun, berarti telah mendukung serta menghargai karya si pembuatnya dimana ia akan bisa melakukan pengembangan perbaikan lebih update.

3. Ads ready yang bisa disetting melalui plugin bawaan bernama ‘idblogcore’ kebetulan ada akun google Adsense

Ini adalah fitur yang memang menjadi tujuan dibuatnya tema superfast wordpress ini. Dengan tujuan untuk mendapatkan high CTR (Click Through Ratio) dibuatlah beberapa jenis penempatan iklan yang telah dioptimalkan. Pada versi gratisnya, fitur seperti ini nggak akan tersedia. Jadi kelebihan sendiri dengan adanya plugin idblogcore dimana semua setting kode iklan bisa dilakukan melalui tool ini.

4. Ada dukungan Support yang hanya tersedia pada theme berbayar

Pertama kali saya nanya itu langsung ke mas Gian MR melalui email. Saya menanyakan mengenai kenapa gambar nggak tampil, kenapa ini begini-begitu. Wajar banget, kalau pemula bakal nanya karena butuh adaptasi dulu dengan seting tema. Selain dukungan support, ada juga kok dokumentasi tema yang telah disediakan melalui artikel dan juga video. Intinya sangat mudah banget, tema ini disetting.

5. Seo Friendly, Mobile Friendly & Fast Loading

Hasil ukur web saya di gtmetrix

Saya ketika membeli tema ini belum paham mengenai pentingnya template yang seo friendly. Yang saya tahu adalah wajib mendukung mobile friendly karena semua orang zaman sekarang mengakses internet melalui ponsel dan gadget.

Nah, setelah saya mencari tahu bahwa google sangat menyukai struktur tema yang dibuat dengan mempertimbangkan keramahan seo, itu akan memudahkan dalam optimasi hasil pencarian. Untungnya, di superfast ini sudah didukung dengan hadirnya html versi 5 dimana itu adalah syarat tema yang seo friendly yang saya dapat infonya dari ibrahim vatih.

Alhasil ujung-ujungnya inilah yang paling disukai dan diburu yaitu tema ini dipotimalkan untuk “fast loading” karena kebutuhan akan kecepatan itu sangat berpengaruh dalam user experience serta sangat disukai oleh google.

6. Bisa dicustomize suka-suka, terdapat banyak font yang bisa dipilih dan warna yang bisa disetting semau kita.

Jujur lagi nih, awalnya saya mikir-mikir lama banget sebelum membeli tema ini. Saya cek referensi dari situs yang sudah menggunakannya. Saya klik lagi demo website-nya. Kok tampilannya gini-gini amat sih, diluar ekspektasi dari yang saya harapkan. Duh, ragu mau beli. Terus mengenai font-nya apakah ada yang lain, asli saya nggak tahu sebelumnya.

Sampai akhirnya nekat beli. Setelah terbeli dan saya pasang, saya utak-atik sendiri dan saya menemukan ada banyak bangeet font bawaan yang bisa dipilih. Saya sendiri sampe nggak sempet nyobain satu-satu jenis font-nya. Gila, buanyak bangeet!

Saya sih nyarinya Helvetica aslinya, tapi yang itu nggak ada hehe. Maklum, itu font favorit saya dan memang juga font premiun. Tapi ada banyak pilihan font dari google font yang bagus-bagus dan gratis untuk dipakai dengan lisensi web font. Intinya adalah untuk warna, bebas agan mau milih warna apa aja ada. Untuk font juga ada banyak.

7. Terdapat related post pada akhir postingan.

Related post adalah fitur yang sangat penting, karena bisa menawarkan pembaca untuk melihat artikel lain yang masih dalam satu kategori atau berkaitan. Dalam related post tema superfast ini jumlahnya bisa disesuaikan suka-suka. Saya sendiri hanya menampilkan sebanyak 6 saja, alasannya adalah menyesuaikan dengan tata letak yang pas pada tampilan desktop.

Untuk fitur dalalm related post terdapat gambar dan judul. Jadi, sangat dianjurkan teman-teman menggunakan gambar fitur yang bisa memancing pembaca untuk melakukan klik dikombinasi dengan headline bagus banget yang bersifat ‘stopping effect.’

8. Mendukung schema.org dan card twitter data

Saya belum begitu paham fungsi ini. Yang pasti adalah untuk mengoptimalkan hasil pencarian (SEO). Yang jelas saya ngikut aja, dan saya mengaktifkan fiturnya. Nanti saya akan cari tahu dulu mengenai manfaat schema dan akan saya update konten ini secara berkelanjutan. Oh iya, boleh dibetulkan juga kalau penulisan saya salah, ya.

9. Ada child-theme, untuk ajang kustomisasi

Child-theme adalah tema anak. Fungsinya adalah untuk kebutuhan kustomisasi. Jadi saat sudah dilakukan kustomisasi pada tema induk yang akan berefek pada penampilan blog, jika terdapat pembaharuan tema induk maka bisa jadi tampilan yang sudah dikustom tersebut bisa berubah atau kembali kepada setingan default tema induk.

Nah, kalau yang diubah pada tema anaknya (child) maka tidak akan berpengaruh karena perubahan secara mayor terdapat pada tema induk sedangkan kita mengkustom melalui tema anak. Sepemahaman saya sih begitu.

Kustomisasi tema superfast yang saya lakukan

Seperti teman-teman lihat. Tema ini sudah ada banyak sekali kustomisasi. Paling menonjol adalah pada menu footer. Lalu antar muka font, warna, serta tata letak. Untuk tata letak halaman utama saya masih menggunakan tata letak standar yaitu artikel dengan gambar kecil.

Di sebelahnya ada widget yang saya isi dengan iklan dari google adsense, profile alias perkenalan singkat saya, ikon sosial media, statistik situs, popular post. Lalu pada bagian footer seperti yang teman-teman lihat sekarang.

Optimized for User Experience

Nah, untuk tampilan blog atau post artikel. Saya menyeting tema ini dengan hanya memuat satu kolom artikel saja dalam satu halaman desktop view. Saya nggak makai sidebar, yang seharusnya bisa untuk memuat iklan dan beberapa widget lain.

Tujuan saya adalah untuk membuat kenyamanan pengguna dalam membaca. Supaya fokus dengan konten artikel yang saya buat. Untuk iklan, paling saya hanya selipkan pada bagian artikel dan itu juga akan terus saya evaluasi tentunya dengan mempertimbangkan result, user experience dan data lain yang penting.

Customize Footer Menu

Untuk menu footer ini saya telah 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 saat pertama kali saya salah menerapkan kode dari beliau. Thanks, ya mas Ari. Untuk langkah-langkah custom footer, berikut caranya (jika Anda ingin menerapkan).

Cara memodifikasi Footer

1. Sunting Berkas Tema

custom superfast theme
Cover Blog’s

Pergi ke 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 udah save update file berkas php.

2. Pindah ke footer.php

custom footer superfast theme
Cover Blog’s

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

cara menghilangkan garis superfast theme
Cover Blog’s

Nah, terus untuk ngilangin garis pelangi. Tekan Ctrl+f, cari kode:

<div class="gmr-bgstripes">

Nah, caranya bisa dihapus atau bisa di dissmiss. Kalo saya lebih saran didismiss aja. Caranya, kasih kode <!– & –> diantara class gmr-bgstripe.

4. Setting Rata Kanan menu footer

Custom css superfast child
Cover Blog’s

Nah, terus biar rata kanan kasih kode css ini di tema anak (superfast child) nya.

@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

Tambahan biar pas diseleksi teksnya, berubah warnanya. Taruh tepat dibawah kode css menu rata kanan.

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

6. Buat Menu Footer

buat dan edit menu superfast theme wordpress
Cover Blog’s

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

Kustomisasi Jumlah View

Dalam setiap artikel blog, saya beri code untuk menghitung jumlah dibaca artikel. Jadi membuatnya tidak menggunakan plugin, tapi langsung mengedit file pada file editor dan menaruhnya disitu. Tujuan saya adalah ingin mengetahui jumlah artikel yang saya buat sudah dibaca sebanyak berapa kali sejak awal dibikin.

Namun kelemahan dari kode ini, adalah saat ada penyimpanan otomatis ketika melakukan update konten. Jumlah view juga ikut bertambah. Jadi view organik yang sebenarnya adalah kurang dari jumlah yang tertera. Mau bagaimana lagi, wong nggak bisa diperbaiki lagi. Hehe.

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.

Last Updated on 23 Februari 2021

Gambar Gravatar
Dan bersegeralah kamu mencari ampunan dari Tuhanmu dan mendapatkan surga yang luasnya seluas langit dan bumi yang disediakan bagi orang-orang yang bertakwa (Al - Imran: 133) | ...Berjihadlah di jalan Allah dengan harta dan jiwa kalian... (At-Taubah 41) | Dan Kami perintahkan manusia (agar berbuat baik) kepada kedua orang tuanya... (Qs. Luqman 14).

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.