Reihenfolge von div-Elementen ändern

thobie

Aktives Mitglied
Thread Starter
Dabei seit
23.04.2006
Beiträge
1.063
Reaktionspunkte
187
Moin, Moin,

ein Forenteilnehmer hat heute etwas zu WordPress im Forum veröffentlicht, da sah ich mich animiert dazu, eine Frage hier anzuschließen.

Ich nutze die Option „Ähnliche Inhalte“ von JetPack in den Beiträgen meines Foodblogs.

Beispielseite: https://www.nudelheissundhos.de/2022/02/26/obst-torte-2/

JetPack platziert diese sechs ähnliche Inhalte unter den Inhalt des Blogbeitrags.

Oder besser gesagt, unter
  • Blogbeitrag
  • Werbung
  • Drucken
  • Teilen
  • Like,
aber vor den
  • Schlagworten
Gibt es eine Möglichkeit, die Position dieser ähnlichen Inhalte zu ändern?

Die fünf oben genannten Positionen, von Werbung bis Schlagworte, werden mit einem div-Element positioniert. Die ähnlichen Inhalte werden zwar von JetPack automatisch positioniert, aber ebenfalls mit einem div-Element.

Also stellt sich mir die Frage, ob man die Reihenfolge von div-Elementen ändern kann? Das sollte doch mit einem PHP- oder CSS-Code möglich sein?

Optimal wäre es, wenn ich die ähnlichen Inhalte über der Werbung und allen Social Media Positionen platzieren kann.

Grüße aus Hamburg

Thobie
 
Die DIV-Elemente werden schlicht in der Reihenfolge gerendert in der sie im HTML-Code stehen.

Natürlich kann man den DIVs eine ID geben und dann mit Javascript vor oder während des Anzeigens die Anordnung verändern. Das aber macht die Seite langsamer und löst Folgeprobleme aus - ohne nennenswerten Grund würde ich das also eher nicht tun. Zumal bei Dir ja noch ein Wordpress dazwischen ist das ebenfalls mit rendert.

Ich würde also zunächstmal behaupten im Falle von Wordpress liegt es an der Reihenfolge in der dort DIVs gerendert und dargestellt werden sollen. Sprich: am Template.
 
  • Gefällt mir
Reaktionen: mausfang
Die DIV-Elemente werden schlicht in der Reihenfolge gerendert in der sie im HTML-Code stehen.

Natürlich kann man den DIVs eine ID geben und dann mit Javascript vor oder während des Anzeigens die Anordnung verändern. Das aber macht die Seite langsamer und löst Folgeprobleme aus - ohne nennenswerten Grund würde ich das also eher nicht tun. Zumal bei Dir ja noch ein Wordpress dazwischen ist das ebenfalls mit rendert.

Ich würde also zunächstmal behaupten im Falle von Wordpress liegt es an der Reihenfolge in der dort DIVs gerendert und dargestellt werden sollen. Sprich: am Template.
Innerhalb eines Grids wäre es erst einmal vollkommen egal in welcher Reihenfolge die Container im Markup angeordnet sind, denn die Reihenfolge wird hierbei dann via CSS definiert.
Also stellt sich mir die Frage, ob man die Reihenfolge von div-Elementen ändern kann? Das sollte doch mit einem PHP- oder CSS-Code möglich sein?
Hier muss es eigentlich bereits reichen das HTML-Template Deines Themes zu bearbeiten und die DIV-Container dann tatsächlich entsprechend so in der Reihenfolge anzupassen wie Du diese angezeigt haben möchtest. Jedoch weiß ich nicht ob Dein Theme bereits solche Funktionen beinhaltet die "Frontpage" leicht zu bearbeiten. Hast Du ein Theme-Framework vorgestellt? Sowas wie WPBaker o.Ä.?
 
  • Gefällt mir
Reaktionen: wegus
Innerhalb eines Grids wäre es erst einmal vollkommen egal in welcher Reihenfolge die Container im Markup angeordnet sind, denn die Reihenfolge wird hierbei dann via CSS definiert
Danke! Bin nicht umsonst backend developer , Frontend können andere besser :)
 
  • Gefällt mir
Reaktionen: emmerimre
Danke! Bin nicht umsonst backend developer , Frontend können andere besser :)
//OT Ich bewege mich seit Jahren sowohl im Backend als auch im Frontend. Was 1997 mit MS Frontpage angefangen hat nahm die letzten Jahrzehnte Überhand :D Setzt Du auf ein Framework oder Roots-Developer?
 
Innerhalb eines Grids wäre es erst einmal vollkommen egal in welcher Reihenfolge die Container im Markup angeordnet sind, denn die Reihenfolge wird hierbei dann via CSS definiert.

Hier muss es eigentlich bereits reichen das HTML-Template Deines Themes zu bearbeiten und die DIV-Container dann tatsächlich entsprechend so in der Reihenfolge anzupassen wie Du diese angezeigt haben möchtest. Jedoch weiß ich nicht ob Dein Theme bereits solche Funktionen beinhaltet die "Frontpage" leicht zu bearbeiten. Hast Du ein Theme-Framework vorgestellt? Sowas wie WPBaker o.Ä.?
Ich habe bei einer anderen Website mit WP mithilfe eines CSS-Codes mit grid erfolgreich die Reihenfolge der Slideshow im Kopf und des Menüs darüber vertauscht. Also sollte das mit einem grid-Raster durchaus funktionieren. Nur ist mir der Code nicht klar.

Alternativ wurde mir auch schon gesagt, dies ginge damit:
Code:
display: flex;
flex-flow: column;
womit man auch einfach die Reihenfolge der div-Elemente anordnen könnte. Aber auch da bin ich mit dem Code nicht weitergekommen.
 
Wenn du ein Child-Theme hast, dann kannst du da die single.php (Datei für die Anzeige der einzelnen Artikel) bearbeiten.
"Jetpack" hat sicherlich einen php-Shortcode für "related posts".

Aber "jetpack" ist auch derbe ressourcenfressend und kann die Website langsam machen.
Eine "related posts"-Funktion kann man auch mit 2 Snippets im Theme verbauen ohne Plugin.
 
Ich habe bei einer anderen Website mit WP mithilfe eines CSS-Codes mit grid erfolgreich die Reihenfolge der Slideshow im Kopf und des Menüs darüber vertauscht. Also sollte das mit einem grid-Raster durchaus funktionieren. Nur ist mir der Code nicht klar.

Alternativ wurde mir auch schon gesagt, dies ginge damit:
Code:
display: flex;
flex-flow: column;
womit man auch einfach die Reihenfolge der div-Elemente anordnen könnte. Aber auch da bin ich mit dem Code nicht weitergekommen.

Wenn das Markup bereits auf ein CSS-Grid aufbaut, ist das Anordnen dann nicht mehr wirklich "schwer". Die Alternative, die Dir genannt wurde, ist auch nur dann anwendbar, wenn es sich überhaupt um Flex-Elemente/ein Flex-Konstrukut handelt.
 
  • Gefällt mir
Reaktionen: wegus
Wenn du ein Child-Theme hast, dann kannst du da die single.php (Datei für die Anzeige der einzelnen Artikel) bearbeiten.
"Jetpack" hat sicherlich einen php-Shortcode für "related posts".
Das ist eine interessante Alternative für die Einbindung der related posts. Und JetPack hat tatsächlich einen Shortcode für die related posts. Und mit einem php-Snippet kann man vorher die automatische Einbindung in der bisherigen Weise unterbinden.

Ich habe davon bisher Abstand genommen, diesen Shortcode manuell in neue Beiträge einzubinden, denn somit wären die related posts nur in neuen Beiträgen vorhanden, nicht jedoch in alten Beiträgen, wo sie derzeit mit der automatischen Einbindung durchaus vorhanden sind. Aber ihn in die php-Datei für die einzelnen Beiträge einzubinden ist eine Alternative und probiere ich einmal aus.
Aber "jetpack" ist auch derbe ressourcenfressend und kann die Website langsam machen.
Nein, JetPack macht in seinen Hilfeseiten zum Plugin darauf aufmerksam, dass JetPack diese related posts auch bei sehr vielen Beiträgen in der Cloud abarbeitet und weist ausdrücklich darauf hin, dass die Site dadurch nicht langsam wird.
Eine "related posts"-Funktion kann man auch mit 2 Snippets im Theme verbauen ohne Plugin.
Das ist mir nicht bekannt, ich wüsste nicht, wie ich das codieren soll.
 
Wenn das Markup bereits auf ein CSS-Grid aufbaut, ist das Anordnen dann nicht mehr wirklich "schwer".
Ich weiss nicht, ob das Theme auf einem Grid aufbaut. Mir wurde diese Vorgehensweise nur bei der anderen Site empfohlen, die aber mit einem anderen Theme arbeitet.
Die Alternative, die Dir genannt wurde, ist auch nur dann anwendbar, wenn es sich überhaupt um Flex-Elemente/ein Flex-Konstrukut handelt.
Auch hier weiss ich nicht, ob das Theme auf Flex-Elementen aufbaut.
 
Wo sollte denn jener Block platziert werden?

Bildschirmfoto 2022-03-03 um 07.13.16.png


Im Übrigen ist Dein Markup gravierend fehlerhaft; Offene Container (/ fehlt), !DOCTYPE-Notation im laufenden Dokument (Innerhalb eines DIV), dafür aber an der richtigen Selle (Erste Zeile im Dokument) spärlich und unvollständig.
 
Genau, diese ähnlichen Rezepte sollen unter den Text des Blogbeitrags – endet immer mit „Guten Appetit!“ – und über alle Social Media Buttons und Schlagwörter.

Von den bisher in einigen Beiträgen platzierten Werbefeldern über den Ähnliche Rezepte habe ich mich verabschiedet. Zum einen war das wirklich Schrottwerbung (wird vom Dienstleister so vorgegeben), zum anderen habe ich darüber bisher noch 0 € verdient.
 
Genau, diese ähnlichen Rezepte sollen unter den Text des Blogbeitrags – endet immer mit „Guten Appetit!“ – und über alle Social Media Buttons und Schlagwörter.

Von den bisher in einigen Beiträgen platzierten Werbefeldern über den Ähnliche Rezepte habe ich mich verabschiedet. Zum einen war das wirklich Schrottwerbung (wird vom Dienstleister so vorgegeben), zum anderen habe ich darüber bisher noch 0 € verdient.

Dann muss dieser Block mitsamt Inhalt ...
HTML:
<div id='jp-relatedposts' class='jp-relatedposts' >
    ...
</div>
... über ...
HTML:
<div class="printfriendly pf-button pf-button-content pf-alignleft">
    ...
</div>
Ich weiß leider nicht in welcher Datei der JP-Block platziert worden ist, dafür fehlt mir die Einsicht.
 
Genau, diese ähnlichen Rezepte sollen unter den Text des Blogbeitrags – endet immer mit „Guten Appetit!“ – und über alle Social Media Buttons und Schlagwörter.

Von den bisher in einigen Beiträgen platzierten Werbefeldern über den Ähnliche Rezepte habe ich mich verabschiedet. Zum einen war das wirklich Schrottwerbung (wird vom Dienstleister so vorgegeben), zum anderen habe ich darüber bisher noch 0 € verdient.

Bildschirmfoto 2022-03-03 um 16.23.21.png


Als Hinweis, weil betroffen: AUCH in diesem Container sind eklatante Markup-Fehler:

Ein Container geöffnet (div), jedoch zwei mal geschlossen. Damit beendest Du einen vorherigen Container bereits jetzt.

Bildschirmfoto 2022-03-03 um 16.23.10.png


Skelett-Tag's mitten im Markup, hat an dieser Stelle wirklich nichts zu suchen.

Bildschirmfoto 2022-03-03 um 16.22.43.png
 

Anhänge

  • Bildschirmfoto 2022-03-03 um 16.23.21.png
    Bildschirmfoto 2022-03-03 um 16.23.21.png
    4,4 KB · Aufrufe: 61
Dann muss dieser Block mitsamt Inhalt ...
HTML:
<div id='jp-relatedposts' class='jp-relatedposts' >
    ...
</div>
... über ...
HTML:
<div class="printfriendly pf-button pf-button-content pf-alignleft">
    ...
</div>
Ich weiß leider nicht in welcher Datei der JP-Block platziert worden ist, dafür fehlt mir die Einsicht.
Ja, Du Schlaukopf, so weit bin ich über die Darstellung des Codes in Safari auch schon längst gekommen. Ich kenne die einzelnen Container, die die Related Posts, Druckbuttons, Social Media-Buttons, Like-Buttons und Schlagwörter anzeigen lassen.

Aber das wird vom Theme automatisch generiert. Ich habe keinen Einfluss darauf, wo diese Container positioniert werden. Ich kann nur den automatischen JetPack-Code komplett deaktivieren und ihn manuell entweder in einen Beitrag oder in das Template eines Beitrags einfügen.

Und die Alternative, die ich eben suche, ist ein PHP- oder CSS-Code, der die Reihenfolge der Container ändert und den ich als Snippet in das Theme einfügen kann.
 
Ja, Du Schlaukopf, so weit bin ich über die Darstellung des Codes in Safari auch schon längst gekommen. Ich kenne die einzelnen Container, die die Related Posts, Druckbuttons, Social Media-Buttons, Like-Buttons und Schlagwörter anzeigen lassen.

Aber das wird vom Theme automatisch generiert. Ich habe keinen Einfluss darauf, wo diese Container positioniert werden. Ich kann nur den automatischen JetPack-Code komplett deaktivieren und ihn manuell entweder in einen Beitrag oder in das Template eines Beitrags einfügen.

Und die Alternative, die ich eben suche, ist ein PHP- oder CSS-Code, der die Reihenfolge der Container ändert und den ich als Snippet in das Theme einfügen kann.

Ich bin überzeugt davon, dass ein Webseitenbetreiber mit einem so miserablen Markup sicherlich nicht in der Situation ist sich einen Affront gegen jemand leisten zu können der Dein Problem in zwei Minuten ad acta legen könnte :)

So long, viel Spaß bei Deinem "Projekt".
 
  • Gefällt mir
Reaktionen: wegus und mausfang
Nur mal um damit es keine Missverständnisse gibt:
Das ist das Flexbox Boxmodel
CSS:
display: flex;
flex-flow: column;

Das ist das Grid Boxmodel:
Code:
display: grid;
grid-template-rows:200px 1fr 100px;
grid-template-columns:25% 25% 25% 25%;

Weil hier etwas mit den Begriffen falsch umgegangen wurde.

So wie ich das sehe, bekommst Du das nicht nur per CSS hin. Zumindest das Printfriendly Plugin wirst du so da nicht rausbekommen.
Sauber wäre es eh dafür zu sorgen das im Template die entsprechenden Plugins an der richtigen Stelle ausgegeben werden.

Was Du machen kannst ist:

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

.jp-relatedposts {
    order: 1
}

.sharedaddy {
    order: 2;
}

Grüße
 
Zurück
Oben Unten