Anpassen und Styling des kennwortgeschützten Formulars in WordPress

Ein neuer Kunde muss seinen WordPress -Seiten einen Kennwortschutz hinzufügen, der an sich nicht kompliziert ist. Später baten sie jedoch, den Text zu ändern und das Erscheinungsbild der Seite zu verbessern. Ich nahm diese Herausforderung bereitwillig an und hier ist meine Implementierung.

wie Sie passwortgeschützte Seiten in WordPress

anpassen

Schritt 1: Bearbeiten Sie die Funktionen.php -Datei

Öffnen Sie Ihre functions.php Datei und fügen Sie den folgenden Codeblock hinzu:

<?php
add_filter( 'the_password_form', 'custom_password_form' );

function custom_password_form() {
    global $post;
    $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );

    $o = '
' . __( "这是您新的密码提示文本，显示在密码表单上方" ) . '
<label for="' . $label . '">' . __( "密码：" ) . ' </label>
<input class="input password-input" id="' . $label . '" name="pwd" type="password" size="20" />
<input type="submit" name="Submit" class="button" value="' . esc_attr__( "提交" ) . '" />
<p class="extra-text">额外文本可以放在这里……这将显示在表单下方</p>

';

    return $o;
}
?>

Lassen Sie mich es schnell erklären. Der Kennwortschutzcode wird aus einer Datei im Ordner wp-includes generiert, und Sie möchten ihn möglicherweise direkt bearbeiten. Dies wird jedoch nicht empfohlen, da das Ändern des Kerncode eine schlechte Idee ist. Warum? Wenn Sie WordPress aktualisieren, werden alle Änderungen gelöscht. Daher ist es am besten, diesen Ansatz zu vermeiden, um potenzielle Probleme zu verhindern. Fügen Sie den obigen Code in eine -Datei ein und Sie können ihn mit dem WordPress -Hook -System ändern, damit Sie sich keine Sorgen machen müssen, wenn Sie Änderungen am Formular beim Aktualisieren von WordPress verlieren. functions.php Wie Sie sehen, habe ich dem Formular selbst eine CSS -Klasse, die Formular -Tags, Kennwortfelder und Schaltflächen hinzugefügt. Sobald alle notwendigen Elemente vorhanden sind, können wir sie jetzt mit CSS vollständig stylen. Das Beste daran ist, dass wir keine Änderungen am Ordner

vornehmen, sodass wir keine Standard -WordPress -Codierungsregeln verletzen.

wp-includes

Schritt 2: Ändern Sie den Standardkennwort -geschützten Text

Der obige Kapitalisierte Text zeigt auch, was ich geändert habe, der erste Satz von Text:

Wie Sie sehen, ist dies Ihr Einführungstext, der früher so war:

<code>这是您新的密码提示文本，显示在密码表单上方</code>

Jetzt können wir es in den gewünschten Text ändern. Sie können sogar alles zwischen Zitaten entfernen, ohne überhaupt etwas zu zeigen.

<code>此内容受密码保护。要查看它，请在下方输入您的密码：</code>

Schritt 3: Kennworteingangsfeld -Beschriftung

ändern Die auf der linke Seite des Eingangsfeldes angezeigte Standardkennzeichnung ist

Passwort

. Sie können es an alles ändern, was Sie wollen. In meinem Fall habe ich ihm eine CSS -Klasse zugewiesen und das Tag mit den folgenden CSS -Regeln entfernt.

Die gleiche CSS -Klasse kann auch verwendet werden, wenn Sie andere Eigenschaften ändern möchten.

.pass-label { display: none; }

Schritt 4: Legen Sie den Kennworteingangsfeldstil

fest Ich mag das Standard -Erscheinungsbild dieses Formulars nicht, aber ich kann es aufgrund der Hinzufügung dieses Kennworteingangsfeldes moderner aussehen lassen. Sie können es weiter nach Ihren Vorlieben anpassen.

Schritt 5: Setzen Sie den Schaltflächenstil

Im Funktionscode habe ich die Schaltfläche

CSS zur Sendersaste hinzugefügt. Dies geschieht, weil ich möchte, dass alle Schaltflächen auf der Client -Website gleich aussehen. Die Konsistenz der Website ist der Schlüssel. Dies ist das CSS, das ich benutze:

button

.button {
    background-color: #000;
    color: #fff;
    border: 0;
    font-family: Impact, Arial, sans-serif;
    margin: 0;
    height: 33px;
    padding: 0px 6px 6px 6px;
    font-size: 15px;
}

Schritt 6: Fügen Sie zusätzlichen Text unter dem Formular

hinzu

Ich möchte auch eine Beschreibung hinzufügen, die dem Benutzer mitteilt, dass das Feld Kennwort für Fall sensibel ist. Zu diesem Zweck habe ich gerade einen Absatzcode unter dem Formular hinzugefügt und ein Style -Tag eingefügt, um einen benutzerdefinierten Stil in den Text anzuwenden, um ihn vom Rest der Seite zu unterscheiden.

Zusätzliche Optionen

Im vorherigen Abschnitt haben wir besprochen, wie Sie Kennwortschutzseiten aus der Sicht eines Entwicklers anpassen. Wenn Sie jedoch nicht an die Bearbeitung Ihres Codes gewöhnt sind, können Sie auch andere Tools verwenden, um dasselbe Ergebnis zu erzielen.

Folgende Plugins oder Add-Ons, die Sie in WordPress kennwortgeschützte Formulare anpassen können.

gelbpenencil

Yellowpencil Plugin ist ein WordPress-Plugin, das einen featurereichen visuellen CSS-Editor bietet, mit dem Sie das Erscheinungsbild Ihrer Website anpassen können, ohne Code zu schreiben. Es bietet eine benutzerfreundliche Oberfläche und umfangreiche Anpassungsoptionen.

soworigin CSS

SiteOrigin CSS -Plugin ist ein kostenloses WordPress -Plugin, mit dem Sie das Erscheinungsbild Ihrer Website einfach mit einem einfachen visuellen Editor anpassen können. Es bietet eine benutzerfreundliche Oberfläche, mit der Sie das CSS (Cascading Stylesheet) Ihrer Website ändern können, ohne Code zu schreiben.

Mit diesen Plugins können Sie den Stil und Text einer benutzerdefinierten Passwort-geschützten Seite problemlos implementieren, ohne den Code direkt zu ändern.

Das obige ist der detaillierte Inhalt vonAnpassen und Styling des kennwortgeschützten Formulars in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!