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. Selain itu, kamu juga bisa melihat source code dari file css saya seluruhnya 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.

Gravatar Image
Singkatnya tentang saya, seorang mahasiswa yang tinggal di Medan. Tidak suka mengkoleksi buku tetapi sangat suka membaca, Selengkapnya.

2 comments

Leave a Reply

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