Mobirise Tutorials

Klickzähler und Bilder Ecken

Klicks auf Bilder oder Links zählen

Beispiel Tutorial Bilder Ecken Translate

Tutorial

Bitte ladet euch die Skripte von Werner-Zenk.de mit einem Beispiel auf meiner Seite "Download Archiv" herunter.

Hier geht es zum Download Archiv   Aufruf hier: 29 x

Sucht dort nach dem ZIP-Archiv mit dem Namen:

#23 2024-02-08-klickzaehler.zip

Mit diesem Klickzähler kann man jeden Klick auf einen Link zählen und sogleich auch das Ergebnis anzeigen.

Bitte entpackt diese ZIP-Datei und guckt euch die Beispiel-Seite "index.php" an, um ein besseres Verständnis für den Einbau zu erhalten. Zudem benötigt ihr die Skripte aus dem Head-Bereich dieser Datei, die ich aber auch zusätzlich über den unten stehenden Link zum Kopieren anbiete.

Da hier PHP verarbeitet werden muss, seht ihr das Ergebnis erst nach dem entfernten Publizieren auf den Server, da ihr PHP normalerweise nicht lokal installiert habt. Stellt daher auch die Mobirise-Seite in den Seiteneinstellungen, auf der ihr einen solchen Klickzähler einbaut, im Bereich "URL der Seite", von der Dateierweiterung .html auf die Dateierweiterung .php um.

Ihr benötigt diese beiden Dateien aus dem Download:

counter.php
data.txt

Ich habe hier die zusätzlichen Skripte aus der Download-Datei "index.php" kopiert und im Prinzip unverändert in meine Mobirise-Seite eingebaut, außer dass ich diese auf den Server in ein neues Verzeichnis kopiert habe:

counter

Dementsprechend habe ich die Pfade in den Skripten aus der Datei "index.php" dreimal angepasst. Einmal für die Datei data.txt und zweimal für die Datei counter.php. Zusätzlich habe ich meine Änderungen mit "Edit Tommy" markiert.

Hier könnt ihr euch meine Änderungen auch kopieren oder downloaden:

Skript mit Pfad-Änderungen   Aufruf hier: 24 x

Kopiere dieses Skript, also den oberen PHP-Teil und auch den unteren Javascript-Teil, in die Seiteneinstellungen in den Bereich:

Inside <head> code:

Die Datei "data.txt" dient zum Speichern der Aufrufe und der Inhalt meiner Datei sieht gerade ungefähr so aus:

1|3|image-01.jpg
2|8|image-02.jpg
3|4|image-03.jpg
4|5|image-04.jpg
5|0|Download-Archiv
6|9|Lightbox 2


Die erste Zahl dient als fortlaufende ID für jeden Aufruf. Hier werden die Zahlen 1, 2, 3 und 4 für meine Bilder verwendet, während die Zahl 5 auf meinen Link zum "Download-Archiv" verweist und die Zahl 6 auf meinen Link zur Seite "Lightbox 2" und so weiter.

Die zweite Zahl wird von den Skripten eingetragen und zeigt die Anzahl der Klicks an. Achtung, dieses Feld muss jedoch immer bereits eine Zahl enthalten.

Hinter diesem Feld sollte eigentlich nichts stehen. Hier habe ich jedoch die Dateinamen wie "image-01.jpg" und meine verlinkten Seiten eingetragen, damit ich weiß, welche ID zu welchem Inhalt gehört.

Mein Link zum "Download Archiv" trägt beispielsweise zusätzlich das Data-Attribut mit der ID=5, das ihr in das öffnende <a> Tag eintragen müsst:

data-button="5"

<a href="https://www.mobirise-tutorials.com/Download-Archiv/" class="text-primary" target="_blank" data-button="5">Link to</a>


Um die entsprechende ID (hier 5) anzuzeigen, fügt ihr an beliebiger Stelle im Text folgenden PHP-Code ein:

<?= get_clicks(5, $clicks)?>

Palmen

Am Strand

Bild mit Ecke links

Diesem Bild wurde mit der CSS unten eine Ecke gegeben

Am Strand

Bild mit Ecke rechts

Diesem Bild wurde mit der CSS unten eine Ecke gegeben

Bild mit Ecken

In den beiden Beispielen, in denen die Ecken der Bilder umgeschlagen sind, habe ich den folgenden CSS-Code in den "CSS Editor" des jeweiligen Blocks eingefügt. Dabei ist es wichtig, dass die Bilder am oberen Rand des Blocks bleiben und nicht an eine andere Position verschoben werden.

Linke Ecke:

.imageLeft {
  position: absolute;
  top: 0rem;
  width: 80px;
  height: 80px;
  background-image: linear-gradient(-45deg, #174394 50%, #000000 50%);
  box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.4);
  z-index: 1;
  @media (max-width: 991px) {
    width: 40px;
    height: 40px;
  }
}


Rechte Ecke:

.imageRight {
  position: absolute;
  top: 0rem;
  right: 1rem;
  width: 80px;
  height: 80px;
  background-image: linear-gradient(45deg, #062256 50%, #174394 50%);
  box-shadow: -8px 8px 10px 0px rgba(0, 0, 0, 0.4);
  z-index: 1;
  @media (max-width: 991px) {
    right: 11px;
    width: 40px;
    height: 40px;
  }
}


Die Anzeige erfolgt durch einen <div> Container mit seiner jeweiligen Class.

Am linken Bild über dem <div class="image-wrapper">

<div class="imageLeft"></div>


Am rechten Bild unter dem <div class="image-wrapper">

<div class="imageRight"></div>

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren