مشکل در ایجاد تب « انجمن وردپرس فارسی

با سلام
از این وب سایت
http://www.webkaran.com/tabmenu-generator.html
کد های تب منو را گرفتم ولی نمی دونم در وردپرس در چه فایل هایی و چه جاهایی باید قرار بدهم دوستان اگر ممکن است راهنمایی کنید تا تب منو را ایجاد کنم
لطفا افزونه معرفی نکنید به علت گستردگی این تب منو می خواهم که از همین کد ها استفاده کنم.
سه سری کد می دهد
مورد 1- javascript را در یک فایل با پسوند js ذخیره کردم و در فولدر js ذخیره کردم ولی کد فراخوانی ان را نمی دانم باید در کجا وارد کنم که قالب بهم نریزه و جاوا اسکریپت هم فراخوانی بشه
این هم کد فراخوانی که داده شده
<script type="text/javascript" src="tabmenu.js"></script>
مورد 2- کد های CSS است که فکر می کنم باید به انتهای Style.css اضافه کنم ولی وقتی این کار را می کنم قالب بهم میریزه
البته یک کد فراخوانی css هم داده که کلا نمی دون کجا باید قرارش بدم؟
کد فراخوانی css
<link rel="stylesheet" href="CSS file " type="text/css"/>
3- یک کد html داده که با اون مشکل ندارم و در جایی که قراره استفاده بشه ان را قرا میدهم

دوستان خواهش می کنم راهنمایی کنید تا از این کدها استفاده کنم.

CSS

.content {
   clear: both;
   padding: 10px;
   border: #cfcfcf 1px solid;
   background-color: #eee9e9;
   width: 400px;
   height: 200px;
   direction: rtl;
   text-align: justify;
   line-height: 16px !important;
   font: normal 11px tahoma;
}
.ulnofloat {
   list-style-type: none;
   padding-right: 0px;
   margin: 0px;
}
.ullifloat {
   float : right;
   padding-left: opx;
   border-right:  #cfcfcf 1px solid;
   background-color: #cfcfcf;
   margin-right: 0px;
}
.ula {
   position: relative;
   text-decoration: none;
   display: block;
   padding: 5px 10px;
   cursor: pointer;
   font: normal 11px tahoma;
   direction: rtl;
   color: #c00000;
}
#tabco4{
   position: relative;
   left : 175px;
   width: 400px;
   background-color: ;
   border-right: ;
}
#tabco4 ul a:hover {
   color: #0062e6;
}

HTML

<div id="tabco4">
    <ul>
        <li><a href="javascript:vd()">سربرگ 1</a></li>
        <li><a href="javascript:vd()">سربرگ 2</a></li>
        <li><a href="javascript:vd()">سربرگ 3</a></li>
        <li><a href="javascript:vd()">سربرگ 4</a></li>
		<li><a href="javascript:vd()">سربرگ 5</a></li>
	</ul>
    <div>محتوای سربرگ 1</div>
    <div>محتوای سربرگ 2</div>
    <div>محتوای سربرگ 3</div>
    <div>محتوای سربرگ 4</div>
	<div>محتوای سربرگ 5</div>
    </div>

javascript

window.onload = function(){
init()
}
var containercolor="";

function init() {

var border="#cfcfcf 1px solid";
var conbkcolor="#eee9e9";
var tabbk="#cfcfcf";

t4 = new Bindtabs("tabco4",1,"mouseover","t",border,tabbk,conbkcolor,"400px");
t4.c();
}

function vd() {
}

function tabEvent(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    if (evt) {
    var elem = getTargetElement(evt);
    var actContainer = (elem.tagName=='A') ? elem.parentNode.parentNode.parentNode.id : elem.parentNode.parentNode.id;
    var tp = gettab(actContainer).position;
    var hvelem = (elem.tagName=='A') ? elem.parentNode : elem;
    var lielem =  (elem.tagName=='A') ? elem.parentNode.parentNode.getElementsByTagName('li') : elem.parentNode.getElementsByTagName('li');

    if ((evt.type == "mouseover") || (evt.type == "click")) {
       actIndex = getIndex(lielem,hvelem);
       if (actIndex==undefined) return;

         showContent(actContainer,actIndex);
       }
   	}
}

function getIndex(arry,elem) {
	for (var i=0; i < arry.length; i++) {
		if (arry[i] == elem) {
		return i;
		}
	}
}

function showContent(container,act) {
	var contDiv = new Array;
	var j =0;
	var tab = gettab(container);
	var tp = tab.position;
	var vborder = tab.border;
	var vboxwidth = tab.width;
	var vtabcolor =tab.tabcolor;
	var contDiv0 = $$($(container),('div'));

	for(var i=0; i<contDiv0.length; i++){
		if (contDiv0[i].parentNode.id==container) {
			contDiv[j] = contDiv0[i];
			j = j+1;
		}
    }    

	contDiv[act].className = "content";	    

	var vbkcolor = getbkColor(contDiv[act]);
	var tagul = getUL(container,tp);
	var tagula = $$(tagul,('a'));
	var tagulli = $$(tagul,('li'));

	for(var i=0; i<tagula.length; i++){
	    tagula[i].className="ula";
	}

	for(var i=0; i<tagulli.length; i++){
		tagulli[i].className="ullifloat";
	}
	tagul.className= "ulnofloat";

	$(container).style.borderRight = (ie6()==true) ?  containercolor +" 0px solid" : containercolor +"";

	contDiv[act].style.display = "block";

	for(var i=0; i<contDiv.length; i++){
		if (i != act) {
			contDiv[i].style.display = "none";
		}
	}

	var actitem = tagulli[act];

	var actitema = $$(actitem,('a'))[0];

	actitema.style.top ="1px";

	actitem.style.borderTop = vborder;

	actitema.style.backgroundColor =vbkcolor;
    var marginRight_li = getmarginRight(actitem);
	var marginBottom_li = getmarginBottom(actitem);	

	for(var i=0; i<tagulli.length; i++){

	if (marginRight_li=="0px") {			

			tagulli[i].style.borderLeft = (i==0) ? vborder : "#fff 0px";

	}

	if (i != act) {

	var a = $$(tagulli[i],'a')[0];

	a.style.top ="0px";
	a.style.left ="0px";

	a.style.backgroundColor =vtabcolor;

	tagulli[i].style.borderTop = vborder;	

	}

  }
}

function bindEvent(container, e) {

var tp = gettab(container).position;
var ele = $$(getUL(container,tp),'li');

   for(var i=0; i<ele.length; i++){
		if (e=="click") {
		   ele[i].onmouseover ="";
		   ele[i].onclick = tabEvent;
		}
		if (e=="mouseover") {
		   ele[i].onmouseover = tabEvent;
		}
   }
}

function Bindtabs(id,activetab1,eventType,position,border,tabcolor,bkcolor,width) {
    this.id = id;
	this.activetab1 = activetab1;
	this.eventType = eventType;
	this.position = position;
	this.border =border;
	this.tabcolor=tabcolor;
	this.bkcolor=bkcolor;
	this.width = width;

	this.c = function () {

showContent(this.id,this.activetab1);

	bindEvent(this.id,this.eventType);

	}
}

function getUL(id,ttp) {

if ((ttp=="t") || (ttp=="l") ||(ttp=="p")) {
	var ul = $$($(id),('ul'))[0];
}
else
{
	var n = $$($(id),('ul')).length;
	var ul = $$($(id),('ul'))[n-1];

}
return ul;
}

function gettab(id) {
return (id=="tabco4") ? t4 : t1;
}

function ie6() {
var appVer = navigator.appVersion.toLowerCase();
var iePos = appVer.indexOf('msie');
if (iePos !=-1) {
is_minor = parseFloat(appVer.substring(iePos+5,appVer.indexOf(';',iePos)))
is_major = parseInt(is_minor);
}

var is_ie = ((iePos!=-1));
var is_ie6 = (is_ie && is_major == 6);
return is_ie6;
}

function  getmarginBottom(obj) {
return (obj.currentStyle) ?  obj.currentStyle.marginBottom : getComputedStyle(obj,'').getPropertyValue('margin-bottom');
}

function getmarginRight(obj) {
return (obj.currentStyle) ?  obj.currentStyle.marginRight : getComputedStyle(obj,'').getPropertyValue('margin-right');
}

function getbkColor(obj) {
return (obj.currentStyle) ?  obj.currentStyle.backgroundColor : getComputedStyle(obj,'').getPropertyValue('background-color');
}

function getTargetElement(evt) {
    return (evt.target) ? ((evt.target.nodeType == 3) ? evt.target.parentNode : evt.target) : evt.srcElement;
}

function $(id){ return(document.getElementById(id)); }
function $$(e,tag) {return e.getElementsByTagName(tag);}

وردپرس فارسی

انجمن

مشکل در ایجاد تب (۱ نوشته)

درباره‌ی این موضوع

برچسب‌ها