Grundlæggende elementer til eget wordpress tema, hvor bootstrap og nav-walker anvendes. Inspirationskilde https://youtu.be/pFMgAWkrk8o
Filerne placeres i mappen: wp-content/themes/TEMA, som installationen af WP opretter.
Følgende grundlæggende filer skal oprettes:
Samt mapperne:
<?php
/*SCRIPTS*/
function load_stylesheets()
{
// Bootstrap skal indlæses før eget style.
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), false, 'all');
wp_enqueue_style('bootstrap');
// Personligt style
wp_register_style('style', get_template_directory_uri() . '/style.css', array(), false, 'all');
wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts' , 'load_stylesheets');
// Hentet jquery
function include_jquery()
{
wp_deregister_script('jquery');
wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', '', 1, true);
}
add_action('wp_enqueue_scripts' , 'include_jquery');
//JavaScript
function wp_register_js()
{
wp_enqueue_script( 'popper-script', get_template_directory_uri() . '/js/popper.min.js', array(), '', true );
wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'wp_register_js' );
// Personligt js
function load_js()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', 1, true);
wp_enqueue_script('customjs');
}
add_action('wp_enqueue_scripts' , 'load_js');
SAMT ALLE DE ANDRE FUNKTIONER
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head();?>
</head>
<body <?php body_class();?>>
<header class="sticky-top">
</nav>INDSÆTTELSE AF MENU</nav>
</header>
<footer class="bg-light">
<p class="text-center">
© MLund
</p>
</footer>
<?php wp_footer();?>
<!--Bemærk body først slutter her-->
</body>
</html>
<?php get_header();?>
<div class="container">
<!-- Henter titel på side fra WordPress-->
<h1><?php the_title();?></h1>
<!-- Indlæs hvad der er skrevet i WordPress-->
<?php if (have_posts()) : while(have_posts()) : the_post();?>
<?php the_content();?>
<?php endwhile; endif;?>
</div>
<?php get_footer();?>
<?php get_header();?>
<div class="container">
<!-- Henter titel på side fra WordPress-->
<h1><?php the_title();?></h1>
<!-- Henter det udvalgte billede til indlæg-->
<?php if(has_post_thumbnail()):?>
<img src="<?php the_post_thumbnail_url('thumb-standard');?>" class="img-fluid">
<?php endif;?>
<!-- Indlæs hvad der er skrevet i WordPress-->
<?php if (have_posts()) : while(have_posts()) : the_post();?>
<?php the_content();?>
<?php endwhile; endif;?>
</div>
<?php get_footer();?>
<!--Anvendes til indæg-->
<?php get_header();?>
<div class="container">
<!-- Henter kategorien på indlæget fra WordPress-->
<h1><?php single_cat_title();?></h1>
<!-- Indlæser udsnit af indlæg der er skrevet i WordPress under -->
<?php if (have_posts()) : while(have_posts()) : the_post();?>
<!--Laver card omkring hvert indlæg, samt lidt mellemrum-->
<div class="card mb-2">
<div class="card-body">
<!-- Henter det udvalgte billede til indlæg-->
<?php if(has_post_thumbnail()):?>
<img src="<?php the_post_thumbnail_url('thumb-small');?>" class="img-fluid">
<?php endif;?>
<!-- Henter titel på indlæg-->
<h3><?php the_title();?></h3>
<?php the_excerpt();?>
<!-- Linker til hele indlæget, som vælges-->
<a href="<?php the_permalink();?>" class="btn btn-light">Læs videre</a>
</div>
</div>
<?php endwhile; endif;?>
</div>
<?php get_footer();?>
/*
Theme Name: MLund Tema
Author : Maria Lund Pedersen
*/
CSS KODE TIL STYLES AF ELEMENTER