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

   

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

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: https://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. 

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 from–to 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.

  

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

  

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: https://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.