Tipps & Tricks, Tutorials, Webdesign

Erweiterung des Footer-Menüs einer Jimdo-Page

Funktionalitäten einer auf Jimdo-CMS basierenden Website sind in den meisten Fällen ausreichend. Eine Aufgabe, die hier nicht zugänglich gelöst wurde, ist die Administration der Punkte des Footer-Menüs. Man kann die bestehenden Menüeinträge zwar ausblenden lassen, das ist aber auch das einzige, was an Manipulation des Contents möglich ist. Neue Menüeinträge für die Fußzeile zu erstellen ist nicht möglich. Die einzige Möglichkeit hier besteht in der Injektion des notwendigen HTML-Codes per JavaScript.

Es ist interessant zu wissen, dass jimdo für das eigene CMS das „JS-Framework Prototype“ benutzt. Die dort implementierten Funktionen werden Einiges erleichtern.

In meinem Fall sieht die HTML-Struktur der Fußzeile so aus:

<div id="contentfooter">
  <div class="leftrow">
    <a href="">Punkt1</a>
    <a href="">Punkt2</a>
  </div>
  <div class="rightrow"></div>
</div>

In diesem Menü fehlt vor <a href=“>Punkt 1</a> noch ein Menüpunkt (in meinem Fall <a href=“>Partner</a>), der zu einer vorher erstellten Unterseite verlinken soll.

Die Kenntniss über die Struktur ist wichtig für den Selector im JavaScript-Code. Da die Struktur sich je nach verwendetem Template unterscheiden kann, muss der Selector an die verwendete Struktur angepasst werden. Das entsprechende Stück Code sieht bei mir also so aus:

document.observe("dom:loaded", function() {  //warten, bis Seite geladen ist
  // anfügen der gewünschten Zeichenfolge am richtigen Platz
  $('contentfooter').firstDescendant().insert({
    top: "<a href='/partner/' title='unsere Partner'>Partner</a> | "
  });
});

einfügen von javascript in head bereich bei jimdo-pagesDiese Funktion wird anschließend im Administrationsmenü im Punkt „Head bearbeiten“ eingefügt und wird automatisch auf jeder Seite beim Laden ausgeführt.

Standard