Hur man skapar en rutnÀtvisning av miniatyrbilder i WordPress-teman

Hur man skapar en rutnÀtvisning av miniatyrbilder i WordPress-teman

Har du nÄgonsin haft behov av att skapa en rutnÀtvisning av inlÀgg nÀr du skapar WordPress-webbdesign? RutnÀtlayouten fungerar utmÀrkt för mediecentrerade webbplatser som vÄrt WordPress-galleri eller en annan webbplats med utstÀllningstyp. Temaramar som Genesis har redan ett förbyggt Grid Loop-system. Men om du försöker göra en rutnÀtvisning i ditt anpassade WordPress-tema, sÄ Àr vi hÀr för att hjÀlpa till. I den hÀr artikeln visar vi dig hur du skapar en rutnÀtsvisning av inlÀggsminiatyrer i ditt WordPress-tema.

Obs! Du mÄste ha en rÀttvis förstÄelse för CSS och hur WordPress-loop fungerar.

LÄt oss ta en titt pÄ vad vi försöker Ästadkomma innan vi börjar:

Om du mÀrker det visas inlÀggen pÄ den hÀr sidan i ett rutnÀt. Det finns en kant pÄ stolparna pÄ vÀnster sida, men inte pÄ höger sida. Med en normal inlÀggsslinga följer alla inlÀgg samma stil, sÄ du kommer att ha en högra kant pÄ bÄda inlÀggen som skulle se konstigt ut. Observera ocksÄ att avstÄndet Àr ganska symmetriskt. Vilket Àr inte möjligt med den normala slingan att göra för att göra nÄgot liknande detta. Nu nÀr du kan se vad vi försöker Ästadkomma, kan vi ta en titt pÄ hur vi kan uppnÄ det.

Det första du behöver göra Àr att se till att ditt tema har miniatyrbilder av WordPress-inlÀgg aktiverat. Du bör ocksÄ tÀnka pÄ hur du vill Àndra storlek pÄ dina WordPress-bilder eftersom du behöver dem.

NÀr du har konfigurerat miniatyrbilder och storlekar, kan vi börja den hÀr saken. LÄter oss stÀlla in vÄra loopfrÄgor:


<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

if(have_posts()) :	while(have_posts()) :  the_post();
?>

Koden ovan verkar ganska rakt fram eftersom vi har gjort inline kommentarer. En sak som du förmodligen skulle behöva redigera Àr posts_per_page variabel som passar dina behov. Du kan ocksÄ lÀgga till andra frÄgeparametrar om du sÄ önskar. Nu nÀr vi startade slingan kan vi titta pÄ hur vi vill visa inlÀggen inuti den.


<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>

Vi startar koden genom att kontrollera om rĂ€knaren Ă€r 1 vilket innebĂ€r att vi visar vĂ„rt vĂ€nstra rutnĂ€t. Vi gĂ„r helt enkelt in och startar en div med en anpassad css-klass “griditemleft”. Inuti den lade vi till miniatyren av inlĂ€gget och titeln pĂ„ inlĂ€gget. Du kan lĂ€gga till eller subtrahera loopelement (som utdrag, datum, författarinformation, kommentarantal osv.). Obs! I vĂ„ra miniatyrer kallar vi en extra bildstorlek. Du mĂ„ste antagligen ersĂ€tta storleksnamnet med din egen storlek som du skapade.

Efter det första rutnĂ€tet lade vi till en annanif som ser ut om $ -rĂ€knaren matchar det antal som anges i vĂ„ra $ -nĂ€t (vilket det borde eftersom vi kommer att vara pĂ„ den andra posten). Om rĂ€knaren matchar kan vi visa vĂ„rt rĂ€tta rutnĂ€t som börjar med en anpassad css-klass “griditemright”. LĂ€gg mĂ€rke till efter att vi har stĂ€ngt rutnĂ€tet div, vi lĂ€gger till en tydlig klass. Detta kommer vi att förklara nĂ€r vi kommer till CSS-delen.

NÀr slingan Àr klar med detta ÄterstÀller vi rÀknaren till 0 sÄ att den kan börja igen i nÀsta rad.

Vi kan helt enkelt avsluta slingan som vi började med att lÀgga till den hÀr koden:


<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

Koden ovan fortsÀtter i grund och botten rÀknaren tills den nÄr grÀnsen som anges i vÄr query_post-variabel. Anledningen till att vi inte lade till postnavigeringskoden ovan Àr att mÄnga anvÀnder ett plugin eller en annan visningsmetod för detta. SÄ vi lÀmnar det öppet för dig att bestÀmma sjÀlv.

SÄ vÄr slutliga loopkod kommer att se ut sÄ hÀr:


<div id="gridcontainer">
<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work


/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');


if(have_posts()) :	while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
</div>

Nu nÀr vi har PHP-koden redo, kan vi titta pÄ hur vi ska utforma den.

VÄr standardutgÄng skulle se ut sÄ hÀr:


<div id="gridcontainer"> 
<div class="griditemleft"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="griditemright"> 
<div class="postimage">	Post Image</div> 
<h2>Post Title</h2> 
</div> 
<div class="clear"></div> 
</div>

HÀr Àr klasserna du behöver Àndra:


#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}

Vi hoppas att den hÀr guiden styr dig i rÀtt riktning mot att skapa en rutnÀtsvisning för dina WordPress-inlÀgg.