Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/mankitse/designoak.com/wp-content/plugins/wp-syntax/wp-syntax.php on line 380
Att skapa ett eget WordPress-tema kan vara en givande uppgift som ger dig fullständig kontroll över design och funktionalitet. I denna guide går vi igenom de viktigaste stegen för att bygga ett eget tema från grunden.
1. Grundläggande förberedelser
Innan vi börjar kodningen behöver vi en lokal utvecklingsmiljö. Du kan använda:
- Local by Flywheel eller XAMPP för att köra WordPress lokalt.
- En texteditor som VS Code eller Sublime Text.
- Ett versionhanteringsverktyg som Git för att spåra ändringar.
Ladda ner och installera WordPress lokalt och skapa en ny mapp i wp-content/themes/ där ditt tema ska lagras.
2. Struktur för ditt tema
Ett grundläggande WordPress-tema behöver minst två filer:
index.php– Huvudfilen för ditt tema.style.css– Huvudstilmallen.
En typisk struktur kan se ut så här:
/mitt-tema/ |-- style.css |-- index.php |-- functions.php |-- header.php |-- footer.php |-- sidebar.php |-- page.php |-- single.php |-- archive.php |-- 404.php |
3. Skapa style.css
Denna fil innehåller information om temat och dess stilregler. Öppna style.css och lägg till följande kod:
/* Theme Name: Mitt Eget Tema Theme URI: http://dinsida.se/ Author: Ditt Namn Description: Ett egengjort WordPress-tema Version: 1.0 */ |
4. Skapa index.php
Detta är huvudfilen som WordPress använder för att visa din webbplats. Ett enkelt exempel:
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
echo '<h2>' . get_the_title() . '</h2>';
the_content();
endwhile;
else:
echo '<p>Inga inlägg hittades</p>';
endif;
?>
</body>
</html> |
5. Dela upp temat i moduler
För att göra koden mer strukturerad, delar vi upp layouten i separata filer:
- header.php (sidhuvud)
- footer.php (sidfot)
- sidebar.php (sidofält)
Exempel på header.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
<nav>
<?php wp_nav_menu(array('theme_location' => 'main-menu')); ?>
</nav>
</header> |
Exempel på footer.php:
<footer>
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
<?php wp_footer(); ?>
</footer>
</body>
</html> |
Och i index.php använder vi dem så här:
<?php get_header(); ?>
<div class="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
echo '<h2>' . get_the_title() . '</h2>';
the_content();
endwhile;
endif;
?>
</div>
<?php get_footer(); ?> |
6. Lägg till funktioner i functions.php
Denna fil används för att registrera funktioner som menyer, widgetar och anpassade inställningar. Öppna functions.php och lägg till:
<?php
function mitt_tema_resources() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mitt_tema_resources');
function register_mitt_tema_menus() {
register_nav_menus(array(
'main-menu' => __('Huvudmeny')
));
}
add_action('init', 'register_mitt_tema_menus');
?> |
7. Skapa templates för inlägg och sidor
WordPress använder olika mallfiler för inlägg och sidor:
- single.php – För enskilda inlägg.
- page.php – För sidor.
- archive.php – För arkiv som kategorier och taggar.
Exempel på single.php:
<?php get_header(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<p><?php the_date(); ?> av <?php the_author(); ?></p>
<?php the_content(); ?>
</div>
<?php get_footer(); ?> |
8. Implementera anpassningsbara widgets
Lägg till sidebar-stöd genom att uppdatera functions.php:
function mitt_tema_widgets_init() {
register_sidebar(array(
'name' => 'Sidofält',
'id' => 'sidebar-1',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}
add_action('widgets_init', 'mitt_tema_widgets_init'); |
Och i sidebar.php:
<aside>
<?php if (is_active_sidebar('sidebar-1')) : ?>
<?php dynamic_sidebar('sidebar-1'); ?>
<?php endif; ?>
</aside> |
9. Sluttestning och finjustering
Ladda upp temat till en WordPress-installation och testa det noggrant. Justera designen med CSS och testa mobilresponsen.
10. Sammanfattning
Du har nu byggt ett grundläggande WordPress-tema från grunden! Med dessa verktyg kan du utveckla ditt tema vidare och skapa unika webbplatser.