WordPress

agosto 4, 2017

Cómo personalizar cada post de WordPress de una manera distinta

www.seox.es | seox@seox.es | 656545123 | SEO y Posicionamiento en Bilbao: #seox #seobilbao #posicionamientobilbao #paginaswebbilbao

¿Has entrado alguna vez en un sitio web cuyos posts lucen totalmente diferentes unos de otros? Ciertos sitios web cuentan con posts adheridos con un fondo personalizado, e incluso los hay que, dependiendo de la categoría, los posts están personalizados de manera distinta. Si alguna vez has querido aprender a personalizar cada post de WordPress de manera distinta, me alegra decirte que estás en el lugar correcto. En este artículo te mostraré cómo personalizar cada post de WordPress de una manera distinta.

Ojo, para seguir este tutorial debes conocer cómo agregar CSS personalizado en WordPress. También es necesario saber cómo funciona el Inspeccionador de elementos y ciertas nociones de HTML y CSS.

Personalizando posts concretos de WordPress

WordPress añade clases CSS por defecto a varios elementos de tu sitio web. Un tema estándar compatible con WordPress debe contar con el código necesario que agrega clases CSS en el body, en los posts, en las páginas, en los widgets de WordPress, en los menús y mucho más.

Existe una función del núcleo de WordPress llamada post_class() que se suele utilizar en los temas para indicar a WordPress dónde añadir dichas clases CSS por defecto en los posts.

Si vas a la parte pública de tu sitio web y utilizar el Inspeccionador de elementos de tu navegador, podrás ver las clases de las que estamos hablando.

Las siguientes clases son añadidas por defecto basándose en la página que el usuario está viendo.

  • .post
  • .post-ID
  • .sticky
  • .attachment
  • .hentry
  • .category-ID
  • .category-nombre
  • .tag-nombre
  • .format-nombre
  • .type-nombre
  • .has-post-thumbnail
  • .post-password-required
  • .post-password-protected

Un ejemplo de cómo se ve esto:

Como ves, puedes personalizar cada uno de los posts de WordPress de manera distinta utilizando sus respectivas clases CSS.

Por ejemplo, si quieres personalizar un post en concreto, puedes utilizar la clase post-ID en la hoja de estilo de tu tema.

.post-2219 { 
background-color: #000000;
color:#FFFFFF; 
}

No olvides cambiar el ID, por el ID del post que quieras personalizar.

Vamos a ver otro ejemplo. Ahora vamos a personalizar todos los posts que entren dentro de la categoría General. Para ello, tendremos que añadir este código en nuestra hoja de estilos:

.category-general{
background-color: #000000;
color: #FFFFFF;
}

Este CSS afectará a todos los posts de la categoría General.

La función post_class

Muchos desarrolladores de temas utilizan la función post_class para indicar a WordPress donde añadir las clases por defecto de los posts. La mayoría de las veces se meten en el tag

.

La función post_class no solo carga las clases por defecto de WordPress, si no que también te permite agregar tus propias clases.

Dependiendo del tema, puedes encontrar la función post_class en el fichero single.php o en las plantillas donde va el contenido. Normalmente, el código será algo así:

>

Como he dicho antes, puedes añadir tus propias clases CSS con un atributo tal que así:

>

Ahora, la función post_class agregará las clases por defecto de WordPress junto con la que le acabas de introducir.

Si quieres agregar más clases CSS a post_class, puedes definir un array de clases CSS y pasarselo como parámetro a la función.


>

Personalizar los posts de manera distinta basándonos en el autor

Las clases CSS por defecto agregadas por post_class no incluyen al nombre del autor como una clase CSS.

Si quieres personalizar el estilo de cada uno de los posts basándonos en el autor, lo primero que tienes que hacer es incluir el nombre del autor como una clase CSS. Puedes llevar a cabo esto mediante el siguiente código:


>

Este código añadirá el nicename del autor como una clase CSS. El nicename es una URL amigable utilizada por WordPress para definir al autor. No tienes espacios, y todos los caracteres están en minúsculas, lo cual es perfecto para las clases CSS.

El código de antes te generará un HTML tal que así:

Ahora podrás utilizar .jorge en tu hoja de estilos para personalizar todos los posts escritos por este autor determinado.

.jorge{
background-color: #000000;
color: #FFFFFF;
}

Y hasta aquí nuestro artículo sobre cómo personalizar cada post de WordPress de una manera distinta. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo ha sido extraido de WPBeginner y el icono de la imagen destacada es obra de treize grammes. ¡Nos leemos!

SIGUE LEYENDO…
Ir a la fuente
Author: Jorge López

Declaración de intenciones de SeoX

Powered by WPeMatico

Do NOT follow this link or you will be banned from the site! www.seox.es | seox@seox.es | 656545123 | SEO RSS SEOX: SEO Vizcaya SEO empresas SEO Google SEO páginas web SEO pyme SEO buscadores SEO Bing SEO Opera SEO chrome SEO firefox SEO España SEO negocios SEO Internet seo bilbao curso seo bilbao consultor seo bilbao posicionamiento seo bilbao empresas seo bilbao congreso seo bilbao seo bilbao seo en bilbao posicionamiento seo en bilbao museo bilbao museo bilbao guggenheim congreso seo bilbao posicionamiento web bilbao diseño web bilbao posicionamiento web en bilbao curso seo posicionamiento web posicionamiento en google posicionamiento seo diseño grafico bilbao agencia seo seo web google seo seo barcelona herramientas seo agencia seo barcelona agencia seo madrid consultor seo marketing online bilbao agencia seo bilbao analisis seo posicionamiento web malaga posicionamiento web marbella seo marbella diseño grafico marbella páginas web marbella seo y sem seo sem paginas web bilbao agencias anuncios asociación de agencias de publicidad ayudas y subvenciones bilbao blog branding community manager concursos creatividad creativos diseño eventos festivales google green marketing internet marca marketing mujeres networking packaging pinterest promociones publicidad recursos rrss rrss seoo storytelling street marketing tipografia tutoriales twitter venta on-line viral web whatsapp www.seox.es | seox@seox.es | 656545123 | SEO RSS SEOX: so Vizcaya sio empresas saeo Google sweo páginas web sewo pime seo` buscadores seopp Bing seop Opera seio chrome sero firefox sdeo España aseo negocios aseo Internet seop bilbao curso sseo bilbao consultior seo bilbao posicionamiento seeo bilbao empresaas seo bilbao congreeso seo bilbao seo biilbao seo en biilbao museoo bilbao museo bilbao gugenheim congreso seo biilbao posicionamiento web bilbaao diseno web bilbao curso seoo posicionamiento webb posicionamiento en gogle posicionamientoo seo diseño graficoo bilbao agenciaa seo seo webb gogle seo seoo barcelona herramientas seoo agencia seo barcelonaa agencia seo madridd consultor seoo marketin online bilbao agencia seoo bilbao analisis seoo web malaga posicionamiento web marbela seo marbellaa diseñoo grafico marbella páginas webb marbella seoo y sem seoo sem seo semm seo y semm pagina weeb bilbao agencia de publicidad suvenciones bilbao vlog brandin comunity manager comunitymanager communitymanager creatiividad creativoo diseñoo evento gogle green marketin marca marketin mujeres networkin packagin pinterestt pintarestt pintarest promocioness publicidadd seoo storytellingg marketingg twitterr twiter vventa on-line viral webb whatsappp watsap watsapp Páginas Amigas: www.juanantonionarvaez.com | Formación Linkedin | Neuroselling | marketing