Skip to content

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. <!--?php bloginfo('name'); ?--> <!--?php if ( is_single() ) { ?--> » Blog Archive <!--?php } ?--> <!--?php wp_title(); ?-->
  2. <!-- leave this for stats -->
  3. <!--?php wp_get_archives('type=monthly&amp;format=link'); ?-->
  4. <!--?php //comments_popup_script(); // off by default ?-->
  5. <!--?php wp_head(); ?-->
  6. <code><code> <style type="text/css" media="Screen"> /*\*/@import url("http://din_domän/wp-content/themes/temats_namn/style.css");/**/</style> 
  7. <code>
  8. <code>
  9. <code>Här kan du lägga ut lite text eller länkar om du vill.

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. <code>
    2. Pages

      ‘ ); ?>

    3. <code>

      Archives

 

 

 

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. <code>
  4. <!--?php if (have_posts()) : ?-->
  5. <!--?php while (have_posts()) : the_post(); ?-->
  6. <code>
  7. <code>

  8. <code>
  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. <code>
  13. <!--?php the_content('&amp;raquo; &amp;raquo;'); ?-->
  14. <!--<?php trackback_rdf(); ?>-->
  15. <!--?php comments_template(); ?-->
  16. <!--?php endwhile; ?-->
  17. <!--?php else : ?-->
  18. <code>

    No posts found. Try a different search?

  19. <!--?php include (TEMPLATEPATH . '/searchform.php'); ?-->
  20. <!--?php endif; ?-->
  21. <!--?php get_footer(); ?-->

Sist så har vi då footer.php.

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

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. <code>
  4. <!--?php if (have_posts()) : while (have_posts()) : the_post(); ?-->
  5. <code>
  6. <code>

  7. <code>
  8. Read the rest of this page »

    ‘); ?>

  9. <!--?php wp_link_pages(array('before' =&gt; ' &lt;p&gt;&lt;strong&gt;Pages:&lt;/strong&gt; ', 'after' =&gt; '&lt;/p&gt; &lt;p&gt;', 'next_or_number' =&gt; 'number')); ?-->
  10. <!--?php endwhile; endif; ?-->
  11. <!--?php edit_post_link('Edit this entry.', ' &lt;p&gt;', '&lt;/p&gt; &lt;p&gt;'); ?-->
  12. <!--?php get_footer(); ?-->

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:

Pages: 1 2 3 4 5 6 7

Published inWordpress

14 Comments

  1. Standardmall? Var hittar jag dessa?

    • Lena Lena

      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. 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?

    • Lena Lena

      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. 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

    • Lena Lena

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

  4. HelenaG HelenaG

    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

    • Lena Lena

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

  5. 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.

    • Lena Lena

      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

    • Lena Lena

      Tack!
      Ja att testa och åter testa ger kunskap :)

  7. 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.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *