Anleitung

Erntekalender & Nährwerttabelle einbinden

Diese Anleitung richtet sich an alle, auch ohne Programmierkenntnisse. Du brauchst nur die beiden HTML-Dateien und ein bisschen Copy & Paste.

📄 erntekalender.html

📄 naehrwerttabelle.html

Beide Dateien funktionieren unabhängig voneinander – du kannst nur eine der beiden verwenden oder beide auf derselben oder auf verschiedenen Seiten einbauen.

Vor dem Einbauen: Farben, Schrift & Logo anpassen

Öffne die Datei mit einem einfachen Texteditor (z. B. Notepad unter Windows, TextEdit unter Mac – nicht Word). Ganz oben findest du diesen Block:

const ERNTEKALENDER_CONFIG = {
  bgColor: '#F7F7F4',
  textColor: '#2B2B2B',
  headingFont: 'Merriweather',
  bodyFont: 'Open Sans',
  logoUrl: ''
};

Trage dort deine Werte ein und speichere die Datei. Alles andere in der Datei kannst du ignorieren.

Tipp: Für logoUrl brauchst du einen Link zu einem bereits online liegenden Bild, z. B. https://deine-domain.de/bilder/logo.png. Lade dein Logo dafür einmal ganz normal wie ein anderes Bild auf deine Website hoch und kopiere den Bild-Link hier hinein.

Variante A: Einbau auf einer normalen HTML-Website

1Datei hochladen. Lade erntekalender.html (und/oder naehrwerttabelle.html) per FTP oder über den Datei-Manager deines Hosting-Anbieters in denselben Ordner wie deine anderen Webseiten (z. B. neben index.html).

2Einbinden mit einem "iframe". Das ist die einfachste Methode – ein iframe zeigt die Datei wie ein kleines eigenes Fenster innerhalb deiner Seite an. Füge an der Stelle, wo der Kalender erscheinen soll, diesen Code in deine Seite ein:

<iframe src="erntekalender.html" style="width:100%; border:none;" height="1600" id="ek-frame"></iframe>

Falls Inhalte abgeschnitten wirken, erhöhe einfach die Zahl bei height="1600" (das ist die Höhe in Pixeln) – z. B. auf 2000.

Alternative, falls dein Baukasten (Wix, Jimdo, Squarespace, WordPress-Editor, …) keine eigenen Dateien erlaubt: Öffne die HTML-Datei stattdessen im Texteditor, markiere den kompletten Inhalt (Strg+A bzw. Cmd+A), kopiere ihn (Strg+C bzw. Cmd+C) und füge ihn in einen "HTML-Block", "Code-Block" oder "Embed-Element" deines Baukastens ein. Fast jeder Homepage-Baukasten hat so ein Element, oft unter einem Namen wie "HTML einbetten" oder "Code".

Variante B: Einbau auf einer PHP-Website

PHP-Seiten liefern am Ende auch nur ganz normales HTML aus – die iframe-Methode aus Variante A funktioniert hier genauso. Zusätzlich hast du noch eine zweite, etwas elegantere Möglichkeit:

1Datei hochladen. Lade erntekalender.html in denselben Ordner wie deine .php-Dateien hoch (z. B. per FTP).

2Einbinden mit include. Öffne die .php-Datei, in der der Kalender erscheinen soll, und füge an der gewünschten Stelle diese eine Zeile ein:

<?php include 'erntekalender.html'; ?>

Das bindet den kompletten Inhalt der Datei direkt an dieser Stelle in deine Seite ein – ohne iframe, ohne feste Höhe angeben zu müssen.

Wichtig: Der Dateiname im include-Befehl muss exakt zum tatsächlichen Dateinamen und -pfad passen. Liegt die Datei z. B. in einem Unterordner widgets, schreibst du include 'widgets/erntekalender.html';

Beide Widgets auf einer Seite?

Kein Problem – einfach beide iframes bzw. beide include-Zeilen untereinander einfügen. Die Sprung-Links "Nährwerte ansehen" bzw. "Saison ansehen" funktionieren dann allerdings nur zuverlässig, wenn beide Widgets als direkter Seiteninhalt (also per Copy-&-Paste-Variante oder PHP-include) eingebunden sind – bei der iframe-Variante bleibt jedes Widget in seinem eigenen kleinen Fenster und kann nicht zum anderen "hinüberspringen".

Häufige Fragen

Die Schrift/Farbe hat sich nicht geändert?

Hast du die Datei nach dem Bearbeiten auch wirklich gespeichert und die neue Version erneut hochgeladen? Browser zeigen außerdem manchmal eine "alte", zwischengespeicherte Version – probier testweise Strg+F5 (bzw. Cmd+Shift+R) zum Neuladen.

Kann ich den Text (Überschrift, Beschreibung) ändern?

Ja – im HTML-Code findest du weiter unten ganz normalen, lesbaren Text wie <h1>Was gerade wächst, reift und schmeckt.</h1>. Den kannst du direkt im Texteditor überschreiben.

Muss der kleine "Bereitgestellt von direktvomhof.com"-Hinweis bleiben?

Ja, in dieser kostenlosen Version ist der Hinweis-Link fester Bestandteil. Eine Version ohne diesen Link ist in Vorbereitung.

Bereitgestellt von direktvomhof.com – hier kann man Hofläden finden.