25 September, 2025

Interner Bereich auf WordPress-Website

Mit folgendem Code lässt sich schnell und unkompliziert ein interner Bereich oder ein Intranet auf einer Website realisieren. Am einfachsten ist es, wenn du eine Template-Datei, z.B. template-intern.php anlegst. Dann kann im Backend bei jeder Seite individuell ausgewählt werden, ob die Seite geschützt sein soll.

<?php
/* Template Name: Interner Bereich */
get_header();

if ( is_user_logged_in() ) {
    ?>
    <div class="interner-bereich">
        <?php the_content(); ?>
    </div>
    <?php
} else {
    ?>
    <div id="login">
        <div class="mv-login-card">
            <h2>Anmeldung</h2>
            
            <?php
            $redirect_url = get_permalink();

            if ( isset($_GET['login']) && $_GET['login'] === 'failed' ) {
                echo '<p style="color: red; text-align: center;">Benutzername oder Passwort sind falsch. Bitte versuchen Sie es erneut.</p>';
            }

            wp_login_form( array(
                'redirect' => $redirect_url, 
                'lost_password' => true,     
            ) );
            ?>
            <p class="small mb-0"><a href="<?php echo esc_url( wp_lostpassword_url() ); ?>">Passwort vergessen?</a></p>
        </div>
    </div>
    <?php
}

get_footer();

?>

<style>

#loginform label {
    display: block;
    font-size: .9rem;
    margin: .3rem 0 .35rem;
    color: #374151;
}

#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    outline: none;
    transition: box-shadow .15s, border-color .15s;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
    border-color: #004d67;
    box-shadow: 0 0 0 3px rgba(13,124,130,.15);
}

#loginform p.forgetmenot {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0 0 0;
}

#loginform #rememberme {
    width: 1.05rem;
    height: 1.05rem;
}

#loginform p.submit {
    margin-top: 1rem;
}

#loginform #wp-submit {
    display: inline-block;
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid #004d67;
    border-radius: 12px;
    background: #004d67;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s, transform .02s;
}

#loginform #wp-submit:hover {
    filter: brightness(.95);
}

#loginform #wp-submit:active {
    transform: translateY(1px);
}

.mv-login-links {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .75rem;
    font-size: .95rem;
}

.mv-login-links a {
    color: #004d67;
    text-decoration: none;
}

.mv-login-links a:hover {
    text-decoration: underline;
}

.mv-login-notice {
    margin-bottom: .75rem;
    padding: .65rem .8rem;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    border-radius: 10px;
    color: #92400e;
}

.mv-login-error {
    margin-bottom: .75rem;
    padding:.65rem .8rem;
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 10px;
    color: #991b1b;
}

#login {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    margin-top:50px;
}

.mv-login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

@media (max-width: 600px) {
    .mv-login-card {
        padding: 1rem;
    }
}

</style>

<?php
Code-Sprache: HTML, XML (xml)

Mit folgendem Code in der functions.php kannst du darüber hinaus, die WordPress-Toolbar für angemeldete User ausblenden.

function remove_admin_bar_for_normal_users() {
    if ( !current_user_can( 'administrator' ) ) {
        add_filter( 'show_admin_bar', '__return_false' );
    }
}
add_action( 'wp', 'remove_admin_bar_for_normal_users' );Code-Sprache: JavaScript (javascript)