ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 11-08-2016

Menggabungkan File CSS Pada WordPress Menjadi Satu File

Untuk mempercepat akses website kita perlu untuk meminimalisir jumlah HTTP request, salah satunya menggabungkan file css,  untuk itu, pada kesempatan ini kita akan membahas bagaimana cara menggabungkan file css pada wordpress menjadi satu file.

Bagi pengguna wordpress, bisa dipastikan akan menggunakan banyak file css, hal ini disebabkan selain file css bawaan theme, terkadang berbagai plugin yang terinstall juga menggunakan file css tersendiri, sehingga, penggabungakan file CSS ini menjadi hal yang sangat penting.

Daftar Isi:

  1. Menggabungkan File CSS Pada WordPress – Cara Manual
  2. Menggabungkan File CSS Pada WordPress – Cara Otomatis
  3. Menggabungkan File CSS Pada WordPress – Cara Otomatis (memperbaiki relative path)

I. Menggabungkan file CSS pada WordPress dengan cara manual

Untuk menggabungkan file CSS secara manual, yang kita perlu kita lakukan adalah:

  1. Identifikasi file CSS yang digunakan, cara paling mudah adalah buka halaman website dan klik kanan > view source, kemudian cari (Ctrl+F) kata kata stylesheet

    Cara Mengetahui File CSS Yang Digunakan - WordPress

  2. Perhatikan id dari masing masing style (seperti pada kotak merah) nama sebelum -css merupakan nama handle dari file css tersebut, handle ini digunakan oleh wordpress untuk mengidentifikasi file css.
  3. Selanjutnya buka tiap-tiap file css sesuai dengan link yang ada di href kemudian copy dan paste menjadi satu file, misal: merged_style.css dan tempatkan pada direktori theme yang sedang digunakan, misal: wp-contentthemesjagowebdevmerged_style.css
  4. Buka file functions.php yang ada pada direktori theme tersebut dan load file merged_style.css dengan menjalankan fungsi: wp_enqueue_style('merged-style', get_stylesheet_uri() . '/merged_style.css')
  5. Deregister semua handle yang file css nya kita gabungkan (nomor 3), dengan menjalankan fungsi wp_deregister_style('nama-handle'). Selesai.

Meskipun terlihat mudah, cara ini mengandung beberapa kelemahan yang salah satunya bersifat FATAL

Menggabungkan file css pada wordpress dengan cara manual memiliki beberapa kelemahan yaitu:

  1. Jika ada file css yang ditambahkan/dihilangkan, baik ketika ganti theme atau install/uninstall plugin, maka kita akan menggabung ulang file CSS tersebut secara manual.
  2. Dependency antar file css tidak dapat dipastikan berjalan dengan baik.
  3. Penggunaan url relative seperti penggunaan image pada property background, akan berpotensi error (file tidak ditemukan) – dijelaskan di bagian bawah.

II. Menggabungkan file CSS pada WordPress dengan cara otomatis

Untuk mengatasi kelemahan cara manual, maka ada solusi lebih baik yaitu menggunakan cara otomatis, cara ini dapat dilakukan dengan mudah dengan menggunakan class WP_Styles yang disimpan pada pada variabel $wp_styles

WP_Styles dan $wp_styles

WP_Styles dan $wp_styles merupakan class dan variabel bawaan wordpress yang digunakan untuk menghandle seluruh style yang di load pada suatu halaman, class ini dapat dipanggil di hook mana saja, seperti wp_print_styles, wp_head, init, dll

Untuk melihat isi dari objek ini, buka file functions.php yang ada pada direktori theme yang sedang digunakan, kemudian copy-paste code berikut:

add_action('wp_print_styles', 'show_all_styles');
function show_all_styles()
{
	// use global to call variable outside function
	global $wp_styles;
	
	// show all data
	echo '<pre>'; print_r($wp_styles);
}

selanjutnya, buka halaman web, akan terlihat property dari objek ini baik berupa class maupun array.

Perhatikan bahwa terdapat property queue ($wp_styles->queue), property ini merupakan daftar style yang akan di load pada halaman tersebut.

NAMUN property ini belum diurutkan berdasarkan dependency nya, untuk mengurutkannya kita gunakan method all_deps(), yang akan kita bahas sebentar lagi.

Dapatkan semua style berdasarkan dependencynya

all_deps merupakan salah satu dari sekian banyak method yang dimiliki oleh Objek WP_Styles, daftar lengkapnya ada di halaman: Class Reference/WP Styles » WordPress Codex

Ketika kita menggunakan method ini,  maka secara otomatis wordpress akan mengurutkan file css yang akan di load berdasarkan dependencynya dan hasilnya akan disimpan pada property to_do

Contoh penggunaan:

add_action('wp_print_styles', 'show_all_styles');
function show_all_styles()
{
	// use global to call variable outside function
	global $wp_styles;
	
	// arrange the queue based on its dependency
	$wp_styles->all_deps($wp_styles->queue);	
	
	// The result
	$handles = $wp_styles->to_do;
	
	echo '<pre>'; print_r($handles);
}

Nah, sekarang variabel $handles sudah berisi semua style yang telah diurutkan berdasarkan dependencynya dan siap untuk di tampilkan pada halaman web.

Gabungkan semua style

Setelah kita dapatkan semua handle berdasarkan urutan dependencynya, selanjutnya tinggal kita gabungkan file style tersebut.

Langkah yang kita perlukan adalah:

  1. Gabungkan semua css code pada setiap file css kemudian simpan pada sebuah file (misal merged_styles.css). Lokasi file css tersebut dapat ditemukan di: variabel $wp_styles, property registered  ($wp_styles->registered) bagian key url.
  2. Load file hasil gabungan tadi dengan fungsi wp_enqueue_style().
  3. Cegah wordpress untuk meload file css yang telah digabungkan dengan menjalankan fungsi wp_deregsiter_style()

    Script lengkapnya adalah:

    add_action('wp_print_styles', 'show_all_styles');
    function show_all_styles()
    {
    	// use global to call variable outside function
    	global $wp_styles;
    	
    	// arrange the queue based on its dependency
    	$wp_styles->all_deps($wp_styles->queue);	
    	
    	// The result
    	$handles = $wp_styles->to_do;
    	
    	$css_code = '';
    
    	// Lokasi file baru: E:xampphtdocswordpresswp-contentthemejagowebdevmerged_style.css
    	$merged_file_location = get_stylesheet_directory() . DIRECTORY_SEPARATOR . 'merged_style.css';
    	
    	// loop all styles
    	foreach ($handles as $handle)
    	{
    		/*
    			Bersihkan url, misal wp-content/themes/jagowebdev/style.min.css?v=4.6
    			menjadi wp-content/themes/jagowebdev/style.min.css
    		*/
    		$src = strtok($wp_styles->registered[$handle]->src, '?');
    		
    		// #1. Gabungkan file css.
    		// If src is url		
    		if (strpos($src, 'http') !== false)
    		{
    			// dapatkan site url, misal: http://jagowebdev.com/wordpress
    			$site_url = site_url();
    		
    			/*
    				Jika dari server lokal, maka ubah url menjadi relative path,
    				Misal: http://jagowebdev/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
    				Menjadi: /wp-content/plugins/wpnewsman/css/menuicon.css
    				
    				Jika tidak, misal: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
    				maka biarkan apa adanya
    			*/
    			if (strpos($src, $site_url) !== false)
    				$css_file_path = str_replace($site_url, '', $src);
    			else
    				$css_file_path = $src;
    			
    			/*
    				Untuk menggunakan fungsi file_get_contents hilangkan slash,
    				Misal /wp-content/plugins/wpnewsman/css/menuicon.css
    				Menjadi wp-content/plugins/wpnewsman/css/menuicon.css
    			*/
    			$css_file_path = ltrim($css_file_path, '/');
    		} 
    		else 
    		{			
    			$css_file_path = ltrim($src, '/');
    		}
    		
    		// Check wether file exists then merge
    		if  (file_exists($css_file_path)) {
    			$css_code .=  file_get_contents($css_file_path);
    		}
    	}
    
    	// write the merged styles into current theme directory
    	file_put_contents ( $merged_file_location , $css_code);
    	
    	// #2. Load the URL of merged file
    	wp_enqueue_style('merged-style',  get_stylesheet_directory_uri() . '/merged_style.css');
    	
    	// #3. Deregister all handles
    	foreach ($handles as $handle)
    	{
    		wp_deregister_style($handle);
    	}
    }

    Copy paste script diatas pada file functions.php yang ada di direktori theme.

  4. Selanjutnya buka browser dan cek file css yang di load, seharusnya hanya ada satu file, yaitu merged_styles.css
  5. Cara Menggabungkan File CSS Pada WordPress Menjadi Satu File - Hasil
Lagi lagi, cara ini mengandung kelemahan yang cukup fatal, yaitu: penggunaan relative path pada url akan berpotensi menyebabkan “file not found”

Misal css pada plugin tertentu yang menggunakan image dari direktori img pada plugin tersebut, seperti background: url('img/plg_logo.png'), ketika kode css nya kita gabungkan dan kita tempatkan pada lokasi yang baru, misal pada direktori theme, maka bisa dipastikan file plg_logo.png tidak ditemukan.

III. Menggabungkan file CSS pada WordPress dengan cara otomatis – Memperbaiki Relative Path

Selanjutnya kita perlu untuk memperbaiki relative path agar semua file CSS dapat berfungsi sebagaimana mestinya.

Untuk melakukannya, kita tidak perlu membuat script sendiri, karena membutuhkan analisa yang cukup kompleks (kalau ada waktu bisa membuatnya sendiri).

Sebagai gantinya, terdapat beberapa library yang siap untuk digunakan, namun kendalanya tidak banyak yang up to date mengikuti perkembangan CSS

Salah satu yang cukup up to date adalah MatthismullieMinify, namun ternyata kita tidak dapat langsung menggunakannya, kita perlu untuk melakukan sedikit modifikasi:

  • Pada file minify.php, ubah/tambahkan script berikut ini:
  • abstract class Minify
    {
    	private $toPath = '';
    	
    	public function setToPath($path)
    	{
    		$this->toPath = $path;
    	}
    	
    	public function minify($path = null)
        {
    		$toPath  = $this->toPath ?: $path;
            $content = $this->execute($toPath);
    
            // save to path
            if ($path !== null) {
                $this->save($content, $path);
            }
    
            return $content;
        }
    }

    Untuk file jadinya dapat didownload di sini.

  • Untuk versi terbaru, silakan download di github kemudian baca manualnya, jika belum support custom fromto converter, ubah file minify.php sesuai kode diatas
  • Jangan lupa download juga library Converter.php yang akan kita gunakan untuk mengubah relative path, file converter.php dapat di download di halaman: path-converter.

    Path Converter

  • Selanjutnya copy file tersebut ke direktori theme, misal: wp-content/themes/jagowebdev/minify, sehingga strukturnya seperti gambar berikut:

    Menyertakan Library Minifier

Gabungkan dan Minify

Setelah memodifikasi file minify.php, selanjutnya ubah kode yang telah kita buat tadi menjadi berikut:

add_action('wp_print_styles', 'show_all_styles');
function show_all_styles()
{
	// use global to call variable outside function
	global $wp_styles;
	
	// arrange the queue based on its dependency
	$wp_styles->all_deps($wp_styles->queue);	
	
	// The result
	$handles = $wp_styles->to_do;
	
	$css_code = '';
	
	// Lokasi file baru: E:xampphtdocswordpresswp-contentthemejagowebdevmerged_style.css
	$merged_file_location = get_stylesheet_directory() . DIRECTORY_SEPARATOR . 'merged_style.css';
	
	//Including Minifylibrary
	require_once('minifysrcMinify.php');
	require_once('minifysrcCSS.php');
	require_once('minifyConverter.php');
	
	// loop all styles
	foreach ($handles as $handle)
	{
		/*
			Bersihkan url, misal wp-content/themes/jagowebdev/style.min.css?v=4.6
			menjadi wp-content/themes/jagowebdev/style.min.css
		*/
		$src = strtok($wp_styles->registered[$handle]->src, '?');
		
		// #1. Gabungkan file css.
		// If src is url		
		if (strpos($src, 'http') !== false)
		{
			// dapatkan site url, misal: http://jagowebdev.com/wordpress
			$site_url = site_url();
		
			/*
				Jika dari server lokal, maka ubah url menjadi relative path,
				Misal: http://jagowebdev/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
				Menjadi: /wp-content/plugins/wpnewsman/css/menuicon.css
				
				Jika tidak, misal: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
				maka biarkan apa adanya
			*/
			if (strpos($src, $site_url) !== false)
				$css_file_path = str_replace($site_url, '', $src);
			else
				$css_file_path = $src;
			
			/*
				Untuk menggunakan fungsi file_get_contents hilangkan slash,
				Misal /wp-content/plugins/wpnewsman/css/menuicon.css
				Menjadi wp-content/plugins/wpnewsman/css/menuicon.css
			*/
			$css_file_path = ltrim($css_file_path, '/');
		} 
		else 
		{			
			$css_file_path = ltrim($src, '/');
			
		}
		
		// Cek wether file exists, then merge
		if  (file_exists($css_file_path)) {
			$minifier = new MatthiasMullieMinifyCSS($css_file_path);
			$minifier->setToPath( $merged_file_location );
			$css_code .=  $minifier->minify($css_file_path);
		}
	}

	// write the merged styles into current theme directory
	file_put_contents ( $merged_file_location , $css_code);
	
	// #2. Load the URL of merged file
	wp_enqueue_style('merged-style',  get_stylesheet_directory_uri() . '/merged_style.css');
	
	// #3. Deregister all handles
	foreach ($handles as $handle)
	{
		wp_deregister_style($handle);
	}
}

Perhatikan bahwa pada baris 19-21 kita menambahkan file library minify dan pada baris 67-69 kita menggunakan class Minify untuk mengecilkan file CSS sekaligus menyesuaikan path url (jika ada) sesuai dengan lokasi file merged_style.css yang baru.

Selesai. Cek apakah proses tersebut telah berhasil dengan membuka source web dan buka link file merged_style.css

Lebih Lanjut…

Setelah berhasil menggabungkan dengan baik semua file css, selanjutnya kita perlu untuk mempertimbangkan hal penting lainnya, diantaranya penggunaan cache, opsi print css untuk menghindari render blocking css, dll.

Dengan tambahan berbagai fitur tersebut, tentu menjadi tidak pas jika kita membuatnya di theme, maka perlu untuk memisahkannya menjadi sebuah plugin.

Untuk memenuhi hal tersebut, sobat dapat mengembangkan plugin sendiri dengan mempelajari plugin yang sudah ada, atau menggunakan plugin yang sudah jadi.

Plugin yang dapat dicoba adalah MinQueue, plugin ini bagus namun tidak dapat menggabungkan file javascript menjadi satu file, sehingga saya mengembangkan plugin sendiri: APH Merge Script.

Penutup

Menggabungkan file CSS menjadi satu file pada wordpress dapat dilakukan baik dengan cara manual maupun otomatis.

Penggunaan cara manual sangat tidak disarankan karena mengandung banyak kelemahan, sedangkan penggunaan cara otomatis pun perlu penyesuaian pada path url, dan hal lain, yang tentunya tidak mudah untuk dilakukan.

Sebagai alternatif, kita dapat menggunakan plugin yang sudah jadi, seperti MinQueue atau APH Merge Scripts.

Demikian pembahasan mengenai cara menggabungkan file CSS menjadi satu file pada wordpress, semoga bermanfaat.

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP
  2. Menghitung Selisih Waktu Dengan PHP – Cara Termudah
  3. Memahami Fungsi Date Pada PHP
  4. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu
  5. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP
  6. Setting ODBC MySQL Untuk Gammu
  7. Cara Install dan Menggunakan Gammu di Windows
  8. Format Tanggal Indonesia Dengan PHP
  9. Cara Install MySQL Portable Zip File di Windows – Panduan Lengkap
  10. Memahami Statemen Return Pada PHP