Personaliza NewsPack Theme

Aprende a eliminar campos molestos en AddToAny, limpiar el footer de Newspack Theme y personalizar tu formulario de comentarios en WordPress sin plugins, con ayuda de CSS y la IA ChatGPT

Introducción:

¿Cansado de tener un formulario de comentarios recargado, campos innecesarios o la molesta marca “Impulsado por Newspack”? ¿Te molesta que el plugin AddToAny añada enlaces visuales no deseados? Con un poco de CSS personalizado y la ayuda de ChatGPT, puedes limpiar tu sitio, simplificar la experiencia del usuario y mejorar el diseño de forma profesional sin usar más plugins.

---

¿Qué vamos a hacer?

1. Eliminar elementos visuales innecesarios del tema Newspack y del plugin AddToAny.
2. Explicar el CSS que estiliza el formulario nativo de comentarios de WordPress.
3. Aprender a usar la Inteligencia Artificial y ChatGPT para generar y depurar código CSS.
4. Aplicar los cambios sin afectar el rendimiento del sitio.

---

Cómo eliminar elementos molestos con CSS

El siguiente código CSS elimina tres elementos:

/* Eliminar Campo Web en Comentarios, Marca en el Footer y Link AddToAny */
.comment-form-url,     /* Campo de URL en el formulario de comentarios */
.site-info .imprint,   /* Texto "Impulsado por Newspack" en el pie de página */
.a2a_full_footer {     /* Enlace AddToAny al plugin */
	display: none;
}

¿Por qué usar display: none;?

Este método oculta visualmente los elementos sin eliminarlos del HTML, ideal si no puedes modificar directamente el código fuente del tema o plugin. Además, es seguro para mantener compatibilidad con actualizaciones futuras del tema Newspack o AddToAny.

---

Cómo estilizar el formulario de comentarios de WordPress

Aquí tienes un ejemplo completo del CSS personalizado que se aplica al formulario de comentarios nativo:

/* Estilo para los campos de formulario */
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  color: #232323;
}

/* Estilo para el foco (cuando se selecciona el campo) */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 2px 5px rgba(177, 151, 107, 0.5);
}

Este estilo:

• Elimina los bordes nativos para un diseño limpio.
• Añade sombra suave para una apariencia moderna.
• Usa bordes redondeados y colores neutros para buena legibilidad.
• Resalta el campo activo con una sombra dorada para una mejor experiencia de usuario.

---

Cómo usar ChatGPT para ayudarte a personalizar el formulario

Puedes aprovechar la IA y ChatGPT para:

Sugerencias de prompts útiles:

1. Generar estilos desde cero:

Prompt: Crea un estilo CSS elegante y minimalista para el formulario de comentarios de WordPress. Que tenga bordes redondeados, fondo blanco, sombras suaves y efecto al enfocar los campos.

2. Mejorar la accesibilidad:

Prompt: Añade estilos CSS accesibles al formulario de comentarios de WordPress para usuarios con visión reducida.

3. Hacerlo responsive:

Prompt: Ajusta el CSS del formulario de comentarios de WordPress para que sea 100% responsive en móviles y tablets.

4. Ocultar campos con problemas:

Prompt: ¿Cómo oculto el campo URL del formulario de comentarios sin desactivar los comentarios en WordPress?

Consejo: No necesitas plugins para estos ajustes. Solo ve a Apariencia → Personalizar → CSS adicional y pega el código que ChatGPT te sugiera.

---

Buenas prácticas:

• Usa selectores específicos como .comment-form-url para evitar romper otros formularios.
• Verifica en distintos navegadores.
• Pide revisiones a ChatGPT si el CSS no funciona como esperas.