diff --git a/teamcard-admin.css b/teamcard-admin.css new file mode 100644 index 0000000..504a5cf --- /dev/null +++ b/teamcard-admin.css @@ -0,0 +1,157 @@ +.teamcard-admin { + margin: 20px 0; +} + +.teamcard-add-new-form { + background: #fff; + border: 1px solid #ccd0d4; + box-shadow: 0 1px 1px rgba(0,0,0,.04); + padding: 20px; + margin-bottom: 20px; +} + +.form-fields { + display: flex; + flex-wrap: wrap; + gap: 15px; +} + +.form-field { + flex: 1 0 200px; +} + +.form-field label { + display: block; + margin-bottom: 5px; + font-weight: 600; +} + +.form-field input[type="text"] { + width: 100%; + padding: 8px; +} + +.teamcard-item td { + vertical-align: middle; +} + +.teamcard-bild { + cursor: move; +} + +.image-preview-container { + margin-bottom: 10px; + min-height: 50px; +} + +.teamcard-bild-vorschau { + max-width: 80px; + max-height: 80px; + border-radius: 4px; +} + +.editable { + padding: 8px; + border: 1px solid transparent; + border-radius: 4px; + transition: all 0.2s; +} + +.editable:hover { + border-color: #ddd; + background-color: #f9f9f9; + cursor: pointer; +} + +.inline-edit { + width: 100%; + padding: 6px; +} + +.ui-state-highlight { + height: 80px; + background-color: #f0f0f0; + border: 1px dashed #ccc; +} + +#teamcard-message { + position: fixed; + top: 50px; + right: 20px; + z-index: 9999; + max-width: 300px; +} + +/* Container für das Teamkarten-Grid */ +.teamcard-grid { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + margin-top: 30px; +} + +/* Stil für jedes Teammitglied */ +.teamcard { + border: 2px solid #e0e0e0; + border-radius: 10px; + padding: 20px; + width: 280px; + text-align: center; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + background-color: #fff; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +/* Hover-Effekte */ +.teamcard:hover { + transform: translateY(-10px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); +} + +/* Bild des Teammitglieds */ +.teamcard img { + max-width: 100px; + height: 100px; + border-radius: 50%; + margin-bottom: 15px; + transition: transform 0.3s ease; +} + +/* Hover-Effekt für das Bild */ +.teamcard:hover img { + transform: scale(1.1); +} + +/* Name des Teammitglieds */ +.teamcard h3 { + font-size: 1.2em; + font-weight: 600; + margin: 10px 0; + color: #333; +} + +/* Funktion und Zuständigkeit des Teammitglieds */ +.teamcard p { + font-size: 0.95em; + color: #666; + margin-bottom: 10px; +} + +/* Stil für den Hover-Effekt beim Teammitglied */ +.teamcard:hover h3, +.teamcard:hover p { + color: #0073e6; +} + +/* Stil für den Container der Teamkarten auf mobilen Geräten */ +@media (max-width: 768px) { + .teamcard-grid { + justify-content: space-evenly; + } + + .teamcard { + width: 100%; + max-width: 320px; + } +} diff --git a/teamcard-admin.js b/teamcard-admin.js new file mode 100644 index 0000000..886c22b --- /dev/null +++ b/teamcard-admin.js @@ -0,0 +1,237 @@ +jQuery(document).ready(function($) { + // Medienbibliothek für neues Teammitglied + var newTeamcardFrame; + + $('#new-teamcard-bild-button').on('click', function(e) { + e.preventDefault(); + + if (newTeamcardFrame) { + newTeamcardFrame.open(); + return; + } + + newTeamcardFrame = wp.media({ + title: 'Bild auswählen', + button: { text: 'Verwenden' }, + multiple: false + }); + + newTeamcardFrame.on('select', function() { + var attachment = newTeamcardFrame.state().get('selection').first().toJSON(); + $('#new-teamcard-bild-id').val(attachment.id); + $('#new-teamcard-bild-vorschau').attr('src', attachment.url).show(); + }); + + newTeamcardFrame.open(); + }); + + // Medienbibliothek für vorhandene Teammitglieder + var teamcardFrame; + + $(document).on('click', '.teamcard-bild-button', function(e) { + e.preventDefault(); + + var button = $(this); + var teamcardId = button.data('id'); + + if (teamcardFrame) { + teamcardFrame.open(); + return; + } + + teamcardFrame = wp.media({ + title: 'Bild auswählen', + button: { text: 'Verwenden' }, + multiple: false + }); + + teamcardFrame.on('select', function() { + var attachment = teamcardFrame.state().get('selection').first().toJSON(); + + $.ajax({ + url: teamcard_data.ajax_url, + type: 'POST', + data: { + action: 'update_teamcard_image', + id: teamcardId, + bild_id: attachment.id, + nonce: teamcard_data.nonce + }, + success: function(response) { + if (response.success) { + var container = button.siblings('.image-preview-container'); + container.html(''); + showMessage('Bild erfolgreich aktualisiert', 'success'); + } + } + }); + }); + + teamcardFrame.open(); + }); + + // Neues Teammitglied hinzufügen + $('#add-teamcard-button').on('click', function() { + var name = $('#new-teamcard-name').val(); + var funktion = $('#new-teamcard-funktion').val(); + var zustaendigkeit = $('#new-teamcard-zustaendigkeit').val(); + var bildId = $('#new-teamcard-bild-id').val(); + + if (!name) { + showMessage('Bitte gib einen Namen ein', 'error'); + return; + } + + $.ajax({ + url: teamcard_data.ajax_url, + type: 'POST', + data: { + action: 'add_teamcard', + name: name, + funktion: funktion, + zustaendigkeit: zustaendigkeit, + bild_id: bildId, + nonce: teamcard_data.nonce + }, + success: function(response) { + if (response.success) { + var bildHtml = ''; + if (response.data.bild_url) { + bildHtml = ''; + } + + var newRow = '' + + '' + + '
' + bildHtml + '
' + + '' + + '' + + '
' + name + '
' + + '
' + funktion + '
' + + '
' + zustaendigkeit + '
' + + '' + + ''; + + $('#teamcard-list').append(newRow); + + // Formular zurücksetzen + $('#new-teamcard-name').val(''); + $('#new-teamcard-funktion').val(''); + $('#new-teamcard-zustaendigkeit').val(''); + $('#new-teamcard-bild-id').val(''); + $('#new-teamcard-bild-vorschau').attr('src', '').hide(); + + showMessage('Teammitglied erfolgreich hinzugefügt', 'success'); + } else { + showMessage(response.data.message, 'error'); + } + } + }); + }); + + // Inline-Bearbeitung + $(document).on('click', '.editable', function() { + var element = $(this); + var currentText = element.text(); + + element.html(''); + element.find('input').focus().select(); + }); + + $(document).on('blur', '.inline-edit', function() { + var input = $(this); + var element = input.parent(); + var newValue = input.val(); + var field = element.data('field'); + var id = element.data('id'); + + $.ajax({ + url: teamcard_data.ajax_url, + type: 'POST', + data: { + action: 'update_teamcard', + id: id, + field: field, + value: newValue, + nonce: teamcard_data.nonce + }, + success: function(response) { + if (response.success) { + element.text(newValue); + showMessage('Erfolgreich aktualisiert', 'success'); + } + } + }); + }); + + $(document).on('keypress', '.inline-edit', function(e) { + if (e.which === 13) { + $(this).blur(); + } + }); + + // Teammitglied löschen + $(document).on('click', '.teamcard-delete', function() { + if (!confirm('Möchtest du dieses Teammitglied wirklich löschen?')) { + return; + } + + var button = $(this); + var id = button.data('id'); + + $.ajax({ + url: teamcard_data.ajax_url, + type: 'POST', + data: { + action: 'delete_teamcard', + id: id, + nonce: teamcard_data.nonce + }, + success: function(response) { + if (response.success) { + button.closest('tr').remove(); + showMessage('Teammitglied erfolgreich gelöscht', 'success'); + } else { + showMessage(response.data.message, 'error'); + } + } + }); + }); + + // Drag & Drop Sortierung + $('#teamcard-list').sortable({ + handle: 'td:first', + placeholder: 'ui-state-highlight', + update: function(event, ui) { + var order = []; + $('.teamcard-item').each(function() { + order.push($(this).data('id')); + }); + + $.ajax({ + url: teamcard_data.ajax_url, + type: 'POST', + data: { + action: 'update_teamcard_order', + order: order, + nonce: teamcard_data.nonce + }, + success: function(response) { + if (response.success) { + showMessage('Reihenfolge erfolgreich aktualisiert', 'success'); + } + } + }); + } + }); + + // Hilfsfunktion für Nachrichten + function showMessage(message, type) { + var messageElement = $('#teamcard-message'); + messageElement.removeClass('notice-success notice-error').addClass('notice-' + type); + messageElement.html('

' + message + '

').show(); + + setTimeout(function() { + messageElement.fadeOut(); + }, 3000); + } +}); diff --git a/teamcards-plugin.php b/teamcards-plugin.php new file mode 100644 index 0000000..70f85d6 --- /dev/null +++ b/teamcards-plugin.php @@ -0,0 +1,359 @@ + [ + 'name' => 'Teammitglieder', + 'singular_name' => 'Teammitglied', + 'add_new' => 'Neues Teammitglied', + 'add_new_item' => 'Teammitglied hinzufügen', + 'edit_item' => 'Teammitglied bearbeiten', + ], + 'public' => true, + 'show_ui' => false, // Standard-UI ausblenden + 'show_in_menu' => false, // Nicht im Hauptmenü anzeigen + 'menu_icon' => 'dashicons-groups', + 'supports' => ['title'], + 'has_archive' => false, + 'show_in_admin_bar' => false, + ]); + + register_taxonomy('teamcard_kategorie', 'teamcard', [ + 'labels' => [ + 'name' => 'Kategorien', + 'singular_name' => 'Kategorie', + ], + 'hierarchical' => true, + 'public' => true, + 'show_admin_column' => true, + ]); +} +add_action('init', 'teamcard_register_post_type'); + +// Admin-Menü hinzufügen +function teamcard_add_admin_menu() { + add_menu_page( + 'Teammitglieder verwalten', + 'Teamkarten', + 'manage_options', + 'teamcard_management', + 'teamcard_admin_page', + 'dashicons-groups', + 30 + ); +} +add_action('admin_menu', 'teamcard_add_admin_menu'); + +// Die Hauptverwaltungsseite +function teamcard_admin_page() { + ?> +
+

Teammitglieder verwalten

+ + +
+

Neues Teammitglied hinzufügen

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + +
+
+ +
+
+
+ +

Vorhandene Teammitglieder

+

Ziehe die Zeilen, um die Reihenfolge zu ändern. Klicke auf die Felder, um sie zu bearbeiten.

+ + + + + + + + + + + + + + 'teamcard', + 'posts_per_page' => -1, + 'orderby' => 'menu_order', + 'order' => 'ASC' + ]); + + foreach ($teamcards as $teamcard) { + $funktion = get_post_meta($teamcard->ID, '_teamcard_funktion', true); + $zustaendigkeit = get_post_meta($teamcard->ID, '_teamcard_zustaendigkeit', true); + $bild_id = get_post_meta($teamcard->ID, '_teamcard_bild_id', true); + $bild_url = $bild_id ? wp_get_attachment_image_url($bild_id, 'thumbnail') : ''; + ?> + + + + + + + + + +
BildNameFunktionZuständigkeitAktionen
+
+ + + +
+ + 		+
post_title); ?>
+ 		+
+ 		+
+ 		+ +
+ + +
+ 'teamcard', + 'posts_per_page' => 1, + 'orderby' => 'menu_order', + 'order' => 'DESC' + ]); + + if (!empty($posts)) { + $max_order = $posts[0]->menu_order; + } + + // Neuen Post erstellen + $post_id = wp_insert_post([ + 'post_type' => 'teamcard', + 'post_title' => $name, + 'post_status' => 'publish', + 'menu_order' => $max_order + 1 + ]); + + if ($post_id) { + update_post_meta($post_id, '_teamcard_funktion', $funktion); + update_post_meta($post_id, '_teamcard_zustaendigkeit', $zustaendigkeit); + + if ($bild_id > 0) { + update_post_meta($post_id, '_teamcard_bild_id', $bild_id); + } + + $bild_url = $bild_id ? wp_get_attachment_image_url($bild_id, 'thumbnail') : ''; + + wp_send_json_success([ + 'id' => $post_id, + 'bild_url' => $bild_url + ]); + } else { + wp_send_json_error(['message' => 'Fehler beim Erstellen des Teammitglieds']); + } + }); + + // Teammitglied aktualisieren + add_action('wp_ajax_update_teamcard', function() { + $post_id = intval($_POST['id']); + $field = sanitize_text_field($_POST['field']); + $value = sanitize_text_field($_POST['value']); + + if ($field === 'title') { + wp_update_post([ + 'ID' => $post_id, + 'post_title' => $value + ]); + } else { + update_post_meta($post_id, '_teamcard_' . $field, $value); + } + + wp_send_json_success(); + }); + + // Teammitglied löschen + add_action('wp_ajax_delete_teamcard', function() { + $post_id = intval($_POST['id']); + + if (wp_delete_post($post_id, true)) { + wp_send_json_success(); + } else { + wp_send_json_error(['message' => 'Fehler beim Löschen des Teammitglieds']); + } + }); + + // Bild aktualisieren + add_action('wp_ajax_update_teamcard_image', function() { + $post_id = intval($_POST['id']); + $bild_id = intval($_POST['bild_id']); + + update_post_meta($post_id, '_teamcard_bild_id', $bild_id); + $bild_url = wp_get_attachment_image_url($bild_id, 'thumbnail'); + + wp_send_json_success(['bild_url' => $bild_url]); + }); + + // Reihenfolge aktualisieren + add_action('wp_ajax_update_teamcard_order', function() { + $order = $_POST['order']; + + foreach ($order as $position => $post_id) { + wp_update_post([ + 'ID' => intval($post_id), + 'menu_order' => $position + ]); + } + + wp_send_json_success(); + }); +} +add_action('init', 'teamcard_ajax_handlers'); + +// Admin-Skripte und Styles laden +function teamcard_admin_scripts($hook) { + if ($hook !== 'toplevel_page_teamcard_management') return; + + wp_enqueue_media(); + wp_enqueue_script('jquery-ui-sortable'); + + wp_enqueue_style( + 'teamcard-admin-style', + plugin_dir_url(__FILE__) . 'teamcard-admin.css', + [], + '1.0' + ); + + wp_enqueue_script( + 'teamcard-admin-script', + plugin_dir_url(__FILE__) . 'teamcard-admin.js', + ['jquery', 'jquery-ui-sortable'], + '1.0', + true + ); + + wp_localize_script('teamcard-admin-script', 'teamcard_data', [ + 'ajax_url' => admin_url('admin-ajax.php'), + 'nonce' => wp_create_nonce('teamcard_nonce') + ]); +} +add_action('admin_enqueue_scripts', 'teamcard_admin_scripts'); + +// Shortcode für die Frontend-Anzeige +function teamcard_shortcode($atts) { + $atts = shortcode_atts([ + 'kategorie' => '', + ], $atts); + + $args = [ + 'post_type' => 'teamcard', + 'posts_per_page' => -1, + 'orderby' => 'menu_order', + 'order' => 'ASC', + ]; + + if ($atts['kategorie']) { + $args['tax_query'] = [[ + 'taxonomy' => 'teamcard_kategorie', + 'field' => 'slug', + 'terms' => $atts['kategorie'], + ]]; + } + + $query = new WP_Query($args); + if (!$query->have_posts()) return '

Keine Teammitglieder gefunden.

'; + + ob_start(); + echo '
'; + while ($query->have_posts()) { + $query->the_post(); + $funktion = get_post_meta(get_the_ID(), '_teamcard_funktion', true); + $zustaendigkeit = get_post_meta(get_the_ID(), '_teamcard_zustaendigkeit', true); + $bild_id = get_post_meta(get_the_ID(), '_teamcard_bild_id', true); + $bild_url = $bild_id ? wp_get_attachment_url($bild_id) : ''; + echo '
'; + + // Bild links + if ($bild_url) { + echo '
'; + echo ''; + echo '
'; + } + + // Text rechts + echo '
'; + echo '

' . get_the_title() . '

'; + echo '

' . esc_html($funktion) . '

'; + echo '

' . esc_html($zustaendigkeit) . '

'; + echo '
'; + + echo '
'; // Schließt die Teamcard-Div + } + echo '
'; // Schließt die Teamcard-Grid-Div + + wp_reset_postdata(); + return ob_get_clean(); +} +add_shortcode('teamcards', 'teamcard_shortcode'); \ No newline at end of file