Trick # 604 | Dieser Beitrag beinhaltet 0 Wörter. – Geschätzte Lesezeit: ca. 0 Minuten.
Die Arbeit im WordPress-Backend ist komfortabel – bis man versucht, direkt Dateien oder Ordner im Theme-Verzeichnis zu erstellen. Standardmässig fehlen WordPress nämlich solche Funktionen; wer Verzeichnisse oder Dateien anlegen will, greift darum auf FTP-Programme zurück. Zu umständlich, findet Dr. Code und rüstet WordPress mit einem Datei-Manager nach.
Die Idee hinter Ganzen ist die direkte Bearbeitung im Backend. Sie müssen nicht mehr auf ein FTP-Programm zurückgreifen. Sie können jederzeit und direkt im Backend Dateien und Ordner hinzufügen. Aus Sicherheitsgründen bewgen wir uns nur im aktuellen Theme-Ordner – in unserem Fall im «Divi-Child-Theme». Übergeordnete Ordner erscheinen im Datei-Manager nicht.
Folgende Vorgaben erfüllt der Datei-Manager, den wir hier implementieren:
- Das Anzeigen einer Baumstruktur der Ordner im aktiven Child-Theme.
- Das Erstellen neuer Dateien und Ordner direkt im Backend.
- Die Auswahl eines Zielordners, in dem neue Elemente erstellt werden sollen.
Das folgende Code-Stück gehört in die Datei functions.php. Diese finden Sie im WordPress-Backend unter Design/Theme-Datei-Editor:
// Datei-Manager erstellen
function custom_file_editor_page() {
add_menu_page(
'Datei-Manager',
'Datei-Manager',
'manage_options',
'custom-file-editor',
'custom_file_editor_callback',
'dashicons-admin-generic',
80
);
}
add_action('admin_menu', 'custom_file_editor_page');function custom_file_editor_assets() {
wp_enqueue_script('jstree', 'https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js', ['jquery'], null, true);
wp_enqueue_style('jstree-style', 'https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css');
}
add_action('admin_enqueue_scripts', 'custom_file_editor_assets');function custom_file_editor_callback() {
$base_dir = get_stylesheet_directory(); // Start im Child-Theme-Verzeichnis// Funktion zum Abrufen der Verzeichnisstruktur
function get_directory_structure($dir, $base = '') {
$result = [];
$items = scandir($dir);
foreach ($items as $item) {
if ($item === '.' || $item === '..') {
continue;
}
$path = $dir . '/' . $item;
if (is_dir($path)) {
$result[] = [
'id' => str_replace(get_stylesheet_directory() . '/', '', $path),
'text' => $base . $item,
'children' => get_directory_structure($path, $base . $item . '/'),
'type' => 'folder'
];
}
}
return $result;
}$folders = json_encode(get_directory_structure($base_dir));// HTML-Ausgabe
echo '<h1>Datei- und Ordner-Manager</h1>';
echo '<div id="folder-explorer"></div>';
echo '<form method="post" style="margin-top: 20px;">';// Radio-Buttons
echo '<div style="margin-bottom: 15px;">';
echo '<label><input type="radio" name="type" value="file"> Datei erstellen</label>';
echo '<label style="margin-left: 15px;"><input type="radio" name="type" value="folder"> Ordner erstellen</label>';
echo '</div>';// Eingabefeld
echo '<div style="margin-bottom: 15px;">';
echo '<input type="text" name="new_name" placeholder="Name (z.B. neue-datei.php oder neuer-ordner)" required style="width: 100%; max-width: 400px; padding: 8px;">';
echo '</div>';// Erstellen-Button
echo '<div>';
echo '<button type="submit" name="create" class="button button-primary" style="padding: 10px 20px;">Erstellen</button>';
echo '</div>';// Verstecktes Feld für den ausgewählten Ordner
echo '<input type="hidden" name="target_dir" id="target_dir" value="">';echo '</form>';// Element erstellen
if (isset($_POST['create'])) {
$new_name = sanitize_text_field($_POST['new_name']);
$type = sanitize_text_field($_POST['type']);
$target_dir = sanitize_text_field($_POST['target_dir']);
$target_path = trailingslashit($base_dir . '/' . $target_dir) . $new_name;if ($type === 'file') {
if (!file_exists($target_path)) {
file_put_contents($target_path, '');
echo '<script>location.reload();</script>';
} else {
echo '<div class="error"><p>Datei existiert bereits!</p></div>';
}
} elseif ($type === 'folder') {
if (!file_exists($target_path)) {
mkdir($target_path, 0755, true);
echo '<script>location.reload();</script>';
} else {
echo '<div class="error"><p>Ordner existiert bereits!</p></div>';
}
}
}// JavaScript für die Interaktion
echo '<script>
jQuery(document).ready(function($) {
var folderData = ' . $folders . ';
$("#folder-explorer").jstree({
"core" : {
"data" : folderData
},
"plugins" : ["types"],
"types" : {
"folder" : {
"icon" : "dashicons dashicons-category"
}
}
});// Ordnerauswahl speichern
$("#folder-explorer").on("select_node.jstree", function(e, data) {
$("#target_dir").val(data.node.id);
});
});
</script>';
}Im Backend sehen Sie nun eine neue Administrations-Seite «Datei-Manager» angezeigt. Dort können Sie wahlweise Ordner oder Dateien erstellen. Wichtig ist, den Zielordner jeweils im Verzeichnisbaum ganz oben zu markieren.
Der Datei-Manager ist eine grossartige Möglichkeit, die Arbeit im WordPress-Backend zu erleichtern. Mit einigen Zeilen Code erhalten Sie ein mächtiges Werkzeug, das sowohl Zeit spart als auch die Flexibilität erhöht.
Werbung


