kaxigt.com

Jag skriver om webben för webben

Indexsida med conditional tags och wp-querys

Postad: 21 juli 2008 | Arkiverat · Wordpress | No Comments
Lästid: 3 minuter

I takt med att wordpress utvecklas följer även möjligheten att skapa mer personliga och avancerade layouter. Vi kan använda conditional tags i allt större utsträckning, och med query strings kan wordpress utmana de andra stora cmsplattformarna. Vi ska nu gå igenom vissa koder som kan vara användbara.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

Conditional tags

Conditional tags är koder man använder för att ändra och anpassa vilket innehåll samt hur detta ska visas i templatefilerna – eller i en specifik fil.

Du kanske vill ha eller visa ett visst innehåll i din indexfil som inte ska ses på någon annan fil, då använder du conditional tags. Låt oss säga att du har en text du bara vill visa på din huvudsida (i flesta fall index), i så fall använder man följande tag:is_home().

Om du sedan lägger in conditionaltags mellan dina title-taggar i din header så kommer den specifika sidans namn besökaren vistas på automatiskt att lägga sig först i det blå fältet. Det här är användbart för de som vill bokmärka din sida, eller för sökmotorerna, eftersom sidans titel lägger sig annorlunda än vad din permalinkstruktur kanske gör.

Kika högst upp och jämför med aktivitetsfältet så får du se.


<?php if ( is_single() ) {
      wp_title('');
      echo (' | ');
      bloginfo('name');
 
} else if ( is_page() || is_paged() ) {
      bloginfo('name');
      wp_title('|');
 
} else if ( is_author() ) {
      bloginfo('name');
      wp_title(' | Archive for ');	  
	  
} else if ( is_archive() ) {
      bloginfo('name');
      echo (' | Archive for ');
      wp_title('');
 
} else if ( is_search() ) {
      bloginfo('name');
      echo (' | Search Results');
 
} else if ( is_404() ) {
      bloginfo('name');
      echo (' | 404 Error (Page Not Found)');
	  
} else if ( is_home() ) {
      bloginfo('name');
      echo (' | ');
      bloginfo('description');
 
} else {
      bloginfo('name');
      echo (' | ');
      echo (''.$blog_longd.'');
}

Hur tagsen arbetar

<php if ( is_single() ) {
      wp_title('');
      echo (' | ');
      bloginfo('name'); 
} else if

Egentligen är de inte så svåra att förstå. Vi ska kika lite närmare på koden för att se vad den betyder.

<?php if ( is_single() ) { 

Först har vi öppningstaggen för php – denna gör en förfrågan och det ser vi i if-satsen.

Vad den frågar efter är om det är en ensam sida, ( is_single() ) { det vill säga single.php. Skulle det nu vara det så ska sidans titel visas. Det ser vi i wp_title('');

Därefter kommer echo (' | '); – echo är en variabel och den ger en definition som ser ut så här (' | '). I klartext innebär det att omedelbart efter sidans titel ska det infogas en lodrät linje mellan sidans titel och bloggens namn bloginfo('name');

Om sidan nu mot förmodan inte skulle vara single.php utan istället är } else if någon annan sida så fortsätter denna sökprocedur till rätt sida kan visas.

WP query strings

Query kan man enkelt säga är en förfrågan om att ”köra” en viss information. Jag vill kalla på vissa utvalda kategorier och dessa ska endast visa 1 post var på indexsidan. Jag vill också att de ska vara ”kopplade” till sin respektive arkivsida så man direkt kan gå in och se vad som har postats i just den kategorin. Därutöver vill jag infoga en bild till varje inlägg via custom fields.

Vad som är viktigt att tänka på är att vissa query-koder måste placeras omedelbart innan The Loop då de skickar information om hur koderna inom The Loop ska ska hämta och hantera informationen.

Nu ska vi kika på kodningen och dessa första rader ska ligga omedelbart före The Loop! Eftersom vi arbetar med php så öppnar vi denna med vår vanliga öppningstagg <?php>, därefter kommer följande:

<?php // alla IDs från de valda kategorierna ställs in här
$display_categories = array(1,2,3,4);
foreach ($display_categories as $category) { ?>

Tänk engelskt!
$display_categories säger oss helt sonika ”visa kategorier”. Alltså är det kategorier som efterfrågas. = array(1,2,3,4); definierar vilka kategorier det är vi väljer. Varje siffra motsvarar kategorins specifika ID och det är här som du ges stora möjligheter att välja bort vissa kategorier och kanske visa dessa på en helt annan sida om du vill.

foreach ($display_categories as $category) {

Innebär ”för var och en, visa kategorier som kategori”. Därefter stänger vi vår php ?> och beger oss in i queryposts.

Fortfarande befinner vi oss strax innan The Loop. Då det är en ny php-kod som ska infogas öppnar vi som vanligt med denna <?php>.

Men nu ska vi dessutom skriva in vår query – det vill säga strängen som besvarar vad den tidigare php-koden efterfrågade. Minns att det handlade om att visa kategorier som kategorier, därtill att det var de utvalda kategorierna vi särskilt ville visa.

Följande strängar talar om hur många poster per kategori som ska visas och att det endast ska vara på huvudsidan (ex index).

Jag vill bara att 1 post per kategori skulle visas och det ser vi i denna kod:

query_posts("showposts=1&cat=$category");

För att php ska förstå var dessa utvalda poster ska visas, i vårt fall på indexsidan (minns att den definierades som is_home), lägger vi till följande:

$wp_query->is_category = false; det ska inte vara category.php
$wp_query->is_archive = false; det ska inte vara archive.php
$wp_query->is_home = true; det ska vara själva huvudsidan.

Även här finns det möjligheter att välja vilken sida man vill använda.

Vill Du exempelvis att det istället för index ska vara din archive.php eller en skapad och förvald sida du gjort som heter category.php ändrar du bara false respektive true för just den sidan.

Du kan till och med välja din page.php genom att lägga till en query som pekar mot is_page().

$wp_query->is_page = true;

Nu ska vi kika på några parametrar som vi kan infoga i $wp_query->is_page = true; för att ytterligare definiera vad det är vi vill ha. is_page() pekar egentligen mot vilken ”page” (page.php) som helst.

Men vi kanske endast vill visa sida ID 16? Då lägger vi in ID som en parameter i koden: is_page('16').

Du kanske har skrivit en speciell sida som du vill använda? Då använder du sidans titel som en parameter: is_page('Klassresan till Liseberg').

Du kan göra samma sak med din ”about-me” sida. Skillnaden är att den då söker på post-namnet och inte post-titeln, exempel: is_page('about-me')

Du kan även lägga in en array för att ge flera alternativa parametrar. En array innehåller data av olika element.

Vi ska nu infoga en array med en samling av element. Du gör då så här:
is_page(array(16,'about-me','Klassresan till Liseberg') )

Eftersom is_page är satt till ”true” för dessa element, det vill säga vi har valt ut just dem, kan vi också ge dem ”egna” sidor och sedan använda dessa som förvalda templates istället för den traditionella page.php default.

Koden så här långt

<?php
// alla IDs från de valda kategorierna ställs in här 
$display_categories = array(1,2,3,4);
foreach ($display_categories as $category) { ? >
    
      <?php query_posts("showposts=2&cat=$category");
	    $wp_query->is_category = false;
		$wp_query->is_archive = false;
		$wp_query->is_home = true;
		 ?>

Infoga länk så att posterna är “kopplade” till sina respektive arkivsidor

Jag vill påminna om att vi fortfarande är utanför The Loop! I mitt fall har jag med hjälp av css valt att lägga länken som en rubrik.

<h2><a href=”< ?php echo get_category_link($category);?>”></h2>

Länken som kallar på respektive kategori är:

<?php echo get_category_link($category);?>

Vi vill ju också veta namnet på den specifika kategorin – eller hur? Därför infogar vi även denna kod:

// namn per kategori	  
	  single_cat_title(); ?>

Vi stänger både rubrik och länk som vanligt.

</a></h2>

Hela koden före The Loop

<?php
// alla IDs från de valda kategorierna ställs in här 
$display_categories = array(1,2,3,4);
foreach ($display_categories as $category) { ?>
    
      <?php query_posts("showposts=2&cat=$category");
	    $wp_query->is_category = false;
		$wp_query->is_archive = false;
		$wp_query->is_home = true;
		 ?>
      <h2>Fler poster i <a href="<?php echo get_category_link($category);? >"><?php 
	// namn per kategori	  
	  single_cat_title(); ?></a></h2>

Koderna inom The Loop

Vad är det då som händer inuti loopen?

<?php while (have_posts()) : the_post(); ?

De här koderna känner vi igen. Alla koder som kommer efter denna, fast före koden:

<?php endwhile; ? > < ?php } ?>

Om custom fields

De som inte har använt custom fields tidigare kanske inte heller vet vad det är. Med varje post kan man göra ett ”specialsignerat” tillägg genom att infoga några koder – så kallade metadata. Genom att använda en nyckel – key samt ge den ett värde – value finns det möjlighet att infoga olika texter eller bilder i varje post.

Key är ditt metadata element och du kan ge det flera olika namn. I vårt fall heter det ”Image” som du kan se i denna kod:

$values = get_post_custom_values("Image");

Nyckeln/Key är som beskrivit också kopplat till ett värde/value och värdet är själva bilden du infogar, det vill säga bildens namn, exempelvis blomma.jpg.

Använda custom fields

Du får här en förenklad information om hur man använder custom fields.

När du har skrivit din post så bockar du ju i vilken kategori den ska tillhöra, eller hur? Du väljer sedan att publicera posten, eller låter den vara privat.

Men innan du trycker på published ska du skrolla ned till Advanced Options och sedan öppna upp custom fields. Som du då ser har du tre olika rubriker: Key, Value samt Action. Under dessa står det Add a new custom field och det är precis det vi ska göra.

Öppna rullgardinen som det står select på och kontrollera om du har ordet ”Image” med i denna. Om inte – skriv in ordet Image i rutan med rubriken Key. I rutan med rubriken Value skriver du in bilden namn – utan sökväg, men glöm inte att du först måste ha laddat upp filen eller bilden i mediabiblioteket så den finns att hämta.

Tryck sedan på rutan uppdate och din nyckel och värde kommer att läggas till posten.

För varje post du vill ha en bild gör du om samma procedur. Har du en gång lagt in ordet ”Image” som nyckel (Key) öppnar du bara rullgardinen och väljer denna. Namnet på bilden skriver du in i rutan under Value. Glöm inte att klicka uppdate varje gång eftersom varje post får ett nytt värde även om du använder samma nyckel (Key).

Sedan formaterar du givetvis med css hur bilden eller texten ska se och placeras på sidan.

Fler koder inuti The Loop

Vi kommer att länka bilden till posten och det gör vi med följande kod:

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
<?php } ?>

Om du noggrant studerar koderna så kommer du med all säkerhet att känna igen dem, i alla fall en del även om de inte alltid är sammanfogade på detta vis.

Sökvägen till bilden förutsätter att denna ligger i en mapp som heter images.

<?php bloginfo('template_url'); ?>/images/

Det räcker inte bara med att ha en bild utan vi ska naturligtvis också ha med postens titel.

<a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php 
// titeln på artikeln kommer här 
the_title(); ?> &raquo; </a>

När det handlar om hur posten ska visas så har vi två alternativ att välja mellan, dels via the_excerpt och då får vi endast med de 55 första orden, sedan kapas posten, och dels med the_content, det vill säga hela posten.

Jag har valt the_excerpt men lagt till en definition om jag skulle vilja använda the_content. Så länge jag inte använder the_content kommer inte definitionen Fortsätt » att synas. Ändrar jag får jag däremot en klickbar länk. Koden då?

<?php the_excerpt('Forts&auml;tt &raquo;'); ?>

Tid, datum, kommentarlänk samt author lägger vi till som vi brukar:

<?php the_time('j F Y') ?> av < ?php the_author_posts_link(); ?> | <?php comments_popup_link('Inga kommentarer', '1 kommentar', '% kommentarer'); ?>

Sist så avslutar vi och stänger hela ”paketet” med dessa två koder:

<?php endwhile; ?>
<?php } ?>

Samtliga koder

Lägg in dom där de passar på din index.sida och styla allt med css.

<?php
// alla IDs från de valda kategorierna ställs in här 
$display_categories = array(1,2,3,4);
foreach ($display_categories as $category) { ?>

      <?php query_posts("showposts=2&cat=$category");
	    $wp_query->is_category = false;
		$wp_query->is_archive = false;
		$wp_query->is_home = true;
		 ?>
      <h2>Fler poster i <a href="<?php echo get_category_link($category);? >"><?php 
	// namn per kategori  
	  single_cat_title(); ?></a></h2>
      <?php while (have_posts()) : the_post(); ?>
      <?php
// bildnamnet
	$values = get_post_custom_values("Image");
// kollar så det finns en bild</font>
	if (isset($values[0])) {						
?>
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ? >/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
      <?php } ?>
      <a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php 
// titeln på artikeln kommer här  
	  the_title(); ?> &raquo; </a>
	 
      <?php the_excerpt('Forts&auml;tt &raquo;'); ?>
	   Postat den <?php the_time('j F Y') ?> av <?php the_author_posts_link(); ?> | <?php comments_popup_link('Inga kommentarer', '1 kommentar', '% kommentarer'); ?>   

      <?php endwhile; ?>

    <?php } ?>

Lycka till!