modifikasi template superfast

Modifikasi lengkap template superfast wordpress

β€’β€’3 min read

Dulu saya pernah membuat ulasan untuk template superfast, pada artikel tersebut saya sudah membahas lengkap mengenai kelebihan serta kekurangan dari template ini, beberapa diantaranya adalah sedikitnya opsi navigasi dan tidak ada menu pada footer. Karena banyaknya pengguna template superfast lainnya yang bertanya hal terkait modifikasi melalui whatsapp, sepertinya lebih baik jika saya membuat panduan lengkapnya secara terpisah bagaimana modifikasi template superfast.

Prasyarat

  • Sudah memiliki template superfast, beli disini jika kamu belum punya
  • Paham dasar penggunaan HTML & CSS
  • Paham bagaimana mengedit file template wordpress baik langsung melalui theme editor ataupun secara manual melalui control panel

A. Modifikasi Navigasi Template Superfast

Pengaturan pada Customizer

Pada menu Appearance > Customize > General > General Layout, centang pilihan Disable Logo Section.

Pengaturan pada Theme Editor

1. Pada menu Appearance > Theme Editor, pilih template induk yaitu superfast, kemudian klik tombol select

2. Setelah tema dipilih, selanjutnya cari dan pilih berkas header.php

3. Pada baris kode disebelahnya, tekan tombol Ctrl + F untuk mencari baris <nav id="site-navigation" class="gmr-mainmenu", kemudian tambahkan baris ini tepat diatasnya

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

Setelah ditambah, seperti ini lah tampilannya

Jika sudah selesai, klik tombol update file untuk menyimpan perubahan.

4. Kemudian pilih kembali template superfast-child, lalu paste kode css dibawah 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;
}

jika sudah, silahkan klik tombol update file untuk menyimpan perubahan, berikut gambarnya

B. Modifikasi Footer Template Superfast

Pengaturan pada Theme Editor

1. Pada menu Appearance > Theme Editor, pilih template induk superfast, sama seperti point nomor 1 diatas

2. Masih pada tempat yang sama, cari dan pilih file function.php

3. Kemudian cari baris register_nav_menus( lalu tepat dibawah baris secondary tambahkan baris dibawah ini

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

jika sudah ditambahkan, kira-kira seperti ini gambarnya

jika sudah, simpan perubahannya seperti biasa.

4. Masih pada menu yang sama, cari dan pilih folder footer.php. Lalu cari baris kode </div><!-- .site-info -->, kemudian tambahkan baris ini dibawah kode tersebut.

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

Jika sudah, tampilannya editingnya akan seperti gambar dibawah ini

5. Langkah terakhir adalah dengan menambahkan baris kode css untuk membuat menu footer menjadi rata kanan.

@media only screen and (max-width:480px){
     .content-thumbnail {
         display:none;
     }
}
.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:#ccc; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;} 

Lalu simpan perubahan

Kesimpulan

Sekian dari saya untuk panduan modifikasi lengkap template superfast. Panduan ini saya buat selain untuk membantu teman yang lain, juga untuk saya gunakan sendiri jika suatu saat ada update terbaru dari templatnya. Selain itu, kamu juga bisa melihat source code dari file css yang saya gunakan disini. Yang artinya jika kamu terapkan mentah-mentah ke website kamu, maka tampilannya tidak akan berbeda jauh dari website milik saya.

Jika ada pertanyaan yang ingin disampaikan silahkan tulis saja dikolom komentar dibawah, dan jika kamu suka dengan artikel ini silahkan share artikel ini dengan menekan tombol share dibawah ini.

Bagikan Artikel :

Gravatar Image
Linux & Digital Marketing Enthusiast. Memiliki hobi untuk berbagi informasi dan wawasan melalui tulisan sederhana.

40 comments

  1. yang ini pakai superfast versi brp gan, punya saya pakai versi 1.1, saya coba tutor di atas kok perubahannya tdk banyak ya?

    gimana cara menghilangkan warna merah pada menu ya?

    1. Di update dulu mas templatenya, karena panduan ini saya buat dan disesuaikan untuk template superfast versi 2.0.3.

  2. Artinya tema yang aktif superfast-child ya mas?
    Trus kan di versi terbaru komentarnya dihapus, kalo mau buat kolom komentar seperti blog ini gmna? Soalnya saya pake disqus di versi amp ga muncul.

    1. iya yang aktif superfast-childnya. untuk menambah komentar di versi amp.
      edit file amp-templates/single.php

      tambahkan baris dibawah ini, tepat dibawah baris “get_template_part”
      //tambah komentar
      if ( comments_open() || get_comments_number() ) :
      comments_template();
      endif;

  3. 1. edit bagian “Share this :” itukan h3 nah untuk nyari itu dimana ya. Karena itu di munculin di TOC jadi niat saya mau ubah jadi BOLD aja.
    2. Untuk edit dan tambah sosial share gimana ya, saya mau nambah pinterest sama linkedin.

    Makasih mas, semoga mau bantu.

    1. 1. Untuk fitur share saya tidak menggunakan defaultnya mas.
      2. saya menggunakan plugin scriptless social share

      1. Solve mas, saya ubah margin-top: 10px, dari 5px ke 10px., thanks banyak, jd keren tampilannya. Cuma lg terkendala speed mas mobile masih mentok di 50, aq komen di setting autoptimoze tolong bals yaπŸ™πŸ™

    1. Menurut saya akan ada konfigurasi yang tidak kompatibel karena versi 2.0.3 dengan versi 2.0.1 saja sudah cukup banyak perbedaan πŸ™‚

    1. lebih tepatnya sama seperti di screenshot yang saya ada di artikel mas
      kalau tampilan blog yang sekarang hanya ada perubahan warna dan fontnya saja πŸ™‚

  4. mas, saya mau tanya.. cara ngilangin read more atau baca selengkapnya di homepage superfast gimana ya ? bikin tutor nya donk mas,, please bales ya..

    1. Caranya mudah kok mas.
      Dari Dashboard > Appearance > Customize > Blog > Blog Content

      Scroll kebawah, lalu kosongin aja bagian read morenya.

        1. Wah saya malah masih versi 2.0.3, mager banget buat update karena harus setting ulang konfigurasinya haha. sama sama mas

Leave a Reply

Your email address will not be published. Required fields are marked *