8 Commits
1.1 ... 1.2

8 changed files with 740 additions and 1 deletions

View File

@@ -0,0 +1,229 @@
/* Minecraft Modern Theme Login Styles */
body.login {
background-color: #14151a; /* Fallback-Farbe */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: 'Raleway', sans-serif;
}
/* Dunkler Overlay für bessere Lesbarkeit */
body.login::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20, 21, 26, 0.8);
z-index: -1;
}
/* Logo zentrieren */
.login h1 {
text-align: center;
margin-bottom: 50px; /* ANGEPASST: Mehr Abstand für das größere Logo */
}
.login h1 a {
width: auto;
height: 160px; /* ANGEPASST: Logo ist jetzt doppelt so groß */
background-size: contain;
}
/* Haupt-Container, der alles umschließt */
#login {
width: 80%;
max-width: 800px;
margin: 0 auto;
padding: 0;
background: none;
box-shadow: none;
}
/* NEU: Der Wrapper, der vom Skript erstellt wird. Dies ist unsere "Tabelle". */
#login-content-wrapper {
display: flex;
align-items: stretch; /* Sorgt dafür, dass beide Spalten die gleiche Höhe haben */
background-color: #252830;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
overflow: hidden; /* Sorgt für abgerundete Ecken an den Kind-Elementen */
}
/* Linke Spalte: Minecraft Avatar Slider (27.8%) */
#minecraft-avatar-slider {
flex: 0 0 27.8%; /* Feste Breite, wächst nicht, schrumpft nicht */
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding-top: 50px; /* ANGEPASST: Erzeugt den Raum, in den die Avatare verschoben werden */
background-color: #1a1c23; /* Leicht anderer Hintergrund für Kontrast */
height: auto; /* Höhe anpassen, damit sie nicht fest ist */
position: relative; /* Wichtig für den Slider */
overflow: hidden; /* Verhindert, dass Bilder überstehen */
}
#minecraft-avatar-slider .avatar-slide {
width: 100%;
height: auto; /* Seitenverhältnis beibehalten */
max-height: 400px; /* Maximale Höhe des Avatars, damit er nicht zu groß wird */
border-radius: 4px;
/* Slider-spezifische Stile */
position: absolute;
top: 25px; /* KORRIGIERT: Verschiebt alle Avatare um 50px nach unten */
left: 0;
opacity: 0;
transition: opacity 0.7s ease-in-out;
}
#minecraft-avatar-slider .avatar-slide-active {
opacity: 1;
}
/* Rechte Spalte: Login-Formular (72.2%) */
#loginform {
flex: 1; /* Nimmt den restlichen verfügbaren Platz ein */
padding: 40px;
background: none;
border: none;
box-shadow: none;
}
/* Formular-Felder */
#loginform p {
margin-bottom: 20px;
}
#loginform label {
color: #e4e4e4;
font-weight: 600;
display: block;
margin-bottom: 8px;
}
#loginform input[type="text"],
#loginform input[type="password"] {
width: 100%;
padding: 14px;
background-color: #1e2029;
border: 1px solid #333;
border-radius: 4px;
color: #e4e4e4;
font-family: 'Raleway', sans-serif;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
}
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
border-color: #00d4ff;
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
outline: none;
}
/* Container für "Angemeldet bleiben" und "Passwort vergessen" */
.login-options-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.login-options-container .forgetmenot,
.login-options-container #nav {
margin: 0; /* Entfernt Standard-Abstände */
}
.forgetmenot label {
font-weight: 400;
font-size: 14px;
color: #a0a0a0;
display: flex;
align-items: center;
}
.forgetmenot input[type="checkbox"] {
margin-right: 8px;
}
.login-options-container #nav a {
color: #a0a0a0;
text-decoration: none;
font-weight: 400;
font-size: 14px;
transition: color 0.2s;
}
.login-options-container #nav a:hover {
color: #00d4ff;
}
/* Submit-Button */
#loginform .submit input[type="submit"] {
width: 100%;
padding: 14px;
background-color: #00d4ff;
border: none;
border-radius: 4px;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
#loginform .submit input[type="submit"]:hover {
background-color: #00a8cc;
}
/* Anpassungen für kleinere Bildschirme */
@media screen and (max-width: 768px) {
#login-content-wrapper {
flex-direction: column; /* Spalten untereinander */
}
#minecraft-avatar-slider {
flex: none; /* Setzt Flexbox zurück */
width: 100%;
padding: 30px; /* Padding wird zurückgesetzt */
padding-top: 30px; /* Padding oben auch auf mobilen Geräten anpassen */
}
#minecraft-avatar-slider .avatar-slide {
max-height: 300px; /* Auf mobilen Geräten etwas kleiner */
max-width: 200px; /* Und auch schmaler */
top: 30px; /* WICHTIG: Auch hier den top-Wert anpassen! */
}
}
/* Fehlermeldungen und Hinweise */
.login .message, .login #login_error {
background-color: rgba(0, 212, 255, 0.1);
border-left: 4px solid #00d4ff;
padding: 15px;
margin-bottom: 20px;
border-radius: 0 4px 4px 0;
color: #e4e4e4;
}
/* =========================================================================
=== NEU: STIL FÜR DIE LINKS UNTER DEM ANMELDE-BUTTON ====================
========================================================================= */
.post-login-links {
display: flex;
justify-content: space-between; /* Verteilt die Links auf die ganze Breite */
align-items: center;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #333; /* Trennlinie über den Links */
}
.post-login-links a {
color: #a0a0a0;
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease;
}
.post-login-links a:hover {
color: #00d4ff;
}

View File

@@ -298,3 +298,120 @@ function load_faq_page_template( $template ) {
}
add_filter( 'template_include', 'load_faq_page_template' );
// =========================================================================
// === CUSTOM LOGIN FUNCTIONS (KOMPLETT NEU & KORRIGIERT) ==========
// =========================================================================
// Lädt alle notwendigen Styles und Scripts nur für die Login-Seite
function minecraft_modern_login_assets() {
// Lade die Login-spezifische CSS
wp_enqueue_style('minecraft-modern-login-style', get_template_directory_uri() . '/css/login-style.css');
// Lade Font Awesome für Icons
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
// Lade das JavaScript für den Avatar-Slider
wp_enqueue_script('minecraft-avatar-slider-script', get_template_directory_uri() . '/js/login-slider.js', array('jquery'), '1.0', true);
// Lade das JavaScript, das die HTML-Struktur anpasst
wp_enqueue_script('minecraft-modern-login-script', get_template_directory_uri() . '/js/login-script.js', array('jquery'), '1.0', true);
wp_add_inline_script('minecraft-modern-login-script', "
jQuery(document).ready(function($) {
$('.forgetmenot, #nav').wrapAll('<div class=\"login-options-container\"></div>');
});
");
// Übergebe die Slider-Geschwindigkeit aus dem Customizer an das JavaScript
$slider_speed = get_theme_mod('login_avatar_slider_speed', 4); // Standard: 4 Sekunden
wp_localize_script('minecraft-avatar-slider-script', 'avatarSliderSettings', array(
'speed' => $slider_speed * 1000 // Umwandlung in Millisekunden für JS
));
// Hintergrundbild und Logo als Inline-CSS hinzufügen
$login_bg_image = get_theme_mod('login_background_image');
if ($login_bg_image) {
$custom_css = "body.login { background-image: url('{$login_bg_image}') !important; }";
wp_add_inline_style('minecraft-modern-login-style', $custom_css);
}
$logo_url = get_theme_mod('login_logo');
if ($logo_url) {
$logo_css = ".login h1 a { background-image: url('{$logo_url}') !important; }";
wp_add_inline_style('minecraft-modern-login-style', $logo_css);
}
}
add_action('login_enqueue_scripts', 'minecraft_modern_login_assets');
// Erstellt die HTML-Struktur für den Avatar-Slider
function add_minecraft_avatar_slider_to_login() {
$avatar_html = '<div id="minecraft-avatar-slider">';
$has_avatars = false;
// Durchlaufe alle 5 möglichen Avatar-Plätze
for ($i = 1; $i <= 5; $i++) {
$uuid = get_theme_mod('login_avatar_uuid_' . $i);
if (!empty($uuid)) {
$has_avatars = true;
$avatar_url = "https://visage.surgeplay.com/full/{$uuid}.png";
// Das erste Bild wird direkt angezeigt
$active_class = ($i === 1) ? 'avatar-slide-active' : '';
$avatar_html .= '<img class="avatar-slide ' . esc_attr($active_class) . '" src="' . esc_url($avatar_url) . '" alt="Minecraft Avatar ' . ($i + 1) . '">';
}
}
$avatar_html .= '</div>';
// Nur den Slider ausgeben, wenn mindestens ein Avatar hinterlegt wurde
if ($has_avatars) {
echo $avatar_html;
}
}
add_action('login_form', 'add_minecraft_avatar_slider_to_login');
function add_post_login_links() {
?>
<div class="post-login-links">
<a href="<?php echo esc_url(home_url()); ?>">&larr; Zu <?php bloginfo('name'); ?></a>
</div>
<?php
}
add_action('login_form_bottom', 'add_post_login_links');
// Entfernt unnötige Elemente von der Login-Seite
function customize_login_page() {
add_filter('login_display_language_dropdown', '__return_false');
add_filter('login_display_back_to_blog', '__return_false');
}
add_action('login_head', 'customize_login_page');
// Passt Login-URL und Titel an
function custom_login_url() { return home_url(); }
add_filter('login_headerurl', 'custom_login_url');
function custom_login_title() { return get_bloginfo('name'); }
add_filter('login_headertext', 'custom_login_title');
// =========================================================================
// === SCROLL TO TOP BUTTON ===============================================
// =========================================================================
// Fügt den HTML-Code für den Button zum Footer hinzu
function add_scroll_to_top_button() {
?>
<a href="#" id="scroll-to-top" title="Nach oben scrollen">
<i class="fas fa-chevron-up"></i>
</a>
<?php
}
add_action('wp_footer', 'add_scroll_to_top_button');
// Lädt das JavaScript für den Scroll-to-Top Button
function minecraft_modern_scroll_to_top_script() {
wp_enqueue_script(
'minecraft-scroll-to-top-script',
get_template_directory_uri() . '/js/scroll-to-top.js',
array('jquery'),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'minecraft_modern_scroll_to_top_script');

View File

@@ -215,6 +215,67 @@ function minecraft_modern_customize_register( $wp_customize ) {
'label' => 'FAQ System aktivieren', 'section' => 'faq_settings', 'settings' => 'faq_enabled', 'type' => 'checkbox',
) );
// =========================================================================
// === 6. LOGIN-BEREICH ====================================================
// =========================================================================
$wp_customize->add_section( 'login_settings', array(
'title' => 'Login-Einstellungen',
'priority' => 70,
'description' => 'Passe das Aussehen der wp-admin Login-Seite an.',
) );
// Login-Hintergrundbild
$wp_customize->add_setting( 'login_background_image', array(
'sanitize_callback' => 'esc_url_raw',
'transport' => 'refresh',
) );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'login_background_image', array(
'label' => 'Login-Hintergrundbild',
'section' => 'login_settings',
'settings' => 'login_background_image',
) ) );
// Login-Logo
$wp_customize->add_setting( 'login_logo', array(
'sanitize_callback' => 'esc_url_raw',
'transport' => 'refresh',
) );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'login_logo', array(
'label' => 'Login-Logo (ersetzt das WordPress-Logo)',
'section' => 'login_settings',
'settings' => 'login_logo',
) ) );
// Multi-Avatar UUIDs
for ($i = 1; $i <= 5; $i++) {
$wp_customize->add_setting( 'login_avatar_uuid_' . $i, array(
'sanitize_callback' => 'sanitize_text_field',
'transport' => 'refresh',
) );
$wp_customize->add_control( 'login_avatar_uuid_' . $i, array(
'label' => sprintf( 'Avatar %d UUID', $i ),
'description' => sprintf( 'Gib die UUID für den %d. Avatar an. (Leer lassen, um zu deaktivieren)', $i ),
'section' => 'login_settings',
'settings' => 'login_avatar_uuid_' . $i,
'type' => 'text',
) );
}
// Slider-Geschwindigkeit
$wp_customize->add_setting( 'login_avatar_slider_speed', array(
'default' => 4,
'sanitize_callback' => 'absint',
'transport' => 'refresh',
) );
$wp_customize->add_control( 'login_avatar_slider_speed', array(
'label' => 'Avatar-Wechsel (in Sekunden)',
'description' => 'Wie viele Sekunden soll ein Avatar angezeigt werden?',
'section' => 'login_settings',
'settings' => 'login_avatar_slider_speed',
'type' => 'number',
'input_attrs' => array( 'min' => 2, 'max' => 10, 'step' => 1 ),
) );
}
add_action( 'customize_register', 'minecraft_modern_customize_register' );

View File

@@ -0,0 +1,19 @@
jQuery(document).ready(function($) {
// Warte, bis das DOM vollständig geladen ist
// Wir erstellen einen Wrapper um den Avatar-Slider und das Formular, um das Flexbox-Layout zu ermöglichen.
const avatar = $('#minecraft-avatar-slider');
const form = $('#loginform');
// Nur ausführen, wenn beide Elemente existieren
if (avatar.length && form.length) {
// Erstelle einen neuen Wrapper-Div
const wrapper = $('<div id="login-content-wrapper"></div>');
// Füge den Wrapper vor dem Formular in den #login Container ein
form.before(wrapper);
// Verschiebe den Avatar-Slider und das Formular in den Wrapper
wrapper.append(avatar);
wrapper.append(form);
}
});

View File

@@ -0,0 +1,25 @@
jQuery(document).ready(function($) {
const slider = $('#minecraft-avatar-slider');
const slides = slider.find('.avatar-slide');
// Nur starten, wenn es mehr als einen Slide gibt
if (slides.length > 1) {
let currentIndex = 0;
function showSlide(index) {
slides.removeClass('avatar-slide-active');
slides.eq(index).addClass('avatar-slide-active');
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}
// Geschwindigkeit aus den WordPress-Einstellungen holen
const speed = avatarSliderSettings.speed || 4000;
// Den Slider alle X Sekunden wechseln
setInterval(nextSlide, speed);
}
});

View File

@@ -0,0 +1,30 @@
jQuery(document).ready(function($) {
// Wähle den Button aus
var scrollButton = $('#scroll-to-top');
// Funktion zum Anzeigen oder Verstecken des Buttons
function toggleScrollButton() {
// Wenn mehr als 300px gescrollt wurde, zeige den Button
if ($(window).scrollTop() > 300) {
scrollButton.addClass('show');
} else {
scrollButton.removeClass('show');
}
}
// Event Listener für das Scrollen
$(window).on('scroll', function() {
toggleScrollButton();
});
// Event Listener für den Klick auf den Button
scrollButton.on('click', function(e) {
// Verhindere das Standardverhalten des Links
e.preventDefault();
// Scrolle die Seite sanft nach oben
$('html, body').animate({
scrollTop: 0
}, 800); // 800ms für eine sanfte Animation
});
});

View File

@@ -0,0 +1,208 @@
<?php
/*
Template Name: Minecraft Modern Theme
*/
get_header(); ?>
<div class="container">
<div id="primary" class="content-area">
<main id="main" class="site-main">
<div class="custom-login-container">
<?php
// Wenn der Benutzer nicht angemeldet ist, zeige das Login-Formular
if (!is_user_logged_in()) {
// Custom Login Formular
$args = array(
'echo' => true,
'redirect' => admin_url(), // Weiterleitung zum Dashboard nach dem Login
'form_id' => 'custom_loginform',
'label_username' => __( 'Benutzername' ),
'label_password' => __( 'Passwort' ),
'label_remember' => __( 'Angemeldet bleiben' ),
'label_log_in' => __( 'Anmelden' ),
'id_username' => 'user_login',
'id_password' => 'user_pass',
'id_remember' => 'rememberme',
'id_submit' => 'wp-submit',
'remember' => true,
'value_username' => NULL,
'value_remember' => false
);
// Minecraft Avatar Container
$avatar_uuid = get_theme_mod('login_avatar_uuid', '069a79f444e94726a5befca90e38eaf6');
if (!empty($avatar_uuid)) {
// === KORRIGIERT: Nutzen wir nun Minotar.net für den VOLLKÖRPER ===
$avatar_url = "https://minotar.net/full/{$avatar_uuid}/256";
echo '<div id="minecraft-avatar-container"><img src="' . esc_url($avatar_url) . '" alt="Minecraft Avatar"></div>';
}
// Login-Formular anzeigen
wp_login_form($args);
} else {
// Wenn der Benutzer bereits angemeldet ist, zeige eine Nachricht und einen Logout-Link
$current_user = wp_get_current_user();
echo '<div class="logged-in-message">';
echo '<h2>Willkommen zurück, ' . esc_html($current_user->display_name) . '!</h2>';
echo '<p>Du bist bereits angemeldet.</p>';
echo '<p><a href="' . esc_url(wp_logout_url(home_url())) . '" class="button">Abmelden</a></p>';
echo '<p><a href="' . esc_url(admin_url()) . '" class="button">Zum Dashboard</a></p>';
echo '</div>';
}
?>
</div>
</main>
</div>
</div>
<?php
// Login-Hintergrundbild aus dem Customizer holen und als Inline-CSS ausgeben
$login_bg_image = get_theme_mod('login_background_image');
if ($login_bg_image):
?>
<style>
body {
background-image: url('<?php echo esc_url($login_bg_image); ?>') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20, 21, 26, 0.8);
z-index: -1;
}
</style>
<?php endif; ?>
<style>
.custom-login-container {
max-width: 800px;
margin: 60px auto;
padding: 40px;
background-color: var(--card-bg, #252830);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color, #333);
display: flex;
align-items: center;
gap: 40px;
}
#minecraft-avatar-container {
flex: 0 0 27.8%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background-color: #1a1c23;
height: auto;
}
#minecraft-avatar-container img {
width: 100%;
height: auto;
max-height: 400px;
border-radius: 4px;
border: 3px solid var(--primary-accent, #00d4ff);
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}
#custom_loginform {
flex: 1;
}
#custom_loginform p {
margin-bottom: 20px;
}
#custom_loginform label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--text-color, #e4e4e4);
}
#custom_loginform input[type="text"],
#custom_loginform input[type="password"] {
width: 100%;
padding: 14px;
background-color: var(--surface-color, #1e2029);
border: 1px solid var(--border-color, #333);
border-radius: 4px;
color: var(--text-color, #e4e4e4);
font-family: 'Raleway', sans-serif;
}
#custom_loginform .forgetmenot label {
display: inline-flex;
align-items: center;
font-weight: 400;
}
#custom_loginform .submit {
margin-top: 10px;
}
#custom_loginform input[type="submit"] {
width: 100%;
padding: 14px;
background-color: var(--primary-accent, #00d4ff);
border: none;
border-radius: 4px;
color: #fff;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
}
#custom_loginform input[type="submit"]:hover {
background-color: #00a8cc;
}
.logged-in-message {
text-align: center;
padding: 40px;
}
.logged-in-message h2 {
margin-top: 0;
color: var(--primary-accent, #00d4ff);
}
.logged-in-message .button {
display: inline-block;
margin: 10px;
padding: 12px 25px;
background-color: var(--primary-accent, #00d4ff);
color: #fff;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
transition: background-color 0.3s;
}
.logged-in-message .button:hover {
background-color: #00a8cc;
}
@media screen and (max-width: 768px) {
.custom-login-container {
flex-direction: column;
gap: 30px;
}
#minecraft-avatar-container {
width: 100%;
}
#minecraft-avatar-container img {
max-height: 300px;
max-width: 200px;
}
}
</style>
<?php get_footer(); ?>

View File

@@ -4,7 +4,7 @@ Theme URI: https://git.viper.ipv64.net/M_Viper/Minecraft-Modern-Theme
Author: M_Viper
Description: Ein modernes Gaming-Theme mit konfigurierbarem Header-Slider.
Author URI: https://M-Viper.de
Version: 1.1
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minecraft-modern-theme
@@ -658,4 +658,54 @@ main#primary.site-main {
/* Zielt genau auf das <h2>-Element mit der Klasse "post-title" ab */
body.home-title-hidden h2.post-title {
display: none !important;
}
/* =========================================================================
=== SCROLL TO TOP BUTTON ===============================================
========================================================================= */
#scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: var(--primary-accent, #00d4ff);
color: #fff;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
line-height: 1;
z-index: 9999;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
#scroll-to-top.show {
opacity: 1;
visibility: visible;
}
#scroll-to-top:hover {
background-color: #00a8cc; /* Etwas dunklerer Blauton beim Hover */
transform: translateY(-5px); /* Kleiner "Bounce"-Effekt beim Hover */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* Anpassungen für kleinere Bildschirme */
@media screen and (max-width: 768px) {
#scroll-to-top {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
font-size: 16px;
}
}