Kontaktformular einrichten

3 Plugins empfehle ich für WordPress um ein Kontaktformular einzubauen:

Flamingo speichert die Anfragen in der Datenbank. Damit gehen keine Daten verloren sollte der E-Mail Versand fehl schlagen.

Entweder werden die Plugins über den Adminbereich installiert oder per FTP in den Pluginordner (wp-content/plugins) hochgeladen. Danach können sie in Plugins aktiviert werden.
Die Einrichtung des Kontaktformulars erfolgt im Pluginbereich unter Einstellungen. Unter Tag generieren wird hier das Captcha erzeugt.

Galerie zum Scrollen

Ein nettes Feature ist eine Galerie die bei Mouseover nach rechts oder links scrollen kann. Dafür brauchen wir die jquery.js und von der Seite von Kelvin Luck aus dem Downloadbereich die jquery.jscrollpane.min.js, und die jquery.jscrollpane.css

Diese Dateien werden im Header der Html Datei eingebunden, zusammen mit zwei eigenen Dateien die hier zu finden sind:
scrl-functions.js
scrollcustom.css


<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/scrl-functions.js"></script>
<link type="text/css" href="css/scrollcustom.css" rel="stylesheet" media="all" />

Am rechten und linken Rand der Galerie fangen bei mouseover die Bilder an zu scrollen


So werden die divs eingesetzt:


<div class="scrlcontainer">
  <!-- mouseover Scrollbereich links -->
  <div class="leftscroll"></div>
  <div class="objlistwidth hidden">1608</div>
  <div class="scroll-pane horizontal-only">
    <div class="objlist">
      <div class="objitem">
        <img src ="sonnenuntergang1,jpg"
                width="400" height="300">
      </div>
      <div class="objitem">
        ....
      </div>
    </div>
  </div>
  <div class="rightscroll"></div>
</div>

Da üblicherweise die Galerie dynamisch zusammengestellt wird, z.B. aus einer WordPressgalerie muss entsprechend die class=”objlistwidth” ebenfalls per php gesetzt werden. Der Wert ist die Breite aller Bilder plus dem Zwischenabstand. Ist der Wert zu klein, dann bricht der Fluss in eine zweite Zeile (in den unsichtbaren Bereich) um.

Highlight Code

Um auf einer Webseite Quellcode farblich anzupassen kann die highlight.js verwendet werden.

Dort get version klicken, Sprachen auswählen und auf download klicken. Im Zip gibts die javascript Datei sowie alle möglichen styles zur Formatierung. Im Beispiel hier ist die googlecode.css gewählt.

Unter usage finden sich Verwendungsbeispiele. Die einfachste Variante ist gleich hier zu sehen.

Im Header der Html Datei sind folgende 3 Zeilen als Minimum einzubinden. Die Ordnerstruktur muss entsprechend angelegt sein.


<link rel="stylesheet"  type="text/css" href="css/googlecode.css">
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

In der header.php Datei von WordPress wird der Pfad folgendermaßen angegeben:


href="<?php echo esc_url( home_url( '/' )) ?>wp-content/themes/mytheme/css/googlecode.css"

Damit die farbliche Markierung funktioniert muss der Code in


<pre><code>....</code></pre>

eingebettet werden.