WordPress Hosting Tutorial – JaringanHosting.com :: Cara Memindahkan WordPress ke Server Baru

Mega Alvionita Tips Wordpress, Tutorial March 25, 2015memindahkan wordpress ke server baru, tutorial memindahkan file wordpress, tutorial social sharing wordpress, tutorial wordpress 0 Comment

Dalam tutorial ini, saya akan menunjukkan bagaimana cara memindahkan WordPress Anda ke server baru. Anda akan menemukan petunjuk secara rinci, apakah Anda ingin melakukan transfer dari WordPress.com atau dari penyedia hosting yang lainnya.

Melakukan Transfer WordPress Sepenuhnya

Melakukan migrasi WordPress dari penyedia hosting yang satu ke penyedia yang lainnya merupakan sesuatu yang mudah. Pada dasarnya, untuk membuat migrasi WordPress dari satu host ke yang lain terdiri dari tiga bagian – memindahkan file, memindahkan database dan konfigurasi ulang (jika diperlukan).

Berikut adalah tahap untuk melakukan transfer WordPress sepenuhnya:
1. Memindahkan file-file WordPress
Anda dapat menggunakan klien FTP favorit Anda untuk memindahkan file dari satu host ke host yang lain. Anda akan ditunjukkan bagaimana untuk memindahkan file dari aplikasi Anda terlebih dahulu ke komputer lokal dan kemudian meng-upload fil;e tersebut di akun baru. Jika host lama Anda menggunakan cPanel, Anda dapat menggunakan alat File Manager untuk membuat arsip ZIP dari semua file situs Anda. Kemudian Anda dapat mentransfer file tersebut ke host baru dan meng-ekstraknya. Ini akan menghemat waktu karena mentransfer satu file yang besar sizenya, jauh lebih cepat daripada mentransfer ribuan yang kecil.

2. Memindahkan database WordPress
Langkah kedua adalah memindahkan database. Pertama, Anda perlu untuk mengekspor database dari akun hosting yang lama. Jika menggunakan cPanel, Anda dapat mengikuti petunjuk ini. Jika tidak, hubungi tim dukungan perusahaan hosting Anda sebelumnya untuk menerima informasi lebih lanjut tentang cara untuk mengekspor database Anda. Setelah Anda memiliki data yang diekspor, lalu hal selanjutnya yang dilakukan adalah membuat database baru pada akun hosting baru Anda dan mengimpor konten Anda di dalamnya.

3. Mengkonfigurasi ulang WordPress untuk bekerja di server baru
Sekarang, Anda telah memiliki file dan database yang ditransfer. Tahap berikutnya yang harus Anda lakukan adalah untuk mengkonfigurasi ulang aplikasi WordPress Anda untuk bekerja dari tempat baru. Untuk melakukan hal ini, buka file wp-config.php di root folder WordPress Anda dan cari baris berikut:

define('DB_NAME', 'user_wrdp1');
/** MySQL database username */
define('DB_USER', 'user_wrdp1');
/** MySQL database password */
define('DB_PASSWORD', 'password');

define('DB_NAME', 'user_wrdp1');

/** MySQL database username */

define('DB_USER', 'user_wrdp1');

/** MySQL database password */

define('DB_PASSWORD', 'password');

Anda perlu mengganti datavase Anda dengan yang terbaru, termasuk username dan password yang baru. Kemudian simpan file ini dan situs WordPress Anda sudah seharusnya bekerja melalui akun hosting Anda yang baru.

Memindahkan WordPress dari WordPress.com

Sangatlah mungkin untuk mentransfer blog Anda dari WordPress.com ke instalasi WordPress yang berdiri sendiri pada akun hosting Anda yang baru hanya dengan hanya beberapa klik. Untuk memindahkan situs Anda, login terlebih dahulu ke blog WordPress Anda. Lalu cari menu Tools dan pilih Export. Kemudian untuk export All content dan klik tombol Download Export file. Kemudian download file xml pada komputer Anda.

Ini semua perlu Anda lakukan pada akun WordPress.com Anda. Sekarang Anda perlu mengimpor informasi Anda untuk instalasi WordPress Anda yang berdiri sendiri. Jika Anda memiliki satu yang telah di-instal, login dengan username dan password admin Anda. Jika Anda ingin menginstal aplikasi WordPress yang baru, lihat tutorial instalasi WordPress untuk informasi lebih lanjut tentang cara untuk melakukan hal ini. Setelah Anda login, pilih menu Tools dari kolom kiri dan memilih impor.

Halaman ini akan menunjukkan sumber-sumber yang tersedia bagi Anda untuk mengimpor konten. Scroll ke bawah dan pilih WordPress sebagai jenis impor.

Sebuah popup akan terbuka dan meminta Anda untuk menginstal WordPress Importir Plugin. Klik pada tombol Install Now untuk melanjutkan.

Setelah file plugin yang di-download, pilih Activate Plugin & Run Importer link.

Selanjutnya, Anda akan diarahkan ke halaman Plugin yang sebenarnya. Sekarang klik tombol Browse, pilih file xml yang sebelumnya telah disimpan di komputer Anda dan klik padatombol Upload File dan Impor. Jika konten yang ingin Anda pindahkan cukup besar, nilai timeout web server yang sesuai dapat dicapai sebelum data sepenuhnya disalin. Dalam hal ini Anda perlu meng-upload-ulang file .xml. Sistem ini membuat laporan untuk bermigrasi dan akan dilanjutkan dengan data yang tersisa. Ulangi prosedur ini sampai Anda menerima konfirmasi bahwa proses tersebut telah berhasil diselesaikan.

Untuk memasukkan posting dan halaman WordPress yang baru, Anda perlu tahu siapa yang akan menjadi penulisnya. Pada halaman ini Anda dapat memilih pengguna yang ada sebagai posting penulis, atau Anda dapat membuat yang baru untuk data yang diimpor. Perhatikan bahwa Anda harus mencentang kotak Download dan import file attachment jika Anda ingin foto dan lampiran lainnya juga ikut ditransfer. Lalu, klik tombol Submit.

Nah, data Anda sekarang sudah ditransfer dari WordPress.com Anda ke aplikasi Wordpress yang berdiri sendiri.

Memindahkan Data WordPress Saja

Terkadang Anda mungkin hanya ingin mentransfer konten dari situs WordPress saja dari satu aplikasi ke aplikasi lain (antara dua instalasi WordPress yang berbeda). Dalam kasus tersebut, WordPress menyediakan mekanisme mudah untuk memindahkan posting, komentar, pengguna, lampiran dan informasi lainnya dengan hanya beberapa klik. Untuk melakukan ini, login terlebih dahulu sebagai administrator di blog Anda yang sekarang dan pilih Tools -> Export pada menu bagian kiri.

Pada halaman ini Anda diperlukan untuk memilih apakah Anda ingin mentransfer posting, halaman dan konten yang tersedia lainnya atau Anda ingin meng-ekspor semua konten tersebut. Tutorial ini akan menunjukkan cara untuk memindahkan semua konten. Klik tombol “Download Export File” dan simpan file.xml pada komputer Anda. Sekarang, login ke instalasi WordPress baru Anda dan pilij Tools -> Import yang berada pada menu sebelah kiri. Pada halaman ini pilih “WordPress” untuk mengimpor konten dari instalasi WordPress Anda sebelumnya.

Pada halaman berikutnya Anda diminta memilih apakah Anda ingin konten baru diposting oleh pengguna yang sudah ada atau diposting menggunakan nama pengguna baru. Pastikan Anda mencentang kotak “Download dan file impor attachments” . Hal ini akan memungkinkan WordPress untuk memindahkan secara tepat semua foto dan media lain yang telah Anda masukkan sebelumnya.

Pada akhirnya, tekan tombol Submit dan konten Anda akan diimpor ke dalam aplikasi baru WordPress Anda. Nah, semua file posting dan media lainnya telah berhasil dipindahkan.

Demikian tutorial singkat mengenai cara untuk memindahkan WordPress Anda. Semoga bermanfaat!

Untuk WordPress Hosting murah dan terbaik, Anda selalu nemilih varian layanan mulai Starter Plan yang disediakan JaringanHosting .com. Mulai dari @ Rp 40.000,-/bulan, Anda sudah dapat memiliki hosting website berbasis WordPress Hosting di server kami. Ingin ada perubahan yang jauh lebih baik? Dengan senang hati, Kami akan selalu melayani tanpa menyebabkan downtime apapun.

WordPress Hosting Indonesia – JaringanHosting.com :: Cara Membuat Social Sharing Grafik Batangan Untuk WordPress

Teguh Aprianto Tips Wordpress, Tutorial October 1, 2014membuat button share wordpress, membuat social sharing wordpress, membuat sosial sharing batangan, tutorial social sharing wordpress, wordpress hosting indonesia, wordpress hosting murah, wordpresshosting terbaik 0 Comment

Ketika kita mulai merancang atau melakukan sedikit perubahan pada situs WordPress kita, mungkin pernah terpikir untuk membuat sesuatu yang unik. Contohnya adalah membuat Social Sharing. Kebanyakan social sharing hanya berbentuk biasa dan terkesan monoton. Jika di artikel sebelumnya kami telah memberikan 10 Tips Pro untuk Situs e-Commerce yang Ramah dan Menarik. Di artikel berikut ini kami akan membagikan cara membuat Social Sharing dengan tampilan yang unik yaitu Cara Membuat Social Sharing Grafik Batangan Untuk WordPress

Sebelum kita melanjutkan, mungkin Anda bertanya-tanya, “Bagaimana sih tampilan Social Sharing berbentuk batangan?”. Jika Anda penasaran maka akan kami tunjukkan contoh tampilan dari Social Sharing berbentuk batangan.

Begitulah tampilan dari Social Sharing berbentuk batangan. Lalu apakah Anda tertarik untuk membuatnya untuk di stius WordPress Anda? Berikut akan kami bagikan bagaimana cara membuat Social Sharing berbentuk batangan.

The Markup

Jika Anda ingin menambahkan grafik batangan yang ingin Anda buat tepat di bawah judul, dalam file single.php di tema WordPress Anda, tambahkan kode ini di suatu tempat di bawah the_title() atau ke tempat dimana Anda ingin menampilkan grafik batangan ini.

<div class="socialShare clearfix">
	<div class="sharedCount">
		<span class="count"></span>
		<span class="shares">shares</span>
	</div>
	<ul class="icons clearfix">
		<li class="icon twitter social"><a href="https://twitter.com/share" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?> <?php echo get_permalink(); ?> via @JaringanHosting"></a></li>
		<li class="icon google social"><a href="https://plus.google.com/share" data-url="<?php echo get_permalink(); ?>"></a></li>
		<li class="icon facebook social"><a href="https://www.facebook.com/sharer/sharer.php" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?> <?php echo get_permalink(); ?> via @JaringanHosting" target="_blank"></a></li>
		<li class="icon linkedin social"><a href="http://www.linkedin.com/shareArticle" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?>"></a></li>
	</ul>
	<script>parseSharedCount("<?php echo get_permalink(); ?>");</script>
</div>

<span class="shares">shares</span>

</div>

<li class="icon twitter social"><a href="https://twitter.com/share" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?> <?php echo get_permalink(); ?> via @JaringanHosting"></a></li>

<li class="icon facebook social"><a href="https://www.facebook.com/sharer/sharer.php" data-url="<?php echo get_permalink(); ?>" data-text="<?php echo get_the_title(); ?> <?php echo get_permalink(); ?> via @JaringanHosting" target="_blank"></a></li>

</ul>

</div>

Pada baris ke 12, kami melewatkan post URL ke fungsi parseSharedCount yang akan kita buat pada langkah selanjutnya.

Mendapatkan Jumlah Shares

Pertama, yang kita perlukan adalah mendapatkan jumlah shares, karena data ini penting juga untuk kita. Cara termudah adalah dengan menggunakan layanan yang melakukannya untuk Anda. Setelah melakukan pencarian cepat di Google, saya menemukan SharedCount, sebuah situs kecil yang rapi yang tidak hanya menyediakan apa yang saya butuhkan, dan terbaik dari semua, mereka memiliki API yang mudah untuk digunakan. Tetapi untuk menggunakan API, Anda harus mendapatkan API key.

Setelah Anda mendaftar dan menerima key Anda, buatlah file baru dengan nama “sharedcount.js”. Kita akan menempatkan semua jQuery dalam file ini. Mulailah dengan menyisipkan kode ini:

(function($){
   sharedCount = function(url, fn) {
      url = encodeURIComponent(url || location.href);
      var domain = "//free.sharedcount.com/"; /* SET DOMAIN */
      var apikey = "" /*API KEY HERE*/
      var arg = {
	     data: {
                url : url,
                apikey : apikey
	     },
	     url: domain,
	     cache: true,
	     dataType: "json"
      };
      if ('withCredentials' in new XMLHttpRequest) {
	     arg.success = fn;
      }
      else {
	     var cb = "sc_" + url.replace(/\W/g, '');
	     window[cb] = fn;
	     arg.jsonpCallback = cb;
	     arg.dataType += "p";
      }
      return $.ajax(arg);
};

(function($){

sharedCount = function(url, fn) {

url = encodeURIComponent(url || location.href);

var domain = "//free.sharedcount.com/"; /* SET DOMAIN */

var apikey = "" /*API KEY HERE*/

var arg = {

data: {

url : url,

apikey : apikey

url: domain,

cache: true,

dataType: "json"

};

if ('withCredentials' in new XMLHttpRequest) {

arg.success = fn;

}

else {

var cb = "sc_" + url.replace(/\W/g, '');

window[cb] = fn;

arg.jsonpCallback = cb;

arg.dataType += "p";

}

return $.ajax(arg);

};

Pada baris ke-5, tambahkan API key Anda di antara tanda kutip. Fungsi ini yang berguna untuk melakukan komunikasi dengan SharedCount.com API, dan mengembalikan semua data yang kita butuhkan.

Parse SharedCount Data

Sekarang kita akan membuat fungsi untuk mengambil data SharedCount. Jadi mari kita buat sebuah fungsi yang akan menampilkan shares individu untuk setiap situs sosial yang kita tarik, dan Total dari keseluruhan. Tambahkan kode ini ke file Anda:

parseSharedCount = function(url) {
   sharedCount(url, function(data){
	var twitterCount = data.Twitter;
	var facebookCount = data.Facebook.total_count;
	var googleCount = data.GooglePlusOne;
	var linkedinCount = data.LinkedIn;
	var totalCount = twitterCount+facebookCount+linkedinCount+linkedinCount;

	var offset = 25;
	var twitterHeight = Math.ceil(twitterCount/totalCount*100)+offset;
	var facebookHeight = Math.ceil(facebookCount/totalCount*100)+offset;
	var googleHeight = Math.ceil(googleCount/totalCount*100)+offset;
	var linkedinHeight = Math.ceil(linkedinCount/totalCount*100+offset);

	$(".socialShare .count").text(totalCount);
	$(".socialShare .icon.twitter").css('height',twitterHeight+'%');
	$(".socialShare .icon.facebook").css('height',facebookHeight+'%');
	$(".socialShare .icon.google").css('height',googleHeight+'%');
	$(".socialShare .icon.linkedin").css('height',linkedinHeight+'%');
	$(".socialShare").addClass('loaded');
   });	
}
})(jQuery);

parseSharedCount = function(url) {

sharedCount(url, function(data){

var twitterCount = data.Twitter;

var facebookCount = data.Facebook.total_count;

var googleCount = data.GooglePlusOne;

var linkedinCount = data.LinkedIn;

var totalCount = twitterCount+facebookCount+linkedinCount+linkedinCount;

var offset = 25;

var twitterHeight = Math.ceil(twitterCount/totalCount*100)+offset;

var facebookHeight = Math.ceil(facebookCount/totalCount*100)+offset;

var googleHeight = Math.ceil(googleCount/totalCount*100)+offset;

var linkedinHeight = Math.ceil(linkedinCount/totalCount*100+offset);

$(".socialShare .count").text(totalCount);

$(".socialShare .icon.twitter").css('height',twitterHeight+'%');

$(".socialShare .icon.facebook").css('height',facebookHeight+'%');

$(".socialShare .icon.google").css('height',googleHeight+'%');

$(".socialShare .icon.linkedin").css('height',linkedinHeight+'%');

$(".socialShare").addClass('loaded');

});

}

})(jQuery);

Pada baris ke 3-7, kami menampilkan hitungan individu untuk setiap situs sosial. Kemudian pada baris 9-13, persentase dihitung berdasarkan nilai-nilai. Nilai “offset” digunakan untuk memastikan setiap bar memiliki beberapa ketinggian sehingga ikon dapat ditampilkan bahkan jika situs tertentu tidak memiliki shares apapun. Akhirnya, pada baris 15-20, kita menetapkan total jumlah shares teks dan menggunakan nilai-nilai persentase untuk mengatur ketinggian pada setiap bar. Menambahkan kelas “loaded” ke div yang akan memulai animasi CSS.

Membuat Grafik Batangan Clickable

Di akhir kode kita akan menambah file sharedcount.js dan akan membuat bar menjadi tombol. Sehingga bila diklik setiap bar akan terbuka masing-masing dan menampilkan sosial sharing popup window.

jQuery(document).ready(function( $ ) {
$(".social.icon a").click(function(){		
	var url = $(this).attr('data-url');
	var text = $(this).attr('data-text');
	var href = $(this).attr('href');
		
	if($(this).parent().hasClass('twitter')){
			window.open(href+"?text="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}else if($(this).parent().hasClass('facebook')){
			window.open(href+"?t="+text+"&u="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}else if($(this).parent().hasClass('google')){
			window.open(href+"?&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}else if($(this).parent().hasClass('linkedin')){
			window.open(href+"?mini=true&summary="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}
	return false;
});
});

jQuery(document).ready(function( $ ) {

$(".social.icon a").click(function(){

var url = $(this).attr('data-url');

var text = $(this).attr('data-text');

var href = $(this).attr('href');

if($(this).parent().hasClass('twitter')){

window.open(href+"?text="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");

}else if($(this).parent().hasClass('facebook')){

window.open(href+"?t="+text+"&u="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");

}else if($(this).parent().hasClass('google')){

window.open(href+"?&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");

}else if($(this).parent().hasClass('linkedin')){

window.open(href+"?mini=true&summary="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");

}

return false;

});

Berikut ini adalah segala sesuatu yang harus ada di dalam file sharedcount.js

(function($){
   sharedCount = function(url, fn) {
      url = encodeURIComponent(url || location.href);
      var domain = "//free.sharedcount.com/"; /* SET DOMAIN */
      var apikey = "" /*API KEY HERE*/
      var arg = {
	     data: {
                url : url,
                apikey : apikey
	     },
	     url: domain,
	     cache: true,
	     dataType: "json"
      };
      if ('withCredentials' in new XMLHttpRequest) {
	     arg.success = fn;
      }
      else {
	     var cb = "sc_" + url.replace(/\W/g, '');
	     window[cb] = fn;
	     arg.jsonpCallback = cb;
	     arg.dataType += "p";
      }
      return $.ajax(arg);
};

parseSharedCount = function(url) {
   sharedCount(url, function(data){
	var twitterCount = data.Twitter;
	var facebookCount = data.Facebook.total_count;
	var googleCount = data.GooglePlusOne;
	var linkedinCount = data.LinkedIn;
	var totalCount = twitterCount+facebookCount+linkedinCount+linkedinCount;

	var offset = 25;
	var twitterHeight = Math.ceil(twitterCount/totalCount*100)+offset;
	var facebookHeight = Math.ceil(facebookCount/totalCount*100)+offset;
	var googleHeight = Math.ceil(googleCount/totalCount*100)+offset;
	var linkedinHeight = Math.ceil(linkedinCount/totalCount*100+offset);

	$(".socialShare .count").text(totalCount);
	$(".socialShare .icon.twitter").css('height',twitterHeight+'%');
	$(".socialShare .icon.facebook").css('height',facebookHeight+'%');
	$(".socialShare .icon.google").css('height',googleHeight+'%');
	$(".socialShare .icon.linkedin").css('height',linkedinHeight+'%');
	$(".socialShare").addClass('loaded');
   });	
}
})(jQuery);

jQuery(document).ready(function( $ ) {
$(".social.icon a").click(function(){		
	var url = $(this).attr('data-url');
	var text = $(this).attr('data-text');
	var href = $(this).attr('href');
		
	if($(this).parent().hasClass('twitter')){
			window.open(href+"?text="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}else if($(this).parent().hasClass('facebook')){
			window.open(href+"?t="+text+"&u="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}else if($(this).parent().hasClass('google')){
			window.open(href+"?&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}else if($(this).parent().hasClass('linkedin')){
			window.open(href+"?mini=true&summary="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");
	}
	return false;
});
});

(function($){

sharedCount = function(url, fn) {

url = encodeURIComponent(url || location.href);

var domain = "//free.sharedcount.com/"; /* SET DOMAIN */

var apikey = "" /*API KEY HERE*/

var arg = {

data: {

url : url,

apikey : apikey

url: domain,

cache: true,

dataType: "json"

};

if ('withCredentials' in new XMLHttpRequest) {

arg.success = fn;

}

else {

var cb = "sc_" + url.replace(/\W/g, '');

window[cb] = fn;

arg.jsonpCallback = cb;

arg.dataType += "p";

}

return $.ajax(arg);

};

parseSharedCount = function(url) {

sharedCount(url, function(data){

var twitterCount = data.Twitter;

var facebookCount = data.Facebook.total_count;

var googleCount = data.GooglePlusOne;

var linkedinCount = data.LinkedIn;

var totalCount = twitterCount+facebookCount+linkedinCount+linkedinCount;

var offset = 25;

var twitterHeight = Math.ceil(twitterCount/totalCount*100)+offset;

var facebookHeight = Math.ceil(facebookCount/totalCount*100)+offset;

var googleHeight = Math.ceil(googleCount/totalCount*100)+offset;

var linkedinHeight = Math.ceil(linkedinCount/totalCount*100+offset);

$(".socialShare .count").text(totalCount);

$(".socialShare .icon.twitter").css('height',twitterHeight+'%');

$(".socialShare .icon.facebook").css('height',facebookHeight+'%');

$(".socialShare .icon.google").css('height',googleHeight+'%');

$(".socialShare .icon.linkedin").css('height',linkedinHeight+'%');

$(".socialShare").addClass('loaded');

});

}

})(jQuery);

jQuery(document).ready(function( $ ) {

$(".social.icon a").click(function(){

var url = $(this).attr('data-url');

var text = $(this).attr('data-text');

var href = $(this).attr('href');

if($(this).parent().hasClass('twitter')){

window.open(href+"?text="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");

}else if($(this).parent().hasClass('facebook')){

window.open(href+"?t="+text+"&u="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");

}else if($(this).parent().hasClass('google')){

window.open(href+"?&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");

}else if($(this).parent().hasClass('linkedin')){

window.open(href+"?mini=true&summary="+text+"&url="+url, "", "height=400,width=600,toolbar=no,menubar=no,left=300,top=300");

}

return false;

});

Tempatkan file dalam folder js tema Anda. Tema Anda harus memiliki tempat di functions.php yang di mana semua script terdapat di tempat itu . Tambahkan baris kode di bawah ini di tempat yang sama untuk memastikan script sharedcount akan loaded.

wp_enqueue_script('sharedcount', get_bloginfo('template_url').'/js/sharedcount.js', array('jquery'), '0.1', false);

1	wp_enqueue_script('sharedcount', get_bloginfo('template_url').'/js/sharedcount.js', array('jquery'), '0.1', false);

File CSS

Untuk penampilan grafik batang, dengan tampilan datar yang bersih, sehingga cocok dengan desain. Anda harus menambahkan CSS berikut ke file style.css di theme WordPress Anda. Semua ini file CSS yang cukup mendasar, tetapi penting untuk dicatat pada baris 84 dan 88 kita mendefinisikan kelas .loaded untuk mengaktifkan animasi setelah data telah loaded.

.socialShare {	
	color: #fff;
	display: block;
	margin-bottom: 20px;
	padding: 0;	
	height: 73px;
	position: relative;
	border-bottom: 3px solid #d8d8d8;
	width: 250px;	
}

.socialShare .sharedCount{
	position: relative;
	font-size: .9em;	
	display: block;
	box-shadow: none;
	margin-top: 0;
	top: 0;
	left: 0;
	float: left;
	opacity: 0;
	margin-left: 5px;	
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	background: none;
	color: #222222;
	border: none;
}

.socialShare .sharedCount .count{
	font-size: 1.9em;
	display: block;
	color: #25bb8b;
}

.socialShare .sharedCount .shares{
	font-size: 1.1em;
	display: block;
	color: #b8b8b8;
}

.socialShare.loaded .sharedCount {
	opacity: 1;
}

.socialShare .icons {
	margin-bottom: 0;
	positon: relative;		
}

.socialShare .icon {	
	display: block;	
	font-size: 1.2em;	
	float: left;
	margin: 0 0 0 0;
	position: absolute;
	bottom: 4px;
	opacity: 0;
	height: 0px;
	width: 30px;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
	transition-delay: .7s;
	-webkit-transition-delay: .7s; /* Safari */		
}

.socialShare .icon a{
	color: rgba(255,255,255,.7);	
	display: block;	
	width: 100%;
	height: 100%;
	background-size: 20px 20px;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
	transition-delay: .7s;	
}

.socialShare.loaded .icon {
	opacity: 1;	
}

.socialShare.loaded .icon a{
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

.socialShare .icon a:hover{
	background-color: #222;	
}

.socialShare .icon.twitter{
	background: #5ec2df url(images/icon_twitter.png) center 5px no-repeat;
	left: 90px;	
}
.socialShare .icon.twitter a{
	background: #5ec2df url(images/icon_twitter.png) center 5px no-repeat;
}
.socialShare .icon.google{	
	left: 125px;
	-webkit-transition-delay: .7s; /* Safari */	
}
.socialShare .icon.google a{
	background: #e03e12 url(images/icon_google.png) center center no-repeat;
}
.socialShare .icon.facebook {
	left: 160px;
	-webkit-transition-delay: .9s; /* Safari */	
}
.socialShare .icon.facebook a{
	background: #2c6087 url(images/icon_facebook.png) center center no-repeat;
}
.socialShare .icon.linkedin {
	left: 195px;
	-webkit-transition-delay: 1.2s; /* Safari */	
}

.socialShare .icon.linkedin a{
	background: #3686ab url(images/icon_linkedin.png) center center no-repeat;	
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

.socialShare {

color: #fff;

display: block;

margin-bottom: 20px;

padding: 0;

height: 73px;

position: relative;

border-bottom: 3px solid #d8d8d8;

width: 250px;

}

.socialShare .sharedCount{

position: relative;

font-size: .9em;

display: block;

box-shadow: none;

margin-top: 0;

top: 0;

left: 0;

float: left;

opacity: 0;

margin-left: 5px;

-webkit-transition: opacity 0.5s ease;

-moz-transition: opacity 0.5s ease;

-o-transition: opacity 0.5s ease;

transition: opacity 0.5s ease;

background: none;

color: #222222;

border: none;

}

.socialShare .sharedCount .count{

font-size: 1.9em;

display: block;

color: #25bb8b;

}

.socialShare .sharedCount .shares{

font-size: 1.1em;

display: block;

color: #b8b8b8;

}

.socialShare.loaded .sharedCount {

opacity: 1;

}

.socialShare .icons {

margin-bottom: 0;

positon: relative;

}

.socialShare .icon {

display: block;

font-size: 1.2em;

float: left;

margin: 0 0 0 0;

position: absolute;

bottom: 4px;

opacity: 0;

height: 0px;

width: 30px;

-webkit-transition: all 0.7s ease;

-moz-transition: all 0.7s ease;

-o-transition: all 0.7s ease;

transition: all 0.7s ease;

transition-delay: .7s;

-webkit-transition-delay: .7s; /* Safari */

}

.socialShare .icon a{

color: rgba(255,255,255,.7);

display: block;

width: 100%;

height: 100%;

background-size: 20px 20px;

-webkit-transition: all 0.7s ease;

-moz-transition: all 0.7s ease;

-o-transition: all 0.7s ease;

transition: all 0.7s ease;

transition-delay: .7s;

}

.socialShare.loaded .icon {

opacity: 1;

}

.socialShare.loaded .icon a{

-webkit-transition: all 0.7s ease;

-moz-transition: all 0.7s ease;

-o-transition: all 0.7s ease;

transition: all 0.7s ease;

}

.socialShare .icon a:hover{

background-color: #222;

}

.socialShare .icon.twitter{

background: #5ec2df url(images/icon_twitter.png) center 5px no-repeat;

left: 90px;

}

.socialShare .icon.twitter a{

background: #5ec2df url(images/icon_twitter.png) center 5px no-repeat;

}

.socialShare .icon.google{

left: 125px;

-webkit-transition-delay: .7s; /* Safari */

}

.socialShare .icon.google a{

background: #e03e12 url(images/icon_google.png) center center no-repeat;

}

.socialShare .icon.facebook {

left: 160px;

-webkit-transition-delay: .9s; /* Safari */

}

.socialShare .icon.facebook a{

background: #2c6087 url(images/icon_facebook.png) center center no-repeat;

}

.socialShare .icon.linkedin {

left: 195px;

-webkit-transition-delay: 1.2s; /* Safari */

}

.socialShare .icon.linkedin a{

background: #3686ab url(images/icon_linkedin.png) center center no-repeat;

}

Jika Anda menginginkan sebuah ikon yang unik yang pas untuk social sharing grafik batangan, Anda bisa men-downloadnya disini

Kami mendorong Anda untuk men-tweak itu dan mulai membuatnya sendiri. Seperti yang Anda perhatikan, kami hanya memasukkan empat situs sosial di artikel ini seperti, twitter, Google+, Facebook dan Linkedin. Tetapi SharedCount menyediakan data yang lebih banyak lagi. Jadi, Anda akan dapat menambahkan stius sosial lebih banyak lagi yang penting bagi Anda.

Sekarang Anda sudah bisa memulai membuat sosial sharing yang unik untuk stius WordPress Anda. Anda dapat mempelajari artikel Cara Membuat Social Sharing Grafik Batangan Untuk WordPress dan kemudian mulai mempraktekkannya. Semoga bermanfaat