1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Jeder Artikel soll eine eigene MP3 Datei vor der Überschrift haben.

Dieses Thema im Forum "Design" wurde erstellt von OstfriesenProjekt, 24. Januar 2020.

  1. OstfriesenProjekt

    OstfriesenProjekt New Member

    Registriert seit:
    24. Januar 2020
    Beiträge:
    4
    Zustimmungen:
    0
    Hallo,

    wir haben einen Wordpress Blog mit Kurzgeschichten.

    Wie bekommen wir es hin, dass jeder Beitrag oben links ein Symbol anzeigt?

    Die Kurzgeschichten werden als MP3 eingesprochen und sollen über "ompact WP Audio Player" darüber abgespielt werden. Aber ich habe zu dem Bereich oben links keinen Zugang. Gibt es da eine einfache Möglichkeit oder muss ich in die PHP Datei rein? Und wie gibt man dann in jedem Beitrag die MP3-URL an?

    Bildschirmfoto 2020-01-24 um 22.22.45.png
     
    #1 OstfriesenProjekt, 24. Januar 2020
  2. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Mit der Anmeldung ins Forum hast du die Forenregeln zur Kenntnis genommen - aber anscheinend nicht gelesen!
    Mit einem Link zu deinem Anliegen könnte sich jemand finden, der sich da auskennt und dir weiterhilft ....
    Ohne weitere Angaben -siehe Forenregeln, besonders (II) ist alles ein Ratespiel und wer will das?
     
    #2 SEpp55, 25. Januar 2020
    OstfriesenProjekt gefällt das.
  3. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.361
    Zustimmungen:
    589
    Das WordPress Plugin erzeugt einen sog. Shortcode.
    [sc_embed_player fileurl=“URL OF THE MP3 FILE“]

    Diesen Shortcode kannst du nur in einem Artikel verwenden und nicht in einer Überschrift oder vor einer Überschrift.

    PHP für Shortcodes ist eigentlich relativ einfach - wirklich! dies bringt dich aber nicht viel weiter, weil du ja ein zusätzliches Eingabefeld

    für die MP3-URL benötigst.

    Mit Advanced Custom Fields könntest du dir ein zusätzliches Feld erstellen
    https://de.wordpress.org/plugins/advanced-custom-fields/

    mit https://www.awesomeacf.com/ wir einen MP3 Player für AFC holen
    =>
    https://github.com/virgo79/acf-audio-video-player

    und mit etwas PHP in dem Template die Ausgabe steuern...
     
    #3 r23, 25. Januar 2020
    OstfriesenProjekt gefällt das.
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.681
    Zustimmungen:
    1.786
    Alternativ könnte man ggf. diesen "Playbutton" auch per CSS an eine passendere Stelle verschieben.

    Leider fehlen Angaben wie z.B. ein Link zur Seite, siehe auch der Hinweis von @SEpp55
     
    #4 b3317133, 25. Januar 2020
    OstfriesenProjekt gefällt das.
  5. OstfriesenProjekt

    OstfriesenProjekt New Member

    Registriert seit:
    24. Januar 2020
    Beiträge:
    4
    Zustimmungen:
    0
    Vielen herzlichen Dank für eure Beiträge.

    Dann möchte ich an dieser Stelle die benötigten Informationen nachreichen.

    Adresse zum Blog (URL) = Katies-Kurzgeschichten
    WordPress-Version = Version 5.3.2
    Verwendetes Theme, verwendete Plugins = Wir verwenden: Twenty FifteenVersion: 2.5 mit den Erweiterungen: Compact Audio Player und WP-Matomo

    Ich habe für euch auch einen BeispielBeitrag erstellt.

    Das mit dem CSS habe ich verstanden. Würde dass den gehen? Wie würde so etwas ausschauen? Geht sowas auch auf der Hauptseite wo die ganzen Überschriften stehen? Da würden dann viele Buttens sein.
     
    #5 OstfriesenProjekt, 1. Februar 2020
  6. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.681
    Zustimmungen:
    1.786
    Anhand des HTML-Codes im Beispielbeitrag könnte man z.B. sowas machen, das hier schiebt in einzelnen Beiträgen den Button links vor die Überschrift, eingeben unter Design > Customizer > Zusätzliches CSS:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Für die "responsive" Darstellung des Themes bei schmalen Bildschirmen würde noch etwas weiterer Code benötigt.

    Darüber hinaus gibt es natürlich noch viele andere Varianten und Möglichkeiten.

    Mit WordPress selbst hat der Ansatz mit reinem CSS eher nichts zu tun.

    Ergänzung: CSS noch etwas vereinfacht.
     
    #6 b3317133, 1. Februar 2020
    Zuletzt bearbeitet: 1. Februar 2020
    OstfriesenProjekt gefällt das.
  7. OstfriesenProjekt

    OstfriesenProjekt New Member

    Registriert seit:
    24. Januar 2020
    Beiträge:
    4
    Zustimmungen:
    0
    1.000 Dank. Du hast mir das so gut erklärt, dass ich es sofort verstanden habe und auch umsetzen konnte.

    Nun frage ich mich, wie ich das auf der Hauptseite mit allen Artikeln mache. Also anstatt ".single-post" muss ich sicherlich etwas anderes verwenden, oder?

    Und dann noch in der Mobilen Version. Da würde ich es weg lassen, oder so. Da darf es ruhig ganz am Anfang sein.

    PS: Ich habe es mit top: 18%; und left: 2%; gemacht. Dadurch habe ich zumindest bis auf die kleinste Handy Ansicht den Knopf auf eine Gute Position bekommen. Bis auf die aller kleinste Mobile Ansicht, schaut es schon ganz gut aus.
     
    #7 OstfriesenProjekt, 1. Februar 2020
  8. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.681
    Zustimmungen:
    1.786
    Die Hauptseite hat die Klasse blog im body Element, also z.B. ".blog" statt ".single-post" verwenden.

    Bei top sollte man keine % Angabe verwenden, da sich das dann je nach Länge/Höhe des Beitrags unterschiedlich auswirkt.

    Für die mobilen bzw. weiteren Versionen hat das Theme einige sog. Breakpoints, für die man jeweils per sog. CSS Media Query (google) eigene Dinge definieren kann, siehe z.B. Punkt 16 in der style.css Deines Themes:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Die Standardwerte in Twenty Fifteen sind für die kleinsten Bildschirme voreingestellt und werden dann je breitere Bildschirme jeweils mit einem Media Query überlagert.

    Das sind alles Wordpress-unabhängige CSS Grundlagen, vielleicht findest Du auch ein gutes YouTube Tutorial zu dem Thema o.ä.
     
    #8 b3317133, 1. Februar 2020
    OstfriesenProjekt gefällt das.
  9. OstfriesenProjekt

    OstfriesenProjekt New Member

    Registriert seit:
    24. Januar 2020
    Beiträge:
    4
    Zustimmungen:
    0
    Es hat sofort funktioniert. Ich hab dass einfach um ".blog" ersetzt. Vielen herzlichen Dank für deinen Einsatz und dein Verständnis. Es funktioniert schon mal. Ich weiß nun wie. Und den Rest mache ich nächste Woche.
     
    #9 OstfriesenProjekt, 7. Februar 2020
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden