KategorieWordPress

Erstellung meines child-Themes auf Basis von Theme Twentytwelve

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.

Hamilton Theme Einstellungen

infinite scroll

wer wie ich kein geeignetes plugin findet, um den infinite scroll zu aktivieren, der kann, wie ich, in den WordPress Einstellungen unter Lesen den Wert für Blogseiten zeigen maximal erhöhen, zB auf 999.

one column mobile view

(https://wordpress.org/support/topic/one-column-mobile-view/)

„You should be able to get it working by adding the following CSS to Admin → Appearance → Customizer → Additional CSS (Admin → Utseende → Anpassa → Extra CSS, om du kör svenska):“

@media ( max-width: 620px ) {  .post-preview { width: 100%; } }

Featured image nicht im Beitrag wiederholen

(https://wordpress.org/support/topic/featured-image-inside-post-2/)

„Go to Appearance → Customize → Additional CSS (the menu labels might be different in your language) and enter the following code:“

.single-post .featured-image { display: none; }

Zeilenumbruch in < pre > formatiertem Text

Absätze, die mit < pre > formatiert sind, werden vom Browser nicht umgebrochen. Dies kann man mittels CSS ändern:
Für browser wie den Safari fügt man    word-wrap: break-word;    hinzu.
Leider reicht dies für den Firefox nicht aus, für ihn muss man noch    white-space:normal;    hinzufügen.
Das CSS kann dann zB so aussehen:

.wp-block-preformatted{
word-wrap: break-word;
white-space:normal;
}

Plugins

https://de.wordpress.org/plugins/antispam-bee/

"Verabschiede dich von Kommentar-Spam auf deiner WordPress-Seite oder deinem Blog. Antispam Bee erkennt Spam-Kommenater oder -Trackbacks effektiv, ohne dabei auf Captchas zurückzugreifen oder persönliche Daten an Dritte zu versenden. Antispam Bee ist kostenfrei nutzbar, werbefrei und 100% DSGVO-konform."

https://de.wordpress.org/plugins/statify/

"Statify bietet einen einfachen und kompaktenÜberblick über die Anzahl der Aufrufe deiner WordPress-Seite. Es ist datenschutzfreundlich, da es weder Cookies gesetzt noch Daten an Dritte weitergegeben werden. Zusätzlich zu einem interaktiven Diagramm folgen Listen der gängigsten Referenzquellen und Zielseiten. Der Zeitraum der Statistiken und die Länge der Listen können direkt im Dashboard-Widget eingestellt werden."

https://geek.hellyer.kiwi/plugins/disable-emojis/

"This plugin disables the new WordPress emoji functionality. GDPR friendly."

https://de.wordpress.org/plugins/limit-login-attempts-reloaded/

"Limit Login Attempts Reloaded unterbindet weitere Anmeldungen nach einer vorgegebenen Anzahl erfolgloser Versuche. Das macht Brute-Force-Angriffe schwierig bis unmöglich."

https://de.wordpress.org/plugins/eu-cookie-law-compliance/

"Relevant and universal banner informs visitors about the acceptance of cookies."

https://wordpress.org/plugins/wp-donottrack/

"WP DoNotTrack stops plugins and themes from adding 3rd party tracking code and cookies to your blog to protect ... your visitor’s privacy..."

MEOW APPS

https://meowapps.com/plugin/wplr-sync/
https://meowapps.com/plugin/meow-gallery/
https://meowapps.com/plugin/meow-lightbox/

https://de.wordpress.org/plugins/all-in-one-wp-migration/

"Dieses Plugin exportiert deine WordPress-Website einschließlich der Datenbank, Medien-Dateien, Plugins und Themes ohne erforderliche technische Kenntnisse."

Ich nutze das Plugin, um Sicherungen meiner WordPress-Installation vorzunehmen, spare dabei allerdings die Medien (zB Bilder) aus. Den Ordner 'Uploads' sichere ich extra per FTP.

postie Plugin: Beispiel Einstellungen

email Subject: [Kategiorie Namen, den es schon gibt]

status: [draft | publish | pending | private | future]
zB status: draft

tags: <tag1>[, <tag2>][, <tagN>]
zB tags: CSS, Firefox, Safari

delay: [0-99d][0-99h][0-99m]
zB delay: 1d2h4m
This will delay 1 day, 2 hours and 4 minutes

Zwischen den Einstellungen und dem eigentlichen Text muss eine Leerzeile sein. Und die email sollte plain text sein.

Footer für jeden Beitrag

Ich wollte gern am Ende von jedem Artikel einen Hinweistext. Ein Plugin dafür habe ich nicht gefunden, aber eine Internetseite mit einem guten Vorschlag.

Dazu öffnet man die functions.php in einem Editor und fügt Folgendes ein:

function mf_insertText($content) {
   if(is_single()) {
      $content.= '&amp;lt;div style="border-top:1px dotted #000; text-align:center; margin-top: 50px; padding:10px;"&amp;gt;';
      $content.= 'Übrigens: Falls ich Hyperlinks angegeben habe, so sind diese deaktiviert. Zum Zeitpunkt der Erstellung des Beitrags war dort alles ok, das kann sich aber jederzeit ändern. Daher müssen die Adressen kopiert und auf eigenes Risiko geöffnet werden.';
      $content.= '&amp;lt;/div&amp;gt;';
   }
   return $content;
}
add_filter ('the_content', 'mf_insertText');

In Zeile 3 wird per CSS das Aussehen des ‚Footers‘ bestimmt. Zeile 4 enthält den Inhalt, also den Text des Footers. Mit ein bisschen Kenntnis von CSS und HTML lässt dieser Block beliebig verändern bzw. erweitern.

Die Originalversion findet man unter https://www.guru-20.info/post-signatur-ende-wordpress-beitrag-text-einfuegen/

Am Besten macht man das übrigens in einem child theme.

Beispieltext – englisch

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts – it is an almost unorthographic life.

One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way.

On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word „and“ and the Little Blind Text should turn around and return to its own, safe country.

But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.

And if she hasn’t been rewritten, then they are still using her.

An excerpt of  http://fotowiki.beuermann.de/index.php?title=Blindtexte#Weit_hinter_den_Wortbergen

Beispieltext – deutsch

„Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort „und“ und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.“

Ein Auszug aus http://fotowiki.beuermann.de/index.php?title=Blindtexte#Weit_hinter_den_Wortbergen

Ein Child Theme für das Theme Yoko

Ich habe mich für das Theme Yoko entschieden, weil es bei Elmastudio kostenfrei zum download bereit steht, und habe es dazu noch an meine Bedürfnisse angepasst.

Als erstes legt man ein child theme an:

Ich habe mich dabei an die Anleitung von Elmastudio gehalten:  https://www.elmastudio.de/ein-wordpress-child-theme-anlegen-so-gehts-richtig/

  • Unterordner anlegen
  • Datei style.css anlegen und Inhalt anpassen:
/*
Theme Name: Yoko Child
Theme URI: https://www.elmastudio.de/wordpress-themes/yoko/
Description: Child Theme for the Yoko theme
Author: Michael Fl&uuml;gge
Author URI: http://www.fluegge.net
Template: yoko
Version: 0.8
*/

Laden des Original-CSS per functions.php:

<?php
/**
 * Theme Name child theme functions and definitions
 */

/*—————————————————————————————————————————*/
/* Include the parent theme style.css
/*—————————————————————————————————————————*/

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
  • Bei Elschy habe ich zum Beispiel das CSS gefunden, das die linkere sidebar ausblendet.
  • Dann habe ich noch den footer-Bereich, wie von Morvagor beschrieben, um 3 Spalten erweitert. (Leider ist die Seite nicht mehr online, so dass ich nicht prüfen kann, ob ich alles richtig gemacht habe …)
    Dazu habe ich die functions.php und die footer.php im child theme Ordner erstellt bzw erweitert.

Meine Anpassungen am css:

/*
Theme Name: Yoko Child
Theme URI: http://www.fluegge.net
Description: Child Theme for the Yoko theme
Author: Michael Flügge
Author URI: http://www.fluegge.net
Template: yoko
Version: 0.8
*/

@import url("../yoko/style.css");

body {
background-color: #efefef;
}

#page {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

#content .post {
background-color: #efefef;
padding: 10px 15px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

/* monospace verkleinern von 1.2em auf 1em,
damit die codeschnipsel besser auf die Seitenbreite passen
---------------------------------------------------------- */
#content pre {
background-color: #f0f0f0;
font-family: monospace;
font-size: 1em;
line-height: 1.3;
margin: 0 0 20px;
padding: 10px;
}

/* Struktur - blendet die linkere sidebar aus a la Elschys
--------------------------------------------- */
#main {
width: 75%;
float: left;
overflow: hidden;
}

#content {
width: 94%;
float: left;
text-align: justify;
margin-right: 4%;
}

#secondary {
width: 0;
margin-left: 0;
float: left;
}

#tertiary {
width: 21%;
float: right;
padding: 5px 5px 15px;
/* background-color: #DEB887; */
}

/*CSS fuer 3spaltiges footer Layout von Morvagor
--------------------------------------------- */
#colophon {
width: 100%;
padding: 0!important;
}

#colophon #supplementary {
font-size: 1.3em;
padding: 0 0 60px;
}

#supplementary {
padding: 15px!important;
}

#supplementary #first.widget-area {
float: left;
margin-right: 1%;
width: 29.55%;
padding: 15px 15px 0;
background: darkgrey;
}

/* F0F0F0 */
#supplementary #second.widget-area {
float: left;
margin-right: 1%;
width: 29.55%;
padding: 15px 15px 0;
background: darkgrey;
}

#supplementary #third.widget-area {
float: left;
margin-right: 0;
width: 29.55%;
padding: 15px 15px 0;
background: darkgrey;
}

/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 620px) {
#supplementary #first.widget-area, #supplementary #second.widget-area, #supplementary #third.widget-area {
float: none;
margin-right: 0;
width: 100%;
}
}

Die Erweiterungen in der functions.php:

<?php
if ( function_exists ('register_sidebar')) {

    register_sidebar( array (
        'name' => __( 'Footerbar 1', 'yoko' ),
        'id' => 'sidebar-3',
        'description' => __( '1st Footer Sidebar', 'yoko' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array (
        'name' => __( 'Footerbar 2', 'yoko' ),
        'id' => 'sidebar-4',
        'description' => __( '2nd Footer Sidebar', 'yoko' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array (
        'name' => __( 'Footerbar 3', 'yoko' ),
        'id' => 'sidebar-5',
        'description' => __( '3rd Footer Sidebar', 'yoko' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );
}
?>

Die Änderungen in der footer.php

<div id="supplementary">
<div id="first">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 1') ) : ?>
<p>First</p>
<?php endif; ?>
</div>
<div id="second">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 2') ) : ?>
<p>Second</p>
<?php endif; ?>
</div>
  <div id="third">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 3') ) : ?>
<p>Third</p>
<?php endif; ?>
</div>
</div>

© 2020 Oh nein!

Theme von Anders NorénNach oben ↑