Anpassung des Themas Twenty Seventeen (2017) von WordPress

Außer Blogs auf wordpress.com habe ich neuerdings auch Blogs mit eigener WordPress-Software. Dies ermöglicht unter anderem größere Freiheiten beim Gestalten der Web-Seiten. Ich bin auf diesem Gebiet kein Fachmann, sondern beschreibe nur, was ich in einem konkreten Fall gemacht habe. Dies dient mir zur Dokumentation und zum Nachschlagen, anderen vielleicht als Vorlage. Der dargestellte Code ist korrekt, da er unmittelbar aus dem Blog kopiert wurde.

Es handelt sich um den Blog reisen2018.peter-preus.de. Als Theme habe ich Twenty Seventeen gewählt, alle Angaben gelten zunächst nur für dieses Theme, andere Themes habe ich nicht ausprobiert. Alle Angaben habe ich im Web gefunden, manche Effekte kann man sicherlich auch auf andere Art erzielen.

Der vorliegende Text ist Stand 31.03.2018. Wenn ich noch weitere Erkenntnisse gewinne, werde ich sie hier einfügen.

Erster Teil: Zusätzliches CSS im Customizer

Der verwendete Code beginnt jeweils mit einem Überschriftskommentar, aus dem (hoffentlich) deutlich hervorgeht, wozu der Code dient.

/* Hintergrundfarbe für den 
Blog (dieser Hintergrund gilt 
aber nicht für die Umgebung des 
Beitragsbildes, wenn der 
Beitrag aufgerufen wird) */
.site-content-contain {
background-color: #f3f781;}

/* Blocksatz */
body {text-align: justify;}

/* Silbentrennung (nötig bei 
Blocksatz) */
body {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;}

/* Vergrößerung der genutzten 
Breite auf 1500px */
.wrap {
max-width: 1500px !important;}

/* Entfernen des Werbespruchs 
von WordPress am Ende der Seite 
*/
.site-info {display:none;}

/* Aufteilung der Satzbreite in 
Inhalt und rechte Leiste */
/*For Content*/
.has-sidebar:not(.error404)
#primary {width: 65%}
/*For Sidebar*/
.has-sidebar #secondary {
width: 25%}

/* Keine Umwandlung von kleinen 
Buchstaben in große in 
Überschriften (gilt nur für den 
Blog, nicht für die Beiträge */
h1{text-transform: none 
!important;}

/* Keine Angabe von Autor und 
Datum in Beiträgen */
.entry-meta {display: none}

/* Farben für Verweise */
/* unvisited link */
a:link {color: blue;}
/* visited link */
a:visited {color: darkblue;}
/* mouse over link */
a:hover {color: orange;}
/* selected link */
a:active {color: red;}

Die Zahlen bei den Maßangaben px und % kannst du natürlich auch anders wählen, ebenso alle color-Angaben.

Zweiter Teil: Veränderungen im HTML

Die Verbreiterung des Satzspiegels habe ich gewählt, weil ich die Bilder relativ groß darstellen möchte. Leider verwendet Twenty Seventeen meine Bilder (im Format 3:2) in der niedlichen Größe von 300×200 px. Da beim Hochladen der Bilder in die Mediathek die Bilder in verschiedenen Größen, darunter auch dem vorgefundenen Original (bei mir ist das, eher zufällig, 990×660 px), gespeichert werden, konnte ich den HTML-Code für die Bilder relativ einfach ändern.

Nachdem ich die Bilder in der gewünschten Größe im Beitrag hatte, stellte ich fest, dass sie (unnötig) unscharf waren. Dies ist aber nicht unbedingt ein Fehler von WordPress, sondern tritt nur bei einigen Browsern auf (zum Beispiel Firefox), andere brachten die Bilder scharf. Da das Aussehen meines Blogs aber nicht vom Browser abhängen soll, habe ich weiter experimentiert. Die letzte Fassung des HTML-Codes liefert in allen Browsern (große und) scharfe Bilder.

Hier der HTML-Code, der beim Einfügen eines Bildes aus der Mediathek erzeugt wird:

<img src="http://reisen2018.peter-preus.de/wp-content/uploads/2018/03/IMG_0055-300x200.jpg" 
alt="" width="300" height="200" class="alignnone size-medium wp-image-93" />

Hier der abgemagerte HTML-Code, wie er in meinem Blog verwendet wird:

<img src="http://reisen2018.peter-preus.de/wp-content/uploads/2018/03/IMG_0055.jpg" />

Noch ein Hinweis für alle, die wie ich auch das Plugin Jetpack verwenden: Jetpack verspricht unter anderem, die Ladezeiten der Blogbeiträge zu verringern, indem es die Bilder auf einem eigenen Server speichert. Dies musste ich in den Jetpack-Einstellungen ausschalten, da der Geschwindigkeits“trick“ darin bestand, dass Jetpack meine Bilder in der kleinen Größe 300×200 px speicherte. Knapp daneben ist auch vorbei.

Advertisements

Über zhongxiong

peter.preus@gmx.de peter-preus.de
Dieser Beitrag wurde unter Allgemein abgelegt und mit , , , , , , , , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

w

Verbinde mit %s