KategorieChild Theme

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;
}

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.

TwentyTwelve: Größe des header-Bildes ändern

Wenn man mit der Größe des header-Bildes im WordPress-Theme Twentytwelve nicht zufrieden ist, so kann man die Maße ändern.

Das folgende snippet habe ich im Internet gefunden.
(https://wordpress.org/support/topic/twenty-twelve-child-theme-change-header-height/)

<?php
function twentytwelvechild_custom_header_setup() {
$header_args = array( 'height' => 350, 'width' => 960 );
add_theme_support( 'custom-header', $header_args );
}
add_action( 'after_setup_theme', 'twentytwelvechild_custom_header_setup' );
?>

Man fügt es in die functions.php im child-Theme Ordner ein.
Ich habe hier als Beispiel die Höhe des Bildes von 250px auf 350px geändert.

Tiled Galleries Carousel Without Jetpack – Breite der Galerie ändern

wenn man’s weiß, ist es ganz einfach:

Man muss die Variable $content_width in der functions.php anpassen, zB so:

if ( ! isset( $content_width ) )
    	$content_width = 1034;

Der Wert für $content_width richtet sich nach dem jeweiligen WordPress-Theme.

Am Besten macht man solche Änderungen übrigens in einem Child Theme.

© 2020 Oh nein!

Theme von Anders NorénNach oben ↑