Personnalisation et stylisation du formulaire protégé par mot de passe dans WordPress

Un client récent doit ajouter une protection de mot de passe à leurs pages WordPress, ce qui n'est pas compliqué en soi. Cependant, ils ont ensuite demandé de modifier le texte et d'améliorer l'apparence de la page. J'ai facilement accepté ce défi, et voici mon implémentation.

Comment personnaliser les pages protégées par mot de passe dans WordPress

Étape 1: modifiez le fichier de fonctions.php

Ouvrez votre fichier functions.php et ajoutez le bloc de code suivant:

<code class="language-php"><?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;
}
?></code>

Laissez-moi l'expliquer rapidement. Le code de protection de mot de passe est généré à partir d'un fichier dans le dossier wp-includes, et vous pouvez le modifier directement. Cependant, cela n'est pas recommandé car la modification du code central est une mauvaise idée. Pourquoi? Si vous mettez à jour WordPress, toutes les modifications seront effacées. Par conséquent, il est préférable d'éviter cette approche pour éviter tout problème potentiel. Mettez le code ci-dessus dans un fichier et vous pouvez le modifier à l'aide du système Hook WordPress afin que vous n'ayez pas à vous soucier de perdre des modifications au formulaire lors de la mise à jour de WordPress. functions.php Comme vous pouvez le voir, j'ai en fait ajouté une classe CSS au formulaire lui-même, les balises de formulaire, les champs de mot de passe et les boutons. Une fois tous les éléments nécessaires en place, nous pouvons désormais les styliser pleinement en utilisant CSS. La meilleure partie est que nous n'apporterons aucune modification dans le dossier

, donc nous ne violerons aucune règle de codage WordPress standard.

wp-includes

Étape 2: Modifiez le texte protégé par mot de passe par défaut

Le texte capitalisé ci-dessus montre également ce que j'ai changé, le premier ensemble de texte:

Comme vous pouvez le voir, c'est votre texte d'introduction, qui était comme ceci:

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

Maintenant, nous pouvons le changer en tout le texte que vous voulez. Vous pouvez même supprimer tout entre les citations sans rien montrer du tout.

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

Étape 3: Modifier l'étiquette du champ de saisie du mot de passe

L'étiquette par défaut affichée sur le côté gauche du champ de saisie est

mot de passe

. Vous pouvez le changer en ce que vous voulez. Dans mon cas, je l'ai attribué une classe CSS et supprimé la balise en utilisant les règles CSS suivantes.

La même classe CSS peut également être utilisée si vous souhaitez modifier d'autres propriétés.

<code class="language-css">.pass-label { display: none; }</code>

Étape 4: Définissez le style de champ de saisie du mot de passe

Je n'aime pas l'apparence par défaut de ce formulaire, mais je peux le rendre plus moderne en raison de l'ajout de ce champ de saisie de mot de passe. Vous pouvez le personnaliser davantage en fonction de vos préférences.

Étape 5: Définissez le style de bouton de soumission

Dans le code de fonction, j'ai ajouté la classe

CSS au bouton Soumettre. Cela se fait parce que je veux que tous les boutons sur le site Web du client se ressemblent. La cohérence du site Web est essentielle. Ceci est le CSS que j'utilise:

button

<code class="language-css">.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;
}</code>

Étape 6: Ajoutez du texte supplémentaire sous la forme

Je souhaite également ajouter une description qui indique à l'utilisateur que le champ de mot de passe est sensible à la casse. Pour ce faire, je viens d'ajouter un code de paragraphe sous le formulaire et j'ai inséré une balise de style pour appliquer un style personnalisé au texte pour le distinguer du reste de la page.

Options supplémentaires

Dans la section précédente, nous avons discuté de la façon de personnaliser les pages de protection des mots de passe du point de vue d'un développeur. Cependant, si vous n'êtes pas habitué à modifier votre code, vous pouvez également utiliser d'autres outils pour obtenir le même résultat.

Voici quelques plugins ou modules complémentaires que vous pouvez personnaliser les formulaires protégés par mot de passe dans WordPress.

YellowPractive

Le plugin YellowPrun est un plugin WordPress qui fournit un éditeur CSS visuel riche en fonctionnalités qui vous permet de personnaliser l'apparence de votre site Web sans écrire de code. Il propose une interface conviviale et des options de personnalisation étendues.

Siteorigin CSS

Le plugin CSS SITEORIGIN est un plugin WordPress gratuit qui vous permet de personnaliser facilement l'apparence de votre site Web avec un simple éditeur visuel. Il fournit une interface conviviale qui vous permet de modifier le CSS (feuille de style en cascade) de votre site Web sans écrire de code.

Avec ces plugins, vous pouvez facilement implémenter le style et le texte d'une page protégée par mot de passe personnalisée sans modifier directement le code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!