Hallo. Ich fange gerade erst mit podlove an.
Gestern Abend alles schön gemacht. Passte.
Heute Morgen, will ich weitermachen, da ist das Feld vom Player leer?!
Dafür ist bei den Episoden, jetzt nicht mehr der einzelne drin / sondern der für alle Episoden?!
Was kann es sein? Bitte um Hilfe. Die Seite muss online. Danke
Tobias
Kannst Du mal ein paar Screenshots posten, so dass wir sehen können, wie es derzeit aussieht?
Benutzt Du Shortcodes um den Player anzuzeigen und wenn ja, welchen und wo hast Du ihn eingegeben?
Welches Theme benutzt Du? Vielleicht gibt das ein paar Hinweise auf das Problem.
Hey, garn icht gesehen… Ich nutze einen Shortcode.
[podlove-template id=„latest-episode“]
Der code ist im Prinzip der:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Der Podcast</title>
</head>
<body>
<!-- Weiches Scrollen & Effekte -->
<style>
html {
scroll-behavior: smooth;
}
/* Button-Styling */
.button-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5em;
margin: 2em auto;
max-width: 600px;
}
.button-row a {
flex: 1 1 200px;
text-align: center;
background-color: #2e2e2e;
color: #fff;
padding: 0.8em 1.5em;
border-radius: 30px;
text-decoration: none;
font-family: Georgia, serif;
font-size: 0.9em;
transition: all 0.3s ease;
}
/* ✨ Mouseover Effekt */
.button-row a:hover {
background-color: #444;
transform: scale(1.03);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Fade-In Animation */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
// ✨ Fade-In beim Scrollen aktivieren
const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold: 0.1,
rootMargin: "0px 0px -50px 0px"
};
const appearOnScroll = new IntersectionObserver(function (entries, observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
entry.target.classList.add('visible');
observer.unobserve(entry.target);
});
}, appearOptions);
faders.forEach(fader => appearOnScroll.observe(fader));
// 📅 Zeitstempel-Helferfunktion
function getTimeLabel() {
const now = new Date();
return now.toLocaleString('de-DE');
}
// 🎧 Matomo-Tracking: Podcast-Links
const podcastLinks = document.querySelectorAll('a[href*="podcast"], .podcast-link');
podcastLinks.forEach(link => {
link.addEventListener('click', function () {
const linkLabel = this.innerText.trim();
const timestamp = getTimeLabel();
if (window._paq) {
_paq.push(['trackEvent', 'Podcast', 'Link geklickt', `${linkLabel} | ${timestamp}`]);
}
});
});
// 🔘 Matomo-Tracking: Interne Navigations-Buttons (#podcastblock etc.)
const navButtons = document.querySelectorAll('.button-row a[href^="#"]');
navButtons.forEach(link => {
link.addEventListener('click', function () {
const label = this.innerText.trim();
const timestamp = getTimeLabel();
if (window._paq) {
_paq.push(['trackEvent', 'Navigation', 'Button', `${label} | ${timestamp}`]);
}
});
});
});
</script>
<!-- Drei Buttons oben -->
<div class="button-row">
<a href="#podcast-section">🎧 Podcast</a>
<a href="#content-block">📝 Content</a>
<a href="#info-anchor">ℹ️ Info</a>
</div>
<!-- Podcast Block -->
<div id="podcast-section" class="fade-in" style="scroll-margin-top: 100px; background-color:#f9f5f0; padding: 2em; border-radius: 12px; font-family: Georgia, serif; font-size: 0.75em; line-height: 1.7; color: #2e2e2e; max-width: 1000px; margin: 2em auto;">
<p><strong>🎧 Podcast Sektion</strong></p>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></p>
<!-- PODLOVE SHORTCODE HIER -->
<div style="margin: 2em 0; padding: 1.5em; background: #fff; border-radius: 8px; border-left: 4px solid #8B7355;">
[podlove-template id="latest-episode"]
</div>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><strong>Placeholder Text Ende</strong></p>
</div>
<!-- Content Block -->
<div id="content-block" class="fade-in" style="scroll-margin-top: 100px; background-color:#f2f0ec; padding: 1.5em; border-radius: 12px; font-family: Georgia, serif; font-size: 0.72em; line-height: 1.6; color: #2e2e2e; max-width: 1000px; margin: 1.5em auto;">
<p><strong>Content Bereich</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<hr style="border: none; border-top: 1px solid #ccc; margin: 1em 0;">
<p>Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr style="border: none; border-top: 1px solid #ccc; margin: 1em 0;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<!-- Info Block -->
<div id="info-anchor" class="fade-in" style="scroll-margin-top: 100px; background-color:#f9f5f0; padding: 2em; border-radius: 12px; font-family: Georgia, serif; font-size: 0.75em; line-height: 1.7; color: #2e2e2e; max-width: 1000px; margin: 2em auto;">
<p><strong>Informationen</strong></p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
<p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
<p><strong>Test-Shortcode funktioniert:</strong></p>
<p>Hier könnte ein weiterer Shortcode stehen: [test-shortcode parameter="wert"]</p>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.</p>
<p style="text-align: center; margin-top: 2em; font-size: 1.2em;"><strong>Ende der Test-Seite</strong></p>
</div>
</body>
</html>
Ich glaube das Problem liegt darin, dass in deinem Shortcode ein Anführungszeichen unten verwendet wird. Mach mal beide Anführungszeichen zu “
Notfalls kopiere das Anführungszeichen hier aus meinem Post und ersetze Beide.
danke. aber war ein fehler hier bein einfügen. sind beide oben…
Hmm, ok… hatte gehofft das wäre der Fehler gewesen…
Danke. Es lag am Theme. Das ganze wurde
immer wieder zerschossen.