Themes gibt es wie Sand am Meer, man muss nur danach suchen :-). Wenn einem die Auswahl nicht reicht, dann kann man von dem Theme, das einem halbwegs gut gefällt, ein Child Theme erstellen. Eine gute Anleitung dafür gibt es bei Elmastudio.
Welches Theme als Basis?
Ich habe mich für das Theme Twentytwelve entschieden. Um es meinen Vorstellungen anzupassen, habe ich ein existierendes child Theme von Pabstwp als Basis genommen, die für mich interessanten Teile herausgenommen und als Basis für mein eigenes child Theme genommen.
Von Pabstwp habe ich im wesentlichen das zweite Menü oberhalb des header-Bildes sowie den footer Bereich übernommen.
Eigene Erweiterungen
Zunächst habe ich das obere Menu so angeordnet, dass es oben mit der Überschrift auf einer Höhe ist.
.extra-navigation {
margin-bottom: -3em; /* 1em*/
text-align: center;
}
.extra-navigation li {
margin-top: 24px;
margin-top: 0.8rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.extra-navigation a {
color: #6a6a6a;
}
.extra-navigation a:hover {
color: #000;
}
.extra-navigation li a,
.extra-navigation li {
display: inline-block;
text-decoration: none;
padding: 0 0.3em;
}
.extra-navigation li ul {
display: none;
}
Dann habe ich ober- und unterhalb des header-Bildes einen grauen Strich als optische Trennung eingefügt:
.chi_display_header {
padding-top: 1.25rem;
margin-top: 1.25rem;
border-top:1px solid #ddd;
}
für oben und
.wrapper{
border-top:1px solid #ddd;
}
für den unteren Strich.
(Anmerkung: das chi_display_header kommt aus einem Plugin, das die header-Bilder anzeigt, die ich verwende)
Dann habe ich die einzelnen Teile der Seite mit folgendem CSS neu positioniert und Rahmen entfernt.
.site-header{
padding-bottom: 0rem;
}
.main-navigation {
margin-top: 0rem;
margin-bottom: 1rem;
border-bottom: none;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
margin-top: 0rem;
border-bottom: 0px;
border-top: 0px;
display: inline-block !important;
text-align: left;
width: 100%;
}
Mit folgendem CSS habe ich das Verhältnis von Inhalt und Seitenleiste rechts angepasst:
.site-content {
width: 62%;
}
#secondary {
width: 19rem;
}
Schliesslich habe ich noch jeden Beitrag mit einem Rand unten
.site-content article {
border-bottom: 1px solid #ddd;
}
die Textanordnung auf Blocksatz
.entry-content {
text-align: justify;
}
und die Seitenleiste geändert:
.widget-area .widget {
border-bottom: 1px solid #ddd;
padding-bottom: 1.71429rem;
margin-bottom: 1.42857rem;
}
Jetzt muss ich nur noch testen, ob das, was ich hier geschrieben habe, auch stimmt 😉
Außerdem muss ich noch ausprobieren, ob man nicht einzelne Zeilen der CSS-Teile weglassen kann, ohne die Optik zu ändern.
Aber eins nach dem anderen.
Eigene Übersetzung von „Veröffentlicht am“
Dazu habe ich in der functions.php des child themes Folgendes ins Deutsche transferiert:
function twentytwelve_entry_meta() {
...
// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author's name.
if ( $tag_list ) {
$utility_text = __( 'Dieser Beitrag wurde veröffentlicht in %1$s und verschlagwortet mit %2$s am %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
} elseif ( $categories_list ) {
$utility_text = __( 'Dieser Beitrag wurde veröffentlicht in %1$s am %3$s<span class="by-author"> von %4$s</span>.', 'twentytwelve' );
} else {
$utility_text = __( 'Dieser Beitrag wurde veröffentlicht %3$s<span class="by-author"> von %4$s</span>.', 'twentytwelve' );
}
printf(
$utility_text,
$categories_list,
$tag_list,
$date,
$author
);
}
Den Text kann man natürlich beliebig anpassen, und ich denke, das werde ich bei Gelegenheit auch noch ‚mal machen. Erstmal bin ich froh, dass ich gefunden habe, wo man’s überhaupt einstellt.
TwentyTwelve Child Theme – Reply-button ans Ende des posts
dazu habe ich in der content.php den Teil
<?php if ( comments_open() ) : ?>
<div class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
</div><!-- .comments-link -->
<?php endif; // comments_open() ?>
von oben ganz nach unten verschoben, so dass er oberhalb der Zeile
</article><!-- #post -->
steht
Beitrags-Überschrift
da ich die Beitrags-Überschrift über dem Beitrags-Bild haben wollte, habe ich in der content.php den Abschnitt
<h1> ... </h1>
direkt unter das
<header class="entry-header">
verschoben
Kommentar-Funktion
Die Kommentar-Funktion „Hinterlassen Sie eine Antwort“ wollte ich gern unter den Beitrags-Text haben, daher habe ich
<?php if ( comments_open() ) : ?>
<div class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
</div><!-- .comments-link -->
<?php endif; // comments_open() ?>
von seiner ursprünglichen Position weiter nach unten unter
<footer class="entry-meta">
verschoben. Dann habe ich noch ein </br> darunter gefügt, damit der Abstand zum folgenden Satz etwas größer wird.
Verschieben des Menüs unter das header-Bild
Dazu habe ich das
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php ohneinwp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
von seiner Position oberhalb des
<?php if ( get_header_image() ) : ?>
...
<?php endif; ?>
einfach darunter verschoben.
