Bygg ditt WP-tema från grunden

Hur sätter jag ihop mitt tema?

I mappen som Du laddade ned från WordPress är det temat default vi kommer att plocka några koder och filer ifrån. För att Du också ska förstå strukturen kommer vi att utgå från denna layout i två kolumner med en header och footer. De filer som inte redovisas i guiden får du själv ändra på och föra över till ditt nya tema. Det du då måste tänka på är att du får samma htmlkoder som ditt nya tema har. Med andra ord, du ändrar i htmlkoden och sätter dit dina koder. Framförallt är det viktigt att du göra detta i single.php, search.php, archive.php och comments.php eftersom jag inte redovisar dessa filer. Ett bra sätt att lära sig detta på är att noga studera dessa filer i default, se vilka koder som finns och var dessa är placerade. Använd sedan ditt eget template och infoga dina templatetags där de passar att placeras. Här under listar jag de templates som normalt brukar finnas i en basic tema.

I header.php ska vi placera de templatetags som är nödvändiga och är listade på föregående sida. Minns också att du öppnar body i header.php.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head profile="http://gmpg.org/xfn/11">
  4. <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
  5. <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
  6. <meta http-equiv="imagetoolbar" content="no" />
  7. <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
  8. <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
  9. <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  10. <meta name="keywords" content="" />
  11. <meta name="description" content="" />
  12. <meta name="copyright" content="" />
  13. <?php wp_get_archives('type=monthly&format=link'); ?>
  14. <?php //comments_popup_script(); // off by default ?>
  15. <?php wp_head(); ?>
  16. <style type="text/css" media="Screen"> /*\*/@import url("http://din_domän/wp-content/themes/temats_namn/style.css");/**/</style>
  17. <body>
  18. <div id="container">
  19. <div id="banner"><h3>Din logga här!</h3>
  20. Här kan du lägga ut lite text eller länkar om du vill.</div>

Index.php kallar på <?php get_sidebar(); ?> omedelbart efter <?php get_header(); ?>. Inte alla teman är uppbyggda så. Men eftersom denna layout har den strukturen ska vi lägga in de templatetags som kan finnas i sidebar.php. Kopiera de som är listade på föregående sida.

  1. <div id="sidebar-a">
  2. <?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
  3. <h2>Archives</h2>
  4. <ul><?php<li> wp_get_archives('type=monthly'); ?></li></ul>
  5. <ul><?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?></ul>
  6. <h2>Meta</h2>
  7. <ul><li>
  8. < ?php wp_register(); ?>
  9. <li><?php wp_loginout(); ?></li>
  10. <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
  11. <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
  12. <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
  13. <?php wp_meta(); ?>
  14. </li> </ul>
  15. </div>

Nästa steg blir att infoga de tags som behövs i index.php. Ge även akt på alla htmlkoder.

  1. <?php get_header(); ?>
  2. <?php get_sidebar(); ?>
  3. <div id="content">
  4. <?php if (have_posts()) : ?>
  5. <?php while (have_posts()) : the_post(); ?>
  6. <div class="Post" id="post-<?php the_ID(); ?>" style="padding-bottom: 40px;"><!-- start post -->
  7. <h2><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
  8. <div class="PostDate">
  9. <small class="datum"><?php the_date('Y.m.d'); ?></small>
  10. <small class="komment"> <?php comments_popup_link('Inga kommentarer', '1 kommentar', '% kommentarer'); ?> <?php edit_post_link('Edit'); ?></small>
  11. <small class="PostAuthor">Av: <?php the_author() ?> </small>
  12. </div>
  13. <div class="PostContent"><!-- start postcontent -->
  14. <?php the_content('&raquo; &raquo;'); ?>
  15. </div><!-- slut postcontent -->
  16. <!--<?php trackback_rdf(); ?>-->
  17. <?php comments_template(); ?>
  18. </div><!-- slut posts -->
  19. <?php endwhile; ?>
  20. <?php else : ?>
  21. <h2>No posts found. Try a different search?</h2>
  22. <?php include (TEMPLATEPATH . '/searchform.php'); ?>
  23. <?php endif; ?>
  24. </div><!-- end content -->
  25. </div><!--slut wrapper -->
  26. <?php get_footer(); ?>
  27. </body>
  28. </html>

Sist så har vi då footer.php.

  1. <div id="footer">
  2. <?php bloginfo('name'); ?> is proudly powered by<a href="http://wordpress.org/">WordPress</a>
  3. <a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
  4. <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
  5. </div>
  6. </div>

För filer som ligger ”utanför” WordPress egna block så är exempelvis page.php uppbyggd på följande vis:

  1. <?php get_header(); ?>
  2. <?php get_sidebar(); ?>
  3. <div id="content">
  4. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  5. <div class="Post" id="post-<?php the_ID(); ?>"><!-- start post -->
  6. <h2><?php the_title(); ?></h2>
  7. <div class="PostContent">
  8. <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
  9. <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
  10. </div><!-- slut postcontent -->
  11. </div><!-- slut post -->
  12. <?php endwhile; endif; ?>
  13. <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
  14. </div><!-- end content -->
  15. <?php get_footer(); ?>
  16. </body>
  17. </html>

Skillnaden mellan index.php och single.php är minimal. I vissa fall är det enda som skiljer dom åt att koderna för datum och author inte är medtagna. Likaså kan navigeringen mellan sidorna ha lite annorlunda koder men i princip så kunde single.php se likadant ut som index.php.

Liknande poster:

14 Comments Add yours

  1. Pernilla says:

    Standardmall? Var hittar jag dessa?

    1. Lena says:

      Hej!
      Du får ursäkta mig men jag var inne och snurrade kring blogg.se, jag tänkte inte varifrån du skickade kommentaren. Fel av mig!
      I wordpress twentyten så finns ju alla filer. Men om det bara är de filer som absolut måste finnas, och du vill ha så få filer som möjligt så är det i princip bara index.php som behövs, men det är ju inget kul. Du kan själva avgöra vilka filer du vill ha, kika på denna bild. Personligen föreslår jag följande: index.php – single.php – page.php – comments.php – 404.php – archive.php. Du behöver egentligen inga fler. mvh/Lena

  2. Pernilla says:

    Tänkte på en sak, skulle du inte kunna göra så att, de filer som måste finnas med, går att ladda ner i en fil?

    1. Lena says:

      Nu är jag inte så säker på vilka filer du menar – ett tema eller? Annars finns alla filer att ladda ned under länken “standardmallar” så du själv kan laborera hur du vill.

  3. leila says:

    nu ska jag sätta igång och göra mig mitt egna tema, inge roligt att ta andras. jag ska följa din guide, ska bli jättekul att se om jag lyckas.
    kram på dig

    1. Lena says:

      Lycka till, men jag vill påpeka att det har hänt en del kring wordpress sedan jag skrev guiden.

  4. HelenaG says:

    Hej.

    Bra sida. Jag fattar inte var o hur jag ska skriva in dessa texter du skrivit i denna tutorial (5)?

    När jag laddar ner wp så är det enda tema jag har där twentyten….

    //HelenaG

    1. Lena says:

      Hej Helena!
      Kan du skriva lite tydligare vad exakt det är som är svårt?
      mvh/Lena

  5. Anna says:

    Hej!

    En mycket bra sida. Jag ska studera den mycket noga.

    Vad heter texten som du har i dina inlägg? Jag skulle vilja ha samma i vår blogg.

    1. Lena says:

      Hej!
      Jag använder verdana .75 em som standard. Tack för din kommentar =)
      mvh/Lena

  6. Ja, verkligen en kanonsajt! Fantastiskt många fina tips. Ska faktiskt försöka mig på att göra ett eget tema. Min dotter vill ha en ren wordpress-blogg att bädda in på sin sida, så det ska jag göra i första hand.
    /Jane

    1. Lena says:

      Tack!
      Ja att testa och åter testa ger kunskap 🙂

  7. Christer says:

    Hejsan!
    Vilken kanonsajt du har!
    Jag vill men vet inte om jag kan och vågar bygga mitt eget tema som ser ut som min sajt gör idag.
    Jag letar webbhotel med stöd för wordpress då mitt nuvarande kanonhotel tyvärr int erbjuder den tjänsten.
    Hoppas kunna ställa frågor till dig kring mitt tema.

Leave a Reply

Your email address will not be published. Required fields are marked *