Die besten WordPress Black Friday Angebote in 2024

Weihnachten steht vor der Tür, und damit auch der Black Friday! Das ist deine Chance, dir selbst ein großartiges Geschenk zu machen – und zwar in Form von fantastischen Plugins und Themes für deine WordPress-Webseite. Wir haben die besten Angebote für dich zusammengestellt, mit denen du ordentlich sparen kannst.

Bildoptimierung in WordPress zur Verbesserung der Ladezeit deiner Webseite

Deine WordPress-Website lädt nicht schnell genug? Häufig ist der größte Flaschenhals die Größe der Bilder auf deiner Seite. In diesem Tutorial führen wir dich durch den kompletten Prozess, wie du ein Plugin installierst und dafür sorgst, dass es deine Bilder automatisch optimiert und das kleinere .webp Format umwandelt.

Login-Seite einer WordPress-Webseite aufhübschen

Wusstest du, dass du auch die Login-Seite einer WordPress-Webseite auf einfache Weise überarbeiten kannst? Mit einem kleinen Code-Schnipsel ist es möglich, eigenen CSS-Code auf der Seite zu nutzen...

Die Login-Seite einer WordPress-Installation gehört zwar zweifellos zu den wichtigsten Seiten einer jeden Webseite, trotzdem wird sie in den meisten Fällen nicht überarbeitet und sieht genauso aus wie die Login-Seite einer jeden anderen WordPress-Webseite. Dabei ist nur ein kleines Code-Schnipsel nötig, um eigenen CSS-Code auf der Login-Seite einspielen zu können, wodurch euch ganz neue Möglichkeiten eröffnet werden. Im folgendenden Tutorial führen wir euch Schritt für Schritt durch den Prozess.

Vorschau auf das Endergebnis

So sieht die überarbeitete Login-Seite bei WordPress nach unseren Anpassungen aus

Code-Snippet in der functions.php einfügen

(Solltet ihr noch nicht mit einem Child Theme arbeiten, in dessen functions.php ihr diesen Code einfügen solltet, so empfehlen wir euch dieses Tutorial: Child Theme in WordPress erstellen.

// Load a stylesheet for the login page to make it look pretty! :-)
function nextab_login_stylesheet() {
	wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/loginpage.css' );
}
add_action( 'login_enqueue_scripts', 'nextab_login_stylesheet' );

(Achtet darauf, dass ihr dies selbstverständlich nach der öffnenden <?php Klammer eintragt.)

Anschließend könnt ihr im Ordner /css innerhalb eures Child Theme Verzeichnisses eine loginpage.css ablegen, die die Gestaltung der Login-Seite regelt. Bei uns sieht diese Datei so aus:

/* Font-Setup */
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/NunitoSans-Bold.eot");
  src: url("../fonts/NunitoSans-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NunitoSans-Bold.woff2") format("woff2"), url("../fonts/NunitoSans-Bold.woff") format("woff"), url("../fonts/NunitoSans-Bold.svg#NunitoSans-Bold") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/NunitoSans-Regular.eot");
  src: url("../fonts/NunitoSans-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/NunitoSans-Regular.woff2") format("woff2"), url("../fonts/NunitoSans-Regular.woff") format("woff"), url("../fonts/NunitoSans-Regular.svg#NunitoSans-Regular") format("svg");
  font-weight: 400;
  font-style: normal;
}
/* Button Variants */
body.login #login p#nav a {
  position: relative;
}
body.login #login p#nav a::after {
  border-bottom: 2px solid #6200FF;
  bottom: -3px;
  content: "";
  left: 0;
  position: absolute;
  transition: all 300ms ease;
  width: 100%;
}
body.login #login p#nav a:hover::after {
  border: none;
}
html {
  height: auto !important;
}
body.login {
  background-image: url("../img/login-hintergrund@2x.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: column nowrap;
  height: auto !important;
  min-height: 100vh;
  justify-content: space-between;
}
body.login #login {
  max-width: 375px;
  padding: 8% 0 80px;
  width: 90%;
}
body.login #login > h1 a {
  background-image: url("../img/logo-jobstyle.svg");
  height: 82.5px;
  margin-bottom: 60px;
  overflow: visible;
  padding-bottom: 10px;
  position: relative;
  width: 110px;
}
body.login #login > h1 a::after {
  bottom: -15px;
  color: #fff;
  content: "Online-Kurse";
  display: block;
  font-family: "Nunito Sans";
  font-size: 21px;
  font-weight: 700;
  height: 40px;
  left: 50%;
  letter-spacing: 0.5px;
  position: absolute;
  text-align: center;
  text-indent: 0;
  transform: translatex(0%) translatex(-50%);
  width: 140px;
}
body.login #login form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 0 30px;
}
body.login #login form label {
  color: #fff;
  font-family: "Nunito Sans";
  font-size: 18px;
  font-weight: 700;
}
body.login #login form input[type=text], body.login #login form input[type=password] {
  background: transparent;
  border: 1px solid #6200FF;
  border-radius: 0;
  color: #fff;
  font-size: 21px;
  letter-spacing: 0.5px;
}
body.login #login form input[type=checkbox] {
  background: transparent;
  border-radius: 0;
  border: 1px solid #6200FF;
  color: #fff;
  height: 18px;
  width: 18px;
}
body.login #login form p.forgetmenot {
  float: none;
  margin-top: 5px;
}
body.login #login form p.forgetmenot label {
  font-size: 18px;
  font-weight: 400;
  vertical-align: -1px;
}
body.login #login form p.submit {
  margin-top: 30px;
  text-align: center;
}
body.login #login form p.submit input[type=submit] {
  background: #6200FF;
  border-radius: 26px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  float: none;
  font-family: "Nunito Sans";
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8em;
  padding: 0.65em 1.8em !important;
}
body.login #login form .dashicons-visibility::before {
  color: #fff;
}
body.login #login p#nav {
  margin-top: 20px;
  padding: 0;
  text-align: center;
}
body.login #login p#nav a {
  color: #fff;
  font-family: "Nunito Sans";
  font-size: 18px;
  font-weight: 700;
}
body.login #login p#backtoblog, body.login #login div.privacy-policy-page-link {
  display: none;
}
body.login footer.nxt-login-footer {
  background: #fff;
  transform: translatey(0%) translatey(100%);
  width: 100%;
}
body.login footer.nxt-login-footer .nxt-login-footer-menu {
  display: block;
  margin: 20px auto;
}
body.login footer.nxt-login-footer .nxt-login-footer-menu ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
}
body.login footer.nxt-login-footer .nxt-login-footer-menu ul li {
  padding-left: 3%;
  padding-right: 3%;
}
body.login footer.nxt-login-footer .nxt-login-footer-menu ul li a {
  color: #333;
  font-family: "Nunito Sans";
  font-size: 18px;
  text-decoration: none;
}
body.login #login_error, body.login .message, body.login .success {
  background-color: transparent;
  border: 3px solid #6200FF;
  box-shadow: none;
  color: #fff;
  font-family: "Nunito Sans";
  font-size: 18px;
  font-weight: 700;
  margin: 0 auto 30px;
  padding: 15px 20px;
}
body.login div.clear {
  display: none;
}

@media only screen and (max-width: 400px) {
  body.login footer.nxt-login-footer .nxt-login-footer-menu ul li {
    padding-bottom: 7px;
    text-align: center;
    width: 94%;
  }
}

Das ist schon ein sehr umfangreiches Styling der Login-Seite und selbstverständlich sind nicht alle der Zeilen wirklich für euch relevant. Ich erkläre euch daher nochmal Abschnitt für Abschnitt, was wir genau machen.

  • Zeilen 1 – 15: Hier laden wir die Dateien, um die Schriftart Nunito Sans auf der Login-Seite verwenden zu können. Solltet ihr mit der Standard-Schriftart zufrieden sein, so benötigt ihr diesen Teil (oder einen ähnlichen Abschnitt, der eine andere Schriftart lädt) selbstverständlich nicht.
    Hinweis: Die Font-Quelldateien liegen im Ordner /fonts in eurem Child Theme Ordner.
  • Zeilen 16 – 31: Hier definieren wir das Design von Links. Konkret geht es um die unterstrichenen Links, die euch „zurück auf die Hauptseite“ führen.
  • Zeilen 32 – 82: Wir ersetzen den Hintergrund und bauen das Login-Formular etwas um (wir verbreitern es, entfernen den Box-Shadow sowie die Borders, dazu ersetzen wir auch das WordPress-Logo mit dem Logo unserer Seite).
  • Zeilen 83 – 113: Wir definieren die Standard-Schriftart für das Formular bzw. ändern diese. Dazu gestalten wir die Input-Boxen, in denen ihr Eingaben wie die E-Mail sowie das Passwort machen könnt.
  • Zeilen 114 – 131: Hier wird die Gestaltung des Login-Buttons vorgenommen, so dass dieser dem allgemeinen Button-Design unserer Seite entspricht.
  • Zeilen 132 – 148: Wir gestalten noch ein wenig weiter an den Navigations-Links um und blenden sogar einige Links aus (auf die Datenschutz-Seite sowie den auf die Hauptseite, da wir im nächsten Schritt noch einen Footer hinzufügen.
  • Zeilen 149 – Ende: Alles hier bezieht sich auf den Footer-Bereich, den wir ebenfalls auf unserer Login-Seite eingefügt haben (sieht man allerdings erst, wenn man zu scrollen beginnt). Wenn ihr bei euch keinen Footer einbauen möchtet, so könnt ihr diesen Teil komplett ignorieren.

Footer hinzufügen

Wir haben neben der Optik auf der Seite auch noch den Inhalt etwas geändert und einen Footer hinzugefügt. Dieser besteht lediglich aus einem Menü, das wir im ganz normalen WordPress-Backend extra für diese Seite angelegt haben.

Der Footerbereich mit einem Menü auf unserer Login-Seite

Solltet ihr ebenfalls einen Footer erstellen wollen, so benötigt ihr wie gesagt ein Menü sowie einen Code-Schnipsel, mit dem der Footer auf der Login-Seite eingefügt wird.
Das Menü ist schnell erstellt:

  1. Neues Menü erstellen und ID herausfinden

    Auf „Design“ -> „Menüs“ im WordPress-Admin-Bereich gehen. Dort dann auf „Neues Menü erstellen“ klicken und alle gewünschten Menüpunkte hinzufügen.

  2. Menü-ID herausfinden

    Wenn ihr mit der Erstellung des Menüs fertig seid, wechselt auf ein beliebiges anderes Menü. Anschließend wechselt ihr zurück auf das neu erstellte Menü. In der Adresszeile eures Browsers sollte jetzt etwas in dieser Art stehen:
    https://divi-tutorials.com/wp-admin/nav-menus.php?action=edit&menu=6
    <- Die Zahl ganz am Ende (was folgt nach "&menu=") entspricht der ID eures Menüs.

  3. Mit diesem Code-Schnipsel ergänzt ihr die Login-Seite um einen

    -Bereich und gebt in diesem ein Menü aus:

    // The following function will create a footer that will be displayed on the login page. Change the ID of the menu ("XXX" in the code below) to load the menu you want to display there.
    function nextab_footer_login_form() {
    	$args = [
    		'menu' => XXX,
    		'container_class' => 'nxt-login-footer-menu',
    	];
    	echo '<footer class="nxt-login-footer">';
    	wp_nav_menu($args);
    	echo '</footer>';
    }
    add_action('login_footer', 'nextab_footer_login_form');
    

    Das „XXX“ nach ‚menu‘ (in der hervorgehobenen Zeile) müsst ihr entsprechend mit der ID des Menüs ergänzen, das ihr bei euch einfügen möchtet.

    Das Styling des Menüs ist bereits in unserer Style-Datei oben vorgenommen worden, daher sind hier jetzt keine Anpassungen oder weiteren Schritte mehr nötig. Und schon seid ihr fertig und habt eine ordentlich aufgewertete Login-Seite. 🙂

    Alle Codes findet ihr auch nochmal auf unserem Company-Git hier: Codes, um die WordPress-Login-Seite aufzuhübschen.
    Solltet ihr an einer Stelle Schwierigkeiten haben oder etwas unklar sein, so fragt uns einfach in den Kommentaren (wobei wir uns natürlich auch so über einen Kommentar freuen).

Beitrag bewerten

fürchterlich!mehgutsehr gut!fantastisch! (Bewertungen: 3, Durchschnitt: 5,00 von 5)
Loading...

Fragen oder Anregungen zum Beitrag?
Hinterlasse einen Kommentar!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert