Hvordan lage tekst Logos for Wordpress
En fordel med å bruke WordPress til å kjøre et nettsted er at en godt kodet tema - designmalen brukes til å vise bloggen din og sider - gjør det enkelt å oppdatere nettstedet uten å måtte redigere kode. WordPress temaer bruke spesielle PHP funksjoner kalt "malkodene" for å hente innhold fra en database og vise det på ditt nettsted. Bruk av bloginfo (); mal tag, kan du vise et redigerbart tekstbasert logo for ditt nettsted. Style den med Cascading Style Sheet (CSS) koden for å gjøre det ser flott ut.
Bruksanvisning
1 Åpne "header.php" -filen for din nåværende WordPress tema. Bruk kode redigering programvare som Notepad ++, jEdit eller BBEdit. Din "header.php" filen er på følgende plassering:
/ Din-site / wp-content / themes / navn-of-tema /
Legg <h1> og </ h1> tags sted under <body>, der du vil at logoen skal vises. Hvis disse kodene allerede finnes, så slett teksten som står mellom dem.
2 Plasser følgende kode mellom <h1> og </ h1> tags:
<? Php bloginfo ( 'navn'); ?>
Denne malen tag tar en parameter, for eksempel "navn", som forteller det hva slags informasjon som skal vises. Ved hjelp av denne koden, kan du gjøre navnet på nettstedet ditt vises.
3 Pakk anker koder rundt malen koden for å gjøre det klikkbare. Her er et eksempel:
<H1> <a href="<?php bloginfo('wpurl'); ?> "title =" Gå tilbake til <php bloginfo ( 'navn');?>? Hjemmesiden ... "> <? Php bloginfo ( 'navn'); ?> </a> </ H1>
I koden ovenfor, bloginfo (); mal tag bruker "wpurl" for å fortelle det til å skrive ut nettadressen til hjemmesiden til nettstedet ditt. Tittelen egenskap av ankerkoden viser tekst inviterer brukere til å klikke for å gå tilbake til startsiden, og bloginfo (); brukes igjen der for å vise navnet på webområdet. Å gjøre logoen klikkbare og gi den en tittel attributt er god praksis for både brukervennlighet og søkemotoroptimalisering.
4 Åpne "style.css" fil fra samme mappe som din "header.php" -filen og legge til CSS-kode for å style teksten i dine <h1> og </ h1> koder. Dette er hvordan du vil gjøre tekstbasert logo. Husk å stille skriftstørrelser, eller annet nettleseren vil vise en standardstørrelse. Her er et eksempel på en kursiv, rød logo med en lys grå drop-shadow:
h1 {
font-size: 24px;
font-style: italic;
color: # ff0000;
text-shadow: #eeeeee 2 piksler 2 piksler 5px;
}
Drop-shadow er forskjøvet to piksler fra toppen og venstre, og radius uskarphet er satt til fem piksler. Vær imidlertid oppmerksom på at noen eldre nettlesere ikke vil vise drop-shadow.
Hint
- Som standard blir fonter begrenset til de som er tilgjengelige på brukerens datamaskin. De fleste nettlesere støtter nå @ font-face i CSS, som lar deg laste opp din skrifttype og legge den i din webside. Spørringen-baserte Cufon tjenesten gjør det også mulig å legge inn skrifttyper i ditt nettsted. Siden resultatene av både forskjellig, leke med hverandre og se hvilke som passer ditt nettsted bedre.
- Med mindre du bruker @ font-face eller en Javascript-løsning som Cufon, hold deg til web-safe fonter for tekstbaserte logoer.