Lag et egendefinert tema i WordPress
Lag et egendefinert tema i WordPress
av Ole Petter den 11. januar 2020
Sist oppdatert: 14 januar, 2020 kl 15:27For å lage et eget tema i WordPress kreves minimum tre filer. En index.php-side, et stilark kalt style.css og en funksjonsfil kalt functions.php
I tillegg er det vanlig å legge til en header.php og en footer.php
Contents
Style.css
Først må man legge til navnet på temaet, dette gjøres i style.css i hovedmappen.
/*
Theme name: Ditt Temanavn
*/
Index.php
index.php er hovedmalfilen hvor alle innlegg og innhold samles. Det finnes ulike sider for ulikt innhold, men index.php er minstekravet for å lage et fungerende tema.
<!-- henter header.php hvis den er opprettet -->
<?php get_header(); ?>
<main>
<h1>Index.php</h1>
<!-- hovedinnhold her -->
</main>
<!-- henter footer.php hvis den er opprettet -->
<?php get_footer(); ?>
Functions.php
functions.php er konfigurasjonsfilen hvor man kan skrive egendefinert kode og hente inn eksterne filer. Her kan man legge til en rekke funksjoner som ikke kommer med automatisk i WordPress.
1 Hente inn stilark og javascript-filer
Hvis man skal bruke bootstrap som bibliotek for css og javascript, bør man hente det inn gjennom functions.php
For å hente inn stilark må man bruke den innebygde funksjonen
wp_enqueue_style('navn_på_filen', 'lenke eller mappe-referanse');
For å hente inn javascript-filer brukes den innebygde funksjonen
// Eksempel hvor man henter bootstrap.js
wp_enqueue_script('Bootstrap JS', 'js/bootstrap.min.js');
function mitt_tema_enqueue_styles() {
wp_enqueue_style('Bootstrap CSS', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
wp_enqueue_style( 'Font Awesome', 'https://use.fontawesome.com/releases/v5.7.2/css/all.css' );
wp_enqueue_script('jQuery', "https://code.jquery.com/jquery-3.3.1.slim.min.js");
wp_enqueue_script('Popper', "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js");
wp_enqueue_script('Bootstrap JS', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js');
}
// Kjører funksjonen basert på wordpress sin enqueue scripts-funksjon
add_action('wp_enqueue_scripts', 'mitt_tema_enqueue_styles');
2 Registrere widgetområder og navigeringsområder
I tillegg til å hente inn scripts kan man også legge til andre funksjoner som navigeringsmenyer og sidebar og widgetområder.
// Registrere widget områder
function mitt_tema_widgets_init() {
register_sidebar( [
'name' => 'Min sidebar', 'mitt_tema_widgets',
'id' => 'hoved-sidebar_mitt_tema',
'description' => 'Legg til widgeter til hoved-sidebar her',
'before_widget' => '<div class="card mb-3 sidebar">',
'after_widget' => '</div>',
'before_title' => '<div class="card-header font-weight-bold sidebar-header">',
'after_title' => '</div>',
] );
}
add_action( 'widgets_init', 'mitt_tema_widgets_init' );
3 Navigering WordPress med Bootstrap
For å bruke navigeringsmenyer i wordpress finnes det en ferdiglaget kode kalt «Custom navigation Walker» man kan hente inn gjennom functions.php. Man må først laste ned filen som man deretter legger til i temaet, fra denne linken:
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
register_nav_menus( [
'mitt_tema_menu' => 'Min meny', 'Wordpress Tutorial Theme'
] );
/**
* Registrer Custom Navigation Walker
*/
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
header.php
1 Laste inn WordPress sine innebygde klasser og funksjoner
Headeren header.php brukes til å hente inn stilark og topp-navigering for temaet. Her kan man legge til en rekke wordpress-funksjoner som «body_class()», «wp_head()», og «wp_nav_menu()». Disse funksjonene gjør at man manuelt i wordpress-dashbordet kan legge til utvidelser og funksjoner utover det man selv legger til i sitt tema.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
2 Legge til navigasjonsmeny
I dette eksempelet legger jeg til «WP_Bootstrap_Navwalker();»-klassen når jeg legger til menyen i header.php. Dette gjør at wordpress-navigasjonen enklere blir kompatibel med Bootstrap uten mye ekstraarbeid, arbeidet er allerede ferdiggjort, og det eneste man behøver å gjøre er å kalle funksjonen «WP_Bootstrap_Navwalker();»
I tillegg må ‘theme_location’ korrespondere med navnet man ga menyen i ‘functions.php’, hvor den i dette tilfellet heter ‘mitt_tema_menu’.
<!-- Koden nedenfor <body <?php body_class(); ?> -->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
<a class="navbar-brand pt-0 waves-effect" href="<?php echo esc_url( home_url() ); ?>">
<?php echo get_bloginfo('name'); ?>
<?php if ( function_exists( 'the_custom_logo' ) ) { the_custom_logo(); } ?>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
$args = [
'theme_location' => 'mitt_tema_menu',
'menu' => 'mitt-tema-menu',
'depth' => 2,
'container' => 'div',
'menu_class' => 'nav navbar-nav ml-auto',
'add_li_class' => "nav-item mx-4",
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
];
wp_nav_menu( $args );
?>
</div>
</nav>
</header>
1 Legge til wp_footer() – funksjonen i footer.php
Det er viktig å legge til wp_footer()-funksjonen i footer.php for å få tilgang på admin-dashbordet i wordpress. I tillegg lastes inn alle scriptene som ble registrert i functions.php.
<footer>
</footer>
<?php wp_footer(); ?>
</body>
</html>
I neste innlegg kan du finne ut mer om hvordan man lager en mal for innlegg og arkiv.
