Schlichtes Wordpress-Template mit drei Spalten

emanuel

Administrator
Team
Registriert
25 Juli 2021
Beiträge
212
Für meinen kleinen, nur selten genutzten Wordpress-Blog habe ich mir ein kleines Template erstellt, das die wichtigsten Bedürfnisse abdeckt: Responsive, 1 Hauptspalte und 2 Seitenleisten, Kommentare und ein schnell ladendes Template bzw. Design.

wordpress_mulischaf.png

Live kann man es hier sehen: Mulischaf.com
Wichtig ist, dass das Stylesheet noch einige Optimierung bedarf, damit ist aber eher die Reihung und Vereinfachung gemeint. Sollte es aber jemand nutzen möchte, dann steht hier der Code zur Verfügung. Sollte es zu Aktualisierungen kommen, dann nehme ich die direkt im jeweiligen Eintrag mit einem Hinweis vor.
 
Zuletzt bearbeitet:

emanuel

Administrator
Team
Registriert
25 Juli 2021
Beiträge
212

index.php​

PHP:
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_date('','<strong>','</strong>'); ?> - <?php echo get_comments_number($post->ID); ?> Kommentare
<p><?php echo get_post_img() ; ?></p>
<?php the_excerpt(); ?>
<p><a href="<?php the_permalink(); ?>">Weiterlesen</a></p>
<hr>
<?php endwhile; else : _e( 'Keine Texte vorhanden!', 'textdomain' ); endif; ?>
<?php previous_posts_link( 'Neuere Einträge' ); ?>
<?php next_posts_link( 'Ältere Einträge' ); ?>
<hr>
<a href="#top">Nach oben</a>
<?php get_footer(); ?>
 

emanuel

Administrator
Team
Registriert
25 Juli 2021
Beiträge
212

header.php​

PHP:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title><?php if(is_front_page() || is_home()){ echo get_bloginfo('name'); } else { echo wp_title('') . " / " . get_bloginfo('name'); }?>
</title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?ver=20">
<?php if ( is_single() ) { ?>
<link href="<?php echo get_template_directory_uri().'/styles/gruvbox-dark.css'; ?>" rel="stylesheet" type="text/css" media="all">
<?php } ?>
</head>
<body>
<header>
<h1><a href="/">Mulischaf</a></h1>
</header>
<nav>
<div class="myself"></div>
<?php if ( is_active_sidebar( 'sidebar_left' ) ) : ?>
<?php dynamic_sidebar( 'sidebar_left' ); ?>
<?php endif; ?>
</nav>
<main>
 

emanuel

Administrator
Team
Registriert
25 Juli 2021
Beiträge
212

footer.php​

PHP:
</main>
<aside id="news">
<?php if ( is_active_sidebar( 'sidebar_right' ) ) : ?>
<div>
<?php dynamic_sidebar( 'sidebar_right' ); ?>
</div>
<?php endif; ?>
</aside>
<footer>Mulischaf Template</footer>
<script src="<?php echo get_template_directory_uri() . '/highlight.pack.js'; ?>"></script>
<script>hljs.configure({useBR: false});hljs.initHighlightingOnLoad();</script>
</body>
</html>
 

emanuel

Administrator
Team
Registriert
25 Juli 2021
Beiträge
212

single.php​

PHP:
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_date('','<strong>','</strong>'); ?></p>
<?php the_content(); ?>
<?php the_category(' '); ?> /
<?php $posttags = get_the_tags(); if ($posttags) { $output = array(); foreach($posttags as $tag) $output[] = $tag->name; echo implode(' / ', $output); } endwhile; ?>
<?php else : _e( 'Keine Texte vorhanden!', 'textdomain' ); endif; ?>
<?php comments_template(); ?>
<?php previous_post_link('%link', '&larr; %title'); ?> &middot;
<?php next_post_link('%link', '%title &rarr;'); ?>
<hr>
<a href="#top">Nach oben</a>
<?php get_footer(); ?>
 

emanuel

Administrator
Team
Registriert
25 Juli 2021
Beiträge
212

page.php​

PHP:
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php the_category(' '); ?>
<?php endwhile; else :_e( 'Keine Texte vorhanden!', 'textdomain' ); endif;?>
<hr>
<?php printf( __( 'Zuletzt bearbeitet: %s', '' ), get_the_modified_date() ); ?>
<hr>
<a href="#top">Nach oben</a>
<?php get_footer(); ?>
 

emanuel

Administrator
Team
Registriert
25 Juli 2021
Beiträge
212

category.php​

PHP:
<?php get_header(); ?>
<p><strong>Kategorie:</strong> <?php single_cat_title(''); ?></p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_date('','<strong>','</strong>'); ?> - <?php echo get_comments_number($post->ID); ?> Kommentare</p>
<?php the_excerpt(); ?>
<hr>
<?php endwhile; else : _e( 'Keine Texte vorhanden!', '' ); endif;?>
<?php previous_posts_link( 'Neuere Einträge' ); ?> &middot;
<?php next_posts_link( 'Ältere Einträge' ); ?>
<?php get_footer(); ?>
 

emanuel

Administrator
Team
Registriert
25 Juli 2021
Beiträge
212

style.css​

CSS:
/*
Theme Name: Mulischaf
Theme URI: https://mulischaf.com
Author: Emanuel Sprosec
Author URI: https://emanuel-s.com
Description: Personal WordPress template
Version: 1.0
!!! UNFERTIG UNFERTIG UNFERTIG !!!
*/

/* Variablen-Definiton */
:root {
    --background_topsidebottom: #f1f1f1;
    --background_middle: #FFFFFF;
    --font_color: #333333;
    --link_color: #9a0026;
    --link_hover_color: #084B8A;
    --border_color: #CCCCCC;
}
html {
    scroll-behavior: smooth;
}

body {
    display: grid;
    gap: 0.5em;
}


@media (min-width: 45em) {
    body {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-rows: auto 1fr 80px;
    }
}

header {
    border: 1px solid;
    padding: 1% 3%;
}


nav, aside {
    border: 1px solid;
    text-align: center;
}

main,
article,
section,
footer {
    border: 1px solid;
    padding: 2% 7%;
}

header,
footer {
    grid-column: 1 / -1;
}

header {
    background: var(--background_topsidebottom);
    border-color: var(--border_color);
    display: grid;
    box-shadow: 0 0 1em #CCC;
}

nav {
    background: var(--background_topsidebottom);
    border-color: var(--border_color);
    box-shadow: 0 0 1em #CCC;
}

main {
    background: #FFF;
    border-color: var(--border_color);
    padding-bottom: 10%;
    box-shadow: 0 0 1em #CCC;
}


aside {
    background: var(--background_topsidebottom);
    border-color: var(--border_color);
    box-shadow: 0 0 1em #CCC;
}

footer {
    background: var(--background_topsidebottom);
    border-color: var(--border_color);
    box-shadow: 0 0 1em #CCC;
}

footer * {
    float: right;
    clear: right;
    margin: 0 0 1em;
}

body {
    margin: 0 auto;
    max-width: 65em;
    color: var(--font_color);
    font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    background-color: #e0e0e0;
    word-wrap: break-word;
    background-image: linear-gradient(#e0dfde 0.05em, transparent 0.01em), linear-gradient(90deg, #edeceb 0.05em, transparent 0.01em);
  background-size: 0.2em 0.2em;
}

a {
    color: var(--link_color);
    text-decoration: none;}

a:hover {
    color: var(--link_hover_color);}

figure {
    padding: 0px;
    margin: 0px;
}

img, figure img {
    max-width: 100%;
    height: auto;
}

code {
    word-break: break-all;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 25px;
    padding: 8%;
    background: var(--background_topsidebottom);
    max-width: 95%;
}

hr {
    border: 0px;
    height: 1px;
    background-color: var(--border_color);
    margin: 5% 0;
}

nav h3, aside h3 {
    padding: 2% 7% 0% 7%;
}

nav li a, aside li a {
    display: block;
    width: 100%;
    transition: .5s ease;
}

nav li:hover, aside li:hover {
    background-color: #ededed;
    transition: .5s ease;
}

nav ul, aside ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    border-top: 1px solid #CCC;
}

nav ul li, aside ul li {
    display:block;
    padding: 2% 7%;
    color: #999;
    background-color: #f5f5f5;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #CCC;
    text-decoration: none;
}

nav ul li:last-child, aside ul li:last-child {
    border-bottom: 1px solid #CCC;
}

p.highlight::first-letter {
    color: #9a0026;
    float: left;
    font-family: Georgia, serif;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
  }

/* Comments */

label {
    display: block;
}
textarea#comment {
    width: 100%;   
}
.comment {
    background: #f1f1f1;
    border: 1px solid #CCC;
    margin: 1% 0%;
    padding: 2%;
}

.comment:nth-child(2n) {
    background-color: #fcfcfc;
}

.comment-meta {
    border-bottom: 1px solid #CCC;
    font-size: 80%;
}

ol {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.comment-author img {
    border: 1px solid #CCC;
}

.comment .says {
    display: none;
}

nav, aside {
    font-size: 80%;
}

nav img {
    transition: .5s ease;
    padding: 20px 0 0 0;
}
nav img:hover {
    opacity: 0.3;
    transition: .5s ease;
}


@media only screen and (max-width: 900px) {
        main h2 {
            font-size: 24px;
    }
    footer {
        font-size: 14px;
    }
    header {
        text-align: center;
        font-size: 80%;
        padding: 0% 3%;
    }
    nav h3 {
        display: none;
    }
}
 
Oben