مشاوره رایگان بانک وردپرس در خدمت شماست

با ما تماس بگیرید از اینکه صدای نازنین شما را می شونیم لذت میبریم و سعی میکنیم ، تا بهترین خدمات را به شما ارائه دهیم.

ارتباط با واتس آب با کلیک روی دکمه زیر:

ورود به پشتیبانی

images


با سلام خدمت شما دوستان گرامی با آموزشی دیگر از سایت بانک وردپرس (www.bankwp.com)  خدمت شما می باشیم.

تا به حال قطعا برای شما اتفاق افتاده است که در حال مشاهده سایت های مختلفی میباشید و با قسمتی مواجه میشوید که توجه شما را جلب میکند یا نکته جالبی در آن قسمت نوشته شده است که به این قسمت نوار تبلیغات یا (Bar Advertising) گفته میشود و شما مشتاق میشوید که همچین قسمتی را برای سایت خود طراحی کنید ما در این مطلب قصد داریم نحوه ساخت این نوار تبلیغاتی را به شما آموزش دهیم.

اگر شما این قسمت را در سایتتان طراحی کنید کاربر با مشاهده این قسمت ترغیب میشود بقیه مطالب سایت شما را مشاهده کند.

نحوه ساخت قسمت تبلیغات در سایت وردپرس:

اگر شما دوستان با زبان php  آشناییت داشته باشید میتوانید این قسمت را با ظاهری دلخواه طراحی کنید ما در اینجا کد‏هایی که برای طراحی بخش تبلیغات هست را برایتان آماده کرده ایم که میتوانید از آنها استفاده کنید.

ما قصد داریم بخش تبلیغات را به قسمت زیرین سایت یا footer اضافه کنیم وارد بخش نمایش شده و در قسمت ویرایشگر فایل footer.php را باز کرد و قطعه کد زیر را در آن بنویسید.

<div class="fixedBar">
<div class="boxfloat">
<ul id="tips">
<li><a href="http://mihanwp.com/">سایت بانک وردپرس بهترین سایت برای یادگیری مطالبی برای ساخت سایت وردپرس </a></li>
<li><a href="http://mihanwp.com/userpro">اگر علاقه دارید مطالبی در مورد وردپرس یادبگیرید حتما از سایت بانک وردپرس دیدن کنید.پشیمون نمیشوید. </a></li>
</ul>

</div>
</div>

بعد از اینکه این قطعه کد را در فایل footer.php وارد کردید حال باید برویم سراغ قالب سایتمان style.css را باز کرده و قطعه کد زیرین را وارد کنید.

.fixedbar {
background: #000; 
bottom: 0px; 
color:#fff; 
font-family: Arial, Helvetica, sans-serif; 
left:0; 
padding: 0px 0; 
position:fixed; 
font-size:16px; 
width:100%; 
z-index:99999; 
float:left; 
vertical-align:middle; 
margin: 0px 0 0; 
opacity: 0.95; 
font-weight: bold;
}
.boxfloat {
text-align:center; 
width:920px; 
margin:0 auto;
}
#tips, #tips li {
margin:0; 
padding:0; 
list-style:none
}
#tips {
width:920px; 
font-size:20px; 
line-height:120%;
}
#tips li {
padding: 15px 0; 
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

آخرین کاری که باید انجام داد در بخش header میباشد پوشه header.php را باز کرده و کد زیر را وارد میکنید:

<script>
(function($) {
this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){	
	randomtip();
});
})( jQuery );
</script>

با وارد کردن این قطعه کد کار شما دیگر تمام شده است.وقتی ساییتان را باز کنید بخش تبلیغات را در قسمت زیرین سایت  با ظاهری قشنگ مشاهده میکنید شما کاربران اگر  زبان  php را بلد باشید به راحتی میتوانید تغییراتی را که دوست دارید اعمال کنید.

اگر بخواهید متن مربوطه را تغییر دهید پوشه footer.php را باز کرده و متن مورد نظر را مینویسید.

ممنون از شما دوستان گرامی که با صبر و حوصله فراوان با آموزشی دیگر از سایت بانک وردپرس همراه بودید.

[تعداد: 0   میانگین:  0/5]

دیدگاه بگذارید

avatar
  Subscribe  
ارسال اطلاعیه در صورتیکه