Sådan laver du dit eget WordPress tema

Du er her: Forside \ Lav din egen hjemmeside \ Sådan laver du dit eget WordPress tema

Kunne du tænke dig at lave dit eget WordPress tema?

Jeg vil i denne artikel vise dig, hvordan du laver dit eget WordPress tema fra bunden.

WordPress er som du nok ved det mest brugte CM System i dag. Derfor tænker jeg det vil give god mening, at vise dig hvordan du skræddersyer din egen unikke visuelle identitet online ved at kombinere nutidens mest brugte CM System med dit eget unikke tema.

For at lave dit eget tema, kræver det at du har en forståelse for hvordan WordPress fungerer. Derudover kræver det kendskab til HTML, CSS og PHP.

For at komme i gang med at lave dit eget tema, så er der nogle ting jeg vil anbefale dig at have klar.

 

  • FileZilla er et freeware FTP Client program, som jeg vil anbefale dig at bruge. Nogle hostingudbydere har også indbygget FTP Client. Personligt kan jeg bedst lide FileZilla. The choice is yours! Du kan hente FileZilla her: download FileZilla.
  • Dit eget domæne og webhotel.
  • Til kodeeditering kan du fx bruge en af følgende freeware programmer: Sublime Text 3 (bruger selv denne.) Du kan hente Sublime Text 3 her: download Sublime Text 3. Eller du kan bruge Notepad++. Download Notepad++ her: download Notepad++.

 

Lad os så komme i gang! Har du allerede WordPress installeret så spring over punkt 1

  1. Det første du skal gøre er at installere WordPress på dit domæne. Dette kan gøres ved enten at bruge din hostingudbyders 1 click installation, hvis din hosting udbyder tilbyder denne funktion. Ellers kan du downloade wordpress her: WordPress.org og uploade til dit webhotel med en FTP Client.
  2. Lav en mappe og giv den dit ønskede temanavn. Jeg har kaldt mit her på sitet for “jws” for Jakobsen Web Solutions, men hvad du kalder dit er op til dig!
  3. Nu går vi i gang med at lave dine standard WordPress tema filer.Nu laver du så en fil ved navn header.php. Dette gør du ved at åbne dit kodeediteringsprogram i mit tilfælde “Sublime Text 3”. Bruger du Sublime Text, kan du trække mappen du har lavet ind i programmet. Dette gør det nemmere at arbejde med. Nu højreklikker du så på den mappe du har trukket ind i Sublime Text og herefter klikker du på “new file”. Se eksempel:

    sublime
  4.  
     
    I den fil du lige har lavet lægger du så nedeforstående kode i. Husk at ændre titlen på dit tema i title tag’et i linje 3:

    <html>
    <head>
    <title>Indsæt navnet på dit tema her!</title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <h1>HEADER</h1>
    </div>
    

     
    Nu gemmer du så din fil. Dette gør du ved at trykke ctrl + s og kalder dit “filnavn” for header.php.
     
     
    Nu gør du så det samme igen. Denne gang skal du så blot kalde din fil for index.php og ligge følgende kode i:

    <?php get_header(); ?> <div id="main"> <div id="content"> <h1>Main Area</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <h4>Posted on <?php the_time('F jS, Y') ?></h4> <p><?php the_content(__('(more...)')); ?></p> <hr> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> </div> <?php get_sidebar(); ?> </div> <div id="delimiter"> </div> <?php get_footer(); ?>
    

     
    Denne gang gør du det for sidebar.php hvori du ligger denne kode:

    <div id="sidebar"> <h2 ><?php _e('Categories'); ?></h2> <ul > <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> <h2 ><?php _e('Archives'); ?></h2> <ul > <?php wp_get_archives('type=monthly'); ?> </ul> </div>
    

     
    Denne gang gør du det for footer.php, hvori du ligger denne kode:

    <div id="footer"> <h1>FOOTER</h1> </div> </div> </body> </html>

     
    Til sidst gør du det for style.css, hvori du ligger denne kode:

    body { text-align: center; }
    #wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
    #header { border: 2px #a2a2a2 solid; }
    #content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
    #sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
    #delimiter { clear: both; }
    #footer { border: 2px #a2a2a2 solid; }
    .title { font-size: 11pt; font-family: verdana; font-weight: bold; }

     
    Nu skulle din WordPress tema mappe gerne indeholder følgende filer: header.php, index.php, sidebar.php, footer.php og style.css med ovenforstående kode. Gør den det, så er du klar til næste skridt.

     

  5. Nu uploader vi din nye temamappe til dit webhotel. Dette gør du ved hjælp af din FTP Client. Bruger du FileZilla skal du indtaste FTP informationerne som du finder på dit webhotel til at logge på med og klikke på knappen “lyntilslut”.

    Du kan nu se filerne på dit webhotel i højre side af skærmen, mens venstre side af skærmen er din pc.Nu dobbeltklikker du så på din WordPress mappe i højre side (Har du lagt din WordPress installation i root mappen, skal du ikke gøre noget nu).

    Herefter dobbeltklikker du på “wp-content” mappen og herefter gør du det samme på “themes” mappen. Du skulle nu gerne kunne se dine WordPress temaer.


    Nu højreklikker du på din tema mappe i venstre side og trykker på “upload”. Nu uploades dit tema så til dine andre WordPress temaer i din WordPress installation. Se eksempel:
     
    filezilla2
     
    Temaet kan nu findes sammen med dine andre temaer inde i dit wp-admin interface under “Udseende” – “Temaer”. Prøv nu at aktiverer dit nye tema. Dit tema skulle nu gerne ligne dette:
     
    Wordpress tema
     
    Nu har du skelettet til dit nye WordPress tema. Du har altså nu noget du kan bygge videre på. For nemt at tilgå de filer du lige har oprettet bedes du gå til: “udseende” – “editor” i dit wp-admin interface.

 

Nu får vi dine blogindlæg til at virke

For at dine indlæg virker, kræver det at du laver en ny fil ved navn single.php og uploader til din tema mappe.
I denne fil ligger du følgende kode:

<?php get_header(); ?>
<main class="full-width">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<p><?php the_content(__('(more...)')); ?></p>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<?php comments_template();?>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

 
Som du kan se i koden ovenfor på linje 7. Så bliver kommentar templaten loaded som vi kommer til i næste step. Det er denne funktion der gør at kommentarerne bliver vist på dine indlæg.

 

Nu får vi kommentarerne til at virke

Nu laver du igen en ny fil og kalder den comments.php og indsætter koden nedenfor og uploader den til din tema mappe.

 

<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?>
<?php endif; ?><?php if(!empty($post->post_password)) : ?>
<?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?>
<?php endif; ?>
<?php endif; ?><?php if($comments) : ?>
<?php foreach($comments as $comment) : ?>
<?php if ($comment->comment_approved == '0') : ?>
<?php endif; ?>
<?php endforeach; ?>
<?php else : ?>
<?php endif; ?><?php if(comments_open()) : ?>
<?php if(get_option('comment_registration') && !$user_ID) : ?>
<?php else : ?>
<?php if($user_ID) : ?>
<?php else : ?>
<?php endif; ?>
<?php endif; ?>
<?php else : ?>
<?php endif; ?>

<?php if($comments) : ?>
<ol>
<?php foreach($comments as $comment) : ?>
<li id="comment-<?php comment_ID(); ?>">
<?php if ($comment->comment_approved == '0') : ?>
<p>Your comment is awaiting approval</p>
<?php endif; ?>
<?php comment_text(); ?>
<cite><?php comment_type(); ?> by <?php comment_author_link(); ?> on <?php comment_date(); ?> at <?php comment_time(); ?></cite>
</li>
<?php endforeach; ?>
</ol>
<?php else : ?>
<p>Der er ingen kommentarer endnu</p>
<?php endif; ?>

<?php if(comments_open()) : ?>
<?php if(get_option('comment_registration') && !$user_ID) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if($user_ID) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out &raquo;</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Send kommentar" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; ?>
<?php else : ?>
<p>Der er lukket for kommentarer.</p>
<?php endif; ?>

 

Dit tema skulle på nuværende tidspunkt både være i stand til at vise dine indlæg med dertilhørende kommentarfelt under dem.

En anden praktisk ting at tilføje til dit tema er “widgets”. Widgets er det der gør det muligt for dig at indsætte ting i footer, header, sidebar og content inde fra wp-admin interfacet under udseende – widgets. For at indsætte 3 widgets i dit Wordpress tema. Tilføj da nedenforstående kode til en ny fil som du kalder for functions.php og upload efterfølgende denne fil til din tema mappe.

 

<?php
/**
* Register our sidebars and widgetized areas.
*
*/
function arphabet_widgets_init() {register_sidebar( array(
'name' => 'Home right sidebar',
'id' => 'home_right_1',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );}
add_action( 'widgets_init', 'arphabet_widgets_init' );
function my_widgets_init() {register_sidebar( array(
'name' => __( 'Main Sidebar', 'your-theme' ),
'id' => 'sidebar-1',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => "</div>",
'before_title' => '<h3>',
'after_title' => '</h3>',
) );

register_sidebar( array(
'name' => __( 'Header Area', 'your-theme' ),
'id' => 'sidebar-2',
'description' => __( 'An optional widget area for your site header', 'your-theme' ),
'before_widget' => '<div id="%1$s" class="headwidget %2$s">',
'after_widget' => "</div>",
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_widgets_init' );
add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

 
Når du har gjort dette burde du kunne finde dine widgets i dit wp-admin interface under “udseende” – “widgets”. Dit widgets area skulle nu gerne disse 3 widgets:

 

widgets

 
På nuværende tidspunkt er du ved at have funktionelt WordPress tema. Nu mangler du selvfølgelig styling af dit tema. Dette gør du inde under wp-admin interface – “udseende” – “editor” – “(style.css)”.

Er der noget du skal bruge hjælp til? Skriv da i kommentarfeltet nedenfor, eller kontakt mig her: Kontakt.

Om forfatter

Skriv et svar