WordPress Twenty Fifteen Theme – Make it your own!

Es ist geschafft! Cash-im-web.com ist aktualisiert. Neues Theme, zum Teil neue Plugins und so weiter. Es waren wieder sehr viele Anpassungen vorzunehmen und ging doch schneller als gedacht. Was ich genau gemacht habe werde ich Ihnen zum Teil auf dieser Seite erklären. Angefangen vom eigenem Child-Theme (Was das genau ist erkläre ich weiter unten!). Einfügen nicht vorhandener Funktionen z.B. ein Top Header Menü oder Widgets im Footer. Ganz zum Schluss verrate ich Ihnen wie Sie ohne Plugin und ohne großen Aufwand die sogenannte „Back to Top“, also zurück nach oben, Funktion in Ihren Blog oder Ihre Webseite einfügen können.

WordPress Twenty Fifteen Theme anpassen – Übersicht

1. Child-Theme erstellen.
2. Top Header Menü einfügen.
3. Footer anpassen und 3 Widget Bereiche einfügen.
4. Plugin WordPress Related Posts anpassen. Facebook Button einfügen.
4.1 Tabelle einfügen.
4.2 Inhalte definieren
4.3 Überflüssige Tags enfernen.
5. „Back to Top“ Funktion umsetzen ohne Plugin und weitere Tipps.
5.1 Namen definieren.
5.2 „Back to top“ Link einfügen.

1. Eigenes Child Theme erstellen

Erst einmal vorab. Ein Child-Theme nutz ein Parent-Theme. Child ist englisch für Kind und Parent sind sinngemäß die Eltern. In meinem Fall ist das Twenty-Fifteen Theme das Parent-Theme. Und damit Sie dieses Theme immer aktualisieren kann, ohne dass man jedes Mal alle Anpassungen am Theme wieder neu vornehmen muss, brauchen Sie ein Child-Theme. Wie Sie ein Child-Theme für das WordPress Twenty Sixteen Theme erstellen erkläre ich Ihnen hier. Auf tipsandtricks-hq.com habe ich mein perfektes Child-Theme gefunden. Dort ist die Sidebar bereits recht wo ich Sie am liebsten habe. Das Theme enthält nur 5 Dateien, style.css, single.php, funktions.php content.php und screenshot.jpg. Ich habe noch die header.php und die footer.php mit hinzugefügt. Und dann konnte es losgehen. Den Link zum Child-Theme finden Sie am Ende des Artikels.

2. Top Header Menü in WordPress Twenty-Fifteen Theme einfügen

Das WordPress Twenty Fifteen Theme hat kein Menü mehr im Header. Schade aber hierfür habe ich auf findurlaptop.com die passenden Quellcodes gefunden. Link unten in der Auflistung. Mit diesem Quellcode fügen Sie eine neue Funktion in Ihr Theme ein. So brauchen Sie nur in Ihrem WordPress Dashboard, unter Design → Menüs, ein neues Menü erstellen und dieses dann im Theme dem Top Header Menü zuweisen. Schnell und einfach zu integrieren. Und ein weiteres nettes Feature an diesem Code ist das das Menü mitscrollt.

3. Footer anpassen und 3 Widget Bereiche einfügen

Der Footer im WordPress Twenty-Fifteen Theme ist sehr schlicht gehalten wie immer. Als erstes wollte ich die Zeile „Proudly powered by WordPress“ entfernen und nach meinen Wünschen dort Text und Links einfügen. In der footer.php finden Sie folgenden Code.

                <footer id=“colophon“ class=“site-footer“ role=“contentinfo“>
<div class=“site-info“>
<?php
/**
* Fires before the Twenty Fifteen footer text for footer customization.
*
* @since Twenty Fifteen 1.0
*/
do_action( ‚twentyfifteen_credits‘ );
?>
<a href=“<?php echo esc_url( __( ‚https://wordpress.org/‘, ‚twentyfifteen‘ ) ); ?>“><?php printf( __( ‚Proudly powered by %s‘, ‚twentyfifteen‘ ), ‚WordPress‘ ); ?></a>
</div><!– .site-info –>
</footer><!– .site-footer –>

Rot markiert ist die Zeile die Weg musste. An dieser Stelle habe ich ein paar Links eingefügt (Impressum, Kontakt und Newsletter) und den Copyright Hinweis. Ach ja und die „Back to Top“ Funktion aber dazu weiter unten mehr. Hier ein Beispielcode um 2 Zeilen an dieser Stelle anzuzeigen und sie nach rechts auszurichten.

                <footer id=“colophon“ class=“site-footer“ role=“contentinfo“>
<div class=“site-info“>
<?php
/**
* Fires before the Twenty Fifteen footer text for footer customization.
*
* @since Twenty Fifteen 1.0
*/
do_action( ‚twentyfifteen_credits‘ );
?>
<p style=“text-align: right;“>Text Zeile 1</p>
<p style=“text-align: right;“>Text Zeile 2</p>
</div><!– .site-info –>
</footer><!– .site-footer –>

In dem rot markierten Bereich können Sie Ihren Text oder Ihre Links einfügen. Wenn Sie die Links lieber auf der linken Seite wollen einfach in dem öffnenden <p style=“text-align: right;“> Tag den Parameter right auf left ändern. Durch center wird der Inhalt Zentriert in der Mitte der Seite angezeigt.

Jetzt wurde es einfach und kompliziert zugleich. Die Fußleiste im WordPress Twenty Fifteen Theme ist nicht nur schlicht sondern auch zu schmal und es gibt keine Möglichkeit Widgets einzufügen. Das Problem mit den Widgets konnte ich wieder dank tipsandtricks-hq.com schnell lösen. Dort fand ich den Quellcode um 3 Widget Bereiche im Footer zu integrieren (Link unten in der Auflistung). Zwei passen auch  im Original Footer nebeneinander. Für drei mussten weitere Anpassungen vorgenommen werden. Daran wäre ich fast verzweifelt. Nichts Passendes für das Twenty Fifteen Theme zu finden. Und alles was ich probiert habe hat nicht geklappt. Aufgeben kam aber nicht in Frage. Und zahlreichen Versuchen habe ich die richtige Stelle im Quellcode gefunden. In der style.css, des erwähnten Child-Themes, nach folgender Zeile suchen.

.site-footer {
float: left;
margin: 0 0 0 6%;
padding: 0;
width: 58.8235%;
}

An dieser Stelle wird die breite des Footers festgelegt (rot markiert). Einfach durch diesen Quellcode austauschen.

.site-footer {
float: left;
margin: 0 0 0 6%;
padding: 0;
width: 94%;
}

Jetzt ist der Footer genauso breit wie die Seite. Damit die Widgets sich optimal an den Footer anpassen musste ich in der style.css weitere Anpassungen vornehmen. Den Quellcode den ich auf tipsandtricks-hq.com gefunden habe für die Footer Widgets musste ich dazu ein wenig verändern.

#footer-sidebar {
display:block;
height: 250px;
}
#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}
#footer-sidebar2 {
float: left;
width: 340px;
margin-right:5px;
}
#footer-sidebar3 {
float: left;
width: 340px;
}

Damit der Abstand untereinander und die Aufteilung passen muss der Quellcode so aussehen.

#footer-sidebar {
display:block;
height: 250px;
}

#footer-sidebar1 {
float: left;
width: 410px;
margin-left:5px;
margin-right:0px;
margin-top:25px;
}

#footer-sidebar2 {
float: left;
width: 410px;
margin-right:0px;
margin-top:25px;
}

#footer-sidebar3 {
float: left;
width: 410px;
margin-top:25px;
}

Jetzt haben sie drei gleichbreite Widget Bereiche im Footer. Die Sie im Dashboard, unter Design → Widgets, mit Inhalten Ihrer Wahl füllen können. Im letzten Absatz erkläre ich Ihnen wie Sie ohne Plugin noch die „Zurück nach oben“ Funktion umsetzen. Doch erstmal zu den Plugins.

4. Plugin WordPress Related Posts anpassen. Facebook Like Button einfügen.

Mit dem WordPress Related Posts Plugin können Sie unter Ihren Artikeln Thematisch passende Artikel aus ihrem Blog anzeigen lassen. Das Plugin benutzt die Kategorien und Schlagworte um verwandte Artikel zu finden. Ich wollte eine simple Auflistung und neben jedem Artikel noch den Facebook Like Button. Das alles in eine kleine Tabelle damit es ordentlich aussieht. Hier eine Schritt für Schritt Anleitung wie sie dies umsetzen können. Achtung diese Anleitung ist für die WordPress Related Posts Plugin Version 3.6. Wenn Sie Ihre angepasste Version Updaten gehen alle Änderungen verloren. Die Änderungen können Sie direkt im Dashboard unter Plugins → Editor vornehmen. Oder am PC, mit einem Texteditor beispielsweise, die init.php  direkt bearbeiten und dann auf Ihren Server hochladen.

4.1 Tabelle einfügen

Als erstes müssen Sie die Tabelle einfügen. Dafür suchen Sie in der init.php nach folgender Zeile.

$related_posts_ul = ‚<ul class=“‚ . $css_classes . ‚“>‘ . $related_posts_lis . ‚</ul>‘;

Dort fügen Sie folgenden Quellcode ein.

$related_posts_ul = ‚<table style=“border-collapse: collapse;“ width=“100%“ border=“0″><tbody>‘ . $related_posts_lis . ‚</tbody></table>‘;

4.2 Inhalte definieren

Jetzt lassen Sie den Inhalt in einer Tabelle ausgeben und müssen nun die einzelnen Spalten der Tabelle definieren und den Inhalt festlegen. Also wo was erscheinen soll und wie es dargestellt wird. Dazu suchen Sie nach folgendem Quellcode.

$output .= ‚<a href=“‚ . $post_url . ‚“ class=“wp_rp_title“>‘ . wptexturize($related_post->post_title) . ‚</a>‘;

Den Sie mit folgendem Quellcode austauschen.

facebook-integrieren-screen

In der linken Spalte der Tabelle wird der Artikel definiert, also das aussehen. Und in der zweiten Spalte der Facebook Button integriert. Wer lieber Twitter oder Google+ an dieser Stelle hätte einfach den rotmarkierten Teil abändern.

4.3 Überflüssige Tags enfernen

li-entfernen
Hiernach suchen!
li-anpassen
So anpassen!

Jetzt müssen nur noch die überflüssigen Tags entfernt werden, die jetzt nicht mehr benötigt werden. Dazu einfach nach den folgenden beiden Zeilen suchen. Links in der Grafik. Und so verändern wie in der Grafik rechts. Einfach bei beiden ein Leerzeichen einfügen und fertig.

Wenn Sie alles verändert haben können Sie die Datei speichern. Im Dashboard unter Einstellungen → WordPress Related Posts noch bei dem Layout Einstellungen auf Plain (your own css) stellen und fertig. Nun sollte neben dem empfohlenen Artikel auch der passende Facebook Like Button sein. Viel Spaß mit dem Plugin.

5. „Back to top“ Funktion umsetzen ohne Plugin und weitere Tipps

In den letzten Jahren immer beliebter geworden ist die „Back to top“ Funktion. In Deutsch zurück nach oben. Das heißt Ihr Leser muss nicht ewig scrollen um auf einer langen Seite, mit viel Text wieder nach oben zu kommen. Ein Klick und Sie sind wieder ganz oben auf der Seite. Dazu benötigen Sie kein Plugin! Sie müssen nur zwei Dinge tun. Einem Wort, Bild oder Link möglichst weit oben auf der Seite einen Namen geben. Und Sie müssen den „Back to top“ Link einfügen, möglichst weit unten. Wichtig, beide Dinge sollten auf jeder Seite oder in jedem Artikel zu sehen! In meinem Beispiel nehme ich die Änderungen in der header.php und in der footer.php meines Child-Themes vor.

5.1 Namen definieren

Suchen Sie in der header.php nach folgendem Code.

if ( is_front_page() && is_home() ) : ?>
<h1 class=“site-title“><a href=“<?php echo esc_url( home_url( ‚/‘ ) ); ?>“ rel=“home“><?php bloginfo( ’name‘ ); ?></a></h1>

An dieser Stelle wird Ihr Blogtitel definiert und im Twenty Fifteen Theme ist als erstes oben in der Sidebar. Also perfekte Position. Dort geben Sie dem Link einfach einen Namen. Mit folgendem Code austauschen.

if ( is_front_page() && is_home() ) : ?>
<h1 class=“site-title“><a name=“top“ href=“<?php echo esc_url( home_url( ‚/‘ ) ); ?>“ rel=“home“><?php bloginfo( ’name‘ ); ?></a></h1>

Rot hervorgehoben was ich ergänzt habe. Das ist im Prinzip nichts weiter wie eine Textmarkierung, welche man überall in der Seite einfügen kann.

5.2 „Back to top“ Link einfügen

Jetzt brauchen Sie nur noch einen Link einfügen der auf diese Stelle verweist. Dazu nochmal die schon am Anfang geänderte footer.php öffnen. Einfach über die beiden Zeilen, aus dem Beispiel oben, noch eine dritte hinzufügen.

                <footer id=“colophon“ class=“site-footer“ role=“contentinfo“>
<div class=“site-info“>
<?php
/**
* Fires before the Twenty Fifteen footer text for footer customization.
*
* @since Twenty Fifteen 1.0
*/
do_action( ‚twentyfifteen_credits‘ );
?>
<p style=“text-align: right;“><a href=“#top“>Zurück nach oben</a></p>
<p style=“text-align: right;“>Text Zeile 1</p>
<p style=“text-align: right;“>Text Zeile 2</p>
</div><!– .site-info –>
</footer><!– .site-footer –>

Mit diesem kleinen Trick können Sie auch innerhalb von Artikeln Textmarkierungen setzten um von anderen Unterseiten direkt zu gewissen Textstellen springen zu können. Zum Schluss noch zwei kleine Quellcodes durch die Sie die Kategorien und die Schlagworte unter den Artikeln einfach ausblenden lassen können. Dafür einfach ihre style.css um folgenden zwei Zeilen erweitern.

.tags-links {display:none;}
.cat-links {display:none;}

WordPress Twenty Fifteen Theme anpassen Zusammenfassung

Wie Sie sehen kann man mit ein wenig Übung viele Anpassungen am WordPress Twenty Fifteen Theme selber vornehmen. Ich hoffe ich kann Ihnen mit dieser Seite ein wenig Inspiration liefern. Wenn Interesse besteht an dem Child Theme mit allen hier erwähnten Änderungen einfach einen Kommentar hinterlassen mit (Ich will das Twenty Fifteen Child-Theme!) und ich sende es Ihnen zu.  Die Kommentar Funktion auf dieser Seite ist aktiviert. Zum Schluss noch die Links zu den Tutorials die mir sehr geholfen haben bei der Umsetzung. Und ein paar interessante Artikel aus dem Blog, die Sie vielleicht interessieren könnten, finden Sie unten auch. Viel Erfolg bei Ihren Anpassungen am WordPress Twenty Fifteen Theme.

Links zu erwähnten Artikeln

  1. Link zum Artikel mit dem erwähnten Child-Theme → https://www.tipsandtricks-hq.com/wordpress-twenty-fifteen-2015-child-theme-with-right-sidebar-7732
  2. Link zum Artikel um Top Header Menü einzufügen → http://www.findurlaptop.com/tech/2015/01/14/top-header-menu-in-twenty-fifteen-wordpress-theme/
  3. Link zum Artikel um Widget Bereiche in den Footer zu integrieren → https://www.tipsandtricks-hq.com/how-to-add-widgets-to-wordpress-themes-footer-1033

Wenn Sie weitere Informationen über WordPress suchen finden sie im Blog unter selbigem Schlagwort weitere interessante Artikel. Aber auch in der Kategorie Geld verdienen und sparen im Internet sind zahlreiche Artikel zu finden.

Kommentarregeln → Kein Spam! Keine Links im Kommentar! Keine Urls als Name benutzen! Vorname oder Nickname reichen aus und sind Pflicht damit Ihr Kommentar freigeschaltet wird. Eine Email Adresse müssen Sie nicht eintragen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.