prucommercialre.com


Cómo crear estilos personalizados de WordPress para Sticky, Categoría y Tag Mensajes

WordPress te permite utilizar una etiqueta personalizada para mostrar los estilos personalizados para los puestos pegajosas (puestos que se quedan en la parte superior de tu blog en todo momento), categorías y etiquetas en tu blog de ​​WordPress. Esa etiqueta especial tiene este aspecto:

<? Div <post_class php ()> id = "post - <the_ID php ();?>"?>

La parte de esa etiqueta de plantilla que es tan cool es la sección post_class (). Esta etiqueta de plantilla dice WordPress para insertar marcas HTML específico en su plantilla que le permite utilizar CSS para hacer estilos personalizados para los mensajes pegajosas, categorías y etiquetas.

Al publicar nuevos mensajes a tu blog, hay diferentes opciones que puede establecer para su blog, como categorías, etiquetas y ajustes de publicación. Uno de los ajustes es el palillo de este Mensaje al ajuste Portada. Puede estilo personalizado esos puestos pegajosa - no es tan complicado como parece!

Por ejemplo, una entrada se podría publicar con las siguientes opciones establecidas para ello:

  • Pegue este Mensaje al Front Page
  • Archivado en una categoría llamada WordPress
  • Etiquetado con Noticias

Al tener la etiqueta post_class () en su plantilla, WordPress inserta formato HTML que le permite utilizar CSS para el estilo posts pegajosos, o puestos asignados a las etiquetas o categorías específicas, de manera diferente. WordPress añade el siguiente formato HTML del mensaje:

<Div class = "post-pegajosa categoría wordpress tag-noticias">

Selectores CSS y el trabajo de marcado HTML juntos para crear estilo y formato para su tema de WordPress. Usted puede ir a su archivo CSS y definir estilos para los siguientes selectores CSS:

  • .post: Use esto como el estilo genérico para todas las entradas de tu blog. El CSS para esta etiqueta es

    .post {background: #ffffff; frontera: plata maciza 1px; padding: 10px;}

    Se crea un estilo para todos los mensajes que tienen un fondo blanco con un borde fino de plata y 10 píxeles de espacio en el relleno entre el texto de correos y la frontera del poste.

  • .sticky: El concepto de pegarse un puesto a su página principal es llamar la atención sobre ese puesto, por lo que puede utilizar diferentes estilos CSS para hacer que se destaque del resto de las entradas de tu blog:

    .sticky {background: #ffffff; frontera: 4px sólido de color rojo; padding: 10px;}

    Esto crea un estilo para todos los posts pegajosos, que consiste en un fondo blanco, una frontera roja gruesa, y 10 píxeles de espacio en el relleno entre el texto de correos y frontera del poste.

  • .category-wordpress: Si su blog mucho acerca de WordPress, sus lectores pueden apreciar que si se les da una señal visual en cuanto a qué entradas de tu blog son sobre ese tema. Puede hacerlo a través de CSS diciéndole WordPress para mostrar un icono de WordPress pequeña en la esquina superior derecha de todas sus puestos en la categoría de WordPress:

    .category-wordpress {background: url (wordpress-icon.jpg) arriba a la derecha de no repetición; altura: 100px; Ancho: 100px;}

    Este código inserta un gráfico - wordpress-icon.jpg - que es 100 píxeles de alto y 100 píxeles de ancho en la esquina superior derecha de cada post que ha asignado a la categoría de WordPress en tu blog.

  • .tag-noticias: Usted puede peinar todos los posts etiquetados con noticias de la misma forma en que has decoración cuidada las categorías:

    .tag-news {background: # f2f2f2; frontera: 1px solid negro; padding: 10px;}

    Esta estilos CSS todos los posts etiquetados con las noticias con un fondo gris claro y un borde negro fino con 10 píxeles de relleno entre el texto de correos y frontera del puesto.

Usando la etiqueta post-clase (), combinado con CSS, para crear estilos dinámicos para las entradas de tu blog es fácil y divertido!