Custom Post Types i Wordpress 3.0

15 juni, 2010
Postat av David Paulsson

Custom Post Types i WordPress 3.0

Låter det här bekant?

”Du går in I ’Posts’ och så väljer du kategorin ’kampanj’ innan du klickar på ’Publish’, då hamnar inlägget rätt. Men bocka inte i någon annan kategori, då kan inlägget hamna någon annanstans. Och så får du inte fylla i något där det står ’Custom fields’ det använder du bara när du ska lägga in en ny …”

och så vidare. Skulle det inte kännas enklare att istället be kunden gå till ”kampanj” direkt, istället för att välja en speciell kategori när inlägget ska publiceras?

Säg hej till Custom Post Types i WordPress 3.0!

I det här inlägget tänkte jag visa hur vi kan göra en kampanj-yta med hjälp av Coda slider på startsidan av ett WordPress-tema som hämtar inlägg av en viss Custom Post Type.

Först ska vi ladda hem Coda slider. Coda slider är ett jQuery-script som kan bläddra mellan olika <div>-taggar på ett snyggt sätt och som är väldigt lättanvänt.

Du laddar hem filerna och bakar in dom i din header.php-fil någonstans innanför <head> och </head> på följande sätt:

<!-- Begin Stylesheets -->
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/coda-slider-2.0/stylesheets/coda-slider-2.0.css" type="text/css" media="screen" /> 
<!-- End Stylesheets --> 	 	
<!-- Begin JavaScript --> 
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/coda-slider-2.0/javascripts/jquery-1.3.2.min.js"></script> 
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/coda-slider-2.0/javascripts/jquery.easing.1.3.js"></script> 
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/coda-slider-2.0/javascripts/jquery.coda-slider-2.0.js"></script> 
		 <script type="text/javascript">
			$().ready(function() {
				$('#kampanj').codaSlider();
			});
		 </script>
<!-- End JavaScript -->

Skapa ny post type

Nu när vi har Coda slider-filerna på plats ska vi se till att vi får in en ny post type i admingränssnittet så att vår kund kan uppdatera den här kampanj-ytan på ett enkelt och smidigt sätt. Det vi gör nu är absolut enklast möjliga och är endast att lägga till en ny typ av poster. Vi öppnar vår funktions.php-fil och lägger till följande kod-snutt:

<?php
 
function post_type_kampanj() {
	register_post_type( 'kampanj',
                array( 'label' => __('Kampanj'), 'public' => true, 'show_ui' => true ) );
	register_taxonomy_for_object_type('post_tag', 'kampanj');
}
add_action('init', 'post_type_kampanj');
 
?>

Dags att fylla på med inlägg

Klart så? Japp! Nu när vi tittar i vårt admingränssnitt har det dykt upp en ny ruta för vår kampanj-yta. Nu kan vi börja fylla på inlägg som är kampanjer.

Sen i din index.php-fil ska vi nu baka in loppen. Vi använder en query för att starta loppen och bara hämta inlägg med ”post type=kampanj”.

<div class="coda-slider-wrapper">
	<div class="coda-slider preload" id="kampanj">
 
<?php
	global $wp_query;
	$wp_query = new WP_Query("post_type=kampanj");
?>
 
<?php while (have_posts()) : the_post(); ?>
	<div class="panel">
    	<div class="panel-wrapper">
			<h2 class="title"><?php the_title() ?></h2>
			<?php the_content() ?>
		</div>
	</div>
<?php endwhile;?>
 
	</div><!-- slut .coda-slider -->
</div><!-- slut .coda-slider-wrapper -->

Se vad vi gjort

Här kan vi se vad vi gjort.

Sådär ja! Nu är allting så klart väldigt ostylat, men grundtanken hur man kan använda sig av Custom Post Types finns här. Självklart går det att bli väldigt mycket mer avancerad än det här, du kan t ex välja precis vilka kolumner och info som ska finnas för just dina custom post types. Kanske är det en mäklarsida där vi behöver flera olika typer av inlägg. En för bostadsrätter, en för villor och en för land. Sen behöver vi veta info som kvadratmeter, pris och adress? Ni förstår själva att nu börjar WordPress verkligen att på riktigt kriga mot dom stora CMS-systemen… Men det ska vi inte göra nu. Inte idag i alla fall.

Glöm inte att filtrera bort inläggen ur din vanliga loop sen, annars hamnar våra kampanjinlägg bland dina vanliga blogginlägg! Glöm inte heller att följa mig på twitter, eller besöka min hemsida. Tack för den här gången!

Dela länken på:

2 kommentarer

Kategori Mer än blogg Temautveckling

2 Kommentarer

dnis
20 september, 2010

Hej,

diggar din artikel och pillar med det nu… har dock fastnat totalt!

hur i h***ete ändrar jag bredden på hela kalset?

David Paulsson
22 oktober, 2010

Hej dnis!

i CSS-filen (coda-slider-2.0.css) hittar du den här raden: .coda-slider, .coda-slider .panel { width: 560px }

Det finns även andra mått satta med CSS, där kan du leta!

Hoppas det hjälper!

/David