Bygg ett WordPress tema med 960 Grid System
960gridsystem

Jag har tidigare skrivet en nybörjarguide om det CSS framework som går under namnet 960 Grid System. Här kommer en liten fortsättning på den guiden som är lite mer specifik för just WordPress och att bygga teman till den samme.

I föregående inlägg om 960 gs gick jag igenom grunderna tillräckligt för att kunna programmera en hemsida som ser ut som följer:

960 Grid System Screenshot

Låt oss anta att vi vill skapa samma hemsida, men den här gången som ett WordPress templet. Vi kommer att vilja ha den översta gröna titeln i header.php, den undre gröna i footer.php. I det orangea i mitten vill vi att våra blogginlägg ska synas, alltså index.php. Slutligen får de blå spalterna för enkelhetens skull slås samman till en sidopanel, sidebar.php .

Låt oss börja

Skapa en mapp som heter tema960gs, detta kommer att vara din templet mapp där du placerar alla filer som har med ditt theme att göra.

I din nyligen skapade mapp placerar du filen 960.css, och rekommenderat även en reset.css och text.css. Alla dessa filer hittar du om du laddar ner filerna från 960 Grids Systems hemsida.

I samma mapp skapar du också en ny fil som du döper till style.css. Detta kommer att vara där du placerar all din riktiga designkod. Denna fil är också obligatorisk för att WordPress ska kunna hitta ditt tema.

I style.css skriver du följande rader:

1
2
3
4
5
6
7
8
9
10
11
12
/*   
Theme Name: WpGuru 960
Theme URI: http://www.wordpressguru.se/bygg-ett-wordpress-tema-med-960-grid-system/
Description: A shell theme with 960 Grid System
Author: Kristoffer Emanuelsson
Author URI: http://www.wordpressguru.se/
Tags: 960, grid system, framework
Version: 1.0--frivilligt
.
All övrig information om ditt tema, licenser, behov av vissa plugins, eller hur man använder vissa funktioner
.
*/

Byt ut svaren till saker som passar in på ditt eget tema. Theme Name är det viktigaste, då detta är det namn ditt tema får i temavalsmenyn i WordPress administrationspanel.

Header.php

Skapa en ny fil som du döper till header.php (eller kopiera en från ett annat tema, default tex). Öppna den och skriv följande:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css" /> <!-- Återställer css attribut -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/text.css" type="text/css" /> <!-- Sätter tillbaka en del gemensamma css attribut -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/960.css" type="text/css" /> <!-- Lägger till 960 Grid System -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <!-- Din egen style.css -->
 
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <!-- Tillåt pingar -->
 
        <?php wp_head(); ?> <!-- Gör så att plugins och WordPress kan placera saker i headern -->
    </head>

Det viktigaste och den största skillnaden i koden ovan från vanliga teman är raden

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/960.css" type="text/css" /> <!-- Lägger till 960 Grid System -->

som talar om att vi ska lägga till alla klasser vi behöver för att kunna använda oss av 960 Grid System. ‘stylesheet_directory’ är samma sak som din templet mapp, alltså mappen tema960gs där du tidigare just placerade filen 960.css.

Efter detta vill vi börja starta <body>-taggen och börja våran hemsida, så fortsätt med

1
2
3
4
5
6
    </head>
    <body <?php body_class(); ?>>
        <div id="wrapper" class="container_12"> <!-- Definiera conteinern som talar om ifall vi använder oss av 12 eller 16 kolumner -->
            <div id="header" class="grid_12"> <!-- Vår header ska sträcka sig över alla 12 kolumner -->
                <h1>Ett WordPress tema som använder 960 GS</h1>
            </div>

Nu har vi startat bodyn med en container och en titel, det får räcka för header.php. Spara.

Index.php

Skapa filen index.php och placera även den i mappen tema960gs där du har alla andra filer som hör till ditt tema. Skriv följande

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php get_header(); ?> <!-- Inkludera header.php -->
 
<div id="main" class="grid_8"> 
    <!-- Main... Här kommer the_loop(); det är här vi ska få upp våra inlägg   -->
    <div id="tom1" class="grid_1 alpha"> <!-- Första barnet med klassen alpha och ett mellanrum i sig -->
    &nbsp;
    </div>
    <div id="child1" class="grid_2"> <!-- Första riktiga barnet som vi har text i -->
        <p>En "puff" med lite text i</p>
    </div>
    <div id="child2" class="grid_2">
        <p>En mitten "puff" med lite mer information</p>
    </div>
    <div id="child3" class="grid_2"> <!-- Sista synliga barnet -->
        <p>En tredje och sista puff</p>
    </div>
    <div id="tom2" class="grid_1 omega"> <!-- Sista barnet med klassen omega, dessa vill vi inte ska synas -->
    &nbsp;
    </div>
</div> <!-- Avsluta main -->
 
<div id="sidebar" class="grid_4"> <!-- Sidebaren måste vara 4 kolumner stor eftersom main tar upp 8 -->
    <?php get_sidebar(); ?> <!-- Inkludera sidebar.php -->
</div>
 
<?php get_footer(); ?> <!-- Inkludera footer.php -->

Efter att ha inkluderat header.php med standard funktionen delar vi upp våra 12 kolumner till två spalter, main med 8 kolumner och sidebaren med de resternade 4.

I main kan du koda precis som vanligt, och genom att placera the_loop() här kommer våra blogginlägg att synas på den här ytan.

Jag lät barnen från den tidigare guiden få vara kvar, men eftersom de tar upp 2 kolumner var, och vi har 8 stycken som vi måste utnyttja är vi tvungen att göra några små förändringar, antingen utöka bredden på en eller fler av dem, lägga till fler barn, eller placera tomhet före och efter det första och sista barnet. Det sistnämnda gör man genom att lägga till klasserna prefix_x eller suffix_x för x antal kolumner tomma före respektive efter barnet i fråga. Problemet med detta är att padding används, vilket gör att bakgrunden på barnet kommer att sträcka sig ut över den ytan. Så istället valde jag att placera två barn, ett på vardera sida om de tre barnen, som använder sig av en kolumn var, och sedan endast fylla dessa med ett mellanslag &nbsp;.

Sidebar.php

Skapa en fil som du döper till sidebar.php och fyll den precis som vanligt med sidopanels kod.

Eftersom vi bestämde dess bredd i divarna i index.php är det ingenting annorlunda i den här filen:

1
2
3
4
5
6
7
8
9
10
<div id="sidebar" role="complementary">
    <ul>
    <?php  /* Widgetized sidebar, if you have the plugin installed. */
	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
            <li>
		<?php get_search_form(); ?>
	    </li>
        <?php endif; ?>
    </ul>
</div>

Eller vad du nu kan hitta på.

Glöm inte att tillåta en sidebar genom att skapa filen functions.php och skriva följande

<?php register_sidebar(); ?>

Footer.php

Avsluta hela din kod genom att skapa filen footer.php och fylla den med följande:

1
2
3
4
5
6
7
        <div id="footer" class="grid_12"> <!-- En Footer som sträcker sig över alla 12 kolumner -->
            <p>Skapad av WordPressGuru.se</p>
        </div>
    </div> <!-- Avsluta containern från header.php -->
<?php wp_footer(); ?> <!-- Tillåt plugins och WordPress att lägga till saker i footern -->
</body>
</html>

I footern skapar du en ruta som sträcker sig över alla 12 kolumner och efter att ha avslutat den så får du inte glömma att du också måste avsluta containern som du startade i header.php.

Innan allt är över inkludera wp_footer() och avsluta sedan både bodyn och hela html-koden. Allt klart.

Avslutaning och testkörning

Aktivera Tema960gsStyla som du vill i style.css och lägg till massa häftiga funktioner och text som vanligt.

När du är färdig laddar du upp hela mappen tema960gs med innehåll till /wp-content/themes/. Gå nu till administrationspanelen (/wp-admin/) på din WordPress blogg och navigera dig vidare till Utseende > Teman. Där kommer du att hitta en tema med namnet som du gav i style.css. I mitt fall ”WpGuru 960″. Temat kommer inte ha någon bild, eftersom du inte har någon screenshot.png i din templet mapp. Men aktivera ditt nya tema ändå och poff, så har du precis gjort ditt första egna tema i 960 Grid System.

Ladda ner alla filerna och testa själv, lek och ändra allt hur mycket du vill:

Download Ladda ner exempelfilerna till temat: tema960gs.rar (5.2 kB) senast uppdaterad 17 February 2011

2 kommentarer till 'Bygg ett WordPress tema med 960 Grid System' »»

  • Kan någon bekräfta detta? jag uppskattar verkligen all Information som du delat med er av. jag har också delat detta på Clipmarks! Ha de bra återkomma) och


  • Klockrent, skall testa detta resan ikväll. Letat efter en bra sambor och denna följer en bra standard. Tittar tillbaka om jag har något att visa i framtiden. Tackar.


Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>