Dispatch es un blog estilo revista para su nuevo sitio web. Cada una de sus características ha sido diseñada y construida usando GeneratePress y WP Show Posts. Como se esperaba de un sitio de Flint Skin, utiliza CSS personalizado. Con más de 350 líneas, se recomienda, pero no es necesario, mover el CSS adicional a una hoja de estilo de tema secundario. Así que empecemos a hacerlo tuyo.
WP Mostrar publicaciones
Sin el complemento WP Show Posts, este sitio no existiría. Otro producto increíble de Tom Usborne, WP Show Posts hace exactamente lo que dice el título. En cualquier lugar y en todas partes en el caso de Dispatch. Tanto es así que hay una página dedicada a explicar sus usos aquí.
Iconos sociales – Escritorio
El widget de iconos sociales ligeros se ha agregado al widget de encabezado. Solo se muestra en el escritorio ya que el widget tiene la hide-on-mobile y hide-on-tablet-classes.
Iconos Sociales – Tablet y Móvil
También se muestran en la Navegación deslizable. Uso del widget deslizante.
Colores de iconos sociales
Los colores se cambian dentro del widget.
Constructores de páginas
¿Puedo usar un creador de páginas con Dispatch?
Sí, puedes si lo deseas. La única regla es que debe usar la plantilla predeterminada para sus páginas y publicaciones. Para crear una plantilla de lienzo en blanco de ancho completo, siga estos pasos:
- Apariencia > Elementos > Nuevo diseño
- Deshabilitar título de contenido
- Establezca el contenedor del generador de páginas en Contenido o Ancho completo
- Establezca reglas de visualización para las páginas en las que necesita un lienzo en blanco.
¿Cómo cambio los colores?
La mayoría de los colores de Volúmenes están controlados por el Personalizador. Hay algunos Elementos que forman parte de las funciones de Volúmenes que requieren CSS. Este artículo cubre dónde hacer esos cambios:
Cómo cambiar los colores personalizados
Logotipo e identidad del sitio
Dispatch no tiene un logotipo, solo el título del sitio.
Puede cambiar la marca del sitio o agregar un logotipo a través de la Personalizador > Identidad del sitio
Diseño de página: margen del contenedor
El despacho utiliza el Personalizador > Diseño > Contenedor > Contenedores separados opción.
Para mantener la alineación horizontal, se ha eliminado el relleno izquierdo y derecho en el escritorio.
El siguiente CSS agrega margen izquierdo y derecho para compensar el relleno.
@media (min-width: 769px) {
body {
margin: 0 30px;
}
}
Navegación
Dispatch usa la Navegación principal para el menú principal y la Navegación secundaria muestra las categorías de publicaciones. La mayoría de su diseño y estilo está controlado por el Personalizador. Con estas excepciones:
Menú subrayado al pasar el mouse
El subrayado animado se configura usando este CSS. El cambio de color de la barra se trata aquí:
Cómo cambiar los colores personalizados
Ubicación de navegación secundaria
La navegación secundaria se coloca mediante un elemento de gancho en lugar del personalizador, que se establece en Sin navegación. Esto es para que la navegación secundaria se coloque dinámicamente. Notarás que no aparece en las publicaciones. También aparece debajo del elemento de encabezado en la página principal.
Se puede encontrar más información al respecto aquí:
Ganchos – Elementos temáticos personalizados
Quiero usar el Personalizador para controlar la navegación
Simplemente elimine (o Quick Edit > Set to Draft and Save) el elemento de encabezado de Magazine Grid para volver a los controles normales del personalizador.
Blog
La mayoría de las configuraciones del Blog se controlan dentro del Personalizador > Diseño > Blog. Por supuesto, no sería un sitio de Flint Skin si no se hiciera alguna personalización personalizada. Estos comprenden reordenar el meta diseño de la publicación y fijar la altura de la imagen destacada.
Para mantener un estilo coherente, las publicaciones del blog se diseñaron para que coincidan con el complemento WP Show Posts. Puede leer más aquí:
https://gpsites.co/dispatch/wp-show-posts/
Publicación única: barra lateral y sin barra lateral
La configuración predeterminada (en el Personalizador) para la publicación única incluye la barra lateral derecha. Si se elimina la barra lateral, como en esta publicación, el contenedor de contenido se reduce para facilitar la lectura.
Este CSS cambia el tamaño del contenedor de publicaciones individuales sin barra lateral:
body.no-sidebar .site-content {
max-width: 720px; /* Adjust the size to suit */
margin-left: auto;
margin-right: auto;
}
Las opciones para eliminar la barra lateral publicación por publicación se pueden realizar utilizando el módulo de elementos deshabilitados o el módulo de diseño:
Descripción general de Metabox de diseño
Descripción general del elemento de diseño
Héroes de la página: elementos de encabezado
Los encabezados de héroe se construyen utilizando el módulo Elementos. Los encabezados de héroe de volúmenes se tratan aquí:
Héroes de páginas y publicaciones
Cuadrícula de revista – Portada
Una cuadrícula personalizada de WP Show Posts que muestra 5 publicaciones.
Más detalles sobre cómo crear su propia lista para esta cuadrícula y los que se usan en el contenido se cubren aquí …… WWWW ……
El elemento de encabezado contiene solo el código abreviado de WP Show Posts. Y requiere estas dos clases de elementos: wpsp-grid wpsp-card
Publicación única
La publicación única utiliza etiquetas de plantilla para mostrar dinámicamente el título, la categoría, la fecha y el autor de la publicación. El título de la publicación se establece como H1 y utiliza la imagen destacada como fondo.
Imagen de fondo Sombra insertada
Para mejorar la legibilidad, se proyecta una sombra insertada sobre la imagen de fondo. Esto utiliza el campo Clases de elementos. Para agregar la sombra a un nuevo encabezado de página, simplemente agregue el overlay clase en ese campo. Del mismo modo, puede eliminarlo de este elemento de encabezado para deshabilitar la sombra.
Encabezado de archivos
Este encabezado simple coloca el título del archivo sobre la navegación secundaria.
