Personalización y estilo de la forma protegida por contraseña

Recientemente, un cliente quería que una de sus páginas de WordPress estuviera protegida, ¡no hay problema! Luego volvió y dijo: ¿puedes cambiar el texto y hacer que se vea mejor? Hmm ¡Por supuesto! Aquí es cómo?


Paso 1 Edite su archivo functions.php

Muy bien, abramos el archivo functions.php y agreguemos este bloque de código:

 CARNÉ DE IDENTIDAD ) ? rand (): $ post-> ID); $ o = '
'. __ ("ESTE ES SU NUEVO TEXTO DE INTRO DE CONTRASEÑA QUE MUESTRA SOBRE EL FORMULARIO DE CONTRASEÑA"). '

?¿EL TEXTO EXTRA PUEDE IR AQUÍ? Esto mostrará la siguiente forma

'; devuelve $ o; ?>

Déjame diseccionar esto muy rápido para ti. El código de protección con contraseña se genera a partir de un archivo en la carpeta wp-includes. "Genial", piensas, "simplemente entraré y haré mis cambios". No lo hagas Por más tentador que sea, editar el código del núcleo es una idea terrible, de bajo nivel, no es una buena idea. Por una razón: ¿Qué pasa si actualizas WordPress? ¿Se borra? lo siento. De acuerdo, al poner este bloque de código en su archivo functions.php, lo enmendamos y no se preocupe por perder ningún cambio en el formulario cuando actualice.

Como puede ver, en realidad agregué clases al formulario, a la etiqueta del formulario, al campo de contraseña y al botón. Ahora tenemos todo lo que necesitamos para personalizarlo completamente con CSS. Ah, y en realidad no estamos cambiando nada en la carpeta wp-includes, así que no estamos rompiendo ninguna regla.


Paso 2 Cambiar el texto de protección de contraseña predeterminado

El texto en mayúsculas arriba también te muestra lo que he cambiado? El primer conjunto de texto:

ESTE ES SU NUEVO TEXTO INTRO DE CONTRASEÑA QUE MUESTRA SOBRE EL FORMULARIO DE CONTRASEÑA

Como puedes ver, este fue tu texto de introducción? solía decir esto:

Esta publicación / página está protegida por contraseña. Para verlo ingresa tu contraseña abajo

Ahora podemos cambiarlo a cualquier texto que quieras allá arriba. Incluso puedes eliminar todo lo que hay entre esas citas y simplemente no mostrar nada allí..


Paso 3 cambiar la etiqueta de campo de entrada de contraseña

La etiqueta predeterminada que se muestra a la izquierda del campo de entrada es Contraseña. Aquí puedes cambiarlo por lo que quieras decir. En mi caso, le asigné una clase que sacó la etiqueta en css al poner la pantalla en none.

 .etiqueta de paso pantalla: ninguna; 

También puede cambiar el tamaño de fuente, el color, los trabajos a esta etiqueta


Paso 4 Estilo El campo de entrada de contraseña

Odio el aspecto de los formularios, pero con esta adición al campo de entrada de contraseña predeterminado, puedo hacer que se vea un poco más "actualizado". Siéntase libre de cambiarlo como mejor le parezca.

 

Paso 5 Diseño del botón Enviar

En el código de funciones, agregué una clase al botón de envío llamado "botón". Hice esto porque quería que todos los botones del sitio de mi cliente se vieran exactamente iguales. La uniformidad en un sitio es clave. Aquí está el CSS que utilicé:

 .botón fondo-color: # 000; color: #fff; borde: 0; Familia tipográfica: Impact, Arial, sans-serif; margen: 0; altura: 33px; relleno: 0px 6px 6px 6px; tamaño de fuente: 15px; cursor: puntero; 

Por alguna razón, estaba obteniendo la flecha cuando coloqué el cursor sobre el botón, así que simplemente cambié el cursor para mostrar el puntero y regresé a la mano que estaba sobre el cursor..


Paso 6 Agregando texto extra debajo del formulario

En realidad, necesitaba agregar una pequeña nota para decirle a la gente que el campo de la contraseña distingue entre mayúsculas y minúsculas, así que para agregar texto adicional debajo del formulario, solo agregué un código de párrafo e inserté una etiqueta de estilo para aplicar un estilo al texto por separado del resto del página.

Y hemos terminado!