Kategorien
WordPress

7 Tricks für Twenty Seventeen

Twenty Seventeen
Twenty Seventeen

Sehr schick! Das war die kurze Antwort, die ich gerade von einer WordPress-Einsteigerin erhalten habe, auf die Frage, wie ihr der Look ihrer Projektseite gefällt. Nun dürft ihr raten, mit welchem Theme die Seite erstellt war? Richtig, Twenty Seventeen, oder wie ich es nenne: das beste Standard-Theme in zwölf Jahren WordPress. Da stellt sich glatt die Frage, ob es überhaupt noch viel zu konfigurieren gibt. Nun … mit diesen 7 Handgriffen ist Twenty Seventeen perfekt.

Titel und Untertitel eingeben

Seitentitel und Untertitel
Seitentitel und Untertitel eingeben

Gehe auf das Pinselsymbol in der oberen Leiste, um das Theme anzupassen. Der Custumizer öffnet sich. Mit einem Klick auf die Stifte kannst du Titel und Untertitel deiner Website ändern. Deaktiviere die Checkbox bei Titel und Untertitel der Website anzeigen, um beides auszublenden. Tipp: Verwende aussagekräftige Keywords, denn die Suchmaschinen werten die Titel und Untertitel auch aus, wenn du sie nicht anzeigen lässt.

WooCommerce - Das große HandbuchEigenwerbung: WooCommerce – das große Handbuch

Das Farbschema in Twenty Seventeen ist schon absolut edel, aber noch einen Touch eleganter wird es mit der Umstellung von Light auf Dark.

Textfarbe im Header ändern

Textfarbe im Header anpassen
Textfarbe im Header anpassen

Die Textfarbe im Header lässt sich individuell anpassen. Am besten notierst du dir deinen Farbcode, z.B. #040b3f, um ihn einheitlich auch an andere Stelle im Theme (und in der Printwerbung) einzusetzen. Achte dabei auf die Corporate Idendity, das optisch einheitliche Erscheinungsbild von WordPress und Printmaterial deines Unternehmens.

Startseite anlegen

Startseite anlegen
Startseite anlegen

Falls du Twenty Seventeen als Portfolio-Site verwendest: erstelle eine separate Startseite an! Diese wird dann mit Seiten-Abschnitten hinterlegt, in denen du unterschiedliche Inhalte platzieren kannst! Die Startseite hebt sich von allen anderen Seiten optisch ab.

Statische Seite als Startseite

Statische Startseite
Statische Startseite in Twenty Seventeen

Du hast einen neue Seite erstellt? Prima, dann klicke auf Einstellungen > Lesen und wähle Eine statische Seite aus, und im Drop-down-Menü die eben erstellte Seite als Startseite. Danach legst du weitere Seiten an, denn um ein Menü zu erstellen, brauchst du in WordPress zunächst etwas Material.

Hauptmenü anlegen

Das Hauptmenü
Das Hauptmenü

Twenty Seventeen verfügt über zwei Menü-Positionen, ein Topmenü und ein Social Links Menü. Gehe auf Design > Menüs und erstelle ein neues Menü, am besten zuerst das Hauptmenü (Topmenü). Platziere die Startseite dann ganz oben im Menü! Die Menüpunkte kannst du ganz einfach per Drag and Drop verschieben. Unterpunkte erzeugst du durch das Einrücken nach rechts.

Header-Video einfügen

Header-Video

Header-Video

Das Killer-Feature in WordPress 4.7:  Unkompliziert Header-Videos einzublenden. Zwar ist nicht jedes Theme dafür geeignet – das neue Standardtheme Twenty Seventeen aber schon! Im Bild siehst du, wie es funktioniert, und zwar ganz einfach über den Customizer:

  • Möglichkeit 1: Video im Format MP4 selbst hochladen
  • Möglichkeit 2: Von Youtube verlinken

Achtung: Es empfieht sich hier nur ein Video von ein paar Sekunden länge, alles andere würde die Ladezeit der Startseite zu sehr verlängern! Für die anderen Seiten spielt das Video keine Rolle, es wird ausschließlich auf der Startseite präsentiert!

Eigenes CSS-einfügen

Die CSS-Box

Die CSS-Box

Mit der neu entwickelten CSS-Box kannst du das Layout ändern, zum Beispiele Schriftarten und Schriftgrößen, und das ohne Risiko. Wenn etwas nicht funktioniert, löschst du den Code einfach wieder aus der Box.  Erreichbar ist die CSS-Box über den Theme-Customizer, also via Design > Themes > Anpassen.

Stolz präsentiert von WordPress … entfernen

Kaufmann und Kauffrau im E-Commerce
Eigenwerbung für mein neues Buch: Kaufmann und Kauffrau im E-Commerce – von Bernd Schmitt

Und wie geht dieser Copyright-Hinweis ganz unten weg? 😉 Die Antwort findest du hier: Stolz präsentiert von WordPress.

198 Antworten auf „7 Tricks für Twenty Seventeen“

Danke dir Bernd für den hilfreichen Bericht:-)

Und: finde deine Seite und Message geil!

Schau mal bei meiner Seite vorbei, wenn du Lust und Zeit hast. Sie ist mit twenty seventeen erstellt worden (gestern u heute).

Schreibe mir ruhig, wenn du etwas Verbesserungswürdiges findest.

Frage1: gibt es eine einfache Möglichkeit, den auf einem grossen Bildschirm doch ziemlich schmalen Seiten-Textbereich etwas breiter zu machen? Aber nur den, nicht den Fuss- und Kopf-Bereich damit.

Frage2: Das Bild im Header wird auf einem Handy nicht gut angezeigt (nur die Mitte), auch kann ich die Anzeige seitwärts verschieben und habe dann rechts einen unschönen Rand?! Das genau gleich grosse Hintergrundbild der Startseite, wird immer perfekt angezeigt…wo liegt denn hier der Fehler?

Ja, ich habe ein paarmal im Netz gesucht und html codes in die custom css kopiert, jedoch ohne wirkliche Verbesserung!

Danke für dein Feedback und Gruess aus der Schweiz

Markus

PS: Ich habe keine Ahnung von html…

Hi Markus,
danke für deine Nachricht, hab gerade ein Plugin mit dem Namen Advanced Twenty Seventeen entdeckt, installiert und bin es ausgiebig am testen. https://de.wordpress.org/plugins/advanced-twenty-seventeen/ .Falls du es ausprobieren möchtest:

Nach der Aktivierung von Advanced Twenty Seventeen kannst du mit 1 Klick ein Childtheme anlegen, und da dann nach Herzenslust ausprobieren, was ich gerade mache … mal sehen, ob sich die Textspalte damit vergrößeren lässt 😉
Bin gerade hier am werkeln, so präsentiert sich das Childtheme dann im Backend: Advanced Twenty Seventeen
Grüße,
Bernd

PS: Wenn du das 1-Spalten-Layout im Customizer einstellst, verschieben sich Überschrift und Haupttext. Der Haupttext umfasst dann die gesamte Breite, die Überschrift rutscht drüber. Also ganz klassische Anordnung, wie du im Bild siehst:
Twenty Seventeen einspaltig

OK, Das war zwar nicht die Antwort auf deine Frage, aber vielleicht hilft es dir trotzdem weiter, ich wühl mich jetzt erstmal durch dieses Advanced Twenty Seventeen durch 😉

2.PS: Gefällt mir sehr gut, deine Seite, sehr schöne Bilder, klares Thema.. und du hast ja schon das 1-Spalten Layout. Willst aber lieber 2-spaltig mit kleiner linker Spalte?

Ich habe die 740px Breite auf 1000 px erhöht – sieht ganz ordentlich aus.

Beispielhaft in diesem Block der style.css

/* Single Post */

.single-post:not(.has-sidebar) #primary,
.page.page-one-column:not(.twentyseventeen-front-page) #primary,
.archive.page-one-column:not(.has-sidebar) .page-header,
.archive.page-one-column:not(.has-sidebar) #primary {
margin-left: auto;
margin-right: auto;
/* max-width: 740px; */
max-width: 1000px;
}

Es gibt noch eine weitere Stelle.

Hi Thomas,
ich hab hier nochmal einen Screenshot gemacht.. um sicher zu gehen, dass wir vom selben Problem reden:
Breite verringen
Problem: Die Textspalte ist ein wenig klein, und die linke Spalte, wo der Doppelpfeil ist, etwas zu groß. Dieses Verhältnis soll verschoben werden.
Ich hab deinen Code (auf einer Projektseite) im Customizer in die Box für zusätzliches CSS eingefügt, damit ich in der CSS-Datei selbst nichts zerstöre:
Zusätzliches CSS
Allerdings hat sich da nix an der Spaltenbreite geändert. Frage: Du hast ja geschrieben, dass du die CSS-Datei noch an einer anderen Stelle geändert hast. Ohne diese weitere Änderung tritt kein Effekt ein, oder habe ich da einen Denkfehler?
Grüße,
Bernd Schmitt

Lieber Bernd,

ich nutze auch das Theme. Wenn ich dieses als statische Seite anzeigen lassen möchte und eine Seite, z.B. ‚Über mich‘ als Startseite auswähle, so zeigt er mir diese doppelt an. 1x ganz oben als Erstes (das ist ja so gewollt) und dann noch mal zum Schluss nach allen anderen Seiten. Das soll so natürlich nicht sein. Wie kann ich das unterbinden?

Und gleich noch eine Frage:
Statt ‚Stolz präsentiert von WordPress‘ würde ich das gerne etwas anderes stehen haben + einen Inpressums-Link

Vielen lieben Dank schon mal…

Ich habe – ausgehend von der Hilfe durch diesen Blog – mittlerweile auch eine Theme 2017-Seite angepasst.
Für diese Änderung gibt es zwei Möglichkeiten:
Möglichkeit 1:
Die site-info.php anpassen (im Childtheme: /wp-content/themes/advanced-twenty-seventeen-child/template-parts/footer) – einfach den Text ersetzen.
Viel Erfolg, lisia
Möglichkeit 2:
In der footer.php (/wp-content/themes/advanced-twenty-seventeen-child) einen Teil auskommentieren:
/* get_template_part( ‚template-parts/footer/site‘, ‚info‘ ); –> */

Hallo Bernd,

ich habe mich auch für dieses Theme entschieden und gestalte es nach meinen Wünschen um.
Ich breche mir aber die Finger bei den Links, ich kann
‚textdecoration: none‘ einfügen wo immer ich will und a:link ansprechen aber die Link-Unterstreichung läßt sich nicht entfernen.
Hast Du einen Tipp wo ich zBsp:

a {text-decoration: none;}

einfügen könnte oder eine andere Hilfestellung für mich?

Hallo Simone,
sieht super aus, dein Bild mit der Theke, die sich im Zapfhahn spiegelt. Zur Frage mit den Links: Vor WordPress 4.7 musstest du entweder die CSS-Datei direkt anpassen oder ein Plugin wie Super Simple Custom CSS verwenden. Doch die Zeiten sind vorbei, jetzt gehst du in den Customizer, da wo du auch die Farben des Themes ändern kannst, und klickst auf den Punkt „Zusätzliches CSS“.

CSS im Customizer bearbeiten

Um die Unterstreichungen der Links zu entfernen, gibst du in das Feld ein:
a,a:link,a:visited,a:hover {
text-decoration:none!important
}
Viele Grüße,
Bernd Schmitt
PS: Wenn du weitere Fragen hast, her damit! Was du dringend entfernen solltest: den Screenshot von Google Maps. Du darfst Google Maps nur integrieren! Die Zoom- und Navigationsfunktionen dürfen nicht verändert oder eingeschränkt werden!

Hallo Bernd
Vielen Dank für Deine Hilfe, das mit dem Screenshot hab ich nun noch mal nachgelesen und es wirklich falsch interpretiert – wird sofort korrigiert.
Die Linkunterstreichungen im Widget des Footer 1 und der Seitenleiste ließen sich auch nicht mit Hilfe Deiner CSS-Anweisung entfernen.
Und hey – Du bist der Erste in unserem Gästebuch! Solltest Du wirklich bei uns feiern, geb ich Dir persönlich das erste Bier aus ;O)
Schönes Wochenende !

Hallo Simone,
das mit dem Bier gilt, ich nehm dich beim Wort!
Dann gib mal diesen Code in die CSS-Box ein, um die Unterstreichungen zu entfernen (und nur in die Customizer-Box, nicht direkt in die CSS-Datei. Ich habs nur wo rauskopiert, aber bei einer Testseite von mir funktioniert es):

.entry-content a,
.entry-summary a,
.taxonomy-description a,
.comment-content a,
.pingback .comment-body > a {
box-shadow: none;
border-bottom: 0px solid #007acc !important;
}

Viele Grüße,
Bernd Schmitt
PS: Das neue Anfahrtsbild hast du selbst anfertigen lassen? Hier muss man wirklich höllisch aufpassen…

….für das neue Anfahrtsbild habe ich mir höchstpersönlich mit Inkscape die Finger gebrochen XD
Aber…
Die Linien sind wie eingemeißelt! schnüff…

Aber Danke für Deine Mühe Bernd, ich mach jetzt einfach mal den Deckel drauf – mal sehen, ob mir in ein paar Tagen was Neues einfällt.

Liebe Grüße
Simone

Finde deine Inkscape-Fleißarbeit gar nicht so schlecht… aber will lieber nicht wissen, wie lange du dran gesessen warst 😉

…nachdem ich alle Funktionen auf den Kopf gestellt habe, nicht mehr lange. für die nächste Anfahrtsskizze brauchte ich nur noch wenige Minuten – learning by doing – wird irgendwie alltäglich ;O)

Wie lösche ich einen Startseitenabschnitt?
Ich habe mich bei der Erstellung der Startseite verlaufen und möchte nun Startseitenabschnitte löschen. Finde aber keinen Ort, wo das ginge. Was kann ich tun, um die Startseitenabschnitte zu reduzieren?
Vielen Dank im Voraus für die Mühe

Hallo Marion, so löschst du einen Startseitenabschnitt wieder:
1. Gehe in den Customizer
Customizer aufrufen
2. Rufe dann im Customizer den Punkt Theme-Optionen auf
3. Gehe auf „Inhalt im Startseiten-Abschnitt“, und zwar zu dem Abschnitt, den du löschen willst.
Customizer drowdown
4. Klicke im Dropdown-Menü auf „Auswählen“, den obersten Punkt, und lass es bei „Auswählen“, gib also nichts Konkretes ein.
Customizer auswaehlen
5. Jetzt müsste der zuvor gewählte Abschnitt von der Startseite verschwunden sein. Ist dies der Fall, dann gehe oben im Customizer auf den blauen Button „Speichern und Publizieren“.
Speichern und Publizieren

Viele Grüße,
Bernd Schmitt

Hallo Bernd,

erst einmal 👍🏻 für deinen hilfreichen und vor allem verständlichen Beitrag. Ich bin ein absoluter Newbie, was Webseitengestaltung angeht und habe mich auch für das Theme Twenty Seventeen entschieden. Was ich dort allerdings sehr vermisse, ist ein Drop-Down-/Pull-Down-Menü. Hast du für mich einen Tipp, wie ich ein integrieren kann? Dank & Gruß Dirk

Hallo Dirk,
freut mich, dass dir meine Beiträge gefallen. Zur Frage:
In WordPress beginnst du erst dann mit dem Anlegen eines Menüs, wenn die zu verlinkenden „Sachen“ schon vorhanden sind. Normalerweise verlinken Menüpunkte zu Seiten. Also los gehts! Gehe oben auf +Neu, und dann auf Seite.
Seite anlegen
In die neue Seite schreibst du erstmal nur blabla, das kannst du später immer noch ändern. Es geht ja jetzt darum, ein Drop-Down-Menü zu erstellen
Neue Seite
Am besten legst du dann auch noch gleich 2 Unterseiten an, wenn es ein Drop-Down-Menü werden soll.
Hast du drei Seiten fix angelegt, oder noch ein paar ältere auf Lager, die noch nicht über ein Menü verlinkt sind? Dann rufe jetzt die Menüverwaltung auf, das geht über Design > Menüs
Menüverwaltung
Du bist in der Menüverwaltung? Dann kannst du die Menüpunkte und Unterpunkte zuordnen
Drop-Down-Menü
1. Markiere in der linken Spalte die neue Seite
2. Klicke unten auf Zum Menü hinzufügen, und mach das mit allen Seiten die in das Menü aufgenommen werden sollen
3. Rücke die Unterpunkte per Drag-and-Drop ein bisschen nach rechts. In meinem Beispiel heißen die Unterpunkte „Portfolio“ und „Seminarinhalte“
Dann klicke in der Menüverwaltung auf Speichern und schau dir das Drop-Down-Menü auf deine Startseite an. So müsste das ungefähr aussehen:
Menü erstellt
Ergebnis: Die beiden in der Menüverwaltung eingerückten Punkte erscheinen als Unterpunkte des Drop-Down-Menüs.

Falls du noch Fragen hast: her damit 😉
Grüße,
Bernd Schmitt

Hallo Bernd,

vielen Dank für die schnelle Antwort. Aber ich denke, ich habe mich etwas missverständlich ausgedrückt. Also ich habe bereits eine im Aufbau befindliche Seite mit diversen Menüpunkten und teilweise mit einigen Unterpunkten. Wenn ich üblicherweise mit der Maus auf den Oberbegriff gehe, öffnet sich ein Menübalken mit den Unterpunkten. Beim mobilen Endgerät funktioniert das natürlich nicht. Daher suche ich nach einem responsive Menü. Grüße Dirk

Hallo Dirk,
suchst du eine Lösung, damit beim Überfahren des Hauptmenü auf dem Desktop (und nicht auf dem Handy) gleich die Unterpunkte angezeigt werden?
Anbieten wird sich das wohl eher für Seiten mit überschaubaren Menübäumen, sonst wird es unübersichtlich.
Nun gibts ja für fast alles in WordPress Plugin, aber ich hab so ein Menü noch gar nicht auf einer Website entdeckt.. hast du einen Link zu einer Beispielseite? Ansonsten frage ich mal bei einem Meetup nach einer Lösung 😉
Grüße,
Bernd Schmitt

Hallo Simone, hallo Bernd,

danke für die Antwort und sorry für meine späte Reaktion . . .

Simone, genau so ein Menü suche ich! Wie lässt sich das einbinden? Grüße

Dirk

Hallo noch einmal . . . zum Verständnis. Ich habe das Plugin installiert und aktiviert. Aber wie aktiviere ich es jetzt? Dank im Voraus

Dirk

Hallo und guten Morgen. Hat keiner eine Idee zum Responsive Menü . . . wie bereits geschrieben: ich habe es installiert und aktiviert, aber es ist ohne Funktion. Oder muss ich noch andere Schritte vornehmen, damit das Menü funktioniert?! Ich bin für jeden Tipp dankbar. Grüße und einen schönen Sonntag

Dirk

Hallo Dirk,

hab ebenfalls nicht bemerkt, dass Du mittlerweile doch noch was geschrieben hast. Sorry,…. :O(

Ich habe das PlugIn aktiviert und soweit ich mich erinnern kann, hat das auch gleich funktioniert. Einiges mußte ich per „eigenes CSS“ noch anpassen, wann der Menu-Button auftauchen oder verschwinden soll usw.
Hast Du es mittlerweile hinbekommen?

Viele Grüße
Simone

Hallo Simone,

vielen Dank für deine Antwort. Ich habe es installiert und aktiviert. Aber ansonsten habe ich – aus Unwissenheit – nichts weiter gemacht. Leider funktioniert das Menü so leider noch nicht. Was und wo muss ich denn noch etwas anpassen? Viele Grüße

Dirk

Hallo Dirk,
Wenn man im Dashboard das PlugIn anklickst, öffnet sich eine Seite, auf der ganz oben 9 Reiter zu sehen sind. Gleich unter dem ersten kannst Du die Seitengröße eingeben, unter der der responsive Menu-Button auf dem Display erscheinen soll.
Schade, dass ich hier kein Screenshot erscheinen lassen kann, das würde einige Erklärungen erleichtern. Auf alle Fälle geh bitte Reiter für Reiter durch und stelle Deine Farben für Menu und Submenu-Punkte und Schriftgrößen ein, mußt ein wenig probieren so kommt man auch bald dahinter.
Im zusätzlichen CSS habe ich noch folgendes für die Positionierung in das zusätzliche CSS eingefügt:
button#responsive-menu-button {
width: 55px;
height: 55px;
background: orange;
position: fixed;
top: 2px;
left: 85.6%;
}
so brauch ich in den PlugIn-Einstellungen nicht erst alles einzeln zusammenstellen

Hi Simone,
danke für deine Erklärung… 😉 was mir noch aufgefallen ist: dieses Advanced 2017 hat wieder ein Update bekommen.. scheint immer umfangreicher zu werden. Bin gespannt, was damit alles geht. Screenshot des „Advanced Customizers“, das macht Laune: Advanced Seventeen Customizer
Grüße, Bernd Schmitt
PS: Du kannst mir auch Screeshots für deine Kommentare schicken, ich bau die dann rein 😉

Danke Bernd, mach ich….

es macht mir sehr großen Spaß mit diesem Theme
zu experimentieren.
Und ja, die Erweiterungen sind mir schon aufgefallen und hab sie schon fleißig getestet ;O)

Bis bald mal wieder,
Simone

Hallo,
hab noch was zum Thema Responsives Menü gefunden. Bis 5.April gibt es bei Envato ein kostenloses Plugin: Responsives Menü.
Grüße,
Bernd

Hallo Bernd,
danke für den hilfreichen Artikel – hab dich gerade gefunden und gleich „favoritisiert“.
Eine Frage: Beim neuen Theme ist das Headerbild 1200 px hoch. Wenn ich aber nur die halbe Höhe, also ein eigenes Headerbild mit 2000×600 verwenden möchte, geht das?
Grüße Enst

Hallo Ernst,
ja, das funktioniert über die Anpassung des Stylesheets, also der CSS-Datei. Erledige das am besten über die CSS-Eingabebox im Customizer, so riskierst du nicht, das Theme zu zerschießen. Außerdem wird der Code dann nicht bei einem Theme-Update wieder überschrieben. 😉
Die Eingabebox erreichst du über Design > Customizer > Zusätzliches CSS.
Headerbild verkleinern
Dort gib diesen Code für Computer Screen, Mobile Screen und Computer screen with logged in user and admin bar showing on front end ein, also die unterschiedlichen Ansichten für Computer und mobile Geräte:

/*Computer screen */
@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-image, .has-header-image.home.blog .custom-header-image {
/*height: 1200px;*/
/*height: 100vh;*/
height: 50vh;
/*max-height: 100%;*/
/*overflow: hidden;*/
}
}

/* Mobile screen*/
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header {
/*display: table;*/
/*height: 300px;*/
/*height: 75vh;*/
height: 50vh;
/*width: 100%;*/
}

/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
/*height: calc(100vh - 32px);*/
height: calc(50vh - 32px);
}
}

Quelle
Statt den im Beispiel angegebenen 50vH kannst du auch mit anderen Werten experimentieren, je nachdem, welche Höhe der Header haben soll. Mit 30vH erhältst du oben nur noch einen relativ Schmalen Streifen.
Hier siehst du das Ergebnis mit einer Höhe von 50%: wpcomedy.com
Grüße,
Bernd Schmitt

Hallo Stephanie,
Twenty Seventeen ist einfach das beste Standardtheme aller WordPress-Zeiten …und das Twenty Sixteen war grausig. 😉
Schau mal hier ganz unten bei den Kommentaren dieses Beitrags:
Twenty Seventeen
Da steht die Lösung für deine Frage nach den zusätzlichen Startseitenabschnitten..
Viele Grüße,
Bernd Schmitt

Moinsen, das sind ja super Tips hier schon mal. Danke dafür. Aber ich habe da auch eine Fragen zum Theme.
Auf der Startseite, bei dem Menü unter dem Bild ist ein Pfeil, rechts, der zum ersten Abschnitt der Startseite blättert. Den hätte ich gern auch jeweils in den anderen Abschnitten, damit ich darüber blättern kann. Ich finds einfach nicht, wo die das verbaut haben. Hat jemand eine Ahnung?
VG Thom

Hi Thom,
falls es dir was nützt, der Scrollpfeil wird über die Datei functions.php gesteuert, und zwar im Abschnitt 12 (Navigation), ganz unten vor Abschnitt 13:
Scroll-Pfeil
Der Code: .site-header .menu-scroll-down {
display: none;
}

Noch ’nTipp: Falls du ein Childtheme anlegen willst, das Plugin Advanced Twenty Seventeen nimmt dir die Arbeit ab und erstellt auch gleich eine functions.php als Child-Datei:
Advanced Twenty Seventeen
Grüße,
Bernd

Hi Bernd, Childtheme, nö, wollte ich nicht. Nur versuchen den Scroll-Pfeil in jedem Abschnitt zu bekommen. Aber deine und meine functions.php sind wohl unterschiedlich. Ich habe da keine Abschnitte die nummeriert sind noch den Bereich für scroll arrow… 🙂
Aber das Advanced Pugin habe ich mir mal installiert, danke.
Gruß
Thom

Oh, peinlich, habe einen Bock geschossen! Ich hatte die Datei falsch angegeben. Der Scroll-Down-Pfeil wird nicht über die functions.php gesteuert, sondern über das Stylesheet, die style.css
… sorry 😉
Stylesheet

NAbend, tja, hätte ich aus dem code auch erkennen sollen 😉 Aber war spät…. ja nur CSS geht da nicht ausreichend. Zumindest nicht auf dem einfachen Weg. ich habe mir mit dem plugin Scroll To CK geholfen und dazu dann in jedem unterem Bereich der Startseite von den Abschnitten ein „click to scroll“ per link mit verweis auf die Klasse des plugin eingebaut. das passt super. Incl. der Scroll-weite, die man im Plugin einstellt ist das super.

Vielen Dank!

Hallo. Funktion für: Dem besuchten Link eine andere Farbe geben als dem „noch nicht besuchten Link“. Einfach in zusätzliches CSS kopieren. Die Bezeichnung für die Farben gibt es im Internet. Hier Schwarz und ein dunkles Grau.

/* unvisited link */
a:link {
color: black;
}

/* visited link */
a:visited {
color: dimgrey;
}

CSS m ul und ol anzupassen (Numerierung und Aufzählungspunkte einrücken nach rechts)

ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1.2em;
margin-left: 0;
margin-right: 0;
padding-left: 28px;
}

ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1.2em;
margin-left: 0;
margin-right: 0;
padding-left: 28px;
}

Hallo Carsten, danke für den Tipp.
Und so verändert sich die Darstellung. Im Original stehen die Punkte der Liste nach links über. Der Text ist bündig mit allen anderen Texten. Vergleiche den Text darunter bei Galerie.
Original
Mit veränderter CSS, Code siehe Carstens Posting, rutscht die Liste nach rechts, und die Punkte stehen nicht mehr über.
Eingerückt
Nicht sehr drastisch, der Effekt, aber optisch sauber. Aber wer will, kann ja an den Parametern noch ein bisschen schrauben.;)

Die Größe der Überschriften von h1 (h1.entry-title) und von h2 sowie h3 im Text anpassen (und Abstände definerien etc) funktioniert mit diesen CSS Funktionen.
(Achtung: Google wünscht nur 1xh1 je Seite oder Post).

/*h1 oben im entry-title definieren*/
h1.entry-title:not(:first-child) {
font-size: 30px;
color: #111
}

/* h2 im Text definieren */
h2 {
font-size: 26px;
color: #222;
font-weight: 300;
clear: both;
line-height: 1.4;
margin: 0 0 0.5em;
padding: 1.0em 0 0;
}

/* h3 im Text definieren */
h3 {
font-size: 20px;
color: #222;
font-weight: 300;
clear: both;
line-height: 1.4;
margin: 0 0 0.5em;
padding: 1.0em 0 0;
}

Hallo Carsten,
vielen Dank für die CSS-Codeschnipsel und den SEO-Tipp:
Nur einmal h1 einsetzen.
Hab das Ganze mal probiert, sieht edel aus:
Formatierte Überschriften
Grüße,
Bernd Schmitt

h1.entry-title:not(:first-child) { font-size: 30px; color: #111 }

Wenn ich dies in meine customs css einfügen ändert sich trotzdem nicht die Überschrift. Ich nutze twentysixteen

Hallo Tom,
füge mal !important in die CSS-Deklaration ein, damit setzt du für eine CSS-Anweisung die höchste Priorität und alle anderen Anweisungen werden nicht berücksichtigt. Beispiel: {font-size: 30px !important;}. Was passiert dann?

CSS-Code, um die Unterstreichungen unter Links im Header und im Text ein- und auszuschalten.
Probiert selbst, indem Ihr die Bereich durch die Kommentarfunktion /* und */ ein- und ausschaltet.

Ich selbst suche noch die Lösung, wie man die Farbe der Unterstreichung eines Links im Textteil einer Seite oder eines Posts (also nicht die Links im Menü) einstellen kann. Bisher ist dies immer nur grau-schwarz. Würde gerne auf Blau oder…Rot
Für die Webseite http://www.scheidung-in-potsdam.de
—–
/*verändere text underline-style in allen links: The WP-guys used border-bottom instead of text decoration.*/

.entry-content a:link {
text-decoration: none;
border-bottom: none;
webkit-box-shadow: none;
box-shadow: none;
}

a:link {
text-decoration: none!important;
text-decoration-color: none!important;
border-bottom-color: none!important;
border-bottom: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

.entry-content a:visited {
text-decoration: none;
border-bottom: none;
-webkit-box-shadow: none;
box-shadow: none;
}

CSS Code um page title style colour zu ändern (hier rot) und einen größeren Font mit anderer Laufweite einzustellen. Ich habe die Farbe des Titels der Website http://scheidung-in-potsdam.de übernommen.

Bereiche, die ihr nicht nutzen wollt, packt Ihr einfach in die Kommentarklammer /* und */. Im Beispiel ist Text-Transform none durch Kommentarklammer ausgeschaltet.

/* Change page title style colour and to larger font */
.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
color: #dd1313;
font-size: 30px;
font-size: 1.543122575rem;
font-weight: 600;
letter-spacing: 0.01em;
/*text-transform: none;*/
}

/*Change style of links in content area/*
/*Styling für Links in der Text-Area, hier Farbe blau*/

/*–style links–*/
/* unvisited link */
.entry-content a,
.entry-content a:link {
color: blue;
text-decoration: none;
-webkit-box-shadow: ;
box-shadow: ;
}
/* visited link */
.entry-content a:visited {
color: #3366ff;
-webkit-box-shadow: none;
box-shadow: none;
}
/* mouse over link */
.entry-content a:hover {
font-weight: bold;
-webkit-box-shadow: none;
box-shadow: none;
}
/* selected link */
.entry-content a:active {
font-weight: bold;
-webkit-box-shadow: none;
box-shadow: none;
}

Hallo ihr Lieben,

ich habe folgendes responsive Problem(chen):

Die Vorschau der responisve Darstellung im „customizer“ zeigt meine Website korrekt an. Auch wenn ich die Seite am Desktop Browser einfach skalliere switched die Ansicht korrekt.

ABER
Wenn ich meine Seite am Smartphone/Tablet aufrufe wird diese nicht responsibe angezeigt. Was für einen hack gibt es, um dieses Problem zubeheben?

Das ist die Seite: http://www.alisahin.de

Hallo Ben, falls du das Jetpack-Plugin installiert hast, fällt mir diese schnelle Lösung ein.
Gehe auf Jetpack > Einstellungen > Writing.
Jetpack
Dann aktivierst du unten den Schieber bei Optimize your Site for Smartphones:
Smartphone Optimierung
Weiß nicht, ob es mit dem Theme Twenty Seventeen klappt, aber beim Theme auf dieser Seite hier (Reddle) funktioniert die mobile Darstellung mit Jetpack wunderbar.
Grüße,
Bernd Schmitt

Hallo Bernd!
Danke für die schnelle Hilfe. Leider wird die Seite in der mobilen Version ganz anders angezeigt als die Desktop Version.

Schau mal. Folgend der CSS Code vlt. ist es nur eine Breite falsch?

/* Adjust positioning of edit shortcuts, override style in customize-preview.css */

@media screen and (min-width: 20em) {

body.customize-partial-edit-shortcuts-shown .site-header .site-title {
padding-left: 0;
}
}

@media screen and (min-width: 30em) {

/* Typography */

body,
button,
input,
select,
textarea {
font-size: 18px;
font-size: 1.125rem;
}

h1 {
font-size: 30px;
font-size: 1.875rem;
}

h2,
.page .panel-content .recent-posts .entry-title {
font-size: 26px;
font-size: 1.625rem;
}

h3 {
font-size: 22px;
font-size: 1.375rem;
}

h4 {
font-size: 18px;
font-size: 1.125rem;
}

h5 {
font-size: 13px;
font-size: 0.8125rem;
}

h6 {
font-size: 16px;
font-size: 1rem;
}

.entry-content blockquote.alignleft,
.entry-content blockquote.alignright {
font-size: 14px;
font-size: 0.875rem;
}

/* Fix image alignment */
img.alignleft {
float: left;
margin-right: 1.5em;
}

img.alignright {
float: right;
margin-left: 1.5em;
}

/* Site Branding */

.site-branding {
padding: 3em 0;
}

/* Front Page */

.panel-content .wrap {
padding-bottom: 2em;
padding-top: 3.5em;
}

.page-one-column .panel-content .wrap {
max-width: 740px;
}

.panel-content .entry-header {
margin-bottom: 4.5em;
}

.panel-content .recent-posts .entry-header {
margin-bottom: 0;
}

/* Blog Index, Archive, Search */

.taxonomy-description {
font-size: 14px;
font-size: 0.875rem;
}

.page-numbers.current {
font-size: 16px;
font-size: 1rem;
}

/* Site Footer */

.site-footer {
font-size: 16px;
font-size: 1rem;
}

/* Gallery Columns */

.gallery-item {
max-width: 25%;
}

.gallery-columns-1 .gallery-item {
max-width: 100%;
}

.gallery-columns-2 .gallery-item {
max-width: 50%;
}

.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
max-width: 25%;
}
}

@media screen and (min-width: 48em) {

/* Typography */

body,
button,
input,
select,
textarea {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}

.entry-content blockquote.alignleft,
.entry-content blockquote.alignright {
font-size: 13px;
font-size: 0.8125rem;
}

/* Layout */

.wrap {
max-width: 1000px;
padding-left: 3em;
padding-right: 3em;
}

.has-sidebar:not(.error404) #primary {
float: left;
width: 58%;
}

.has-sidebar #secondary {
float: right;
padding-top: 0;
width: 36%;
}

.error404 #primary {
float: none;
}

/* Site Branding */

.site-branding {
margin-bottom: 0;
}

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding {
bottom: 0;
display: block;
left: 0;
height: auto;
padding-top: 0;
position: absolute;
width: 100%;
}

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
display: block;
height: auto;
}

.custom-header-media {
height: 165px;
position: relative;
}

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
height: 0;
position: relative;
}

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
.has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
bottom: 0;
height: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
}

.custom-logo-link {
padding-right: 2em;
}

.custom-logo-link img,
body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
max-width: 350px;
}

.title-tagline-hidden.home.has-header-image .custom-logo-link img,
.title-tagline-hidden.home.has-header-video .custom-logo-link img {
max-height: 200px;
}

.site-title {
font-size: 36px;
font-size: 2.25rem;
}

.site-description {
font-size: 16px;
font-size: 1rem;
}

/* Navigation */

.navigation-top {
bottom: 0;
font-size: 14px;
font-size: 0.875rem;
left: 0;
position: absolute;
right: 0;
width: 100%;
z-index: 3;
}

.navigation-top .wrap {
max-width: 1000px;
/* The font size is 14px here and we need 50px padding in ems */
padding: 0.75em 3.4166666666667em;
}

.navigation-top nav {
margin-left: -1.25em;
}

.site-navigation-fixed.navigation-top {
bottom: auto;
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
z-index: 7;
}

.admin-bar .site-navigation-fixed.navigation-top {
top: 32px;
}

/* Main Navigation */

.js .menu-toggle,
.js .dropdown-toggle {
display: none;
}

.main-navigation {
width: auto;
}

.js .main-navigation ul,
.js .main-navigation ul ul,
.js .main-navigation > div > ul {
display: block;
}

.main-navigation ul {
background: transparent;
padding: 0;
}

.main-navigation > div > ul {
border: 0;
margin-bottom: 0;
padding: 0;
}

.main-navigation li {
border: 0;
display: inline-block;
}

.main-navigation li li {
display: block;
}

.main-navigation a {
padding: 1em 1.25em;
}

.main-navigation ul ul {
background: #fff;
border: 1px solid #bbb;
left: -999em;
padding: 0;
position: absolute;
top: 100%;
z-index: 99999;
}

.main-navigation ul li.menu-item-has-children:before,
.main-navigation ul li.menu-item-has-children:after,
.main-navigation ul li.page_item_has_children:before,
.main-navigation ul li.page_item_has_children:after {
border-style: solid;
border-width: 0 6px 6px;
content: „“;
display: none;
height: 0;
position: absolute;
right: 1em;
bottom: -1px;
width: 0;
z-index: 100000;
}

.main-navigation ul li.menu-item-has-children.focus:before,
.main-navigation ul li.menu-item-has-children:hover:before,
.main-navigation ul li.menu-item-has-children.focus:after,
.main-navigation ul li.menu-item-has-children:hover:after,
.main-navigation ul li.page_item_has_children.focus:before,
.main-navigation ul li.page_item_has_children:hover:before,
.main-navigation ul li.page_item_has_children.focus:after,
.main-navigation ul li.page_item_has_children:hover:after {
display: block;
}

.main-navigation ul li.menu-item-has-children:before,
.main-navigation ul li.page_item_has_children:before {
border-color: transparent transparent #bbb;
bottom: 0;
}

.main-navigation ul li.menu-item-has-children:after,
.main-navigation ul li.page_item_has_children:after {
border-color: transparent transparent #fff;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
right: auto;
}

.main-navigation ul ul a {
padding: 0.75em 1.25em;
width: 16em;
}

.main-navigation li li {
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}

.main-navigation li li:hover,
.main-navigation li li.focus {
background: #767676;
}

.main-navigation li li a {
-webkit-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}

.main-navigation li li.focus > a,
.main-navigation li li:focus > a,
.main-navigation li li:hover > a,
.main-navigation li li a:hover,
.main-navigation li li a:focus,
.main-navigation li li.current_page_item a:hover,
.main-navigation li li.current-menu-item a:hover,
.main-navigation li li.current_page_item a:focus,
.main-navigation li li.current-menu-item a:focus {
color: #fff;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: 0.5em;
right: auto;
}

.main-navigation .menu-item-has-children > a > .icon,
.main-navigation .page_item_has_children > a > .icon {
display: inline;
left: 5px;
position: relative;
top: -1px;
}

.main-navigation ul ul .menu-item-has-children > a > .icon,
.main-navigation ul ul .page_item_has_children > a > .icon {
margin-top: -9px;
left: auto;
position: absolute;
right: 1em;
top: 50%;
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
transform: rotate(-90deg);
}

.main-navigation ul ul ul {
left: -999em;
margin-top: -1px;
top: 0;
}

.main-navigation ul ul li.menu-item-has-children.focus:before,
.main-navigation ul ul li.menu-item-has-children:hover:before,
.main-navigation ul ul li.menu-item-has-children.focus:after,
.main-navigation ul ul li.menu-item-has-children:hover:after,
.main-navigation ul ul li.page_item_has_children.focus:before,
.main-navigation ul ul li.page_item_has_children:hover:before,
.main-navigation ul ul li.page_item_has_children.focus:after,
.main-navigation ul ul li.page_item_has_children:hover:after {
display: none;
}

Hallo Bernd,
als großer Experte für 2017, kannst du mir einmal mitteilen
wie man die Breite des Sidebar verkleinert.
Für eine Antwort wäre ich Dir sehr dankbar
Lupus

Hallo Lupus,
probiere mal Folgende:
1) Rufe den Customizer auf und gehe auf den Punkt Zusätzliches CSS:
Zusätzliches CSS
Zum Glück gibt es ja diese CSS-Box, und man hat keine Angst mehr, die CSS-Datei zu zerschießen und braucht für CSS-Anpassungen auch kein Child-Theme mehr.

2) Gibt bei Deine Anpassungen für zusätzliches CSS diesen CSS-Code ein:
Kleine Sidebar
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 70%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 20%
}

3) Experimentiere ein bisschen mit den Prozentwerten.
In meinem Beispiel hab ich die Breite der Sidebar auf 20 % geschrumpft, siehe den roten Doppelpfeil rechts. Wohl zu schmal, aber ich wollte den Effekt mal demonstrieren.
Kleinere Siedebar

Hoffe, ich darf den Titel des großen Experten behalten 😉

Grüße,
Bernd Schmitt

Stolz präsentiert von WordPress entfernen! Mit dem einfachen Plugin
„Remove Powered by WordPress“
lässt sich die Fußzeile entfernen. Das Plugin gibt es kostenlos bei den WordPress-Plugins und ist jetzt auch für „Twenty Seventeen“ geeignet.

Hallo Bernd. Wenn man der Seite (die man im Customizer unter Theme-Optionen in den Abschnitt „Startseiten-1“ einhängt) mit einem Bild versieht, dann wird dieses Bild nahtlos zwischen den verschiedenen Seiten auf der Startseite angezeigt. So weit so gut.
Mein Problem: A) Ich habe Seiten, die ich sowohl im Startseitenabschnitt anzeige, als auch an anderer Stelle auf der Website (Beispiel: Seite http://scheidung-in-potsdam.de/unterhalt-kindesunterhalt/) Diese Seite ist sowohl auf der Startseite eingehängt als auch über das Menü erreichbar. Grund: SEO-Erwägungen.
B) Im Scrollen auf der Startseite sieht es toll aus. Aber ich finde es sieht doof aus, wenn das Bild bei Aufruf der Seite „unterhalt-kindesunterhalt“ selbst dann ebenfalls angezeigt wird. Kann man das Bild (Glienicker Brücke in Potsdam) auf dieser speziellen Seite irgendwie ausschalten, während das Bild im Startseitenabschnitt beim laufenden Scrollen trotzdem angezeigt wird?

Danke Carsten

Hallo Carsten,
gib mal diesen Code in die CSS_Box im Customizer ein, um die Panel-Bilder der Startseite von den Unterseiten wegzukriegen:
.single-featured-image-header {
display: none;
}

Grüße,
Bernd

Hallo Bernd. Man liest, dass die ParallaxFunktion (bzw. Endlos Scrollen) Nachteile beim SEO hat. Grund: Man hat zuviele H1 auf der Seite und Google ist verwirrt durch die unterschiedlichen SEO-Angaben und Begriffe der jeweiligen Seiten, die ja nur „Künstlich“ zu einer Seite zusammengeführt werden. Angeblich ist dies ein Rankingnachteil bei Google. Andererseits lese ich, dass es wohl schon aktuelle Lösungen seitens WordPress gibt. Wie ist das bei Twenty Seventeen? Trotz umfangreicher Optimierungen bei Pagespeed und beim Content komme ich im Ranking nur langsam nach oben. Hast Du hier Alternativen ? (Siehe diesen Artikel https://www.sumago.de/parallax-one-pager-seo-tipps-loesungen/)

Hi Carsten, sorry, hat ein wenig gedauert, aber ich war auf dem WordCamp in Berlin und hatte noch ein paar Tage drangehängt..
Zur SEO-Problematik: Also One-Pager haben da einen echt schweren Stand. Ich persönlich rate von One-Pagern ab. Ausnahme siond Landingpages oder Seiten, die fast nur von Google Adwords angesteuert werden.
Bei Twenty Seventeen sehe ich das Problem der Häufung von H1-Überschriften als nicht sehr gravierend an. Es sind ja doch eine Menge Dinge, nach denen Google etwas bewertet, und bei mir kommt der meiste Traffic gar nicht direkt auf die Startseite. Wenn da nun einmalig drei oder vier H1-Überschriften stehen, geht die SEO-Welt nicht unter.
Ob sich das Endlos Sroll lohnt? Hm, schwerer zu sagen, denn da werdn ja doche eine ganze Menge H1-Überschriften auf alle URLs gehievt. Andererseits wirken sich eine verlängerte Verweildauer und weitere Klicks ja wieder positiv auf das Ranking aus. Ich würde sagen, dass sich Endllos Scroll auf SEO eher neutral auswirkt.
Grüße,
Bernd Schmitt

Hallöchen! Ich bin am Verzweifeln und hoffe, hier kann mir geholfen werden.
Habe WordPress 4.7 mit Twenty Seventeen im Einsatz und nutze die Standard-Gallerie. Alles funktioniert gut. Bis auf deisen kleinen Schönheitsfehler: Ich möchte nicht, dass auf der Detailseite der Galerie ein Link auf dem Bild liegt, dass, wenn man es anklickt, es in groß mit Schatten geöffnet wird. Dann kommt nähmlich kein Link oder Button oder so zum Schließen des Bildes. Blöd! Also: Wie bekomme ich diesen Link auf dem Bild getötet? Die Galerie ist schön, der Link in der Galerie zur Detailseite dann auch, aber der letze Link vom Vorschaubild auf das große Bild mit dem dunklen, transparenten Hintergrund ohne „Schließen“-Knopf macht mich irre! 😉

Hi Bernd,
ja, that’ll do the trick. Ist zwar ein Kompromiss, aber ein recht guter. Vielen Dank dafür!

Hallo Bernd

Super was du machst! Das schätze ich sehr. Das hilft Neulingen wie mir sich mit WordPress besser anzufreunden.
Du, ich hätte eine Frage zum Thema Responsive Design. Das Header Bild bei mobilen Devices abgeschnitten. Kann man das irgendwie lösen?

Danke Dir

Max

Hallo Bernd,

weißt du als 2017-Experte vielleicht was zu folgendem Problem?
Ich habe als zweiten Startseitenabschnitt meine Beitragsseite mit Blogposts. Es werden nur 3 (statt 10 wie unter Einstellungen–> Lesen eingestellt) angezeigt, was ganz okay wäre, wenn am Ende des Abschnitts sowas wie „vorherige Posts“ oder sowas ähnliches einzupflegen wäre. Da darf sich gerne darauf die Beitragsseite öffnen.. Weißt Du vielleicht, wie das geht? Ich steh da irgendwie auf dem Schlauch..

Hallo Stefan, hast du das Plugin Jetpack installiert? Falls ja, dann gehe mal auf Jetpack-Dashboard > Traffic und aktivierte die Funktion Related Posts:
Related Posts
Ich hab auch hier auf onlineshop-diy die Related Posts aktiviert … mit dem Theme 2017 hat das jetzt wenig zu tun, aber vielleicht klappt es ja… 😉

Danke für den Tipp! Leider will sich Jetpack bei mir nicht mit wordpress.com verbinden. Jetzt muss ich erstmal auf Fehlersuche gehen… dennoch vielen lieben Dank!

Hallo Bernd, ich möchte gerne die Schrift des Titels der Website verändern. Das habe ich geschafft, auch die Farbe unter Header 1. Aber die Schrift bleibt immer in Großbuchstaben, auch wenn ich bei „Titel der Webseite“ klein- und Großbuchstaben habe. Eine Idee? Viele Grüße Christoph

Hi Christoph, kein Problem!

Gehe in den Customizer > Zusätzliches CSS, und gib diesen Code in die CSS-Box ein:

h1{
text-transform: none !important;
}

Ab jetzt werden die Buchstaben nicht mehr zwangsläufig groß angezeigt. Die Anweisung !important sorgt dafür, dass das Stylesheet an dieser Stelle überschrieben wird. Du brauchst die originale Datei style.css also nicht anzufassen. Nach einem Update von Twenty Seventeen bleibt alles erhalten, was über den Customizer geändert wurde.

Grüße,
Bernd Schmitt

Hallo Bernd,

danke für tollen Deine Tipps! Haben mir schon sehr weitergeholfen.

Nachfolgend habe ich drei Fragen und hoffe, Du kannst mit weiterhelfen!

1.) Nachfolgender Code funktioniert nicht wirklich. Denn wenn ich z.B. die px im Bereich „Mobile screen“ ändere, änderst sich automatisch auch die Ansicht, auf großen Bildschirmen (Computer screen), ohne das ich dort Änderungen vornehme.

Weisst Du mehr?

/*Computer screen */
@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-image, .has-header-image.home.blog .custom-header-image {
/*height: 1200px;*/
/*height: 100vh;*/
height: 50vh;
/*max-height: 100%;*/
/*overflow: hidden;*/
}
}

/* Mobile screen*/
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header {
/*display: table;*/
/*height: 300px;*/
/*height: 75vh;*/
height: 50vh;
/*width: 100%;*/
}

/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
/*height: calc(100vh – 32px);*/
height: calc(50vh – 32px);
}
}

————————–

2.) Wie kann ich die Navigation bzw. das Menü auf mobilen Geräten oben fixieren (sticky), so dass nur der eigentliche Seiteninhalt weiterscrollt?

————————–

3.) Ich habe das Theme zum „Onepager“ gemacht. Wenn ich auf einem mobilen Gerät einen Menüpunkt anklicke, wird automatisch dorthin gescrollt. Wie aber wird das Menü nach Betätigung des jeweiligen Menüpunktes, automatisch wieder geschlossen?

Besten Dank und Gruß! Ich freue mich auf Deien Antworten.

Hallo sonnenmann, erstmal auf die Schnelle eine Anwort zu Frage 2: Wie bleibt das Menü in der mobilen Ansicht sticky?
Gib dazu diesen Code in die CSS-Box:


@media screen and (max-width: 767px) {
.navigation-top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99999;
}
.admin-bar .navigation-top {
padding-top: 45px; // Padding to allow space for the admin-bar when present
}
}

Habe es auf einer Testseite ausprobiert, da funktioniert es 😉
Quelle für den Code: https://core.trac.wordpress.org/ticket/40236

Hallo Bernd,

herzlichen Dank für die schnelle Lösung! Funktioniert!

Bin gespannt auf die zwei noch ausstehenden Antworten.

Sonnige Grüße!

Hallo Bernd,

sorry wenn ich zusätzlich noch eine Frage habe.

Jetzt funktioniert zwar das sticky Menü in der mobilen Ansicht, verdeckt aber anfangs einen Teil des Headerbildes und des Logos (auf Unterseiten).

Wie kann ich Headerbild und Menü etwas weiter nach unten (unter das Menü) setzen, so dass auf mobilen Geräten Headerbild und Logo nicht verdeckt werden?

Viele Grüße!

Hallo Bernd,

weiterer Hinweis von mir: Auf mobilen Geräten weden die 3 Striche vom Menü sowie der Pfeil nach unten (sofern Unterseiten bestehen) nicht angezeigt.

🙁

LG

Hallo Bernd,

das Problem was ich am 27. August 2017 um 15:20 schilderte hat sich erledigt!

War ein Darstellungsproblem auf einem Smartphone mit dem Standartbrowser. Mit dem Firefox war alles zu sehen!

LG

Twenty Seventeen schneller machen – wichtige Aufgabe

Twenty Seventeen ist sauber programmiert und eigentlich recht schnell. Für Google ist aber die Schnelligkeit der Webseite ein bedeutendes Kriterium für das Ranking.

Zur Beschleunigung habe ich folgende Plugins eingesetzt:
1. Disable Emojis Version 1.7 von Ryan Heller
2. Disable Feeds Version 1.4.4 von Samir Shah
Ich brauche weder Emojis noch Feeds. Deren Ausschalten über diese beiden kleinen Plugins brachte einen Performancevorteil.

3. Disable Comments Version 1.7 von Samir Shah
Ich benötige die Kommentarfunktion auf keiner Webseite und habe diese generell über dieses Plugin augeschaltet.

4. Remove Query Strings From Static Resources von SpeedUpmyWebsite – hier bin ich mir unsicher über den Performancevorteil; dieser ist nur relativ klein.

4. Autoptmize von Frank Goossens in Kombination mit
einem Cache-Programm. Hier müßt Ihr selber ausprobieren, welche Kombination (und welche Schalter wie zu setzen sind) bei eurer Seite das beste Ergebnis bringt. Mit dieser Kombination könnt ihr den größten Performancegewinn erzielen.

5. Testseiten
Als Testseiten für die Geschwindigkeit könnt Ihr https://gtmetrix.com oder http://www.webpagetest.org/ oder http://www.seitenreport.de nehmen. Alle drei Seiten bieten selbsterklärende Analysen mit unterschiedlichen Ausprägungen. Nehmt eure Bemühungen aber nicht zu ernst; mit obigen Änderungen seit Ihr bei eher statischen Webseiten bereits gut augestellt und könnt auch auf preiswerten Paketen und schwächeren Webserverern gute Ergebnisse erzielen.
Bei Webshops müßt Ihr allerdings auf der Serverseite aufrüsten.

Viel Erfolg mit dem leistungsstarken „Twenty Seventeen“.
Besten Dank an Bernd, der immer wieder tolle CSS-Lösungen vorstellt. Toll. Danke

Freunde, Fans und Follower

Hallo Carsten, danke für den Disable Emojis-Tipp. Hab das Plugin gerade bei einer lahmen Site rein. Im vorher/nachher-Test bei Pingdom war zu sehen, dass es sofort funktioniert.. Wieder ein bisschen Ladezeit weniger, also die Site bei Google besser im Ranking, so soll es sein.
Emojis verwendet kein Mensch auf WordPress, die Emoticons (Smilies) funktionieren immer noch, und das Plugin arbeitet ab der Aktivierung – keine weiteren Schritte nötig. Klare Empfehlung – muss man haben: https://de.wordpress.org/plugins/disable-emojis/
Grüße,
Bernd

Hallo Bernd. Wieder mal eine Frage. Ich möchte das Menü in allen Ansichten beim nach unten scrollen dann bei Erreichen des oberen Randes auch dann „Oben“ fixieren. Zu Beginn soll es aber wie bisher unten (unter dem Bild) stehen. Ich habe die beiliegende Lösung getestet.
https://wordpress.org/support/topic/how-do-i-make-the-menu-sticky/
Leider ist das Menü jetzt ständig oben „sticky“; die Scroll-Lösung funktioniert nicht wie erhofft. Die Bilder auf den Unterseiten sind teilweise veredeckt. http://www.scheidung-in-potsdam.de als Beispiel. Hast Du eine tolle Idee, die auf PC und Mobile funktioniert?
Danke sehr

Hi Carsten, habe dazu leider keine Lösung. Aber ich kann dir nur raten, die Optimierung nicht zu übertreiben. Hab deine Site mal mit Laptop und meinem Smartphone (Android 7.1) getestet. Auf dem Laptop alles ok, aber auf dem Smartphone öffnet sich das Menü jetzt oben gar nicht mehr… nach einem KLick auf die 3 Querbalken tut sich nichts!
Grüße,
Bernd

Hallo zusammen, ich würde gerne das überflüssige Wort „Beiträge“ auf meiner Blogseite ausblenden. Wie kann ich das? Mit CSS? LG Mainia

Hallo Bernd, ich benötige dringend eine Auskunft:

1. Wie kann ich den Leerbereich zwischen der Menüleiste zu „Herzlich Willkommen“ (erste Textzeile verkleinern? Möchte den nicht so groß haben. Oder ist das eine Seitenleiste, die ich ausstellen kann?

2. Wie kann ich das Header Bild verkleinern ober der Menüleiste?

3. Wie stelle ich den Link vom Logo aus? Den möchte ich nicht.

Ich bitte dringend um Rückmeldung.

Danke, lg Daniela

Hallo Daniela, zu Frage 1:
Gehe in den Customizer > ZUsätzliches CSS und füge hinzu

#content {
padding-top: 5px;
}

Die 5px sind ein Extremwert, um den Effekt zu verdeutlichen 😉 … probiere, ob es funktioniert. Dann setze 20px oder 30px ein.
Grüße,
Bernd Schmitt

Hi Annelie,
geht schon, ist aber eine größere Operation. Du musst Code in die functions.php einfügen, einen Ordner und eine Datei neu anlegen und zusätzliche Anweisungen im Stylesheet eintragen. Hier ist die Lösung beschrieben, einschließlich aller einzufügenden Codes: Drittes Footerwidget
Allerdings ist es nicht mehr nötig, in der style.css herumzuschrauben. Den dritten Schritt des obigen Tutorials machst du in der CSS-Box im Customizer.
Viele Grüße,
Bernd Schmitt
PS: die Modifikation in der functions.php vorsichtshalber in einer Testumgebung machen 😉

Hallo Bernd,

habe gerade deine Hilfeseite gefunden.

Ich komme nicht weiter. Gerne hätte ich die Navigation, wie sie auf der Beitragsseite ist, auch auf den statischen Seiten eingerichtet.
Hab schon ein bisschen rumgespielt. Bis auf die Startseite habe ich eine Navigation auf der rechten Seite. Jedoch steht links immer noch der Seitentitel, so dass das Layout nicht stimmt. Ich vermute, wenn ich diese Spalte bzw. den Titel wegbekomme, würde das Layout passen.

Und wie bekomme ich die Navigation noch auf die Startseite (Wir über uns)?

Ich hoffe Du kannst helfen 🙂

Hallo Oliver,
die Navigation in WordPress ist ja eigentlich immer gleich, egal ob sie auf einer statischen Seite oder den Beiträgen eingeblendet wird. Oder möchtest du von der Startseite oder Über-uns-Seite zusätzlich auf einzelne Beiträge verlinken? Da wäre jetzt ein Link zur betreffenden Website ganz gut, damit wir vom selben Problem reden… 😉
Grüße,
Bernd Schmitt

Hallo Bernd, sorry.
Der Link zur Seite war eigentlich in dem Anmeldeformular eingegeben. Jedoch wurde mein Text als Spam gekennzeichnet. Deswegen habe ich mich mit Facebook anbegmeldet.
Es handelt sich um die Seite http://www.prothesenbewegung.online und das Twenty Seventeen Theme.
Ich habe jetzt jedoch ein Plugin gefunden, welches den gleichen Zweck erfüllt, nämlich auf allen Seiten eine Sidebar einzufügen: Page Sidebar for Twenty Seventeen.

Trotzdem vielen Dank für die rasche Antwort.
Weiterhin gutes Gelingen.
LG
Oliver

Hallo Oliver,
danke für die Info. Jetzt muss ich mal sehen, wie ich die falsche Spam-Markierung bei mir wieder rauskriege. ;).
Wie ich sehe, hast du die Navigation in die Sidebar gelegt. Wenn du sie oben haben möchtest, gehe auf Dashboard > Design > Menüs und schiebe die gewünschten Seiten in die Menüstruktur. Hier siehst du, wie das mit dem Anlegen von Unterseiten funktioniert: Unterseiten anlegen.
Grüße,
Bernd Schmitt

Hi,
hab eine 2017-Seite übernommen. Will diese ganzen Bilder auf der Startseite einfach nur weg haben. Wie mache ich das? Hab keine Ahnung von HTML etc..

Hallo,
ich nehme an, du willst, vom Header abgesehen, alle großen Bilder auf der Startseite entfernen?
Der Trick: Diese Bilder werden nicht direkt auf der Startseite von Twenty Seventeen eingestellt werden, sondern von dazugehörigen Seiten gespeist. Du musst also, wenn von „Über uns“ ein Bild eingeblendet ist, auf die Seite „Über uns“ gehen. Da schaust du dann in der rechten Spalte nach dem Featured Image (Beitragsbild).
Enferne dieses Bild, dann wird es auch auf der Startseite von Twenty Seventeen nicht mehr angezeigt…
Grüße,
Bernd Schmitt

Hallo Bernd,
auch von mir eine Frage, die sich aber nicht unbedingt nur auf 2017 bezieht: In Südtirol (Italien) arbeiten wir viel mit zwei- oder dreisprachigen Seiten und ich verwende meist das Plugin Polylang in der free-Version. Leider bin ich aber nicht imstande, die Sprachumschalter (verwende immer die Grafiken, also die Fahnensymbole) da zu positionieren, wo ich sie haben möchte. Ideal wäre natürlich eine Position neben dem Menü – auf jeden Fall sollen sie immer sichtbar sein und man darf nicht erst durch die ganze Seite scrollen müssen um sie zu finden.
Danke für deine Hilfe
Ernst

Ja, ist ziemlich umständlich. Bin Ende Nov. noch auf einem WooCommerce Meetup zum Thema Multilinguales WP, da werde ich mich auf den neuesten Stand bringen. Vielleicht gibt es bessere Lösungen.
Falls du Polylang trotzdem einsetzt:
Nach dem Aktivieren der Checkbox findet du in Design > Menüs den Sprachenumschalter. Den aktivierst du und schiebst ihn per Drag & Drop nach rechts ins Menü: Sprachumschalter ins MenüSprachenumschalter. Dann müsste es passen 😉

hallihallo, ich hab da mal ne frage.. will statt den sticky posts mehrere posts hervorheben, also auch zwischendrin.. ohne sticky, die sollen nicht oben hängen!! geht das zwischendurch …. ne andere farbe überschrift oder hintergrund für special posts… also 3 normale posts, 1 besonderer, dann wieder 2 normale.. etc.. lg margit

Hallo Margit,
du kannst zum Beispiel bestimmte Kategorien mit einer Hintergrundfarbe abheben, geht über Customizer > zusätzliches CSS. Beispiel: Deine Kategorie heißt rezepte. Dann gib ein:
.category-rezepte {
background-color: #dddddd;
}

Das rezepte durch deine Kategorie ersetzen
Das #dddddd durch eine Farbe deiner Waghl ersetzen..
Grüße,
Bernd Schmitt

Frage zu 2017: ich möchte nur 1 Dazwischen-bild auf der Startseite haben, also 1 oben, 1 dazwischen… weniger chaotisch halt…hoffe es ist klar?? wie kann ich das einstellen? LG Mark

Hallo Mark,
gehe in den Customizer, um die Startseiten-Abschnitte mit einer bestimmten Seite zu verknüpfen.. auf der zugeordneten Seite findest du in der rechten Spalte ein Featured Image… du kannst es ändern, oder gar keines einsetzen… wenn du keines einsetzt, verschwindet es von der Startseite.
Alternativ kannst du auch den Holzhammer nehmen und einen oder mehrere Startseitenabschnitte löschen, auch das geht im Customizer.
Grüße,
Bernd Schmitt

Hi Mark, du kannst die Bilder entweder aus der Mediathek löschen: Startseitenbilder oder von den einzelnen Seiten, die Twenty Seventeen angelegt hat… also Kontakt, Über mich, etc. Persönlich finde ich den zweiten Weg eleganter: Startseitenbild entfernen
Grüße,
Bernd

Mit Mediathek löschen gings weil die Seiten hatte ich in Papierkorb!! die Bilder aus Papierkorb sind nochda?? egal, jetzt läufts 😉

Hallo Mark,
die Beitragsbilder werden auf den Startseitenabschnitten gezeigt, obwohl die zugehörigen Seiten gelöscht sind? Das muss ein Bug sein.
Egal, diese Lösung funktioniert auf jeden Fall:
1 )Seite wiederherstellen
2) Beitragsbild löschen
3) Seite noch einmal in den Papierkorb legen
Aber wenn du sie schon aus der Mediathek gelöscht hast, kann kann ja nichts mehr passieren.

Hallo Bernd,

erstmal frohes neues Jahr. Auf der Suche nach Antworten habe ich Deinen Blog entdeckt, finde ich super!
Ich hoffe Du kannst mir Tipps geben auf meine Fragen
1. der Startseitentext erscheint 2 x , ich stehe vor einem Rätsel. Wie bekomme ich ihn da weg, ich hab doch bloss die eine Seite?

2. ist es möglich ohne Plugins die Beitragsgröße auf Ihre eigentlich Originalgröße anzupassen, ohne dass Inhalte abgeschnitten werden?

3. Im Februar 2017 kam das Thema Abstand zwischen Seitentitel und Seitentext. Wie kann man das anpassen?

Vielen Dank im Voraus!
LG
Angela

Hi Angela, ja ich hatte nen guten Start ins neue Jahr..
jetzt zu deinen Fragen, ich fange mal bei 2.) an:
Meinst du mit Beitragsgröße die Größe der Beitragsbilder?
Falls ja: Es ist nur möglich, die Größe der Beitragsbilder generell zu ändern, aber die Verwendung unterschiedlicher Beitragsbildergrößen ist in WordPress nicht vorgesehen. Ich würde in jedem Fall dazu raten, einheitliche Beitragsbildergrößen zu verwenden..
Zu Frage 1…. hast du mal nen Link?
Viele Grüße,
Bernd

Hallo Bernd,

vielen Dank für deinen Beitrag. Ich hab mit Advanced Twenty Seventeen letztes Jahr eine Seite gebaut und konnte die Sozialmedia Buttons in der Farbe ändern und hatte zu dem Color Picker auch noch ein Hex Code Fenster.

Nun hab ich dieses Jahr eine andere Seite angefangen und es gibt das Hexcode Fenster nicht mehr. Auch die Sozialmedia Button Farben kann ich nicht mehr ändern.

Kannst du mir sagen warum?

Hallo Bernd,

vielen Dank für deinen super Beitrag.

Ich habe eine Frage und hoffe du kannst sie mir beantworten.

Letztes Jahr konnte ich beim Advanced Twenty Seventeen Plugin zusätzlich zum Colorpicker auch noch den Hex Code eingeben und die Farben der Sozialmedia Buttons verändern.
Beides geht nun nicht mehr. Ich nutze Safari oder Firefox.

Kannst du mir sagen warum? oder was ich nun falsch mache?

Danke und Gruß

Benni

Hallo Benni,hab grad alles auf einem aktualisierten WordPress / Advanced Twenty Seventeen getestet. Bei mir wird das Hexcodefenster angezeigt:

Hexcode

1.) Farbe auswählen
2.) Hexcodefenster erscheint

Verdacht: Vielleicht hast du irgendein Plugin installiert, das Advanced Twenty Seventeen in die Quere kommt? Probier mal ein paar Deaktivierungen.. 😉
Grüße,
Bernd Schmitt

Ok, zur Unterscheidung:

  • 1-KLick-Installationen sind nur Spielzeug, du wirst da immer wieder auf Einschränkungen stoßen, die der Provider vorgenommen hat.
  • Richtiges WordPress funktioniert nur mit einer eigenen Installation.

Also: Runterladen bei wordpress.org und dann mit FileZilla hochladen…

Hallo Bernd,
ich hab nun WordPress komplett neu installiert. Leider ohne das gewünschte Ergebnis. Wenn ich das Plugin „Advanced Twenty Seventeen“ nicht Installiere, dann kann ich im Thema bei Individuelle Farbe auch einen HEX Code eingeben. mit dem Plugin kann ich weder im Plugin, noch im Thema den hex Code eingeben.
Hast du noch eine Idee?

Gruß

Benni

Hallo Benni,
hab jetzt leider auch keine Lösung.. eine Vermutung: Advanced Twenty Seventeen wurde seit über 12 Monaten nicht mehr aktualisiert, Twenty Seventeen selbst wird dagegen ganz gut gepflegt, die letzte Version stammt vom November 2017. Vielleicht gibt’s da Abstimmungsprobleme.
Was jetzt tun?
Kann mir gut vorstellen, dass es mit WordPress 5.0 nochmal ein Twenty Seventeen-Update geben wird (obwohl die WortdPress-Community auch ein Twenty Eighteen-Theme erwartet).
Ich würde jetzt dazu raten, jetzt bei Twenty Seventeen zu bleiben und mal auf die erste Beta von WordPress 5.0 zu warten. Veröffentlichung WordPress 5.0? Vielleicht im April, also die Beta.. 😉
Grüße,
Bernd Schmitt

Wow Bernd! Was ne starke Seite! Bin hier drauf gestoßen und ganz verblüfft von Deinem Knowledge, welches Du für uns alle parat hälst. Danke vielmals!

Bei diesem Theme breche ich mir gerade dezent die Finger. Wenn ich auf einen Blog-Seite einen Beitrage schreibe, dann findet sich auf der volle Artikel unter /blog (also die Seite hinter dem Menüpunkt Blog) und auch auf der jeweiligen Artikelseite /artikelname (welche man über die Seite Blog finden kann).

Schöner wäre es für mich, wenn auf /blog lediglich ein Teaser Text erscheint und der volle Text lediglich auf /artikelname

Hast Du eine Idee?

Hallo Martin,
vielen Dank für das positive Feedback. 😉
Ich hab diese Idee:
Vielleicht kannst du dein Problem lösen, indem du einen Beitrag über mehrere Seiten aufsplittest, das funktioniert über das Nextpage-Tag. Wie sooft bei WordPress hast du 2 Möglichkeiten, nämlich das manuelle Einfügen von Code oder die Verwendung eine Plugins. Hier findest du eine Übersicht der Plugins zum Aufsplitten von Beiträgen: https://de.wordpress.org/plugins/search/nextpage/.
Viele Grüße,
Bernd Schmitt

Hallo Bernd. Das ist ein toller Tip. Hast Du eine Ahnung wie sich dies auf das Google SEP und das Ranking bei Google auswirkt.
Ich habe noch dieses onteredsante Plugin mit Ajax gefunden
https://connekthq.com/plugins/ajax-load-more/add-ons/next-page/
Ich habe aber Sorge mir meine Positionierung bei Google zu versauen. Ich stehe mit den relevanten Suchbegriffen oft auf Platz 2 bis 4 der ersten Seite…da wird man risikoscheu….

Hallo Carsten,
aus SEO-Perspektive ist das schwer zu beurteilen… ein Beitrag von 1000 Wörtern ist bei Google wertvoller als zwei Beiträge mit 500 Wörtern. Andererseits erhöht sich mit der Aufsplittung von Beiträgen die Klickrate, was ja auch ein Kriterium ist. Ich wär da an deiner Stelle eher vorsichtig.
Zum Ajax Load More: Des Haupt-Plugin ist ja für die Infinite-Scroll-Funktion gedacht, nach meiner Meinung eine feine Sache. Es gibt aber noch einen zweiten Weg für Infinite Scroll, nämlich über Jetpack. Falls du Jetpack verwendest, geh mal auf Einstellungen > Theme Enhancements und schau mal, welchen Radiobutton du bei Unendlich Scrollen eingestellt hast…
Grüße,
Bernd
PS: Im Moment, so kurz vor WordPress 5.0, bin ich mit Quellcodeänderungen und Add-Ons sehr vorsichtig. Nicht, dass es da böse Überraschungen gibt.. 😉

Hallo Bernd. Danke. Ich hatte den Eindruck dass Jetpack die Seite langsam macht. Und schnelle https Seiten werden von Google im Ranking bevorzugt….
Aber du hast Recht. Kurz vor 5.0 lieber keine Experimente…
Danke für deinen Service . Carsten

Hallo Bernd, Du erklärst das alles so gut. Ich habe eine Frage, die mir noch keiner beantwortet hat. Bei den Blogeinträgen wird neben den Einträgen der Autor nicht gezeigt, auch kein Avatar. Da ich viele Autoren habe, wäre das wichtig. Was kann ich im zusätzlichem CSS eintragen?

Hallo,
danke für das Feedback, das höre ich als Fachbuchautor natürlich gerne .;)
Zur Frage: Standardmäßig werden in WordPress bei Blogbeiträgen (aber nicht bei statischen WordPress-Seiten) der Autorenname und das Datum angezeigt. Ist dies nicht der Fall, dann wurde die Anzeige deaktiviert, zum Beispiel über eine Einstellung „Autorenname ausblenden“ im Customizer. Allerdings ist diese Wahlmöglichkeit nicht im Customizer von Twenty Seventeen eingebaut. Deshalb meine Rückfrage: Hast du ein unverändertes Twenty Seventeen im Einsatz, oder vielleicht ein Plugin im Einsatz, das den Autorennamen ausblendet?
Zum Avatar:
Gehe mal auf Benutzer > Alle Benutzer anzeigen. Dort kannst du überprüfen, welche Avatar-Bilder deiner Autoren überhaupt in WordPress übernommen wurden:
Avatare
Haben deine Autoren Gravatar im Einsatz? Dann werden die bei Gravatar hinterlegten Bilder angezeigt, wenn ein Autoren-Acccount auf deiner WordPress-Website die passende E-Mail-Adresse hat. Passend = Die selbe Adresse wie bei Gravatar. Tipp: Die E-Mail-Adresse eines WordPress-Accounts lässt sich nachträglich ändern.
Check das mal alles ab, bevor du irgendwas in der CSS-Box des Customizers eingträgst. Hoffe, der Fahler lässt sich damit eingrenzen.
Grüße,
Bernd

Hallo Bernd,

bei twenty Seventeen ist es wohl so, dass die Autoren standardmäßig nicht angezeigt werden. Es gibt auch keinen Menüpunkt für das An- und Abschalten. Im Internet kursieren z.B. SCC-Schnipsel für twenty Seventeen, die man in das zusätzliche CSS kopieren kann. Funktioniert aber nicht. WP lehnt sie als fehlerhaft ab. Jemand schrieb, wie man das CSS an einer Stelle umschreiben kann. Ich finde diese Stelle aber nicht.

Das Plugin Show Hide Author bring leider auch keinen Erfolg. Und das Plugin Authors Widget zeigt mir wenigstens eine Liste aller in der rechten Spalte an. Aber dasitzt ja auch nicht die Lösung. Hast Du eine Idee für mich?

Hallo,
habe dein Großbuchstaben-Problem gelöst. 😉
Gehe auf Design > Editor, und dann in die CSS. Wühle dich bis zu dieser Stelle durch:
Großbuchstaben weg
Dann ersetze uppercase (Großbuchstaben) durch none.
Sei aber vorsichtig, du arbeitest direkt in der CSS. Aber für so eine Mini-Änderung braucht es nicht unbedingt ein Childtheme..
Zum anderen Problem: Stimmt, Twenty Seventeen zeigt keine Autoren an… aber das kriegeh wir auch noch gebacken .. 😉

PS: Nachtrag:
Du musst nicht direkt die CSS, gehe einfach in den Customizer und gib das hier in die CSS-Box ein

.site-title {
text-transform:none;
}

Breitenveränderung und Responsiveness.

Hallo Bernd,
ich habe die genutzte Breite größer gemacht:

.wrap {
max-width: 1500px !important;}

und das Ergebnis so zwischen Hauptspalte und Seitenspalte aufgeteilt:

/*For Content*/
.has-sidebar:not(.error404)
#primary {width: 70%}
/*For Sidebar*/
.has-sidebar #secondary {
width: 25%}

Das sieht zunächst sehr gut aus. Wenn ich jetzt auf meinem PC (Firefox für Linux) das Fenster verschmälere (bis ich etwa bei Smartphone-Breite bin), ist irgendwann so wenig Platz, dass die Seitenleiste ans untere Ende der Seite rutscht. Soweit korrekt.

Jetzt kommt das Problem: Die Seitenleiste nutzt nicht die gesamte Breite, die noch zur Verfügung steht, sondern offenbar nur die vorgeschriebenen 25%, was einen hässlichen, fast unlesbaren Spargeltext ergibt.

Mangels CSS-Kenntnissen habe ich einfach mal rumprobiert: Wenn ich der Seitenleiste statt 25% 320px gebe, habe ich das Problem gelöst, mir dafür aber ein anderes eingehandelt: Wenn ich das große PC-Fenster verschmälere, rückt die Seitenleiste (bevor sie nach unten rutscht) so dicht an die Hauptspalte heran, dass kein horizontaler Zwischenraum mehr besteht. Damit habe ich zwar die Handynutzer zufriedengestellt, nicht aber die PC-Nutzer, die ein nicht so breites Fenster verwenden.

Gibt es eine Lösung?

Mein Blog reisen2018.peter-preus.de ist derzeit in der Fassung mit den 70 und 25%.

Hallo Peter,
in der CSS-Datei Twenty Seventeen findest du wie in jedem responsive Theme die Abteilung Media Queries:
Media Queries
In die Media Queries musst du dich einarbeiten, um deine Veränderungen auf allen Anzeigegeräten gut aussehen zu lassen. Das Ganze ist halt auch eine Frage des Aufwands.
Meine Meinung: Wenn das Verhältnis zwischen Arbeitsaufwand und Verbesserung stimmt, dann wühl dich da durch. Ansonsten, investiere lieber an anderen Stellen im Blog und nutze Plugins für die Anpassung von Twenty Seventeen … wobei Advanced Seventeen auch schon länger nicht mehr updedatet wurde. Aber probiere vielleicht mal die Page Templates von Customize Twenty Seventeen? Nur mal so als Idee…
Grüße,
Bernd
PS: Customize Twenty Seventeen wird laufend aktualisiert, ebenso wie Twenty Seventeen selbst.

Erst mal danke. Leider muss ich noch mal nachfragen. Ich habe das Plugin Customize Twenty Seventeen installiert, es ist aktiviert, und dann? Bei Customize sehe ich nur „Anpassungen für BoldThemes Settings“ und das ist nur Kleinkram. Das Wesentliche habe ich offenbar noch nicht verstanden. Wie probiere ich ein Page Template von Customize Twenty Seventeen aus?

Sorry, habe Customize Twenty Seventeen nur für die Nutzung origineller Schriftarten im Einsatz… bei den Page Templates bin ich auf die Werbung reingefallen: Page Templates. Von Page Templates ist nix zu sehen, nur diese Anpassungen für Header und Menü-Positionen sind im Customizer möglich:
– Remove Entry Header (hab ich nicht probiert)
– Remove Fullscreen (gut, um den Riesenheader von Twenty Seventeen zu schrumpfen, nette Funktion)
– Platzierung der Menü-Positionen (links, rechts oder mittig)
… dafür soll ein Page Builder Plugin untergejubelt werden. Das ist zwar kostenlos, aber ich würde dir kurz vor WordPress 5, das ja mit Gutenberg einen eigenen Pagebuilder mitbringt, nicht zu einem Builder-Einsatz raten. Also noch mal: Du hast nix übersehen, im Customizer lassen sich nicht wirklich unterschiedliche Page-Templates auswählen.

Hallo Bernd, hätte auch eine Frage, die jetzt mit dem Theme eigentlich nichts zu tun hat.
Ich würde gerne auf einer Website eine passwortgeschützte Seite einrichten. auf der ein Formular zum Ausfüllen ist (bis hierher kein Problem). Mein Problem ist jetzt aber, dass ich das ausgefüllte Formular als PDF-Datei an mindestens zwei verschiedene E-Mail-Adressen schicken möchte, von denen eine über eine Formular-Feld eingegeben werden muss.
Hast du da einen Tipp für mich?
Viele Grüße Ernst

Hallo Ernst, da musst du mal bei den Extensions zu den großen Formularanbietern schauen, also Contact Form 7 oder Gravity Forms. Ich hab das hier entdeckt, scheint aber ein bisschen älter zu sein: Gravity Forms to PDF Selbst ausprobiert hab ich aber noch keine Formular-zu-PDF-Lösung..
Grüße,
Bernd

Wow, danke – das geht ja superschnell hier!
Ja, da werde ich suchen müssen- Gravity Forms muss ich mal versuchen, hoffentlich gibt es eine aussagekräftige Demo, wenn es funktioniert, bin ich auch gerne bereit, etwas dafür zu zahlen. Möchte aber zuerst sehen, dass es funktioniert.
Danke für deine schnelle Antwort

Hallo Bernd. Deine Webseite ist immer noch eine klasse Quelle rund um TwentySeventeen.

1. Ich habe noch einmal eine Frage, wie man auf der Startseite den Abstand zwischen den Menüs und den Texten (bzw. der Überschrift) aus den jeweils eingehängten Webseiten reduzieren kann. Twenty Seventeen sieht gut aus, aber ich möchte diesen Abstand oben und unten deutlich reduzieren um etwas weniger „weiße Farbe“ auf der Seite zu haben…. (und zwar oben und unten).
Siehe dieses Beispiel
https://insolvenzunternehmen.de/problem1/

Vielen Dank Carsten

Jo..hatte eben ein Problem…bei mir funktioniert es aber…mit Firefox und Opera…habe im Test sogar Cache gelöscht.. Keine Sorge, die Seite ist sicher… Im Übergang gibt es wohl gerade ein Problem mit dem Zertifikat…bis sich dieses auf allen Servern verteilt hat… Einfach mit Erweitert die Seicherheitsausnahmeregel bestätigen…dann geht es

Hallo Bernd. Zur Anpassung von Twenty Seventeen gibt es seit wenigen Tagen ein neues Plugin mit dem Namen
„Options for Twenty Seventeen“. Es ist brandneu, scheint zu funktionieren und bietet einige Features… Siehe selbst. Carsten

Habe gerade eine Anfrage erhalten: Wie baue ich eine zusätzliche Navigation ein? Am einfachsten geht das mit diesem Widget: Navigationswidget
Design > Widgets aufrufen und das Widgets in eine Widget-Area ziehen, dort erscheint dann eine zusätziche Navigationsleiste.

Hallo Ernst,
da loggst du dich in das Kundencenter deines Providers ein und verknüpfst deine Domain mit dem Ordner meinedomain.de/test (statt vorher meinedomain.de).

Was mir noch auffällt: du verwendest kein https? Lies dir dazu diesen Beitrag durch: https.

Grüße,
Bernd Schmitt

Hallo Bernd,
vielen Dank für deine schnelle Hilfe. Ich hab festgestellt, dass WP da etwas heikel ist. Die Verknüpfung allein war zu wenig, musste noch die Datenbank editieren (Tablle _options) und die .htaccess bearbeiten. Aber jetzt funktioniert alles (inklusive Umstellung auf https)
Herzlichen Dank auf jeden Fall für deine kompetente, schnelle Hilfe.
Viele Grüße Ernst

Hallo Ernst, hast dich tapfer durch alles durchgekämpft.. :). Grüße, Bernd Schmitt PS: Am besten mal diverse URLs ohne HTTPS eingeben, dann siehst du, ob die ht-access-weiterleitungen funktionieren…

Guten Tag!
Ich habe das Problem mit dem neuen Gutenberg Editor, dass die Aufzählungszeichen bei der Anlage eines Listen Blocks links neben dem Text ausgerückt sind (und nicht in einer Flucht mit dem Text oder eingerückt. Der Befehlt zum Einrücken in dem Block funktioniert auch nicht wirklich.
Wäre toll, wenn ich von euch einen Rat bekommen könnte, wie das Problem zu lösen ist.
Uwe Vogel

Hallo Bernd,
ich verwende für meinen neuesten Blog das Thema Twenty Seventeen. Da sich das Layout je nach Bildschirmformat automatisch ändert, kann man den Blog auch mit dem Smartphone einigermaßen zufriedenstellend ansehen. Mein Problem: Nützliche Informationen, die am PC in der Seitenleiste zu sehen sind, rutschen ans Seitenende, also so gut wie ins Nirwana. Kann man die betreffenden Widgets, bzw. ihren Inhalt, nach oben bringen? Wichtig wäre mir das Verzeichnis aller Beiträge (der neueste steht nämlich am Ende) und vielleicht noch das Widget für die Sprachübersetzung.
Gruß, Peter

Ich habe ein Twenty Seventeen Child Theme erstellt, bei dem ich per CSS ein paar optische Anpassungen gemacht habe – u.a. habe ich die Sidebar ausgebaut. Der eigentliche Inhalt der Seite fließt somit breiter. Genau genommen 904 Pixel. Doch es gibt ein Problem: Bilder die ich im Editor (Classic Editor, nicht Gutenberg) setze, sind im Frontend maximal 525 Pixel breit, selbst wenn ich Ihnen im Backend eine größere Renderung zuweise. Ich bin kein Programmierer, kann kein PHP (nur etwas HTML und CSS), aber ich habe gesehen, dass in der Functions PHP des Parent Theme irgendwo die „global content width“ auf 525 Pixel steht. Es ist mir bisher aber nicht gelungen, diese mit meinem Child Theme irgendwie zu überschreiben, so dass die Bilder bis zu 904 Pixel breit ausgegeben werden können – also der vollen Breite meines Inhaltsbereichs. Außerdem habe ich das Phänomen, dass ich Bilder im Backend-Editor nicht einfach mit der Maus an den Haltegriffen Skalieren kann. Bei aderen WordPress-Websites die ich benutze geht dies ohne Probleme.

Gibt es dazu eventuell Erkenntnisse, die sich mir PHP-Laien nicht erschließen?

Hallo ich habe eine Frage:
Ich habe mich erst vor kurzen mit WordPress und Twenty Seventeen befasst.
Hat alles so weit gut geklappt!
Ich habe nur etwas, was mich stört:
Auf jeder Seite die ich öffne oder anklicke steht nach dem Menue immer welche Seite das es ist,( Startseite, Termine,..).
Wie bekomme ich den Seitentitel weg?

Mit der bitte um Hilfe

Michael

Hallo Michael,
am einfachsten funktioniert es, wenn du den Titel rausnimmst. Einfach das Feld leer machen, bis da „Titel hier eingeben“ steht..
In der Besucheransicht wird dann nichts angezeigt (du musst dich dafür ausloggen, ansonsten siehts du „bearbeiten“).
Ohne Titel
Grüße,
Bernd

Hallo Bernd,
Danke für die schnelle Antwort!
das geht, habe es schon probiert, aber dann habe ich im Menue keine Einträge:

Da kommt dann „#7(kein Titel)“
Gibt es eine andere Möglichkeit?

HILFE

Gruß

Michael

Hallo Bernd,
vielen Dank erst einmal für Deine Informationen!
ich habe mehrere Internetseiten mit dem Theme twenty-seventeen erstellt und bei meiner jetzigen das Problem, dass die Startseite enger und auf dem Smartphone seeeehr eng angezeigt wird. ich hab auch schon herausbekommen, dass es trotz einspaltiger Einstellung sie doch zweispaltig zeigt. Wie kann ich das beheben?
http://www.massage-worpswede.de

Ich hoffe sehr, dass du mir helfen kannst!
Viele Grüße,
Silke

Hallo Bernd, mit großen Interesse habe ich hier durchgeguckt. Mein Kompliment. Ich habe meine Seite auch mit 2017 gebaut. Und habe auch viele Fragen. Meine erste: nutzt du noch immer advanced twenty seventeen?
Schönen Gruß Susanne

Hallo Bernd,

seit einiger Zeit hat sich am rechten Rand unserer Seite https://gersbeck-online.de ein schmaler Streifen eingeschlichen, der das gesamte Layout nach links verschiebt. Ich weiß weder, wo er herkommt, noch, wie ich ihn entfernen kann. Auf meinem Android 8-Phone und einem uralten IE erscheint er nicht.

Hast du eine Idee zur Abhilfe?

Gruß aus Köln

Ralf

Hallo Ralf,
hab deine Site mal gecheckt, auf meinem Android 8.1 (Google Nexus 6p) ist alles bestens, bzw. ich bemerke nix Störendes.. ckeck noch mal ein anderes Handy. Falls das Problem nur auf 1 % der Devices auftritt, dann lass es lieber so.. ansonsten optimierst du im Kreis herum (und dann klappt irgendwas auf iOS nicht.. 😉 )
Viele Grüße,
Bernd Schmitt

Hallo Bernd! Ich habe eine Webseite mit Blog mit 2017 gemacht. Mir scheint – nach einigem googeln – dass dieses Theme keine Kommentare unterstützt? Also dass man auf Blogbeiträge nicht kommentieren kann? Habe eigentlich alles aktiviert, was aktiviert sein sollte….
Danke u liebe Grüße, Nadine

Hallo Nadine,
es gibt eigentlich keine Themes, die keine Kommentare unterstützen.. und bei nem Standardtheme wie Twenty Seventeen dürfte es da keine Probleme geben.
Welche Plugins hast du denn am laufen? Vielleicht zoffen sich da zwei.. gibt manchmal Plugin-Unverträglichkeiten bei WordPress.

Hello again, wenn ich schon am Fragen bin;) : Wenn ich einen Blog Post verfasse, dann erscheint der ja automatisch unter dem Menüpunkt „Blog“. Da ich zwei Blog-Themen habe, würde ich diesen Menüpunkt gerne in zwei Unterpunkte teilen, also dass man auf „Blog“ klickt und dann wählen kann entweder (in meinem Fall) „Photography“ oder „Fashion“. Und dass dann nicht einfach die ganzen Blogbeitrage untereinanderstehen, sondern in so einer Übersicht mit einem Foto und den ersten zwei Sätzen mit „weiterlesen“ zum anklicken.. weißt du wie ich`s meine? Geht das mit 2017 oder müsste ich dazu ein anderes Theme wählen, das diese Blog-Artikel-Übersichts-Bausteine schon drin hat?
Liebe Grüße!!

Perfekt, das hab ich gemacht! Ist dir zufällig noch was zu den Comments eingefallen? Könnte es an Jetpack liegen? Jemand hat das mal vorgeschlagen, aber ich dachte was hat Jetpack mit Comments zu tun? Ich habe das eigentlich im Abo, also ich bezahle jeden Monat dafür, wegen den Happy Engineers, die mir schon so oft geholfen haben… 😉

Hallo schon wieder;) Ich habe inzwischen mehr herausgefunden: Es liegt an Elementor: Wenn ich den Post mit Elementor baue, gibt`s keine automatisch angezeigte Comment Section. Wenn ich mit dem normalen WP page builder baue, erscheint am Ende „Leave a comment“…. Ich kann nicht zufällig einen Post halb mit Elementor bauen und halb mit WP oder? Suche nach Wegen, wie ich trotzdem Elementor für mein Layout verwenden kann, aber dann WP überlisten kann mir trotzdem das Comment-Feld anzuzeigen…. Finde ich kann mit dem default WP Editor nicht so viel anfangen… Bei Ideen gerne melden;) Danke jedenfalls mit den Plugin Tipps, das war tatsächlich das Problem – muss mich jetzt nur noch auf die Suche nach der besten Lösung machen .

Sorry I hätte noch eine Frage: Kann man die Sidebar, die neben den Blog-Posts ist schmäler machen? Die nimmt ja ein gutes Drittel der Seite ein und mein armer Post ist total gequetscht… Bzw mit dem Elementor Pagebuilder konnte ich das so machen, indem ich Full Width und Stretch Section im Layout ausgewählt habe, dass das Headerbild einfach unter dem Sidebar Text lag und der restliche Blogtext über die ganze Seite ging – ohne dass ein Drittel der Seite von der (weiter unten ja leeren) Sidebar eingenommen war…. LG!!

Kurzes Update falls einer deiner Leser das gleiche Problem hat wie ich: Wenn ich Standard Template und NICHT Elementor Full Width unter dem Reiter „Post Attributes“ aktiviere, kann ich mit Elementor den Post bauen und trotzdem die Seite bauen 🙂 !!
Jetzt versuche ich noch das Sidebar Problem zu lösen… Tipps wilkommen!! 🙂

Hallo Bernd, liest du eigentlich die E-Mails, die auf bs (at) onlineshop-diy.de eintrudeln? Ich möchte auf keinen Fall lästig sein, sondern mich nur versichern, dass meine E-Mail dich erreicht.
Viele Grüße
Ernst

Kommentar verfassen