بسیاری از قالب های وردپرس از داشتن امکانی به نام ” نوار آخرین مطالب سایت ” یا همان ” نوار آخرین اخبار “محروم هستند. افزونه های زیادی برای افزودن این بخش به قالب وردپرسی وجود دارد که هرکدام مشکلات خودشان را دارند: راستچین نبودن، سازگار نبودن با قالب یا نسخه وردپرس، عدم تخصص کافی در زمینه را اندازی آن و ……
امروز ما در سایت کلکسیون طراحی مشکل را برای شما با افزودن یک اسکریپ ساده به قالبتان بر طرف می کنیم.
برای افزودن نوار آخرین اخبار تایپی به قالب وردپرسی خود، ابتدا باید محل نمایش آن را مشخص نمایید. معمولی ترین مکان برای نمایش آخرین اخبار سایت پایین منوی اصلی سایت که در واقع در هدر قرار دارد می باشد. بنابر این ما فایل (header.php) را در پوسته قالب خود باز کرده و کد های زیر را در انتهای آن قرار می دهیم:
<div id="news">
<style type="text/css">#tickform a{text-decoration: none;}#tickform a:hover{text-decoration: none;}</style>
<div id="tickform"></div>
<script language="JavaScript" type="text/javascript">
var max=0;
function textlist(){
max=textlist.arguments[0].length;
for(i=0;i<max;i++)
this[i]=textlist.arguments[0][i];
}
var pausecontent2=new Array();
var pausecontent=new Array();
var i=0;
</script>
<div class="sidebar-latest">
<ul>
<?php $the_query = new WP_Query('cat=' . $ex_feat . '&showposts=10&orderby=post_date&order=desc');
while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
echo '<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
pausecontent2[ i ] = \'<li><a title="'.get_the_title().'" href="'.get_permalink().'" rel="bookmark">\';
pausecontent[ i ] = "'.get_the_title().'";
i++;
/*]]>*/
</script>';
endwhile; ?>
<script type="text/javascript">
tl=new textlist(pausecontent);
var x=0;pos=0;
var l=tl[0].length;
function textticker(){
document.getElementById("tickform").innerHTML=pausecontent2[x]+tl[x].substring(0,pos)+ "_</a><div class=\"clear\"></div></li>";
if(pos++==l){
pos=0;
setTimeout("textticker()",2000);
if(++x==max)x=0;
l=tl[x].length;
}else
setTimeout("textticker()",50);
}
window.onload=textticker();
</script>
</ul>
</div>
</div>
حالا بعد از اینکه فایل را ذخیره کردیم به سایت خود برمی گردیم و می بینیم که نوار اخبار ما فعال است. برای زیبا سازی نوار اخبار هم باید کدهای زیر را به انتهای شیوه نامه خود یعنی این فایل (style.css) اضافه کنیم:
/*-- news --*/
#news{
width:100%; height:26px;
border: 2px solid #fff;
border-right: 28px solid #EAEAEA;
border-top: 1px solid #EAEAEA;
float:right;
background-color:#EEEEEE;
font-size:17px;
font-weight: 600px;
color: #990000;
}
#marq{width:100%; height:28px;float:right;margin-right:111px;}
#marq a{text-decoration:none;color:#333}
#marq a:hover{color:#ee0606;}
}
موفق و پروز باشید.
برای ارسال دیدگاه شما باید وارد سایت شوید.