Hvordan bruke et bilde som bloggtittel på WordPress

WordPress gir tema utviklere muligheten til å ta tak i bloggens tittel fra en database og utgang til spissen. Den "bloginfo ()" funksjonen håndterer denne oppgaven og er enkel å bruke, men å erstatte tittelen med et bilde krever litt mer innsats. Du må redigere tittelen kode i ditt tema er "header.php" -filen og legge til noen Cascading Style Sheet (CSS) kode for å bytte ut tittelen tekst sammen med bildet. Å gjøre dette vil tillate deg å holde tittelteksten i nettleseren, men av skjermen, og du kan vise et bilde som logo for bloggen din.

Bruksanvisning

1 Last opp bildet ditt til temaet mappe på serveren din. Hvis temaet inneholder en egen mappe for bilder, plassere bildet der.

2 Gå til "wp-admin" katalog av nettstedet ditt og logge inn i WordPress dashbordet. Naviger til "Editor" under "Utseende" for å laste "Edit Temaer" skjerm. Klikk på linken for "header.php" for å åpne filen i editoren boksen.

3 Finn HTML-tagger innpakning rundt "<? Php bloginfo ( 'navn');?>" Og lese ID-navnet i startkoden. Her er et eksempel på hvordan koden ser ut:

<H1 id = "Blogtitle"> <? Php bloginfo ( 'navn'); ?> </ H1>

Hvis du ikke finner en ID-attributtet i startkoden, legge en slik at det ser ut som koden ovenfor.

4 Legg span koder rundt "<? Php bloginfo ( 'navn');?>" Slik at du kan målrette bare teksten i tittelen i CSS-koden. Her er den resulterende kode:

<H1 id = "Blogtitle"> <span> <? Php bloginfo ( 'navn'); ?> </ Span> </ h1>

Klikk på den blå "Update File" -knappen for å lagre endringene.

5 Klikk på "style.css" under "Maler" på "Rediger Temaer" skjerm. Legg til følgende kode i bunnen av "style.css" for å skjule tekst tittel:

Blogtitle span {

margin-left: -999em;

display: block;

}

Koden ovenfor flytter teksten i tittelen av skjermen, men holder den lesbar for skjermlesere som brukes av synshemmede. Du må sette "display: block" for å bruke marginer på span tagger.

6 Legg til denne koden i "style.css" filen for å stille inn bilde som bakgrunn for HTML-elementet inneholder tittelen:

Blogtitle {

bakgrunn: URL ( 'sti / til / picture.png') senter no-gjenta;

bredde: XXpx;

høyde: XXpx;

}

Du må angi bredden og høyden for å matche dimensjonene på bildet. Erstatte "XX" med antallet piksler som trengs. Sett URL-banen til den relative banen til bildet ditt, for eksempel "images / picture.png" hvis du setter bildet i en mappe som heter "bilder".

Hint

• Sikkerhetskopiere tema filer før du redigerer dem. Hvis du støter på en "hvit skjerm" feil, re-laste temaet å komme tilbake i WordPress.