Cara Menambahkan Kode CSS Di Website eCommerce WordPress

TokoDaring.Com – Cara Menambahkan CSS Di WordPress. Website eCommerce WordPress memang lebih efisien menggunakan tema website yang sudah jadi. Dan anda sudah menggunakan tema WordPress premium. Namun seringkali ada hal yang di rasa kurang pas baik pada layout, jenis huruf atau warna.

Atau mungkin anda ingin menampilkan slider untuk produk-produk yang anda jual. Maka pada saat itulah (anda atau tim IT eCommerce) perlu untuk melakukan sedikit atau bahkan banyak kustomisasi.

Baik HTML, CSS dan JS bisa di tambahkan ke dalam website eCommerce WordPress. Seri artikel kami berikut menjelaskan tentang bagaimana cara menambahkan script dan kode HTML, CSS, JS di website eCommerce WordPress :

• Cara Menambahkan Kode HTML di Website eCommerce WordPress.
• Cara Menambahkan Kode CSS Di Website eCommerce WordPress.
• Cara Menambahkan Kode JS Di Website eCommerce WordPress.

Cara menambahkan CSS di WordPress

Dalam hemat kami, tujuan untuk menulis CSS adalah karena ingin menambahkan style yang ringan. Selain itu anda mungkin ingin memberikan fitur berupa efek.

Melalui halaman customizer

Dalam tujuan hanya memberikan tambahan ‘gaya’ yang ringan, menambahkan CSS pada website WordPress bisa di lakukan melalui halaman customizer. Bahkan hasil dari perubahannya bisa di lihat secara langsung (live).

Dari halaman /wp_admin (dashboard), pilih appearance lalu pilih customize. Dari panel sebelah kiri halaman customizer pilih Additional CSS. Akan ada kotak snippet di mana anda bisa menuliskan kode CSS, dan cobalah untuk menuliskan script berikut :

h2 {
	background-color: #000;
	color: #fff;
}

Seharusnya warna pada heading (h2) akan berubah menjadi warna putih (hex #ffffff) dan memiliki warna background hitam (hex #000000).

Melalui file style.css

Untuk tujuan yang ‘lebih berat’ anda di sarankan untuk menulis setiap kode CSS melalui file style.css di dalam folder child theme.

FIle style.css itulah yang akan berisi semua aturan dan deklarasi kode CSS yang akan mengontrol tampilan dan tata letak website, termasuk juga warna, font dan visual lainnya.

Pastikan file stylesheet harus berisi komentar yang diperlukan yang harus di tulis di bagian atas file.

Seksi komen tersebut akan memberi tahu WordPress, tentang info tema yang digunakan, termasuk jika itu adalah tema anak (child theme) dan informasi parent themenya.

Seperti pada contoh berikut adalah informasi di dalam file style.css tentang tema anak. Tanpa informasi tersebut, file CSS mungkin tidak akan berfungsi.

/*
 * Theme Name:   Twenty Fifteen Child
 * Theme URI:    http://example.com/twenty-fifteen-child/
 * Description:  Twenty Fifteen Child Theme
 * Author:       John Doe
 * Author URI:   http://example.com
 * Template:     twentyfifteen
 * Version:      1.0.0
 * License:      GNU General Public License v2 or later
 * License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 * Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 * Text Domain:  twentyfifteenchild
 */

Bagaimana cara penulisan CSS ?

Di antara ‘tiga pilar’ bahasa website (HTML, CSS dan Javascript), maka menuliskan kode CSS bisa di bilang yang paling mudah.

Standar penulisan CSS WordPress

Meskipun mudah namun ada beberapa standar penulisan css yang perlu untuk di perhatikan. Kenapa demikian ?

Anda mungkin memiliki tim, dan standar penulisan (pengkodean) tersebut tentu agar anda dan tim lainnya, dapat membuat dasar kolaborasi yang baik.

Selain itu, logika kode akan menjadi lebih mudah di baca (human readable), bermakna, konsisten, dan indah. Tujuan utamanya tentu saja akan berpengaruh pada performa website dan menghindari error.

Tentang bagaimana cara penulisan css di WordPress juga perlu untuk di perhatikan, dan kami gunakan contoh sederhana script css berikut.

h2 {
  background-color: #000;
  color: #fff;
  padding: 2px 4px 6px 8px;
  margin: 2px 4px 6px 8px;
}

Struktur CSS

Dari contoh di atas, kita dapat melihat struktur CSS yang terdiri dari selectors dan properties. h2 adalah sebuah selectors dan parameter di dalam { } adalah properties.

Beberapa hal yang perlu di perhatikan dalam menulis selectors dan properties adalah sebagai berikut :

Selectors

Penggunaan selectors CSS yang tepat memungkinkan penulisan menjadi lebih efisien, menghemat waktu dan mengarah ke lembar gaya yang tepat.

Beberapa hal tentang standar penulisan css yang baik pada selectors adalah sebagai berikut :

• Gunakan huruf kecil dan gunakan tanda hubung (-) jika lebih dari 1 kata.
• Hindari camel case dan garis bawah (under scores). Ini adalah contoh kata yang di tulis secara ‘camelCase’.
• Hindari menggunakan over-qualified selectors, misalnya div.container bisa di tulis saja dengan .container.
• Komen dalam CSS di tulis di antara /* (pembuka komen) dan */ (penutup komen).

/* cara menambahkan css yang benar */
.container {
	margin: 2em 4em;
}
#comment-form {
	background-color: #000;
	color: #fff;
	padding: 2px 4px 6px 8px;
	margin: 2px 4px 6px 8px;
}

/* --------------------- */

/* yang salah */
.commentForm {
    margin: 1em 0em;
}
 
.comment_form {
    margin: 1em 0em;
}

Properties

Mirip dengan selectors, properties yang terlalu spesifik akan menghambat fleksibilitas desain. Beberapa hal tentang standar penulisan css yang baik pada properties adalah sebagai berikut :

• Hindari menulis secara berulang, baik selectors maupun properties.
• Gunakan query responsive.
• Properties harus di awali oleh titik dua dan spasi, di akhiri dengan titik koma (semicolon).
• Properti di tulis menggunakan huruf kecil, kecuali untuk jenis huruf dan properti khusus.
• Gunakan kode hex untuk warna, atau rgba() jika memerlukan opacity.
• Hindari format RGB dan huruf besar, dan perpendek nilai jika memungkinkan: #fff alih-alih #FFFFFF.
• Gunakan gaya penulisan shorthand.

/* cara menambahkan css yang benar */
h2 {
	color: #fff;
	padding: 0 0 6px 8px;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 #fff;
}

@media screen and (max-width: 600px) {
  h2 {
	background-color: rgba(0, 0, 0, 0.5);
	margin: 0 0 6px 8px;
  }
}

/* --------------------- */

/* yang salah */
h2 {
	color: #FFFFFF;
	padding: 0px 0px 6px 8px;
	text-shadow: 0 -1px 0 rgb(0, 0, 0.5), 0px 1px 0px #fff;
}

@media screen and (max-width: 600px) {
  h2 {
	background-color: rgb(0, 0, 0.5);
	margin: 0px 0px 6px 8px;
  }
}

Menulis CSS dalam PHP

Website eCommerce yang di buat menggunakan WordPress, itu berarti berjalan dalam framework PHP. Anda atau tim, pasti akan perlu juga menulis kode CSS di dalam fungsi PHP.

Contoh menulis CSS dalam PHP

Setelah mengetahui standar penulisan CSS, maka itu dapat di implementasikan juga ketika anda ingin menulis CSS dalam PHP.

Berikut contoh menulis CSS dalam PHP menggunakan plugin editor. Menulis kode menggunakan plugin editor maka anda harus mengkatrol hook tergantung dependencynya.

Bagaimana cara mengkatrol hook, lihat lagi artikel kami bagaimana menambahkan kode menggunakan plugin editor.

/*
 * cara menambahkan css
 * Display adsense sebelum konten post 
 */

add_action('theme_entry_content_before','adsense_before_content');
function adsense_before_content() {
if(is_single()) { ?>
<style type="text/css">
    #iklan {
        border: 1px solid #f5f5f5;
        margin-bottom: 1em;
    }
    #unit-iklan {
        min-height: 250px;
    }
</style>
<?php
?>
<div id="iklan">
    <div id="unit-iklan">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345678910111213"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-12345678910111213"
     data-ad-slot="1234567890"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
    </div>
</div>
<?php
    }
}

Tujuan dari contoh kode di atas adalah menampilkan iklan adsense sebelum paragraf pertama dan setelah judul sebuah konten, (seperti iklan yang ada di artikel ini).

Dengan beberapa query dan output yang di hasilkan sebagai berikut :

• Membuat sebuah fungsi baru yang di namakan function adsense_before_content().
• Menggunakan hook tema theme_entry_content_before.
• Iklan hanya di tampilkan pada konten posting if(is_single()).
• Memberikan nilai properties css sesuai selector (html div).
• Memberikan nilai properties dan selector di antara tag php ?> dan <?php.
• nilai properties dan selector CSS di dalam tag <style>, di antara <style> dan </style>.

Masih banyak standar penulisan CSS yang belum kami jelaskan di artikel ini. Termasuk juga bagaimana meminify CSS untuk tujuan memaksimalkan pagespeed.

CSS juga digunakan untuk membuat desain website yang responsif dan mobile friendly. Artikel berikut, media query CSS menjelaskan tentang bagaimana media query bekerja di beberapa perangkat.

Artikel-artikel yang berkaitan dengan CSS kami tag sebagai CSS. Atau lihat kategori artikel Coding for fun untuk memodifikasi dan mengkustomisasi website eCommerce WordPress.

Artikel terkait :