Download Now Download Themes Gratis WordPress Responsive!

Trik Dua Warna Berbeda Pada Title WordPress

Mungkin beberapa diantara kalian pernah melihat di beberapa situs ada title atau judul sebuah artikel mempunyai 2 warna yang berbeda, bagaimanakah membuat 2 warna yang berbeda pada title tersebut di wordpress, berikut saya akan memberikan tutorial trik membuat 2 warna pada title yang saya letakkan di single artikel seperti blog saya ini.

Tambahkan kode dibawah ini pada fungtion.php

/*-------*/
/* Dua Warna Title
/*-------*/
function add_span_to_title($input_content)
{
  if(str_word_count($input_content) > 3)
	{
	$str_length=0;
	$count=0;
	$word_array=str_word_count($input_content,1);
	foreach($word_array as $word)
	{
	if($count++ > 1) break;
	$str_length += strlen($word);
	}
	$mod_con_title = "<span class='warna'>".substr_replace($input_content,"</span> ", strpos($input_content," ",$str_length),1);
	}
	else if(str_word_count($input_content) > 1)
	  $mod_con_title = "<span>".substr_replace($input_content,"</span> ", strpos($input_content," ",0),1);
	else $mod_con_title = $input_content;
	echo $mod_con_title;
}

Css ini saya gunakan untuk mewarnai title 2 kata pada awal title, dan class dari CSS ini saya masukkan pada script Fungtion.php diatas.

.warna{
	color:#00BFAE;
	}

Langkah terakhir cari kode pada single.php dan ganti the_title dengan script dibawah ini, namun jika anda menggunakan template yang lain mungkin akan berbeda letak nya. seperti template default dari wordpress yaitu twentyfourteen maka letak script title di single content adalah di content.php . dan script trik merubah 2 warna pada title ini bisa juga anda letakkan sesuai dengan keinginan anda, mungkin di home atau index.php dari template anda.

<!-- Start Title -->
<h1 class="title single-title"><?php echo add_span_to_title(get_the_title()); ?></h1>
<!-- End Title -->

Aslinya title: Trik Dua Warna Berbeda Pada Title WordPress
Dimodifikasi menjadi title: Trik Dua Warna Berbeda Pada Title WordPress

Berikut adalah trik merubah 2 warna pada title wordpress, jika anda yang kurang paham silahkan tinggalkan komentar, sebisa mungkin saya akan membalas pertanyaan anda.

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • Agil Zulfikar

    Mau tanya tentang class CSS diatas.
    Class CSS di atas dimasukkan di dalam style.css atau script sebelumnya ?

    • class itu dimasukin di style.css nya gan.

  • tata warna

    infonya bermanfaat

Must Read...!
Membuat Trending di WordPress Tanpa Plugin

Bagaimana cara membuat trending dari postingan seperti yang terlihat di header dari blog centerklik...

Theme WordPress FruitFul Responsive Free

Template Fruitful adalah Template Wordpress Responsive Free yang di desain dengan tampilan yang bersih...

Close