¿Alguna vez has encontrado un sitio web que publica sus artículos de manera diferente en el blog?
Algunos sitios web tienen artículos destacados resaltados con un fondo personalizado, mientras que otros pueden tener cada publicación de categoría con un aspecto único. Si siempre ha querido aprender a personalizar cada publicación de WordPress, ha venido al lugar correcto.
En este tutorial, le mostraremos cómo dar forma a cada artículo de WordPress de manera diferente.
Pero, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Luego de vuelta a por qué estamos aquí.
Observación: Este tutorial requiere que agregue CSS personalizado en WordPress. También necesitará utilizar la herramienta Inspeccionar. Se requieren algunos conocimientos de CSS y HTML.
Dar estilo individual sobre los temas de WordPress
WordPress agrega clases de CSS predeterminadas a varios elementos de su sitio web. A tema de WordPress La compatibilidad estándar debe tener el código requerido por WordPress para agregar clases de CSS para el cuerpo, las publicaciones, las páginas, los widgets, los menús y más.
Descubre también nuestra guía sobre Enlaces permanentes: Cómo personalizar los enlaces de blogs
Una función principal de WordPress llamada " post_class () Los temas lo usan para decirle a WordPress dónde agregar estas clases CSS predeterminadas en los artículos.
Si visita su sitio web y utiliza la herramienta Inspeccionar en su navegador, podrá ver estas clases agregadas para cada publicación.
Aquí hay clases CSS agregadas de forma predeterminada en función de la página que muestra un usuario.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- .category ID
- .category-nombre
- .tag-nombre
- .format- {nombre}-tamaño
- {Post-nombre-tipo .type-}
- .Tiene post-miniatura
- .post-contraseña requerida
- .protected-por-un-contraseña
Un ejemplo de visualización se vería así:
Puede personalizar cada publicación de WordPress de manera diferente utilizando las clases CSS respectivas.
Lea también: Cómo mejorar su blog de Wordpress para este fin de semana
Por ejemplo, si desea editar una publicación individual, puede usar la clase post-id en su CSS personalizado.
.post-412 {background-color: #FF0303; de color: #FFFFFF; }
Recuerde cambiar el ID de publicación para que coincida con su ID de publicación.
Echemos un vistazo a otro ejemplo.
Esta vez, cubriremos todos los artículos publicados en una categoría específica llamada "noticias".
Descubre nuestra guía sobre Cómo agregar CSS personalizado a tu blog de WordPress
Podemos hacer esto agregando el siguiente CSS personalizado a nuestro tema.
.category-noticias {font-size: 18px; font-style: cursiva; }
Este CSS afectará a todos los elementos de la categoría " Actualidad ".
La función post_class ()
Los desarrolladores de temas usan la función post_class () para decirle a WordPress dónde agregar las clases de publicación. Por lo general, se encuentra en la etiqueta "artículo".
la función post_class () no solo carga las clases CSS generadas por WordPress de forma predeterminada, sino que también le permite agregar sus propias clases.
Descubrir Cómo proteger sus raspadores contenido del blog
De acuerdo a tu tema de WordPress, encontrará la función post_class() en su archivo single.php o en los archivos de plantilla. Normalmente, el código se verá así:
" >
Puede agregar su propia clase CSS personalizada con un atributo como este:
" >
La clase post_class imprimirá las respectivas clases CSS predeterminadas con su clase CSS personalizada.
Si desea agregar múltiples clases CSS, puede definirlas como una matriz y usarlas en la función post-class ().
" >
Muestra artículos con un estilo diferente según los autores.
Las clases CSS predeterminadas generadas por la función posts_class no incluyen el nombre del autor como clase CSS.
Si desea personalizar el estilo de cada publicación en función del autor, primero debe agregar el nombre del autor como una clase de CSS.
Lea también: Cómo agregar animaciones CSS WordPress
Puede hacer esto usando el siguiente fragmento:
" >
Este código agregará el nombre de usuario como una clase CSS. El nombre de usuario es un nombre compatible con la URL utilizada por WordPress. No tiene espacios y todos los caracteres están en minúsculas, lo que lo hace perfecto para usar como una clase CSS.
Consulte también nuestra guía sobre Cómo agregar CSS personalizado a tu blog de WordPress
El código anterior probablemente se mostrará así:
Ahora puedes usar ".peter" en tu CSS personalizado para modificar todas las publicaciones de ese autor en particular para que aparezcan de manera diferente.
.peter {background-color: #eee; frontera: sólido 1px #CCC; }
Personalizar la publicación de artículos en función de los comentarios.
Es posible que haya visto sitios web con widgets con artículos populares que a veces se clasifican según los comentarios. En este ejemplo, le mostraremos cómo crear un estilo diferente usando la cantidad de comentarios.
Descubre nuestro 10 complementos premium de WordPress para administrar tus comentarios
Primero, necesitamos obtener el número de comentarios y asociar una clase.
Para obtener el recuento de comentarios, debe agregar el siguiente código en sus archivos tema de WordPress. Este código entra en el bucle de WordPress, puedes agregarlo justo antes de la etiqueta .
aprobado; if ($ my_comment_count <10) {$ my_comment_count = 'nuevo'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'popular'; }?>
Este código verifica el número de comentarios para la publicación publicada y les asigna un valor basado en la cuenta. Por ejemplo, los mensajes con menos de 10 comentarios obtienen una clase llamada " nueva Menos de 20 se llaman emergentes "Y todo lo que concierne más que los comentarios de 20 es" popular ".
Luego debe agregar la clase CSS a la función post_class.
" >
Esto agregará las clases CSS nuevas, emergentes y populares a todos los artículos en función del número de comentarios en cada publicación.
También te invitamos a leer nuestro artículo sobre Complementos de 6 WordPress para firmar documentos en línea
También puede agregar CSS personalizado a las publicaciones de estilo según su popularidad:
.new {border: sólido 1px #FFFF00;} .emerging {border: discontinua 1px #FF9933;} .popular {border: discontinua 1px #CC0000;}
Solo agregamos bordes, pero puede agregar las reglas CSS que desee.
Descubre también algunos complementos premium de WordPress
Puedes usar otros plugins de WordPress para dar un aspecto moderno y optimizar la conexión a tu blog o sitio web.
Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.
1. Ultimate Membership Pro
Ultimate Membership Pro es una gran Plugin de WordPress prima de suscripción y restricción de contenido. Permite gestionar los usuarios según su paquete (gratuito o de pago) creando niveles de acceso exclusivos.
Por lo tanto, será posible protege todo el contenido de tu sitio web, o solo una parte. Será por ejemplo un curso, una lección, una página, un producto, una categoría, una imagen, etc ...
Lea también nuestro artículo sobre 4 premium plugins de WordPress para crear miniaturas
Sus principales características son, entre otras: protección de contenido, múltiples niveles de acceso, soporte para múltiples pasarelas de pago - PayPal, Autorizar.net, Stripe, 2CheckOut, Transferencia bancaria, protección parcial de contenido, Y mucho más…
Descargar | Demo | alojamiento web
2. Cómo deslizador para Facebook
Cómo deslizador para Facebook es un Plugin de WordPress premium que ofrece a los visitantes la opción de dejar comentarios en su sitio web. Con este cuadro de comentarios moderno y no intrusivo, este Plugin de WordPress proporciona la función Like Box y Fan Page Wall que ampliará la integración de su sitio web con la red social Facebook.
El complemento también proporciona varias funcionalidades para ampliar las capacidades de su sitio web: tiene, por ejemplo, una sección Me gusta ("Me gusta Box") o una página dedicada a los fans ("Fan Page Wall).
Descubrir también Cómo cargar gradualmente los comentarios de Facebook y Disqus
No es necesario incrustar los botones "Me gusta" y "Compartir" en publicaciones o páginas, porque el Control deslizante de comentarios de Facebook ya los tiene y pueden aparecer en cualquier publicación o página. Los visitantes encontrarán el botón "Me gusta", el botón "Compartir" y el cuadro de comentarios del control deslizante de Facebook. Obviamente usarán sus cuentas de Facebook.
Además, puede encender, apagar y configurar el tiempo del efecto de agitación.
Descargar | Demo | alojamiento web
3. Login Ninja
Este complemento premium de WordPress le permite personalizar su página de inicio de sesión. Es más que personalizar su formulario de inicio de sesión. Puede personalizar toda la página, cambiando el color de la página, agregando una imagen de fondo, agregando un logotipo y más.
Sus otras características son: protección de formularios de inicio de sesión y registro con captcha, prohibición automática y manual de las direcciones IP que lo atacan por fuerza bruta, un registro detallado de todas las actividades de conexión, redirección de usuarios basada en roles y nombres de usuario, recibir notificaciones por correo electrónico para todos los eventos de conexión, una interfaz gráfica fácil de usar, documentación detallada y más.
Descargar | Demo | alojamiento web
Recursos recomendados
Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.
- Los complementos de 9 WordPress para administrar los pagos de PayPal en su Blog
- 10 complementos esenciales de WordPress para instalar en su blog
- 10 complementos de WordPress para usar para administrar publicidad
- Complementos de 10 WordPress para crear atributos para sus productos variables
Conclusión
Listo ! Eso es todo por este tutorial, espero que te permita personalizar la visualización de artículos en tu blog de WordPress. Si tiene alguna inquietud o sugerencia en esta área, encontrémonos en la sección de comentarios para discutir.
Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
