Cómo utilizar una imagen como título del blog en WordPress

WordPress ofrece a los desarrolladores la capacidad temáticos para agarrar el título del blog desde una base de datos y la salida de la cabecera. La función "bloginfo ()" se encarga de esta tarea y es fácil de usar, pero reemplazando el título con una imagen requiere un poco más de esfuerzo. Hay que editar el código del título en el archivo "header.php" de su tema y añadir algo de código Hoja de estilo en cascada (CSS) para intercambiar el texto del título con la imagen. Hacer esto le permitirá mantener el texto del título en el navegador, pero fuera de la pantalla, y se puede mostrar una imagen como un logotipo para su blog.

Instrucciones

1 Sube tu foto a la carpeta de su tema en su servidor. Si el tema incluye una carpeta separada para las imágenes, colocar la imagen allí.

2 Ir al directorio "wp-admin" de su sitio web e iniciar sesión en el panel de WordPress. Vaya a "Editor" en "Apariencia" para cargar el "edición de temas" pantalla. Haga clic en el enlace "header.php" para abrir ese archivo en el cuadro del editor.

3 Encuentra la envoltura alrededor de las etiquetas HTML "<? Php bloginfo (" nombre ");?>" Y leer el nombre de identificación en la etiqueta de apertura. Aquí está un ejemplo de cómo se ve el código:

? <H1 id = "BlogTitle"> <? Php bloginfo ( "nombre"); ?> </ H1>

Si no encuentra un atributo ID en la etiqueta de apertura, agrega uno lo que parece que el código de seguridad.

4 Añadir etiquetas span en torno a "<? Php bloginfo (" nombre ");?>" Para que pueda orientar sólo el texto del título en el código CSS. Aquí está el código resultante:

? <H1 id = "BlogTitle"> <span> <? Php bloginfo ( "nombre"); ?> </ Span> </ h1>

Haga clic en el botón azul "Actualizar archivo" para guardar los cambios.

5 Haga clic en el enlace "style.css" en "Plantillas" en la pantalla "edición de temas". Agregue el código siguiente a la parte inferior de la "style.css" para ocultar el título de texto:

{lapso BlogTitle

margin-left: -999em;

bloqueo de pantalla;

}

El código anterior se mueve el texto del título de la pantalla, pero sigue siendo legible para los lectores de pantalla utilizados por los discapacitados visuales. Debe establecer "display: block" para utilizar los márgenes de las etiquetas span.

6 Agregue este código a su archivo "style.css" para establecer la imagen como fondo para el elemento HTML que contiene el título:

Titulo de Blog {

background: url ( 'ruta / a / picture.png') Centro no-repeat;

anchura: XXpx;

altura: XXpx;

}

Debe establecer la anchura y la altura para que coincida con las dimensiones de su imagen. Reemplazar "XX" con el número de píxeles necesarios. Establecer la ruta de URL para la ruta relativa de la imagen, tales como "imágenes / picture.png" si se pone la imagen en una carpeta llamada "imágenes".

Consejos y advertencias

• Copias de seguridad de archivos de temas antes de editarlos. Si se encuentra con un error de "pantalla en blanco", vuelva a cargar el tema de volver a WordPress.