Complementos para operaciones en segundo plano de WordPress. Editar el fondo en una plantilla de WordPress blog de WordPress con fondo transparente

blog de WordPress se pueden cambiar de muchas formas diferentes, y que estos cambios se están realizando en códigos de archivo PHP situado en la carpeta del tema de diseño activo en el blog.

Ahora eche un vistazo crítico a su blog. Pronto, muchas cosas serán diferentes, porque en principio, puedes cambiar lo que quieras por tu cuenta. Por supuesto, solo necesitas saber cómo hacerlo.

En el panel de administración

Vaya al panel de administración en Apariencia - Editor ... Ya sabes de qué son responsables muchas de las plantillas, pero ahora no te interesarán las plantillas, sino lo que hay debajo de ellas: Estilos... Más precisamente, una sección de ellos, que se llama Lista de estilos.

El archivo coincide con esta lista style.css ... Este archivo se encuentra en el blog en la carpeta del tema activo. Siempre puedes encontrarlo allí.

En el navegador

Simplemente abra el suyo en su navegador. La mayoría de los navegadores tienen una característica interesante: puede hacer clic con el botón derecho en cualquier área del blog y seleccionar de la lista de operaciones Ver código de artículo ... Aparece una ventana en la parte inferior en la que puede encontrar información interesante sobre el elemento en el que hizo clic.

En esta ventana izquierda Verá el código de la página y se resaltará una línea en ese código. correspondiente al elemento dado. UN a la derecha, en estilos, habrá propiedades de este elemento.

Tamaño de fuente, sangrías, texto y colores de fondo, alineación: todo está en estilos y todo esto se puede cambiar.

Cambiar el color de fondo

En un blog de WordPress, personalmente no me gusta cuando el trasfondo de los artículos y el trasfondo de todo lo demás son diferentes. En este caso, los artículos del feed están en bloques separados y, en mi opinión, no se ven muy bien. Haremos que el fondo en todas partes sea el mismo que el fondo del artículo. Haga clic en el fondo que queremos cambiar, con el botón derecho del mouse, seleccione Ver código de elemento. Nos interesará la línea que se resaltará como resultado a la derecha nombre de atributo de clase ... Los estilos se escriben por clase.

En este caso class \u003d art-layout-cell Esto significa que en estilos, en el archivo style.css, también habrá tal clase, y las propiedades ya estarán escritas en ella. Solo se verá diferente, a saber:

.art-layout-cell, y luego las propiedades de esta clase se escribirán entre llaves.

Busque una clase con este nombre en el archivo style.css... Usemos la función de búsqueda Ctrl + Fy escriba el nombre en el cuadro de búsqueda: celda de diseño de arte... Inmediatamente veremos el fondo:

color de fondo: transparente. Transparente medio transparente .

Ahora bien, ¿qué color necesitamos? ¿Dónde puedo obtener el color de fondo de nuestros artículos? Esta vez usaremos fSCapture... En eso. entre otras cosas, entre la caja de herramientas puede encontrar pipeta que determina el color de cualquier área en la pantalla del monitor. ¡Una herramienta muy útil!

Abra el programa FSCapture, vaya a Configuraciones y elige la herramienta Pipeta de pantalla ... Haga clic en el área deseada en la pantalla. En la ventana Maleficio Verás el código del color que necesitas: D2E8EE

Lo insertas en el estilo celda de diseño de arte en lugar de una palabra Transparente .

Mira lo que pasó. Aún queda mucho trabajo por hacer, pero ya se ha comenzado.

Video sobre. cómo editar el fondo en un blog de WordPress

Se puede encontrar información más detallada en las secciones "Todos los cursos" y "Utilidad", a las que se puede acceder a través del menú superior del sitio. En estas secciones, los artículos se agrupan por tema en bloques que contienen la información más detallada (en la medida de lo posible) sobre varios temas.

También puede suscribirse al blog y conocer todos los artículos nuevos.
No lleva mucho tiempo. Simplemente haga clic en el siguiente enlace:

El fondo es una imagen que muestra todos los elementos del sitio. O puede que no sea una imagen, sino un color sólido o degradado.

La mayoría de las plantillas no admiten la configuración y el cambio de fondos. Sin embargo, no todos los temas son capaces de hacer esto, especialmente cuando se trata de copias gratuitas. Pero incluso si tiene una plantilla de este tipo instalada en su sitio, en la que puede cambiar el fondo de WordPress en la configuración, esta será una operación muy escasa, ya que los cambios se aplicarán de inmediato en todo el sitio. No es posible cambiar el fondo en las plantillas normales solo para algunas publicaciones, categorías o páginas.

En este artículo, te contamos sobre dos complementos simples que resuelven este problema en un par de clics.

Fondo por página

Este es el complemento más simple que le permite manipular su fondo de WordPress. Después de instalarlo y activarlo, no aparecerán configuraciones ni elementos adicionales del panel de control del sitio. Solo en la página de cada publicación y página habrá una nueva opción que le permitirá agregar una imagen de fondo individual.

Se pueden aplicar varios efectos a la imagen seleccionada para el fondo de WordPress:

  • Seleccione repetir: horizontal o vertical;
  • Hacer una imagen desplazable con el sitio o fijo, el llamado;
  • Seleccione la orientación de fondo de WordPress: derecha, izquierda, centro;
  • Elija un color de relleno normal en lugar de imágenes.

El complemento es gratuito. Además, cada fondo de WordPress cargado se puede editar en el editor integrado de este complemento.

Imágenes de fondo de pantalla completa Pro

Y este complemento es más difícil de trabajar, le permite trabajar más con el fondo de WordPress. Se paga y cuesta $ 13. Después de instalar la activación del complemento, su elemento de menú aparecerá en el panel de administración. Contiene una galería de fondos, aquí puedes agregar, eliminar y editar imágenes en cualquier momento.

Además, puede establecer un fondo de WordPress para cualquier publicación o página, identificándolos por ID, para la página principal, cualquier categoría, páginas de archivo e incluso una página 404.

Las amplias capacidades de este complemento se complementan con la función que estaba en el primero: en la página para agregar cada página y publicación, se agregan opciones para configurar una imagen de fondo en particular, con un editor y todo tipo de efectos.

Con todo, una gran herramienta para crear un fondo de WordPress. Tanto los complementos de pago como los gratuitos son adecuados para muchas tareas relacionadas con esto.

Recientemente hablé sobre soluciones para, además de usar CSS y Javascript, los complementos de 2 WordPress también hacen frente a esta tarea. Uno de ellos que consideraré con más detalle hoy es el Administrador de antecedentes. No todos los temas tienen configuraciones para cambiar el fondo del sitio y no todos los usuarios podrán personalizarlo a través de los estilos de la plantilla. Además, el módulo tiene varias funciones adicionales interesantes, por lo que se decidió estudiarlo con más detalle.

Actualización 8/11/2018: Desafortunadamente, el módulo no se ha actualizado durante mucho tiempo y ahora ha desaparecido por completo del repositorio oficial del directorio de complementos. Lea el artículo o vea la selección de complementos.

Puede encontrar el módulo en esta página o instalarlo por su nombre desde el área de administración de WordPress. En el momento de escribir este artículo, se consideraba bastante antiguo, ya que la versión compatible terminó con 3.7.8. Desafortunadamente, es posible que el complemento ni siquiera sea compatible en este momento. Sin embargo, lo he probado con éxito en la última versión del sistema 4.2.1. Además, no se encuentran 30 mil descargas en todos los módulos.

La tarea principal del complemento Background Manager es mostrar un fondo aleatorio para cada nuevo visitante o crear una presentación de diapositivas a partir de varias imágenes. Francamente, inicialmente pensé que el módulo solo me ayudaría a crear un fondo en el que se pueda hacer clic, pero sus funciones son algo más diversas. Te permite:

  • cree conjuntos de imágenes a partir de las cuales se insertarán imágenes como fondo del sitio. Puede descargarlos desde su máquina local, biblioteca multimedia de WordPress u otros módulos;
  • determinar el posicionamiento del fondo, su "replicación" (si es un patrón);
  • patrones superpuestos en el fondo;
  • vea la imagen completa después de la descarga, y no espere hasta que aparezca gradualmente de arriba a abajo (si usa Internet lento);
  • configurar la visualización del fondo en determinadas páginas: principal, secciones, archivos o publicaciones;
  • agregue un enlace para el fondo con el cálculo de las estadísticas de conversión a través de Google Analytics.

Como puede ver, un conjunto de opciones muy interesante. Se trata globalmente de las posibilidades, pero el módulo Administrador de fondos está lleno de todo tipo de detalles. Entonces, por ejemplo, puede elegir la transparencia del patrón superpuesto, determinar el efecto al cambiar entre imágenes en una presentación de diapositivas, etc.

Fuera de la configuración del módulo, encontrará en la sección "Apariencia" - "Fondo". Aquí, por cierto, surge una situación en la que puede tener dos elementos de menú con el mismo nombre a la vez. Si recuerda, algunos temas de WordPress tienen esta configuración. Entonces, el complemento Background Manager es totalmente compatible con él y puede administrarlo en esta sección.

Pero es mejor ir al "Fondo", que representa solo la configuración del módulo. En esta página, verá solo un montón de configuraciones diferentes.

Sin embargo, el primer paso es crear un conjunto de imágenes para el fondo; haga clic en el enlace " Agregar nuevo conjunto de imágenes". Puede ver los conjuntos disponibles en la pestaña "Conjuntos de imágenes".

Como dije, aquí hay muchas configuraciones, las hay:

  • el principio de seleccionar imágenes para el fondo, al azar, etc.;
  • mostrar diferentes imágenes cada vez o almacenarlas en una sesión de navegador;
  • color de fondo;
  • mostrar el fondo en pantalla completa o "replicación";
  • superponer un patrón sobre una imagen;
  • puede agregar un botón Pin It de Pinterest y definir una serie de otras opciones.

Por último, cabe señalar que a veces pueden surgir problemas con la visualización del fondo. Si tiene una configuración estricta o una redefinición del fondo en su plantilla CSS, es posible que el complemento Administrador de fondo no funcione. Por ejemplo, en un sitio cargué silenciosamente una imagen y reemplacé la propiedad de fondo en los estilos, pero en este blog tuve que comentarlo especialmente. De qué depende es difícil de decir. Esto es lo que pasó al final.

En general, Background Manager es un complemento genial que le permite mostrar diferentes imágenes para el fondo de su sitio web e incluso hacer una presentación de diapositivas con ellas. Para algunos proyectos, este puede ser un gran elemento "decorativo".

En cuanto a los enlaces del fondo en el Administrador de fondos. Hay una opción similar en la configuración y puede especificar un enlace para cada imagen. Probé esta función y todo parecía funcionar en el momento de escribir este artículo. Sin embargo, ahora hay problemas con esto. Lo único que pudimos hacer fue colocar el enlace en un elemento especial; vea el icono [+] en la captura de pantalla anterior. Esta función de complemento funciona sin problemas.


Hoy en mi práctica me encontré con el hecho de que para el fondo del menú era necesario poner transparencia... Había una opción, por supuesto, para hacerlo usando un picture.png, pero aun así decidí profundizar y hacerlo fondo semitransparente con CSS... Resultó bastante simple :)

En el código html escribimos una "clase" para la que es necesario establecer una cierta transparencia:

FON (fondo: rgba (200, 54, 54, 0.5);)

por lo tanto, especifiqué el color de fondo estableciendo valores para los tres colores primarios (rojo - r, verde - gramo, azul - segundo) y una transparencia de fondo del 50% (alfa - un) por una propiedad. Los valores de color se especifican en el rango de 0 a 255, y para la transparencia, el rango será de 0.0 a 1.0

Propiedad rgba también aplicable para todos los demás elementos. Pero si es necesario establecer la transparencia para todos los elementos de esta clase, puede usar la propiedad opacidad, que establece la transparencia para todo el elemento o para toda la página. entonces el código se verá así:

FON (opacidad: 0,5;)

En este caso, todos los elementos de esta clase se volverán transparentes, incluidos las imágenes y el texto serán transparentes.

¡Suscríbase y reciba artículos útiles por correo!

Otros artículos interesantes en nuestro blog

  • Sé que, en la práctica, a menudo hay una situación en la que el propietario de un sitio "elimina" o crea un sitio "desde cero" varias veces y, como resultado, no obtiene el resultado deseado. En este caso, sigue ...
  • Material de afiliados! Debido al enfoque constante de los motores de búsqueda directamente en el propio usuario de Internet y los indicadores de las últimas actualizaciones de los algoritmos de Google, se ha vuelto aún más importante para los propietarios de sitios prestar atención a su velocidad de carga ...
  • Mire, si tiene la tarea de "desarrollar un sitio web llave en mano", siga este enlace y delegue la tarea en nosotros. Si necesita un ejemplo de una tarea técnica, consulte el artículo "Términos de referencia para la creación de ...
  • Material de afiliados! - ¿Quieres publicar tu artículo? Para muchos propietarios de sitios web, el SEO parece una tarea abrumadora. Actualmente, esto no es verdad. Atraer especialistas altamente calificados a la promoción puede ser muy ...