Как реализовать комментарии на wordpress?

Question

[bilas]

Здравствуйте. Помогите реализовать комментарии на wordpress есть код:

/* Arbaoui Mehdi copyright 2013 */
/* Notice : Hover effect on social media icons */

body {
  background: url("https://raw.github.com/Arbaoui-Mehdi/Retro-Comments/master/images/background.jpg");
  font: 15px/150% Georgia, "Times New Roman", Times, serif; }

/* =============================================== /*
/*                                                 /* 
/*     Animate CSS : http://daneden.me/animate     /*
/*                                                 /*
/* =============================================== */

@-webkit-keyframes flipInX {
  0% { -webkit-transform: perspective(400px) rotateX(90deg); }

  30% { -webkit-transform: perspective(400px) rotateX(-10deg); }

  70% { -webkit-transform: perspective(400px) rotateX(10deg); }

  100% { -webkit-transform: perspective(400px) rotateX(0deg); } }

@-moz-keyframes flipInX {
  0% { -moz-transform: perspective(400px) rotateX(90deg); }

  30% { -moz-transform: perspective(400px) rotateX(-10deg); }

  70% { -moz-transform: perspective(400px) rotateX(10deg); }

  100% { -moz-transform: perspective(400px) rotateX(0deg); } }

@-o-keyframes flipInX {
  0% { -o-transform: perspective(400px) rotateX(90deg);
       opacity: 0; }

  30% { -o-transform: perspective(400px) rotateX(-10deg); }

  70% { -o-transform: perspective(400px) rotateX(10deg); }

  100% { -o-transform: perspective(400px) rotateX(0deg); } }

@keyframes flipInX {
  0% { transform: perspective(400px) rotateX(90deg);
       opacity: 0; }

  30% { transform: perspective(400px) rotateX(-10deg); }

  70% { transform: perspective(400px) rotateX(10deg); }

  100% { transform: perspective(400px) rotateX(0deg); } }

.animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill: both;
  -moz-animation-fill: both;
  -ms-animation-fill: both;
  -o-animation-fill: both;
  animation-fill: both; }

.flipInX {
  -webkit-animation-name: flipInX;
  -moz-animation-name: flipInX;
  -ms-animation-name: flipInX;
  -o-animation-name: flipInX;
  animation-name: flipInX; }

/* =============================================== /*
/*                                                 /* 
/*                     Messages                    /*
/*                                                 /*
/* =============================================== */

#messages {
  position: relative;
  margin: 50px auto;
  padding: 0;
  width: 800px;
  list-style: none; }

#messages li {
  float: left;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #c8c7b4; }

#messages li:nth-child(2n) .infos {
  float: right;
  margin-left: 20px; }

#messages li:nth-child(2n) .infos a {
  -webkit-box-shadow: 1px 1px 0 1px rgba(90, 81, 15, 0.2);
  -moz-box-shadow: 1px 1px 0 1px rgba(90, 81, 15, 0.2);
  box-shadow: 1px 1px 0 1px rgba(90, 81, 15, 0.2);
  left: inherit; }

#messages li:nth-child(2n) .content { border-width: 1px 3px 4px 4px; }

#messages li:nth-child(2n) .content:after,
#messages li:nth-child(2n) .content:before {
  right: -9px;
  left: inherit;
  -webkit-transform: rotate(41deg);
  -moz-transform: rotate(41deg);
  -o-transform: rotate(41deg);
  transform: rotate(41deg); }

#messages li:nth-child(2n) .facebook { right: -10px; }

#messages li:nth-child(2n) .twitter { right: -5%; }

#messages li:nth-child(2n) .github { right: -1%; }

#messages .infos {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  float: left;
  padding: 3px;
  width: 130px;
  height: 130px;
  border: 5px solid #c8c7b4; }

#messages .infos a {
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  -ms-border-radius: 17px;
  -o-border-radius: 17px;
  border-radius: 17px;
  -webkit-box-shadow: -1px 1px 0 1px rgba(90, 81, 15, 0.2);
  -moz-box-shadow: -1px 1px 0 1px rgba(90, 81, 15, 0.2);
  box-shadow: -1px 1px 0 1px rgba(90, 81, 15, 0.2);
  position: absolute;
  width: 20px;
  height: 22px;
  background-color: #d5d2a8;
  color: #fff;
  text-decoration: none;
  text-indent: -10000px;
  font-size: 11px; }

#messages .infos a:hover {
  padding: 0 10px 0 18px;
  width: auto;
  border: none;
  text-indent: 0;
  opacity: 0.95; }

#messages img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  width: 100%; }

/* =============================================== /*
/*                                                 /* 
/*      + SVG sprite (social media icons ).        /*
/*      + You can use PNG if your navigator don't  /*
/*        support SVG format.                      /*
/*                                                 /*
/* =============================================== */

.sprite {
  background: url("http://sinjapp.com/img/sprite.svg") no-repeat;
  background-size: 23px; }

.twitter {
  background-position: -1px 5px;
  top: 16%;
  left: -5%; }

.twitter:hover { background-color: #2094dd !important; }

.facebook {
  background-position: -2px -27px;
  top: 42%;
  left: -10%; }

.facebook:hover { background-color: #3b5998 !important; }

.github {
  background-position: -2px -10px;
  bottom: 17%;
  left: -1%; }

.github:hover { background-color: #444 !important; }

.content {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  float: left;
  margin-left: 20px;
  padding: 15px 25px;
  width: 510px;
  border-width: 1px 4px 4px 3px;
  border-style: solid;
  border-color: #c8c7b4;
  background-color: #ece5bd;

/* ==================================================================== /*
/*                                                                      /* 
/*   + Css Patterns from : http://lea.verou.me/css3patterns/            /* 
/*   + Arbaoui mehdi : Fix a gradient color bug in OPERA,FIREFOX        /*
/*     and SAFARI (only new versions)                                   /*
/*                                                                      /*
/* ==================================================================== */

  background-image: -linear-gradient(0deg, transparent 18px, #dbada9 0, #dbada9 20px, transparent 19px),
                    -linear-gradient(#e1dab0 0.1em, transparent 0.1em);
  background-image: -webkit-linear-gradient(0deg, transparent 11px, #dbada9 0, #dbada9 14px, transparent 12px),
                    -webkit-linear-gradient(#e1dab0 0.1em, transparent 0.1em);
  background-image: -moz-linear-gradient(0deg, transparent 11px, #dbada9 0, #dbada9 13px, transparent 12px),
                    -moz-linear-gradient(#e1dab0 0.1em, transparent 0.1em);
  background-size: 100% 10px;
  color: #333;

}

/* ====================================================================================== /*
/*                                                                                        /* 
/*   + Talk bubble with shadow                                                            /* 
/*     From http://forrst.com/posts/How_to_Make_a_Pure_CSS_Speech_Bubble_With_a_Drop-PU1  /*
/*   + Arbaoui mehdi: Change position (left and right) of arrow                        /*
/*                                                                                        /*
/* ====================================================================================== */

.content:after, .content:before {
  border-bottom: 23px solid transparent;
  border-right: 20px solid #ece5bd;
  top: 49px;
  content: '';
  position: absolute;
  left: -9px;
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  -o-transform: rotate(220deg);
  transform: rotate(220deg); }

.content h3 {
  font: 23px "Satisfy";
  margin: 0;
  padding: 0;
  font-weight: normal; }

.content p {
  margin: 10px 0 0 0;
  font-size: 15px;
  line-height: 1.7em; }

.content p a {
  text-decoration: none;
  background-color: #f7f3c5;
  border-bottom: solid 1px #cfcebe;
  color: #834202;
  padding: 1px 4px; }

.content p a:hover { background-color: #f5ec82; }

.content b {
  display: block;
  color: #75280c;
  font: italic normal 17px Georgia; }

.content:before {
  top: 48px;
  left: -11px;
  border-right: 19px solid rgba(0, 0, 0, 0.1); }

И скрипт.

$(function() {
		var $list = $('ul li');
		$list.filter(':first').addClass('animated flipInX');
		setInterval(function() {
			if( $list.filter('.flipInX').index() !== $list.length) {
				$list.filter('.flipInX').removeClass('animated flipInX').next().addClass('animated flipInX');
			}
		}, 400);
	});

Просто не могу понять как заменить старые коммент на эти. Как то криво все получается, подскажите куда что и как. Спасибо.