WordPress

Mengkustomisasi Website WordPress Menggunakan Child Theme

Pinterest LinkedIn Tumblr

Artikel ini merupakan lanjutan dari artikel Memahami dan Membuat Child Theme WordPress, jadi sebelum melanjutkan membaca ada baiknya Anda pahami dulu apa itu child theme, bagaimana cara kerjanya, dan lain-lain di artikel tersebut.

Dengan menggunakan child theme Anda bisa membuat sedikit kustomisasi atau bahkan bisa benar-benar mengubah seluruh tampilan dari website WordPress Anda, tergantung dari keinginan dan pengetahuan kode PHP and CSS yang Anda miliki. Dengan tidak adanya batasan ini, Anda juga tetap perlu hati-hati, jangan sampai hasil kustomisasi Anda merusak fungsi-fungsi yang dibawa oleh parent theme yang Anda gunakan.

Contoh Kustomisasi Child Theme

Pada artikel ini saya akan membagikan beberapa contoh kasus yang umum untuk kustomisasi website WordPress menggunakan child theme. Beberapa diantaranya, biasanya mungkin Anda menggunakan plugin, tapi sebenarnya kustomisasinya sangat mudah dengan hanya menulis beberapa baris kode saja.

Semua kode di bawah ini harus Anda masukan ke dalam file functions.php yang sudah Anda buat sebelumnya.

1. Menambahkan Kode Google Analytics

<?php // jangan ikut sertakan tag ini!

/**
 * Menambahkan kode Google Analytics
 */
function backslashid_google_analytics() {
?>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx-x"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-xxxxxx-x');
    </script>
<?php
}
add_action('wp_head', 'backslashid_google_analytics', 1);

Kode di atas merupakan cara termudah untuk menambahkan kode Google Analytics tanpa plugin.
Kode ini add_action('wp_head', 'backslashid_google_analytics', 1); artinya adalah untuk memasukan kode Analytics yang ada di dalam fungsi backslashid_google_analytics ke area <head> website WordPress Anda. Kode tersebut disebut dengan Hooks, bisa Anda pelajari lebih lanjut di sini.

Kita improvisasi kode di atas dengan menambahkan conditional, ketika user atau visitor atau Anda yang mengakses website Anda sedang dalam posisi login, hilangkan kodenya agar Analytics tidak merekam orang yang sama terus menerus. Silahkan perbaharui kodenya menjadi seperti di bawah.

<?php // jangan ikut sertakan tag ini!

/**
 * Menambahkan kode Google Analytics
 * - Hilangkan ketika user sedang dalam posisi login
 */
function backslashid_google_analytics_logged_in() {

    // Jangan tampilkan kode Analytics ketika user sedang login
    if (is_user_logged_in()) {
        return;
    }
?>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx-x"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-xxxxxx-x');
    </script>
<?php
}
add_action('wp_head', 'backslashid_google_analytics_logged_in', 1);

2. Menambahkan Kode Google Search Console

Kode Google Search Console merupakan 1 baris kode untuk memverifikasi website Anda. Silahkan tambahkan kode di bawah ini.

<?php // jangan ikut sertakan tag ini!

/**
 * Menambahkan kode Google Search Console
 */
function backslashid_google_search() {
?>
    <meta name="google-site-verification" content="XXXXXXX" />
<?php
}
add_action('wp_head', 'backslashid_google_search', 2);

3. Menambahkan Kode Google Chrome theme-color

Untuk Anda yang belum mengetahui apa itu theme-color, Anda bisa membaca lebih detailnya di sini. Intinya kode ini untuk mengubah warna toolbar atau area atas browser Google Chrome pada Android sesuai dengan keinginan Anda.

Untuk mengganti warna tersebut sangatlah mudah, Anda hanya perlu menambahkan kode ini pada area <head> website Anda. <meta name="theme-color" content="#db5945">.

Berikut kode untuk Anda masukan ke dalam file functions.php di dalam folder child theme Anda.

Mengkustomisasi Website WordPress Menggunakan Child Theme
<?php // jangan ikut sertakan tag ini!

/**
 * Google chrome meta theme-color
 */
function backslashid_meta_color() {
?>
    <meta name="theme-color" content="#2196f3" />
<?php
}
add_action('wp_head', 'backslashid_meta_color', 3);

Sesuaikan warnanya pada code content="#2196f3" sesuai dengan keinginan dan kebutuhan Anda. Setelah Anda menambahkan kode tersebut, Anda bisa cek hasilnya dengan membuka Google Chrome pada smartphone Android Anda.

4. Memperbaharui jQuery

Kalau Anda coba mengoptimalisasi website WordPress menggunakan Lighthouse, Anda akan melihat peringatan akan rentannya versi jQuery yang digunakan oleh WordPress saat ini.

Menurut Otto, WordPress tidak bisa semena-mena memperbaharui versi dari jQuery dikarenakan akan membuat banyak themes dan plugins yang rusak karena perubahan versi ini.

Untuk mengatasi masalah ini, Anda bisa memperbaharui jQuery di website Anda dengan sangat mudah. Silahkan masukan kode di bawah ini.

/**
 * Memperbaharui jQUery
 */
function backslashid_replace_jquery() {
	wp_deregister_script('jquery-core');
	wp_register_script('jquery-core', 'https://code.jquery.com/jquery-3.5.1.min.js', array());
}
add_action('wp_enqueue_scripts', 'backslashid_replace_jquery');

5. Menambahkan Font Google

Salah satu kustomisasi yang sering ditanyakan adalah bagaimana caranya untuk menggunakan Font Google di website WordPress. Caranya kurang lebih seperti ini.

  1. Pertama Anda pilih terlebih dahulu font yang akan digunakan di Google Fonts. Saya beri contoh menggunakan font Roboto.
  2. Kemudian pilih weight, weight itu seperti 300, 400, 700.
  3. Lalu, Anda akan melihat sebuah slide muncul di kanan Anda, salin URL yang ada.
  4. Setelah itu buka functions.php, masukan kode di bawah ini.
<?php // jangan ikut sertakan tag ini!

/**
 * Google fonts
 */
function backslashid_google_fonts() {
?>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],400;1,300&display=swap" rel="stylesheet">
<?php
}
add_action('wp_head', 'backslashid_google_fonts', 5);
  1. Setelah itu Anda buka style.css dan masukan kode di bawah.
/**
 * Mengubah font body
 */
body {
  font-family: 'Roboto', sans-serif;
}

/**
 * Mengubah font heading
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
}

Kode CSS di atas seharusnya sudah cukup untuk mengubah semua elemen yang ada di website Anda menggunakan font Roboto.

6. Menambahkan Font Adobe

Langkah untuk menambahkan font Adobe tidak jauh berbeda dengan langkah-langkah menambahkan font Google. Setelah Anda memilih font dan dimasukan ke dalam Web Projects, Anda akan melihat URL khusus untuk digunakan di website Anda.

<?php // jangan ikut sertakan tag ini!

/**
 * Adobe fonts
 */
function backslashid_adobe_fonts() {
?>
    <link rel="stylesheet" href="https://use.typekit.net/fontIdAnda.css">
<?php
}
add_action('wp_head', 'backslashid_adobe_fonts', 5);
/**
 * Mengubah font body
 */
body {
  font-family: sofia-pro, sans-serif; 
}

/**
 * Mengubah font heading
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: sofia-pro, sans-serif; 
}

Kesimpulan

Seperti yang sudah saya bilang sebelumnya, mengkustomisasi website WordPress menggunakan child theme tidak ada batasannya, apa pun kustomisasi yang Anda mau, bisa Anda implementasikan asalkan Anda mempunyai sedikit pengetahuan mengenai PHP dan CSS.

Artikel ini akan saya perbaharui terus dengan contoh-contoh kasus kustomisasi, atau bila Anda mempunyai pertanyaan atau permintaan kustomisasi, silahkan tanyakan dikolom komentar di bawah.

Nama saya Satrya, saya adalah co-founder blog BackSlashID. Saya sangat mengagumi bahasa CSS, CSS membuat website menjadi indah, berwarna dan menarik!

Write A Comment