PHPKIT WCMS Dokumentation

Sicherlich kennen Sie diese, meist von Firmen angebotenen Tools, mit denen Sie auf Ihrer Website ein kleines Programm in Form eines sogenannten HTML Widgets, eine kleine Funktionalität schnell in Ihre Website integrieren können.

Dieses wird meist in Form von fertigen HTML Code auf der Website des Widgetherstellers fertig angeboten. Bei einigen Widgets eignet sich die Darstellung im eigentlichen Seitenkörper oder so wie in diesem Beispiel die Darstellung, in einer etwas längeren Navigationsbox an der linken oder rechten Seite einer Website.

In diesem Tutorial werden wir erklären, wie Sie auf diese Art HTML Code für diese kleinen Miniprogramme, in diesem Fall eine Applikation geschrieben in Java, in eine Navigationsbox von PHPKIT leicht einbauen können.

Schritt 1 - Öffnen der Navigationpotionen im Administrationsbereich

Wählen Sie nach erfolgtem Login in der linken Hauptnavigation Navigation aus und klicken danach auf Kategorien

Schritt 2 - Erstellen einer neuen Navigationskategorie für eine neue Navbox

Erstellen Sie jetzt mit einem Klick auf Neue Kategorie anlegen eine neue Navigationskategorie. Alternativ wählen Sie Neue Kategorie anlegen aus und bestätigen Ihre Auswahl mit einem Klick auf Auswählen

Schritt 3 - Die Einstellungen der neuen Navigationskategorie

Vergeben Sie der neuen Navigationskategorie bzw. der neuen Navbox einen Namen im Titel Für unser Beispiel reicht es wenn Sie nur einen Titel vergebenden Rest unverändert lassen und die Eingaben mit Speichern abspeichern

Anmerkung:
Wenn Sie keinen Titel eingeben, so ist bei mehreren unbenannten Kategorien nachher schwierig, die richtige Navigationskategorie wiederzufinden. Deswegen sollten Sie mindestens einen Titel vergeben haben. Diese Optionsmaske werden Sie auch zu einem späteren Zeitpunkt wiedersehen, wenn Sie diese oder eine andere Navigationskategorie bearbeiten möchten.

Schritt 4 - Einen neuen Verweis anlegen

Nachdem Sie die neue Navigationskategorie - wir haben Sie in unserem Beispiel HTML-BOX genannt - erstellt haben, erstellen wir einen neuen Verweis indem das Widget von twitter in PHPKIT eingebunden werden soll. Klicken Sie dazu in der linken Hauptnavigation des Administrationsbereichs auf Verweise.

Schritt 5 - Anlegen eines Verweises bzw. Links in HTML für das Widget

Wählen Sie jetzt bei Neuen Link erstellen aus dem Pulldownmenü die neu erstellte Navigationskategorie aus. Wir haben Sie in unserem Beispiel HTML-BOX genannt.

Schritt 6 - Die verschiedenen Optionen für das Anlegen des Verweises

Nun sehen Sie die Optionen für die Erstellung des Verweises bzw. Links in der Bearbeitungsmaske. Relevant für unser Beispiel ist nur der Titel indem wir dort unseren HTML-Code eintragen werden.

Für unser Beispiel wollen wir dort ein Widget des Social Media Network twitter einbinden, mit dem wir unsere letzten Tweets für Besucher unserer Website anzeigen lassen wollen.

Lassen Sie alle Browserfenster geöffnet und Öffnen diesen Verweis zur Website des twitter Widgets am besten in einer neuen Tab oder Fenster des Browsers. Sofern Sie noch über keinen Account bei twitter verfügen sollten, so können Sie sich auf der Website des Accountmanagement einen anlegen.

Holen Sie sich den HTML-Code des Widgets. Diesen kopieren Sie in den Titel des Verweises im PHPKIT, den wir vorher angelegt haben.

Schritt 7 - Kopieren des HTML Codes in den Titel

Übertragen Sie nun den HTML des twitter Widgets in das Feld des Titels des Links bzw. Verweises. Weitere Einstellungen können Sie bei Bedarf vornehmen. Zum Beispiel wie in diesem anderen Tutorial wird erklärt wie Sie diesen Verweis bzw. Link nur für Mitglieder sichtbar machen können.

Anmerkung:
in der Grundeinstellung des Widgets ist die Breite des Anzeigefeldes zu breit für eine Anzeige in der Navigation von PHPKIT. Sie können diese Werte durch unsere Vorgaben ersetzen, so dass das Anzeigefeld der twitterbox gut in das Standarddesign passt.

<div id="twtr-profile-widget"></div>
<script src="http://widgets.twimg.com/j/1/widget.js"></script>
<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
<script>
new TWTR.Widget({
  profile: true,
  id: 'twtr-profile-widget',
  loop: true,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#3082af',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  }
}).render().setProfile('PHPKIT').start();
</script>

Die Werte für eine gute Darstellung für Höhe und Breite der twitter-Box empfielt sich für
width: 150 und height: 400

Nachdem Sie dieses gespeichert haben, wird die Fertige Box, als twitterbox, korrekt so auf Ihrer Website in der jeweiligen Navigationsbox erscheinen, die Sie beliebig auf Ihrer Website anordnen können.

Tipp:
Probieren Sie es doch einfach in unserem deutschsprachigem Onlinedemo vom PHPKIT WCMS bequem und sorglos jetzt gleich aus!