Cómo personalizar veinte quince para hacerlo

Recientemente, hemos elogiado al nuevo WordPress, los veinte quince predeterminados por su apariencia limpia y enfocarnos en compartir contenido hermoso. Me gusta su ritmo vertical, la apariencia de la barra lateral y el comportamiento receptivo. Es realmente un tema hermoso. Pero aunque me gusta lo que parece, siempre hay espacio para hacerlo. Veinte quince ofrecen algunas opciones de personalización, pero es posible que desee hacer mucho para modelarlo como desee. En esta publicación, echaré un vistazo a varias formas en que puede convertir un excelente tema en un diseño de sitio que sea adecuado para usted. Observamos las opciones de personalización incorporadas, algunos complementos para agregar una mejora adicional del estilo y el yo -Las soluciones codificadas para algunos problemas, aunque menores.
Durante este artículo exploraremos:
Personalizaciones predeterminadas
colores
Imágenes de fondo para el contenido principal y la barra lateral
Uso del menú social
complementos
Agregar soporte de fuentes de Google
Agregar un Twitter de feed a la barra lateral
Agregar soporte para galerías de placas, compartir enlaces y más
Soluciones codificadas
Cambiar la barra lateral hacia la derecha
Agregar un crédito de imagen en publicaciones
Eliminar la sección del autor en publicaciones
Cambiar el color de las cajas de contenido
Personalizaciones predeterminadas del tema El principal lugar de acceso es la sección de aspecto> Personalización del administrador. Esto debería mostrar la personalización del tema con las siguientes opciones:

Secciones de personalización disponibles para veinte quince título del sitio y eslogan Esta sección de personalización le permite configurar el título y el subtítulo de su sitio web. Esta es una funcionalidad estándar para casi cualquier tema. Además, puede elegir (a través de una casilla de verificación) para deshabilitarlo por completo. Esto es bastante útil si desea agregar un encabezado gráfico con su logotipo a través de un tema infantil. Descubrí que el título y el subtítulo pueden usarse bastante bien para una biografía rápida. Prefiero usar un widget. La diferencia entre el título y el subtítulo y un widget. La captura de pantalla anterior muestra el título y el subtítulo a la izquierda y un texto derecho regular. Es tan grande como el título se convierte en el título en Widget, pero decepcionantemente, el widget no se puede colocar sobre el menú, incluso en la parte superior de la página, como quería que fuera. Colors La sección de color le brinda acceso a las opciones de personalización más visibles: cambio de color. Hay cuatro configuraciones:

Esquema de color básico: le permite elegir un color predeterminado para el contenido y la barra lateral.
Color de fondo: establezca el color de fondo para la zona de contenido principal. Las cajas de contenido mantendrán sus colores originales.
Color de texto Ante y barra lateral: configure el color de texto para el encabezado y la barra lateral. La barra lateral se convierte en el encabezado en pantallas más pequeñas.
El color de fondo para el encabezado y la barra lateral: establezca el color de fondo para el área lateral/encabezado.
Algunas variaciones de color. Imágenes de fondo y fondo Estas dos secciones contienen una configuración que gobierna la imagen de fondo para la barra lateral y el área de contenido, respectivamente. Incluso si usa una imagen aquí, asegúrese de establecer un color de fondo que se vea bien. Si algo no funciona bien y su imagen no cobra, sus lectores continuarán viendo algo agradable visualmente. Las imágenes de fondo establecidas para la barra y el contenido laterales. Si te preguntas, no hay forma de tener una sola imagen de fondo a lo largo de toda la longitud y tener la barra lateral negra con cierta opacidad. La captura de pantalla de arriba se ve así, pero en realidad hay dos imágenes. Navegación, widgets y la primera página La sección de navegación le permite asignar los menús de los menús disponibles dentro del tema. Hay un menú ordinario para páginas llamadas “Menú principal” y un menú social llamado “Menú de enlaces sociales”. Los echaremos un vistazo más tarde, asignándolos desde la sección de menús.

Si aún no ha probado los widgets administrados, esta es la oportunidad perfecta para hacer esto. Ha sido revisado en WordPress 3.9 y es mucho más utilizable que antes. Puede crear y obtener una vista previa de widgets directamente desde la personalización, una hermosa característica. Con la primera sección de página estática, puede seleccionar una página creada previamente para usar como su primera página. Úselo si desea mostrar algo más que las últimas publicaciones en la página principal. Personalización de menús y enlaces sociales

Un ejemplo de menú ordinario y un menú de enlace social. Si vas a mirar> menús, puedes armar menús para ti no es nada nuevo aquí. Si desea averiguar cómo funciona, eche un vistazo a WordPress. Veinte y quince guía de menú ofrece una característica adicional, la opción de crear un menú con iconos sociales con enlaces a sus servicios favoritos: cuando crea un menú social, AR AR . Debe crear un menú regular y hacer un enlace a un sitio aceptado. No tiene que preocuparse por el nombre del elemento en el menú, el icono correcto se utilizará sobre la base del enlace proporcionado. La siguiente es la lista completa de sitios sociales disponibles en los que puede iniciar sesión:
Codepen

Cavar
enorme
Dropbox
Facebook
Flickr
Github
Google+
Instagram
LinkedIn
camino
Pinterest
Bolsillo
Polldaddy
Reddit
Skype
Tropezar con
Tumblr
Gorjeo
Vimeo
WordPress
Youtube
Complementos útiles Si las personalizaciones predeterminadas no son suficientes para personalizar veinte quince como usted, aquí hay algunos complementos que ofrecen opciones de estilo adicionales.
Agregar soporte de fuentes de Google
Veinte quince usan Noto Serif y Noto sin, dos excelentes fuentes disponibles de Google Fonts. Desafortunadamente, no hay una forma construida de personalizar a la familia de fuentes, sin embargo, un complemento llamado TypeCase resuelve todo esto. WP Tavern explica en detalle cómo funciona el proceso. Una vez que descargue e instale typeCase, podrá seleccionar una serie de fuentes que desea proporcionar para personalizar el tema. Luego visite el personalizador del tema y use las opciones para establecer las fuentes para usar para la copia y los valores. StypeCase también le permite agregar selectores personalizados para adaptar sus fuentes a ciertos elementos. Esta es una forma extremadamente poderosa de agregar fuentes a los temas sin cambiar los temas por sí mismos. ¿Está interesado en agregar asistencia para Google Fonts?
Detalles
Agregar un feed Twitter

Agregar un Twitter de feed a la barra lateral es probablemente una de las mejores cosas que puede hacer para que las personas interactúen con usted. Recientemente, me encontré con un complemento bastante largo llamado Easy Twitter Feed Widget, que es uno de los mejores que he usado hasta ahora.
La configuración es tan fácil como el pegado de una ID de widget y le permite personalizar el aspecto de alimentación ampliamente. ¿Estás interesado en agregar un Twitter de feed?
Detalles
Galerías con azulejos, enlaces compartidos y más

Con una serie de descargas de casi 14 millones, Jetpack es uno de los complementos más populares disponibles. Está hecho por nuestros amigos de Automatic e incluye una gran cantidad de funciones que se pueden activar o desactivar. Las galerías con arenisca son una característica que me gusta, creando automáticamente una galería de mampostería a partir de los códigos cortos de su galería. La belleza de esto es que no tiene que hacer nada especial al ingresar a sus galerías, simplemente inicie la función. Otro modo usado a menudo es la sección de intercambio que se puede agregar automáticamente en la parte inferior de las publicaciones. Así es como se ve en veinte quince:
¿Estás interesado en las galerías de mosaico, compartir enlaces y más?
Detalles
Personalizando veinte quince con código antes de permanecer atascado en la personalización del tema, debemos crear un tema infantil. Esto es extremadamente fácil, pero si no está seguro de cómo hacerlo, consulte nuestra guía práctica para niños. Los temas infantiles le permiten cambiar un tema existente sin alcanzar su código. Esto le permite actualizar el tema principal sin perder cambios.

Una vez que haya creado el tema del niño, está listo para comenzar a implementar cambios personalizados. Mover la barra lateral hacia la derecha ¿Cuál es el problema? No hay opción para cambiar la barra lateral en el lado derecho de la página si lo prefiere. ¿Cómo remediar? Para mover la barra lateral hacia la derecha, deberá agregar solo unos pocos estilos al archivo style.css del niño. La solución es el código completo, la explicación sigue:
Cargue la idea 5F47292F15CBC2E2D4FF

Entonces, ¿cómo sé cómo hacer eso? Simplemente usé herramientas de desarrollador de Chrome para averiguar qué son los estilos. Presione el comando Shift + + C para mostrar el menú y coloque el cursor sobre la barra lateral (en OS X). La barra lateral (.sidebar) tiene algunas reglas que lo empujan de manera predeterminada. La zona de contenido principal (. Site-Account) tiene reglas que la empujan hacia la izquierda. Revertí estas reglas, teniendo cuidado de hacerlas en exceso correctamente. Tenga cuidado cuando haga esto porque algunas reglas deben establecerse en valores predeterminados. Por ejemplo: al cambiar un flotador, simplemente puede decir flotante: correcto. Debido a que esto se define como se queda inicialmente, la regla se sobrescribe. Sin embargo, si una regla se establece como margen izquierda: 20px; No lo reescriba definiendo Margin-Right: 20px en el tema del niño. Usted dice que el artículo debe tener un margen recto de 20 px además de un margen a la izquierda. En estos casos debe escribir: Margen-izquierda: Auto; Margen-derecha: 20px; Margen-izquierda: auto; Margen-derecha: 20px;
. Esto es bastante obvio cuando escribes todas las reglas, pero a veces cometo este error cuando superé las reglas y paso un poco de tiempo para descubrir qué está mal. La última pieza del rompecabezas es asegurarse de que el separador de fondo esté alineado con nuestro nuevo aspecto. El separador se agrega usando pseudo-selector :: antes. Haciéndanos que la posición de este elemento se fije a la derecha y no a la izquierda, hemos completado el cambio de la barra lateral. Asegúrese de incluir el código en una consulta de medios. Queremos aplicar estos estilos solo en pantallas grandes. En pantallas más pequeñas, la barra lateral aún debe convertirse en el encabezado. Por defecto, esto sucede en pequeñas pantallas de escritorio, a 955px o 59.6875em. Agregar un crédito de imagen en publicaciones ¿Cuál es el problema? Me gusta decir quién es responsable si uso una imagen web, pero no hay opción para agregar créditos de imagen a veinte quince. ¿Cómo remediar? Use campos personalizados avanzados y coloque la información en la plantilla a través de un tema infantil. Le daré una breve presentación de cómo hice esto en mi sitio, pero para obtener más información al respecto, eche un vistazo a la creación de un diario de entrenamiento de WordPress para ver cómo funciona. La solución en campos personalizados avanzados creó un campo de texto Wysiwyg, que se muestra en cada página de edición posterior. Podría haberlo convertido en un campo de URL, pero eso me habría limitado en el front-end. Usando un campo de texto, soy libre de escribir una o dos oraciones sobre la imagen, si me gusta.
Imagen de campo de crédito que creé en ACF. En este momento, puede agregar créditos de imagen a todas sus publicaciones, pero no aparecerán en el frente. Abra las funciones del archivo.php y use un gancho para acceder a esta información después del contenido de la publicación: Cargue la idea 5F47292F15CBC2E2D4FF

Este código se hace cargo del contenido original de la publicación y lo devuelve después de agregar una cadena de imagen. Observe que utilicé un formato HTML particular:
Cargue la idea 5F47292F15CBC2E2D4FF
La razón por la que hice esto fue que Jetpack usa la misma estructura para eliminar parte de su contenido, como la sección de intercambio. Quería imitar eso, así que usé el mismo HTML. Antes de probarlo, vaya a style.css para cambiar un poco el aspecto. Use lo siguiente para que se vea exactamente como lo sería si fuera un módulo JetPack:
Cargue la idea 5F47292F15CBC2E2D4FF

Tenga en cuenta que al final cambio el tamaño de fuente de todas las secciones que usan el selector de sección .fter-post. Es posible que desee eliminar esto si desea que el texto sea un poco más grande.
Crédito de imagen y eliminación del distribuidor de JetCpack de la sección del autor ¿Cuál es el problema? Se muestra una biografía del autor en la parte inferior de cada publicación, que se ve muy bien, pero si tiene un solo sitio web del autor, es completamente inútil, porque su información probablemente se mostrará en la barra lateral. ¿Cómo remediar? Puede hacer esto de dos maneras: puede usar la hoja de estilo para simplemente eliminarla de la visualización o puede eliminar completamente la funcionalidad. La solución para eliminarlo desde la vista, acceder al archivo style.css y agregar lo siguiente: .author-info {display: none; } .Author-info {display: none; }. Si elige este método, el texto continuará estando allí, pero se ocultará a la vista. Si desea evitar que el contenido se cargue cuando no sea necesario, puede eliminarlo por completo, HTML y todos los demás. Para hacer esto, deberá copiar y pegar el archivo content.php del tema principal dentro del niño. Abra el archivo y busque una sección que comience con // BIO del autor. Elimine todo, desde la etiqueta PHP inicial hasta la etiqueta PHP final. Aquí está el código completo que se eliminará: Cargue la idea 5F47292F15CBC2E2D4FF
Cambiar los colores del cuadro de contenido ¿Cuál es el problema? Personalizar el tema no le permite cambiar el color de las cajas de contenido. ¿Cómo remediar? Puede cambiar el color de los cuadros de contenido (y enviar mensajes de texto en ellos) para crear algunos modelos más interesantes. Solo necesitará cambiar los estilos, para que todo se pueda escribir en la hoja de estilo para el tema del niño.
Una caja colorida personalizada en veinte quince. La solución para obtener el efecto visto en la captura de pantalla anterior tuvo que cambiar algunos estilos. Cambiar el fondo y el color del texto del cuadro no es suficiente, porque los enlaces y otros elementos pueden anularlos.
Si desea obtener exactamente el mismo diseño que el anterior, use #000000 para el fondo de contenido y #303030 para el fondo de la barra lateral para personalizar el tema. Tenga cuidado porque algunos artículos en el contenido de la publicación pueden sobrescribir estos estilos. Ya puede ver un ejemplo en la captura de pantalla: la etiqueta pre. Esto parece estar bien en el diseño, pero otros elementos pueden pasar, con resultados menos agradables. Si este es el caso, simplemente agregue una nueva regla a la hoja de estilo para usar sus propios colores. Creación de cajas sin fronteras ¿Cuál es el problema? En algunos casos, es posible que desee crear cajas sin fronteras para una diapositiva, por ejemplo. Eche un vistazo a la captura de pantalla a continuación para comprender mejor el problema.
Una publicación desempleada y una publicación regular debajo de la otra. ¿Cómo remediar? Podríamos establecer uno de los formatos de publicación para bordearse, pero preferiría dejarlos como están, el diseño es excelente. Además, me gustaría mostrar imágenes dentro de las cajas con borde de borde y fronteras. La solución con la que vine implica campos personalizados avanzados nuevamente. Hemos creado un control verdadero/falso, que se muestra para la pantalla de edición de cada publicación. Esto me permite determinar si quiero que una determinada publicación esté sin fronteras o no.
El control sin fronteras está justo debajo de la zona de crédito de imagen discutida anteriormente. La solución que detectaremos el estado de este cuadro cada vez que se cargue una publicación y eliminaremos una clase especial si es un boleto. Esto se puede hacer conectando una función en el gancho post_class: cargue la idea 5F47292F15CBC2E2D4FF

Usamos la función Get_Field para ver si el cuadro sin frontera está marcando. Si es así, lo agregamos a la matriz de clases que se agregarán a la publicación. Desde aquí, es en gran medida subjetivo lo que quieres hacer. Puede eliminar el marco, pero mantenga la meta caja, retire la meta caja por completo, etc. Opté por eliminar todo:
Cargue la idea 5F47292F15CBC2E2D4FF
Por cierto, si desea agregar un control deslizante permanente a la parte superior de su página inicial, esta es la manera perfecta de hacerlo. Todo lo que tiene que hacer es agregar una diapositiva deslizante y marcar la publicación como pegajosa. En mi demostración, utilicé el complemento Meta Slider para crear la diapositiva. Conclusión Como puede ver, hay numerosas formas de personalizar veinte quince para que sea adecuado para usted. La personalización le brinda control sobre la configuración básica, mientras que los complementos pueden hacer mucho para expandir lo que ya es un tema maravilloso. Si necesita cambios más fundamentales, casi cualquier cosa se puede hacer a través de un niño. Puede eliminar los elementos, agregarlos a usted mismo y personalizar el estilo de todos de manera modular. Si desea ver otras personalizaciones de veinte quince o ha cambiado el tema usted mismo, háganos saber en los comentarios a continuación. Etiquetas:

temas infantiles
código
Temas gratis