Reihenfolge von div-Elementen ändern

[thobie]

Ich habe jetzt zwei Ansätze versucht. Beide erfolglos.

1. JetPack-Code in der single.php.

Mir gelingt es, bei Aktivierung der automatischen Related Posts durch einen Code von der unten genannten Support-Seite von JetPack als php-Snippet deren Anzahl von voreingestellten drei Posts auf sechs Post zu erhöhen.

Mir gelingt es auch, wie ebenfalls auf dieser Seite beschreiben, die automatische Darstellung der Relaxed Posts wiederum durch einen Code als php-Snippet zu unterbinden.

Mir gelingt es jedoch nicht, die Related Posts dann durch ein Einfügen eines php-Codes in die single.php – also das Template für einen einzelnen Beitrag – am unteren Ende eines Blogbeitrags vor all den kleinen Buttons (PDF/Teilen/Like …) einzublenden, wie es ebenfalls auf der Seite genannt wird. Entweder erscheint der Code als Text in einem Blogbeitrag, dann ist er vermutlich falsch platziert. Und platziere ich ihn vermutlich richtig, werden keine Related Posts angezeigt.

https://jetpack.com/support/related-posts/customize-related-posts/

2. CSS-Code mit Flex-Layout

Laut der Erklärung auf dieser Seite:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#order

sollte der CSS-Code in etwa so lauten, soweit ich das verstanden habe.

.container {
display: flex;
flex-direction: column;
}
.item {
order: 2;
}
.title {
order: 1;
}
div.text {
order: 3;
}

Problematisch für mich ist, dass ich dem HTML-Code entnommen habe, dass da mehrere Container ineinander geschachtelt sind. Somit passt manch ein div-Element nicht mehr zu einem anderen unter- oder übergeordneten div-Element, weil es sich eben in einem anderen Container befindet.

Zudem haben die von mir anzuordnenden div-Elemente alle keine id, sondern nur eine class. Daher weiß ich nicht, ob dieser CSS-Code, wie ich ihn konstruiert habe, überhaupt fehlerfrei ist oder nicht. Allerdings ergibt sich keine Änderung bei Einfügen des CSS-Codes für die Reihenfolge der Elemente, nur der Zeilenabstand des Fließtexts vergrößert sich noch.

.pf-content {
display: flex;
flex-direction: column;
}
.printfriendly pf-button pf-button-content pf-alignleft {
order: 2;
}
.sharedaddy sd-sharing-enabled {
order: 3;
}
.sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded {
order: 4;
}
.jp-relatedposts {
order: 1;
}

Sorry für meine Unverständnis, ich habe keine Informatik studiert und eben in HTML, PHP und CSS nur rudimentäre Kenntnisse.

 

[thobie]

Was Du machen kannst ist:

.entry-content {
    display: flex;
    flex-direction: column;
}

.jp-relatedposts {
    order: 1
}

.sharedaddy {
    order: 2;
}

Bingo, das gefällt mir schon einmal gut.

Die PDF-/Print-/Mail-Buttons werden durch ein Plugin positioniert. Ich habe in der Konfiguration nur die Option, diese Buttons über oder unter den Blogbeitrag zu positionieren.

Aber Dein Lösungsvorschlag gefällt mir schon einmal gut. Jetzt müsste man nur noch diese Buttons unter die Related Posts bekommen.

 

[DirtyWorld]

Hi, mit einem Information Stu du ihm kommst da auch nicht weiter den das Studium hat was mit Mathe zu tun und nicht primär mit programmieren.

Bei Klassen in Wp ist es immer etwas problematisch wenn man nicht weiß wo die nich angewendet werden.

Den Dein Css hat Syntax Fehler. Klassen werden immer mit Punkt referenziert.
Und wenn man Klassen miteinander verbinden will werden diese in CSS ohne Leerzeichen geschrieben und eben mit Punkt. Befindet sich ein Leerzeichen dazwischen beziehst Du Dich auf ein Kindelement.

Die Printbuttons wirst Du dann wahrscheinlich nur über ein verändern des Plugins hinbekommen.
Oder per JavaScript.

 

[Difool]

Die PDF-/Print-/Mail-Buttons werden durch ein Plugin positioniert. Ich habe in der Konfiguration nur die Option, diese Buttons über oder unter den Blogbeitrag zu positionieren.

Die "Jedi-Macht" bei Wordpress ist u.a. die functions.php – bzw. die Möglichkeiten, die diese Datei im System bietet.
Plugins "machen" eigentlich nicht anderes, als diese functions.php.
Allerdings ist die Theme-eigene functions.php in der Abfragepriorität an erster Stelle und bietet so die Option andere Funktionen
mit der child-theme functions.php überschreiben zu können.

Vom Prinzip her könntest du den Part des Plugins raussuchen, wo diese Buttons gesetzt werden und dies kopieren und eine eigene Funktion damit setzen,
die im Markup dann woanders ausgeliefert wird.