Cómo crear estilos personalizados en wordpress veinte quince

En el tema por defecto Veinte Quince, echar un vistazo a la content.php plantilla haciendo clic en la página de edición de temas. En la parte superior de la plantilla (línea 13, específicamente) es esta línea de código:

los post_class () - sección es la parte fresca de la etiqueta de plantilla. Esta etiqueta de plantilla le dice a WordPress para insertar el formato HTML específico en su plantilla. Este marcado HTML le permite usar CSS para hacer estilos personalizados para los mensajes pegajosas, categorías, etiquetas y formatos de correos.

Video: 10 Tutorial WordPress - Como Personalizar Un Menú En WordPress

Por ejemplo, se pueden establecer las siguientes opciones para un mensaje:

  • Se adhieren a este post la primera página

  • Archivado en una categoría WordPress

  • Etiquetadas con Noticias

Para el ejemplo anterior, WordPress inserta el siguiente marcado HTML:

Del mismo modo, para los formatos de correo, si publica un anuncio con el formato de mensaje de imagen, la post_class () etiqueta en la plantilla contiene el siguiente código HTML, lo que indica que este mensaje debe ser formateado para una visualización de la imagen:

Se puede utilizar junto con el CSS post_class () - etiqueta para proporcionar estilos personalizados para cada uno de los tipos de envíos, categorías y etiquetas que ha configurado en su sitio.

Adición de estilos únicos para sus formatos de correos se inicia con la creación de las designaciones de contenido que desea mostrar para cada formato. Las posibilidades son infinitas, y son todo depende de ti.

En los siguientes pasos, se crea un simple, despojada Índice Principal (index.php) Presentar a utilizar en su sitio e incluyen soporte post formato. Esta plantilla es solamente una muestra para que usted siga y se refieren a cuando se crea la pantalla personalizada para sus formatos de correos. No hay tiempo como el presente, así que sigue estos pasos:

  1. Abra el editor de textos, como Bloc de notas (PC) o TextEdit (Mac).

  2. Introduzca el siguiente código para crear una plantilla sencilla para los formatos de correos.

  3. Guarde el archivo como index.php en su computadora local.

  4. Cargar el archivo en su carpeta de temas (que se encuentra en el / Wp-content / themes / tu-theme-nombre del directorio), En sustitución de la existente index.php archivo.

? Lt; php get_header () - gt?; ? # 1 lt; php if (have_posts ()):? gt; ? # 2lT; php while (have_posts ()):? the_post () - gt; # 3
‘- # 10echo the_title () - # 11echo‘‘- # 12echo the_content () - # 13 #} 14elseif (has_post_format (‘galería’)) {# 15echo‘

‘- # 16echo the_title () - # 17echo‘

‘- # 18echo the_content () - # 19 #} 20elseif (has_post_format (‘imagen’)) {# 21echo‘

‘- # 22echo the_title () - # 23echo‘

‘- # 24echo the_post_thumbnail (‘imagen de formato’) - # 25echo the_content () - # 26 #} 27elseif (has_post_format (‘link’)) {# 28echo‘

‘- # 29echo the_title () - # 30echo‘

`- # 31echo the_content () - # 32} # 33elseif (has_post_format ( `cita`)) {# 34echo the_content () - # 35} # 36elseif (has_post_format ( `status`)) {# 37echo the_content () - # 38 } # 39elseif (has_post_format ( `vídeo`)) {# 40echo `

‘- # 41echo the_title () - # 42echo‘

‘- # 43echo the_content () - # 44 #} 45elseif (has_post_format (‘audio’)) {# 46echo‘

‘- # 47echo the_title () - # 48echo‘

‘- # 49echo the_content () - # 50 #} {# 51else 52echo‘

‘- # 53echo the_title () - # 54echo‘

‘- # 55echo the_content () - # 56} # 57 gt;? # 58

Video: Cómo crear menus personalizados en WordPress

# 59lt; php endwhile- otra cosa:?? Gt; # 60lt;? Php endif- gt; # 61lt; get_sidebar php () - gt; # 62lt; get_footer php () - gt; # 63

He aquí un desglose de las líneas de bacalao:

Línea 1: Una función que incluye todo el código de la header.php archivo de su tema.

Líneas 2 y 3: indica el comienzo de El lazo..

Línea 4: Proporciona HTML y CSS marcado con el post_class () - función que le proporciona clases CSS únicas para cada uno de los diferentes formatos de correos.

Línea 5: Inicia el inicio de una PHP función.

Líneas 6-8: Proporcionar contenido para el Aparte Formato de correo.

Líneas 9-14: Proporcionar contenido para el Charla Formato de correo.

Líneas 15-20: Proporcionar contenido para el Galería Formato de correo.

Líneas 21-27: Proporcionar contenido para el Imagen Formato de correo.

Líneas 28-33: Proporcionar contenido para el Enlazar Formato de correo.

Líneas 34-36: Proporcionar contenido para el Citar Formato de correo.

Líneas 37-39: Proporcionar contenido para el Estado Formato de correo.

Líneas 40-45: Proporcionar contenido para el Vídeo Formato de correo.

Líneas 46-51: Proporcionar contenido para el Audio Formato de correo.

Líneas 52-57: Proporcionar contenido para todos los otros mensajes por defecto.

Línea 58: Termina el PHP función.

Línea 59: Cierra el HTML div etiqueta que se abrió en el paso 4.

Líneas 60 y 61: Cierre la endwhile y Si declaraciones que se abrieron en las líneas 2 y 3.

Línea 62: Esta función llama en el código incluido en el sidebar.php archivo de su tema.

Línea 63: Esta función llama en el código incluido en el footer.php archivo de su tema.

Este es un ejemplo simple y no incluye una gran cantidad de marcas o CSS clases HTML. Esto se hace intencionadamente para que pueda centrarse en los bits de código que se requieren con el fin de designar y definir las diferentes visualizaciones de contenido de los formatos de correos.

Se puede ver que algunos formatos contienen la etiqueta de plantilla para mostrar el título - el título()- - y que otros no lo hacen. Sin embargo, todos ellos contienen la etiqueta de plantilla para mostrar el contenido del mensaje: el contenido()-. Se puede jugar con diferentes tipos de contenido y de marcado que desea agregar a sus formatos de correos.

Pareja sus adiciones plantilla para formatos de correos con el post_class () - que añade clases CSS especiales y marcado para cada tipo de formato de mensaje. Realmente puede personalizar la visualización de cada formato de entrada individual al contenido de su corazón.

Artículos Relacionados