Trick # 602 | Dieser Beitrag beinhaltet 0 Wörter. – Geschätzte Lesezeit: ca. 0 Minuten.
Standardmässig erlaubt WordPress nur begrenzte Dateigrössen für Uploads. Einerseits ist das sinnvoll, um die Performance der Website nicht zu beeinträchtigen – zu frosse Bilder können die Ladezeit drastisch erhöhen. Doch es gibt Situationen, in denen Sie grössere Dateien hochladen müssen. Sei es ein hochauflösendes Video, ein umfangreiches PDF oder eine andere Datei. Die Lösung ist ein Speicherplatz ausserhalb von WordPress.
Die Idee ist einfach: Wir bauen eine Upload-Lösung, die völlig losgelöst von WordPress arbeitet. Der Vorteil: Sie behalten die Kontrolle über die maximale Dateigrösse und können gleichzeitig sicherstellen, dass nur autorisierte Nutzer Zugriff haben.
Hier sind die wichtigsten Features unseres Systems:
- Login-Schutz: Nur Benutzer mit den richtigen Zugangsdaten können Dateien hochladen.
- CAPTCHA-Schutz: Um Spam-Bots auszuschliessen, verwenden wir ein arithmetisches CAPTCHA.
- Dateinamensanpassung: Die Namen der hochgeladenen Dateien werden bereinigt, um sicherzustellen, dass sie keine Sonderzeichen enthalten.
- Duplikat-Erkennung: Das System prüft, ob eine Datei mit demselben Namen bereits existiert. Falls dies der Fall ist, wird der Name automatisch um einen Zähler erweitert, um ein Überschreiben zu verhindern.
- Organisierte Speicherung: Dateien werden in Jahresordnern gespeichert, um die Verwaltung zu erleichtern.
Beginnen wir mit der Vorarbeit:
- Legen Sie im Administrations-Tool Ihres Hosting-Partners eine Subdomain an. Wenn Ihre Domain die-schoenste-website.ch heisst könnten Sie die Subdomain zum Beispiel upload.die-schoenste-website.ch heissen. Das ist normalerweise kostenlos.
>>> Meistens dauert die Installation der Subdomain einige Minuten. Warten Sie also mit den nächsten Schritten eine Weile. - Eröffnen Sie bei dieser Gelegnheit auch einen FTP-User für die neue Subdomain. Das können Sie ebenfalls im Admin-Tool Ihres Hosting-Partners erledigen.
>>> Verwenden Sie dabei unbedingt ein sicheres Passwort. - Erstellen Sie innerhalb der Subdomain zwei Dateien: index.php und styles.css. Auch dies können Sie meist im Addministrationstool des Providers erledigen, oder aber mittels FTP-Programm (etwa Filezilla).
>>> Wenn Sie die Dateien mittels FTP-Programm erstellen wollen, benötigen Sie nun die Logindaten des vorher erstellen FTP-Users.
Soweit die nötigen Vorarbeiten.
Nun kopieren Sie den folgenden Code und fügen ihn in die neu erstellte Datei index.php ein. Auch dies können Sie im Administrationstool Ihres Hosters erledigen oder im FTP-Programm:
Code für die Datei index.php
<?php
session_start();// Zugangsdaten
define('USERNAME', 'HIER_IHR_BENUTZERNAME');
define('PASSWORD', 'HIER_IHR_PASSWORT');// CAPTCHA generieren
if (!isset($_SESSION['captcha'])) {
$_SESSION['captcha'] = [
'num1' => rand(1, 9),
'num2' => rand(1, 9),
'result' => 0
];
$_SESSION['captcha']['result'] = $_SESSION['captcha']['num1'] + $_SESSION['captcha']['num2'];
}// Funktion zur Dateinamensanpassung
function sanitizeFileName($fileName) {
// Mapping für häufige Ersetzungen (Umlaute, Akzente, Sonderzeichen)
$replaceMap = [
'ä' => 'ae', 'ö' => 'oe', 'ü' => 'ue', 'Ä' => 'Ae', 'Ö' => 'Oe', 'Ü' => 'Ue',
'ß' => 'ss',
'é' => 'e', 'è' => 'e', 'ê' => 'e', 'ë' => 'e',
'á' => 'a', 'à' => 'a', 'â' => 'a', 'ã' => 'a', 'å' => 'a', 'ä' => 'a',
'í' => 'i', 'ì' => 'i', 'î' => 'i', 'ï' => 'i',
'ó' => 'o', 'ò' => 'o', 'ô' => 'o', 'õ' => 'o', 'ö' => 'o', 'ø' => 'o',
'ú' => 'u', 'ù' => 'u', 'û' => 'u', 'ü' => 'u',
'ç' => 'c',
'ñ' => 'n',
'ý' => 'y', 'ÿ' => 'y',
'Æ' => 'Ae', 'æ' => 'ae', 'Ø' => 'Oe', 'œ' => 'oe'
];// Ersetzungen basierend auf Mapping
$fileName = strtr($fileName, $replaceMap);// Transliteration: Entfernt verbleibende Akzente und nicht-ASCII-Zeichen
$fileName = iconv('UTF-8', 'ASCII//TRANSLIT//IGNORE', $fileName);// Kleinbuchstaben und Ersetzen von Leerzeichen durch Unterstriche
$fileName = strtolower($fileName);
$fileName = preg_replace('/\s+/', '_', $fileName);// Entfernen von unerlaubten Zeichen, nur alphanumerische Zeichen, Unterstrich, Punkt und Bindestrich zulassen
$fileName = preg_replace('/[^a-z0-9\-_\.]/', '', $fileName);return $fileName;
}// Funktion, um Dateinamen zu erweitern
function getUniqueFileName($directory, $fileName) {
$pathInfo = pathinfo($fileName);
$baseName = $pathInfo['filename'];
$extension = isset($pathInfo['extension']) ? '.' . $pathInfo['extension'] : '';
$counter = 1;$newFileName = $fileName;
while (file_exists($directory . '/' . $newFileName)) {
$newFileName = $baseName . '-' . $counter . $extension;
$counter++;
}return $newFileName;
}// Anmeldung
if (!isset($_SESSION['logged_in'])) {
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if ($_POST['username'] === USERNAME && $_POST['password'] === PASSWORD) {
$_SESSION['logged_in'] = true;
header('Location: index.php');
exit;
} else {
$error = 'Ungültige Zugangsdaten!';
}
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form method="POST" action="">
<h1>Login</h1>
<?php if (isset($error)) echo '<p style="color: #e75667;">' . $error . '</p>'; ?>
<input type="text" name="username" placeholder="Benutzername" required>
<input type="password" name="password" placeholder="Passwort" required>
<button type="submit">Anmelden</button>
</form>
</body>
</html>
<?php
exit;
}// Datei-Upload
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
$user_captcha = isset($_POST['captcha']) ? intval($_POST['captcha']) : null;
if ($user_captcha !== $_SESSION['captcha']['result']) {
echo '<p style="color: #e75667;">Falsches CAPTCHA, bitte erneut versuchen!</p>';
} else {
$file = $_FILES['file'];
$upload_dir = 'uploads/' . date('Y');
if (!is_dir($upload_dir)) {
mkdir($upload_dir, 0777, true);
}// Dateiname anpassen
$sanitizedFileName = sanitizeFileName($file['name']);
$uniqueFileName = getUniqueFileName($upload_dir, $sanitizedFileName);
$target_path = $upload_dir . '/' . $uniqueFileName;if (move_uploaded_file($file['tmp_name'], $target_path)) {
$file_url = 'https://' . $_SERVER['HTTP_HOST'] . '/' . $target_path;
echo '<h1>Datei erfolgreich hochgeladen!</h1>';
echo '<p style="text-align: center;">Die Datei hat die URL<br /><b>' . $file_url . '</b></p>';
echo '<p><button onclick="copyToClipboard(\'' . $file_url . '\')">URL in die Zwischenablage kopieren</button>';
echo '<span id="confirmationMessage" style="display: none; margin-left: 10px; color: #538f38;">URL wurde in die Zwischenablage kopiert.</span></p>';
} else {
echo '<p style="color: #e75667;">Fehler beim Hochladen der Datei</p>';
}
$_SESSION['captcha'] = [
'num1' => rand(1, 9),
'num2' => rand(1, 9),
'result' => 0
];
$_SESSION['captcha']['result'] = $_SESSION['captcha']['num1'] + $_SESSION['captcha']['num2'];
}
}
?><!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datei-Upload</title>
<link rel="stylesheet" href="styles.css">
<script>
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
const confirmationMessage = document.getElementById('confirmationMessage');
confirmationMessage.style.display = 'inline'; // Nachricht anzeigen
});
}function displayFileName(input) {
const fileNameDisplay = document.getElementById('fileNameDisplay');
if (input.files && input.files[0]) {
fileNameDisplay.textContent = `Ausgewählte Datei: ${input.files[0].name}`;
} else {
fileNameDisplay.textContent = '';
}
}
</script>
</head>
<body>
<form method="POST" enctype="multipart/form-data">
<h1>Datei-Upload</h1>
<label for="file-upload" class="custom-file-upload">
Datei auswählen
</label>
<input id="file-upload" type="file" name="file" accept=".jpg,.jpeg,.png,.gif,.pdf,.zip,.rar,.7z,.docx,.xlsx,.txt,.mp4,.avi,.mov,.wmv,.flv,.mp3,.wav,.ogg,.aac,.html,.css,.js,.json,.xml,.csv,.pptx,.xlsx,.xls,.exe,.tar,.gz,.tgz,.bz2" onchange="displayFileName(this)" required>
<p id="fileNameDisplay" style="margin-top: 10px;"></p> <!-- Platz für den Dateinamen -->
<p>Was ergibt <?= $_SESSION['captcha']['num1'] ?> + <?= $_SESSION['captcha']['num2'] ?>?</p>
<input type="text" name="captcha" required>
<button type="submit">Hochladen</button>
</form>
</body>
</html>Besonders beachten müssen Sie eigentlich nur die Zeilen 5 und 6: Zunächst können Sie auf Zeile 5 nun einen Usernamen amlegen, mit dem Sie sich dereinst Zugang zum Upload verschaffen. Das Passwort kommt auf Zeile 6 – achten Sie darauf, dass das Passwort sicher ist.
Der nächste Codeblock ist eigentlich optional, aber empfehlenswert: Es ist ein CSS-Stylesheet, mit welchem Sie das Aussehen Ihrer neuen Upload-Seite festlegen können.
Der Code muss dabei in daie vorher erstellte Datei styles.css. Auch dieses File editieren Sie im Admin-Tool des Providers oder aber im FTP-Programm:
Code für die Datei styles.css
body {
font-family: Verdana, Arial, sans-serif;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}h1 {
color: #538f38;
}form {
margin-top: 50px;
background: #fff;
border: 1px solid #ccc;
padding: 20px;
}form label {
display: block;
margin: 10px 0 5px;
}form input[type="text"],
form input[type="password"],
form input[type="file"] {
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
}form button, button, .custom-file-upload {
background: #e75667;
color: #fff;
border: 1px solid #e75667;
padding: 10px 15px;
cursor: pointer;
font-size: 14px;
}form button:hover, button:hover, .custom-file-upload:hover {
background: #e4e4e4;
color: #1f431e;
}
input[type="file"] {
display: none; /* Versteckt das Standard-Uploadfeld */
}.custom-file-upload {
display: inline-block;
}Sämtliche Auszeichnungen im Stylesheet können Sie natürlich frei anpassen. Try & Error heisst das Motto.
Jetzt ist es an der Zeit, das Upload-Tool zu testen:
- Gehen Sie mit dem Webbrowser auf die eingangs erstellte Subdomain und loggen Sie sich mit den Credentials ein, die sie im index.php-Script verwendet haben.
- Der folgende Uploadscreen akzeptiert zahlreiche typische Internetformate.
- Das System lädt die Dateien in das Verzeichnis «uploads» hoch und erstellt darin auch gleich einen Jahresordner. Eine typische URL könnte dann etwa so aussehen:
https://upload.die-schoenste-website.ch/uploads/2026/ein-besonders-umfangreiches.pdf - Die Dateinamen werden beim Hochladen auch gleich auf Vordermann gebracht, so dass sie am Ende keine Grossbuchstaben, keine Umlaute und keine Accents mehr enthalten.
- Und als Spezial-Goodie sehen Sie nach dem Upload einerseits den Link und andererseits einen Button, der die URL zu Ihrem Upload in die Zwischenablage kopiert. Ideal zum Weiterverarbeiten auf der WordPress-Website.
Fazit: Mit diesem Skript schaffen Sie eine flexible Lösung für den Upload grösserer Dateien. Sie umgehen die Einschränkungen von WordPress und behalten die Kontrolle über die Sicherheit und Verwaltung.
Äusserst praktisch.
Werbung
Ein Bild können Sie auf Ihrer Divi-Website auch mit einem Button oder mit einem Textabschnitt überlagern. Das geht ganz einfach mit ein wenig CSS-Code.
Das Menümodul des Divi-Themes lässt einige Einstellungen zu: Logo und Menü zentrieren; Logo links und Menü rechts - was aber fehlt, ist die Option das Menü links und das Logo rechts darzustellen. Mit ein wenig Code kriegen Sie aber auch dies hin.
Der Divi-Builder ist zwar famos – ab und an wird er aber nicht benötigt. Die Impressum- oder Disclaimer-Seite etwa könnten Sie auch ohne den Divi-Builder erstellen. Das lässt sich zwar schon machen – ergibt aber einen Schönheitsfehler: Der ...
Das Footer-Menu im Divi-Theme ist von Haus aus immer links ausgerichtet. Eine Option, um es zu zentrieren oder rechtsbündig anzulegen, sucht man vergebens. Dennoch ist das möglich: mithilfe von ein paar Zeilen CSS-Code.
Keine Inhalte gefunden.
Werbung
