طریقه ی ساخت یک صفحه گرید شده به صورت چرخشی

grid

در لغت یعنی توری و منظور از گرید نمودن مطالب یعنی مثل خانه های توری در کنار و زیر هم چیده شوند در صورتی که در حالت عادی مطالب زیر هم قرار می گیرند به تصویر زیر که دقت نمایید بهتر متوجه منظور از grid می شوید

ما در این آموزش قصد داریم صفحه ای با این شکل بسازیم که اندازه جعبه های آن در هربار رفرش صفحه تغییر می کنند و به عبارت دیگر چیدمان صفحه دائما در تغییر است
این صفحه من را یاد روزنامه دیواری می اندازد به همین مناسبت نام روزنامه دیواری را برایش در نظر گرفتم
یک ویرایشگر ساده تکست مانند notepad را باز کنید و در ابتدای آن نام تمپلیت را وارزد نمایید

<?php
/*template name: grid archive*/
?>

و در ادامه یک برگه جهت استایل بندی – کتابخانه جی کوئری و اسکریپت masonry را به قالب ساخته شده معرفی می نمایم و یک کوئری برای احضار رندم مطالب در آن قرار می دهم شما می توانید هر کوئری دلخواه دیگر را جایگزین نمایید

<?php wp_title (); ?>
/gridarchives.css" /><script src="http://code.jquery.com/jquery-latest.js"></script><script src="<?php bloginfo("template_url"); ?>/jquery.masonry.min.js"></script><script>// <![CDATA[
$(window).load(function() {
$("#page-wrap").masonry({
columnWidth: 100, 
animate: true, 
animationOptions: {
duration: 300,
queue: false
}
});
});
// ]]></script>

برگه را به نامی مانند grid.php در پوشه قالب ذخیره کنید و اما استایل بندی من در این نمونه سه اندازه برای عرض تعریف کردم شما می توانید هرچند اندازه که خواستید بگذارید فقط در حال حاضر سه کلاس col2,col3,col4 اندازه گرفته اند اندازه های بعدی را به ترتیب col5, col6 , … الی آخر نام بگذارید و در کدهای بالا بخش
را ویرایش کنید و عدد چهار را به عدد آخرین کلاس ساخته شده تغییر دهید

این کدها را در فایلی به نام gridarchives.css در کنار فایل style.css قالب ذخیره کنید

html {direction:rtl}
a{text-decoration:none;}

.box { margin: 10px; float: right; }
.box:hover { outline: 2px solid white; }
.box:hover .title { background:#eee; }
.box:hover .ex { background: none; color:#339966; }
.box:hover img { opacity: 0.4; }

.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }

.col2 img { max-width: 80px; float: right; margin: 0px 0 2px 10px; }
.col3 img { max-width: 100px; float: left; margin: 0 10px 2px 0; }
.col4 img { max-width: 120px; float: right; margin: 0 0 2px 10px; }

.title { display: block; padding: 10px; overflow: hidden;font-family:Arial; background: #237abe; color:#FFF; }

.col2 .title { font-size: 16px;}
.col3 .title { font-size: 18px; }
.col4 .title { font-size: 20px; }

.ex { display: block; padding: 10px; }
.ex { background:#fff; color: #222; }

.col2 .ex { font-size: 11px; }
.col3 .ex { font-size: 12px; }
.col4 .ex { font-size: 13px; }

برای ساخت اسکریپت jquery.masonry.min.js این کدها را در فایلی به همین نام و در
کنار دوفایل قبلی ذخیره کنید

/*************************************************
** jQuery Masonry version 1.2.0
** copyright David DeSandro, licensed GPL & MIT
** http://desandro.com/resources/jquery-masonry
**************************************************/
;(function($){var n=$.event,resizeTimeout;n.special["smartresize"]={setup:function(){$(this).bind("resize",n.special.smartresize.handler)},teardown:function(){$(this).unbind("resize",n.special.smartresize.handler)},handler:function(a,b){var c=this,args=arguments;a.type="smartresize";if(resizeTimeout)clearTimeout(resizeTimeout);resizeTimeout=setTimeout(function(){jQuery.event.handle.apply(c,args)},b==="execAsap"?0:100)}};$.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])};$.fn.masonry=function(l,m){function getBricks(a,b){a.$bricks=b.itemSelector==undefined?b.$brickParent.children():b.$brickParent.find(b.itemSelector)}function placeBrick(a,b,c,d,e,f){var g=0;for(i=0;i<b;i++){if(c[i]<c[g])g=i}var h={left:e.colW*g+e.posLeft,top:c[g]};if(e.masoned&&f.animate){a.animate(h,{duration:f.animationOptions.duration,easing:f.animationOptions.easing,complete:f.animationOptions.complete,step:f.animationOptions.step,queue:f.animationOptions.queue,specialEasing:f.animationOptions.specialEasing})}else{a.css(h)}for(i=0;i<d;i++){e.colY[g+i]=c[g]+a.outerHeight(true)}};function masonrySetup(a,b,c){getBricks(c,b);if(b.columnWidth==undefined){c.colW=c.masoned?a.data('masonry').colW:c.$bricks.outerWidth(true)}else{c.colW=b.columnWidth}c.colCount=Math.floor(a.width()/c.colW);c.colCount=Math.max(c.colCount,1)};function masonryArrange(e,f,g){if(!g.masoned)e.css('position','relative');if(!g.masoned||f.appendedContent!=undefined){g.$bricks.css('position','absolute')}var h=$('<div />');e.prepend(h);g.posTop=Math.round(h.position().top);g.posLeft=Math.round(h.position().left);h.remove();if(g.masoned&&f.appendedContent!=undefined){g.colY=e.data('masonry').colY;for(i=e.data('masonry').colCount;i<g.colCount;i++){g.colY[i]=g.posTop}}else{g.colY=[];for(i=0;i<g.colCount;i++){g.colY[i]=g.posTop}}if(f.singleMode){g.$bricks.each(function(){var a=$(this);placeBrick(a,g.colCount,g.colY,1,g,f)})}else{g.$bricks.each(function(){var a=$(this);var b=Math.ceil(a.outerWidth(true)/g.colW);b=Math.min(b,g.colCount);if(b==1){placeBrick(a,g.colCount,g.colY,1,g,f)}else{var c=g.colCount+1-b;var d=[0];for(i=0;i<c;i++){d[i]=0;for(j=0;j<b;j++){d[i]=Math.max(d[i],g.colY[i+j])}}placeBrick(a,c,d,b,g,f)}})}g.wallH=0;for(i=0;i<g.colCount;i++){g.wallH=Math.max(g.wallH,g.colY[i])}var k={height:g.wallH-g.posTop};if(g.masoned&&f.animate){e.animate(k,{duration:f.animationOptions.duration,easing:f.animationOptions.easing,complete:f.animationOptions.complete,step:f.animationOptions.step,queue:f.animationOptions.queue,specialEasing:f.animationOptions.specialEasing})}else{e.css(k)}if(!g.masoned)e.addClass('masoned');m.call(g.$bricks);e.data('masonry',g)};function masonryResize(a,b,c){c.masoned=a.data('masonry')!=undefined;var d=a.data('masonry').colCount;masonrySetup(a,b,c);if(c.colCount!=d)masonryArrange(a,b,c)};return this.each(function(){var a=$(this);var b=$.extend({},$.masonry);b.masoned=a.data('masonry')!=undefined;var c=b.masoned?a.data('masonry').options:{};var d=$.extend({},b.defaults,c,l);b.options=d.saveOptions?d:c;m=m||function(){};if(b.masoned&&d.appendedContent!=undefined){d.$brickParent=d.appendedContent}else{d.$brickParent=a}getBricks(b,d);if(b.$bricks.length){masonrySetup(a,d,b);masonryArrange(a,d,b);var e=c.resizeable;if(!e&&d.resizeable){$(window).bind('smartresize.masonry',function(){masonryResize(a,d,b)})}if(e&&!d.resizeable)$(window).unbind('smartresize.masonry')}else{return this}})};$.masonry={defaults:{singleMode:false,columnWidth:undefined,itemSelector:undefined,appendedContent:undefined,saveOptions:true,resizeable:true,animate:false,animationOptions:{}},colW:undefined,colCount:undefined,colY:undefined,wallH:undefined,masoned:undefined,posTop:0,posLeft:0,options:undefined,$bricks:undefined,$brickParent:undefined}})(jQuery);

به پیشخوان وردپرس رفته و برگه ای با قالب Thumb Archives – Grid ایجاد کنید برگه را باز کنید و روزنامه دیواری خود را مطالعه فرمایید

از طریق پیشخوان – تنظیمات – خواندن می توانید این برگه را به عنوان خانه سایت ست کنید

نمونه : http://fakharblog.com/sample/gride-archive/

این آموزش برمبنای آموزشی در این نشانی نوشته شده است http://digwp.com/2010/08/randomized-grid-of-posts/

این آموزش در قبلا در این نشانی نیز قرار گرفته است http://forum.wp-parsi.com/tutorials/article/332-ساخت-یک-آرشیو-توری-grid/



یک پاسخ برای “روزنامه دیواری”

موبایلتو شارژ کن