Joomla

Upgrade von Joomla 3 auf Joomla 4

Lokale Joomla Instanz aktualisieren

Falls eine lokale Joomla Instanz existiert, so kann man zunächst einmal das Upgrade lokal durchführen.

• Download der Joomla Projektdaten auf den lokalen Rechner
• Export der Datenbank mit <rr>phpMyAdmin und Import am lokalen Rechner

Joomla 3

• Im Joomla Verzeichnis den Ordner tmp leeren - außer index.php

Papierkorb leeren

Beiträge, Kategorien, Menüs

Suchwerkzeuge | Status Papierkorb

Alle Einträge auswählen

Papierkorb leeren

• Überprüfen, ob die aktuelle Joomla 3 Version installiert ist

Komponenten | Joomla Update

Update-Quelle ändern

Komponenten | Joomla Update
Optionen | Update-Server | Joomla! Next

Nun wird angezeigt, für welche Erweiterungen Eingriffe nötig sind bzw. es keine Joomla 4 Version gibt.

Kompatibilitätsprüfung

Erweiterungen, für die es keine Joomla 4 Version gibt, der Reihe nach deinstallieren.

Erweiterungen | Verwalten

Die zu löschenden Erweiterungen über die Suchfunktion ausfindig machen.

Phoca Komponenten

Folgender Schritt scheint nicht mehr nötig zu sein.

Mit phpMyAdmin alle phocagallery Tabellen exportieren außer phocagallery_styles

Man kann gleich unter Joomla 3 die Phaca Gallery für Joomla 4 installieren. Dies gilt anscheinend auch für Phoca Email.

Update auf Joomla 4

Nun kann man das Update auf Joomla 4 starten.

Live-Update
Update installieren

Joomla 4

Child Templates erstellen

Für das Frontend und für das Backend ein Child Template erstellen

System | Site Templates
System | Administrator Templates

Folgende Schritte für das Site Template und das Administrator Template durchführen.

Template Cassiopeia auswählen
Child Template erstellen

Dem Template einfach den Namen child geben.

Nun auf Styles klicken und das Child Template als Standard setzen.

Custom CSS

Man kann für das Site Template eine user.css erstellen oder eine vorbereitete Datei kopieren nach

media/templates/site/cassiopeia_child/css

und für das Backend

media/templates/administrator/atum_child/css

Template bearbeiten

Templates | Styles | Cassiopeia - child | Erweitert
Brand: nein

Header Modul erstellen

Content | Site Modules | Neu | Eigenes Modul

• Dem Modul den Namen Header Modul geben.
• Ein Hintergrudbild auswählen

Optionen | Hintergrundbild auswählen
header.jpg

• Titel der Website als Text H1
• Dem Modul die Position banner zuweisen
• Titel verbergen
• Modul Stil:

Erweitert | Modul Stil: card

Modul Navigation - Top

Das vorhandene Modul Top Menue bearbeiten

Position topbar
Titel verbergen
Layout: Collapsible Dropdown
Module Style: card

Weitere Navigationsmodule

Erstellen von weiteren Navigationsmodulen falls notwendig

• Position: sidebar_right oder sidebar_left

Phoca Gallery

• Neueste Version installieren (Version für Joomla 5)

Komponenten | Phocagallery | Styles

Alle deaktivieren außer

theme_standard.css

Server Instanz aktualisieren

Hier beschreibe ich, wie man das neu erstellte und getestete Joomla_4 Projekt vom lokalen Rechner auf den Remote-Server übertragen kann.

Datenbank Backup am Remote Server

Mit phpMyAdmin bei allen Tabellen der Joomla Datenbank das Prefix ändern

: Beispiel: joo_ ändern auf joo3_

Im Joomla_3 Projekt am Server das Prefix in die Konfiguration eintragen.

# configuration.php
$dbprefix = "joo3_" 

Somit kann die alte Version weiterverwendet werden, falls nötig.

Joomla 3 - Backup der Serverdaten

Die Daten des Joomla_3 Projekts werden gesichert.

cd /srv/www/htdocs
cp -a joomla_proj joomla_proj_3

Daten Upload

Die Daten der Joomla Instanz am lokalen Rechner werden nun mit einem geeigneten Programm zum Server übertragen.

Ich verwende dafür ein eigenes Script upload.sh, das diesen Job mit Hilfe von rsync erledigt und nicht mehr benötigte Dateien am Server entfernt.

# localhost
cd /srv/www/htdocs/joomla_proj
upload.sh --delete

Datenbank übertragen

Am lokalen Rechner die Joomla_4 Datenbank mit phpMyAdmin in eine SQL Datei exportieren

joomla_proj.sql

Am Server im Internet die Datei mit phpMyAdmin in die Joomla Datenbank importieren

Templates

Standard Stil definieren

Erweiterungen / Templates / Stile

Beez3 - default als Standardstil setzen

Modulpositionen anpassen

position-7

Im Template Manager kann man einstellen, dass die Module links oder rechts vom Content positioniert werden.

Position of Navigation: before content

CSS Definitionen

In der Datei user.css kann man Stile definierten, die bei einem Update des Templates nicht überschrieben werden

templates/beez3/css/user.css

• Hintergrundbild im Header ändern

Das gewünschte Hintergrundbild speichern

templates/beez3/images/header.png

CSS Definitionen:

#header { padding-top: 0; 
.logoheader { 
    background: #FFFFFF URL(../images/header.png) no-repeat
    min-height: ... (wegen Hintergrundbild)
...
}

CSS Styles im Editor

Die Erweiterung JCE Editor downloaden und installieren

Komponenten / JCE Editor / Global Configuration

Pfad zur user.css angeben

Editor Styles / Custom CSS File
# Joomla 3
templates/$template/css/user.css

# Joomla 4
media/templates/site/$template/css/user.css

Overrides

Will man Komponenten und Module ändern, sollte man einen Output Override erstellen, damit die Änderungen nicht beim nächsten Update überschrieben werden.

• Im Backend

Erweiterungen / Templates / Templates / Beez3 Details und Dateien
Overrides erstellen

Die erstellten Overrides befinden sich dann im Verzeichnis

templates/beez3/html

Man kann die Dateien mit einem beliebigen Editor oder gleich im Joomla Backend bearbeiten.

Weitere Informationen

Eigene CSS Klassen

Globale CSS Styles definieren

• Eigene CSS Datei

Eigene Klassen können in jeder CSS Datei des Templates definiert werden. Am besten aber in folgender Datei definieren

css/user.css

CSS Klassen für eine bestimmte Seite

• Eine neue CSS Klasse definieren

In der CSS Datei des Templates eine eigene Klasse für ein bestimmtes Element definieren

# Beispiel für einen Tabellenstil
table.content_table {
  border-collapse:collapse;
  width:100%;
}
.content_table td {
   border:1px solid #CCC;
   padding: 4px;
}

• Die CSS Klasse im Backend zuweisen

Im Backend einen Menülink bearbeiten, der den Artikel aufruft, in dem die neue CSS Klasse angewendet werden soll.

In das Feld Seitenklasse den Namen der Klasse mit einem führenden Leerzeichen eingeben.

Einstellungen der Seitenanzeige / Seitenklasse
Seitenklasse: 	content_table

Tipps und Tricks

Datenbank Prefix ändern

Joomla Konfiguration bearbeiten - Beispiel:

# configuration.php
public $dbprefix = 'joom4_';

Mit phpMyAdmin die Tabellen umbenennen

* Alle Tabellen markieren (auswählen)
* Dropdownliste: Tabellenprefix ersetzen

CSS Datei für den WYSIWYG Editor

Unter Linux kann man einen Symlink zur user.css im Site Template anlegen

So habe ich einen Link vom Administrator Child Template zum Cassiopeia Child Template angelegt

cd /srv/www/htdocs/joomlaProject/media/templates/site/atum_child
ln -s ../../../site/cassiopeia_child/css/user.css editor.css

Dann schaut die Seite im Editor so aus wie im Frontend, wenn man benutzerdefinierte CSS Stile verwendet.

Iframe Wrapper

Iframe Wrapper im Content

• Wrapper Modul erstellen

Das Modul vom Typ Wrapper dient dazu fremdes HTML in einem Iframe darzustellen.

• Position des Moduls angeben

Verwendet man eine im Template definierte Position, dann erscheint der Iframe an dieser Stelle der Joomla Website.

Man kann aber im Wrapper Modul eine eigene Position mit beliebigem Namen (z.B iframePosition) definieren. Mit Hilfe dieses Positionsnamens lässt sich dann das Wrapper Modul im Content platzieren.

• Iframe im Beitrag positionieren

Folgende Zeile in den Beitrag einfügen:

{ loadposition iframePosition }

Der Positionsname bezieht sich auf obiges Beispiel.

Es gibt noch wietere Möglichkeiten, wie man ein Modul in einen Beitrag einbetten kann: https://docs.joomla.org

Iframe-Wrapper deaktiviert JQuery

Ich habe festgestellt, dass nach dem Laden einer Iframe-Wrapper Seite die Bootstrap-DropDown Menüs nicht mehr funktionieren. Anscheinend wird JQuery deaktiviert nach Laden des Iframe-Wrappers.

Es wird übrigens auch Jquery-UI deaktiviert.

Lösung:

In die index.php des Templates folgende Zeilen einfügen

JHtml::_('jquery.framework');
JHtml::_('jquery.ui', array('core'));

Iframe Wrapper und SSL

Nach Umstellung der Joomla Site auf SSL bzw. wenn Apache SSL erzwingt, werden IframeWrapper Seiten nicht mehr angezeigt.

Im IframeWrapper muss die Option Erweitert / Hinzufügen ausgeschaltet werden, sonst beginnt der Link immer mit http (statt https).

GET_Parameter an Wrapper übergeben

Override der Komponente Wrapper erstellen.

.../(child)template/html/com_wrapper/wrapper/default.php

Im folgenden Code unmittelbar vor dem Iframe werden einige Parameter an den Iframe-Wrapper übergeben, die dann von dem PHP Skript ausgewertet werden können.

// *******************************
// Parameter an Wrepper übergeben:
// *******************************
if ( strstr ($this->wrapper->url,"?")  ) $this->wrapper->url .= "&referer=joomla";
   else $this->wrapper->url .= "?referer=joomla";
      $user = JFactory::getUser();
      if ( $user->username ) $this->wrapper->url .=
         "&user=".$user->username.
         "&userfullname=".$user->name.
         "&groups=".implode(",",$user->get('groups'));
// *******************************  ?>
<iframe <?php echo $this->wrapper->load; ?>

Bilder ausrichten

Mit den Klassen

img-fulltext-left
img-fulltext-right

werden die Bilder entsprechend positioniert und bekommen automatisch einen Abstand zum umlaufenden Text.

Bilder untereinander anordnen

Das geht mit dem grafischen Editor nicht wirklich gut. Daher gehe ich so vor: Ich füge zuerst die Bilder in den Text irgendwo ein und bringe sie auf die richtige Größe. Dann erzeuge ich im HTML Modus einen DIV Container:

 <div style="width: 160px; float: left;">

 </div>

Zwischen diese obigen zwei Zeilen kopiere ich dann die Codezeilen der Bilder hinein, dann schaut das ganze etwa so aus:

* linksbündig
 <div style="width: 160px; float: left;>
 <img src="images/stories/joomla-dev_cycle.png" width="150" />
 <img src="images/stories/clock.jpg" width="150" />
 </div>

* rechtsbündig
 <div style="width: 160px; float: right;">
 <img src="images/stories/joomla-dev_cycle.png" width="150" />
 <img src="images/stories/clock.jpg" width="150" />
 </div>

Die Breite der Bilder width ist etwas weniger als die Breite des Containers, wie man sieht sieht.

Einfaches Datumsformat ohne Uhrzeit

Folgende Datei bearbeiten: language/de-DE/de-De.ini

# DATE_FORMAT_LC2=%A, den %d. %B %Y um %H:%M Uhr
DATE_FORMAT_LC2=%d. %B %Y

Angabe des Autors verkürzen

Folgende Datei bearbeiten: language/de-DE/de-De.com_content.ini

# WRITTEN BY=Geschrieben von: %s
WRITTEN BY=%s

Joomla Druckvorschau bzw. Druckausgabe formatieren

Die Druckvorschau wird durch das Skript component.php erzeugt:

/templates/system/component.php

Dafür wird die CSS Klasse contentpane verwendet. Für diese Klasse kann man in der CSS Datei des verwendeten Templates (template.css) Formatierungen festlegen, z.B.: eine Mindestbreite des Containers.

.contentpane {
    min-width: 720px;
}

Achtung: Die direkte Druckausgabe wird nicht über component.php gesteuert. Dazu muss im Head Bereich der index.php des Templates ein Verweis zu einer print.css eingefügt werden:

 <link rel="stylesheet" type="text/css" media="print" href="<?php echo $templateUrl; ?>/css/print.css" />

Kalender PopUP formatieren

• Wochenanfang auf Montag legen

# /media/system/js/calendar-setup.js
param_default("firstDay",1);

• SA und SO sichtbar machen

In folgender Datei in Zeile 46 den Farbwert #dedede durch #777777 ersetzen.

# /media/system/css/calendar-jos.css

Modulpositionen anzeigen

An die URL den Querystring ?tp=1 anhängen

Beispiel: http://t2792.greatnet.de/joomla_sieglinde?tp=1

Benutzer

Gruppen und Zugriffsebenen

https://blog.formativ.net/joomla-benutzergruppen-und-zugriffsebenen/

Benutzeranmeldung mit Modul

Ein Modul vom Typ Benutzer-Anmeldung auf der Seite platzieren - eventuell in der Navigationsleiste.

Dies ist die einfachere Variante mit dem einzigen Nachteil, dass etwas mehr Platz benötigt wird. Der Vorteil ist, dass die An- und Abmeldeweiterleitung einfach zu realisieren sind, d.h. man kann auf die zuletzt angezeigte Seite weiterleiten (Standard).

Benutzeranmeldung mit einem Menüeintrag

Einen Menüeintrag vom Typ Benutzer-Anmeldeformular erzeugen.

Nachteil: Die An- und Abmeldeweiterleitung vom Typ Standard leitet weiter zum Anmeldeformular, da die zuletzt angezeigte Seite eben das Anmeldeformular ist.

Das ist nicht sehr sinnvoll. Man kann statt der Standard-Option einen bestimmten Menüeintrag als Weiterleitungsziel nehmen, z.B. die Startseite der Joomla-Site.

Login Menüpunkt ausblenden

Möchte man nach Anmeldung eines Benutzer den Menüpunkt Login ausblenden, so muss man einige Änderungen in der Benutzerverwaltung durchführen.

• Eine neue Benutzergruppe anlegen

# Beispiel:
Name: NonRegistered

Hinweis: Ab Joomla 3 wird angeblich eine Benutzergruppe Gast automatisch nach der Installation angelegt.

• Eine neue Zugriffsebene anlegen

# Beispiel:
Name: Gast

Nur die neue Benutzergruppe NonRegistered soll Zugriff haben (anklicken).

• Zugriffsebene Public ändern

In der Zugriffsebene Public muss nun die neue Gruppe NonRegistered zusätzlich aktiviert werden.

• Benutzer Optionen ändern

Auf das Optionen Symbol klicken (rechts oben) und als Gast Benutzergruppe die neue Gruppe NonRegistered eintragen.

Authentifizierung über LDAP

• Das Plugin Authentifikation - LDAP aktivieren
• Plugin konfigurieren

Host:        localhost
Port:        389
LDAP V3:     Ja
Autorisierungsmethode: Verbinden und Suchen
Basis-DN:    dc=network
Suchstring:  &(uid=[search]) (gidNumber=601)

Voller Name: gecos 	
E-Mail:      mail	
Benutzer-ID: uid

Hinweis: Das LDAP Attribut mail muss bei jedem Benutzer vorhanden sein.

Phoca Gallery

Konfiguration und Anwendung

• Phocagallery Plugin

Zur Phocagallery gibt es ein Plugin, mit dem man in einen Beitrag Fotos aus einer Galerie einbinden kann.

http://www.phoca.cz/download/category/14-phoca-gallery-plugin

Folgende Zeile in den Artikel einfügen:

# Beispiel
{phocagallery view=category|categoryid=15}

Nach der Installation muss das Plugin aktiviert werden.

Optionen

• Thumbnails

Große Thumbnails = Detailansicht: 800 x 600
Mittlere Thumbnails: 175 x 175
Kleine Thumbnails: 100 x 100

Detail Fenstergröße: 820 x 680

Bildergalerie hinzufügen

Upload

Am Server ein neues Verzeichnis erstellen

images/phocagallery/neuerOrdner

Fotos mit Dateimanager, z.B. Dolphin oder mit einem FTP Client, z.B. Filezilla, in den neuen Ordner hochladen

Sicherstellen, dass der Benutzer wwwrun (... wenn openSuse) Schreibrechte in diesem Ordner hat

Joomla Backend

Komponenten / Phocagallery / Bilder / Mehrfaches Hinzufügen

Auf der rechten Seite werden alle Gallery Ordner angezeigt. Den neuen Ordner auswählen per Checkbox und dann auf Speichern und Schließen klicken.

Nun sollten die Thumbnails automatisch generiert werden.

Falls ein Fehler auftritt, wird der Vorgang abgebrochen und die automatische Thumbnailerstellung deaktiviert. Im Phocagallery Kontrollzentrum kann man unter Optionen diese wieder einschalten.

Phoca Mail

Abmelden vom Newsletter nicht möglich

In der Komponente JCE Editor muss man Relative URLs einschalten.

JCE Administration / Editor Profiles / Default / Editor Parameters

Sicherheit

Kontaktformular gegen SPAM Bots absichern

Folgende Datei bearbeiten:

/components/com_contact/views/contact/tmpl/default_form.php

• Ein verstecktes Formularfeld hinzufügen:

<input type="text" name="security" style="display: none;">

Die JavaScript Funktion validate_form ändern:

... 
if (frm.security === "") {
    frm.submit();
}

Ein SPAM Bot wird automatisch alle Felder ausfüllen. Das Formular wird jedoch nur dann abgeschickt, wenn dieses versteckte Feld leer ist.

reCAPTCHA

Plugin aktivieren

Im Joomla Backend das Plugin Captcha - reCAPTCHA aktivieren.

Schlüssel beziehen

Man muss einen öffentlichen und einen geheimen Schlüssel eingeben.

Diese zwei Schlüssel bekommt man, indem man auf folgender Seite jene Domain registriert, über welche die Joomla Seite erreichbar ist.

https://www.google.com/recaptcha/admin

Klick auf das '+' Symbol rechts oben.

reCAPTCHA Version

• reCAPTCHA Version 2
• Kästchen Ich bin kein Roboter
• Die zwei Schlüssel kopieren und im Joomla-Plugin einfügen

Kontaktformular

Im Joomla Backend muss unter Benutzer / Optionen" reCAPTCHA aktiviert werden, wenn es für das Kontaktformular verwendet werden soll.

Falls reCAPTCHA im Kontaktformular nicht erscheint, dann unter Komponenten / Kontakte / Option die Formulareinstellungen überprüfen.

Troubles

Komponenteninstallation nicht möglich

Fehlermeldung:

Es wurde kein Installationsplugin aktiviert ...

Lösung:

Erweiterungen / Verwalten / Überprüfen

Die gewünschten Installtionsplugins auswählen und auf Installieren klicken und dann ...

Erweiterungen / Plugins

... die neu installierten Installer - Plugins aktivieren.

HTML wird entfernt nach Speichern einer Seite

Für die Benutzergruppe ist ein Textfilter gesetzt auf den Wert Kein HTML

Joomla | Globale Konfiguration | Textfilter

Den Textfilter ändern auf den Wert Keine Filterung

Overrides

Offline Seite

Die Offline Seite kann man durch eigenen Code ersetzen bzw ergänzen.

Folgende Datei in den Ordner template/mein_template kopieren und bearbeiten:

template/system/offline.php

oder gleich eine eigene Offline-Seite mit PHP erstellen.

Joomla verwendet dann nicht diese Standardseite im system Verzeichnis, sondern den Override im aktuell verwendeten Template.

Das ist ein Beispiel meiner Offline Seite(n):

<?php
defined('_JEXEC') or die; ?>
<head>
</head>
<body>
    <style>
        .offline-container {
            max-width:100%;
            margin-top:4px;
            padding: 10px;
            background: #DDD;
            border: solid thin #999;
        }
        @media only screen and (min-width: 721px) {
            .offline-container {
                position: absolute;
                left: 50%;
                width: 600px;
                margin-left: -300px;
            }
        }
    </style>

    <div class="offline-container"> <?php
        require_once("/srv/www/include/php/application.php");
        define ("DEVELOP",false);
        define ("PROJ_NAME","abendmusik.at");
        define ("APP_NAME","Abendmusik in der Magdalenabergkirche");
        echo application::render_offlinePage(array(
            "referer" => "joomla",
            "offline" => true,
            "days" => 1,
            "hours" => 2
        )); ?>
    </div>
</body>
</html>

Die in obigem Code aufgerufene Funktion application::renderOfflinePagezeigt an, wie lang die Seite offline ist.

Hier der Code meiner Offline Funktion:

static function renderOfflinePage($params=array()) {
    date_default_timezone_set('Europe/Vienna');
    foreach ( $params as $key => $value ) $$key = $value;

    $start = mktime(date('H'), 0, 0, date("m"), date("d") , date("Y"));
    $sec = ($days * 24 + $hours) * 60 * 60;
    $ende_timestamp = $start + $sec;
    $Uhrzeit = strftime ("%H:00",$ende_timestamp);
    if ( $days == 0 ) {
        $Datum = "heute";
    } else {
        $Datum = strftime ("%d. %B %Y",$ende_timestamp);
    }
    $return = "<h1>Wartung</h1>";
    $return .= "<h2>".$caption."</h2>";
    $return .=  "<p>Diese Seite ist voraussichtlich bis <strong>".$Datum." ".$Uhrzeit."</strong> nicht verfügbar.</p>";
    $return .=  "<p>Bitte um Verständnis.</p>";
    $return .=  "<a href='mail@example.com'>Mail</a>an Webmaster.";
    return $return;
} 

Overrides verwalten

Die Änderungen, die man im Code durchführt, sollten möglichst gut kommentiert werden.

Hat man von einer Komponente ein Override im Template angelegt, so wird das nicht überschrieben bei einem Update der Core Komponenten, was ja der Sinn von Overrides ist. Das hat aber auch zur Folge, dass Verbesserungen im Core nicht wirksam werden im Override.

Falls man einmal Overrides nach Core-Updates ändern muss, ist es hilfreich, wenn man das Override sauber mit Kommentaren versehen hat.