Hvordan lage en Fluid Bredde Header for WordPress

Fluid bredder i Web design refererer til bredder på sideelementer som endres basert på størrelsen av en brukers nettleser. Når du endrer bredden på nettleservinduet, væske bredde elementer endre sin bredde også. Bruke prosentverdier i stedet for pikselverdier i CSS (Cascading Style Sheets) vil skape denne effekten. I WordPress, opprette en væske bredde header ved å gjøre "header.php" mal først og redigere "style.css" fil med CSS-kode.

Bruksanvisning

1 Lag en fil i Notepad eller en kode editor og lagre den som "header.php". Kopier og lim inn denne koden i filen for å starte din header filen:

<! DOCTYPE html>

<Html <php language_attributes (); ? >>

<Head>

<Meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />

<Meta charset = "<? Php bloginfo ( 'charset');?>">

<Meta http-equiv = "X-UA-Compatible" content = "IE = kant, krom = 1">

<Title> <? Php bloginfo ( 'navn'); ?> </ Title>

<! - [Hvis lt IE 9]> <script href = "<? Php bloginfo ( 'stylesheet_url');?>" Media = "screen">

<Link rel = "pingback" href = "<? Php bloginfo ( 'pingback_url');?>">

<? Php wp_head (); ?>

</ Head>

? <Body <php body_class (); ? >>

Denne koden bruker HTML5Shim å legge HTML5 støtte når besøkende legger bloggen din i ikke-HTML5 nettlesere, nemlig Internet Explorer 8 og under.

2 Plasser denne koden inni "header.php" fil, etter åpningen "<body>" tag:

<Header>

<H1> <a href="<?php bloginfo('wp_url'); ?> "title =" <? Php bloginfo ( 'navn');?> "> <Span> <? Php bloginfo ( 'navn') ; ?> </ Span> </a> </ h1>

</ Head>

Legg merke til bruken av "bloginfo ()" til utgangs hjemmesiden URL og bloggen navn eller tittel. Denne funksjonen er å trekke informasjon fra databasen som kjører WordPress.

3 Legg slagord til header, om du ønsker å vise den til besøkende:

<H2> <span> <? Php bloginfo ( 'beskrivelse'); ?> </ Span> </ h2>

Lagre filen og laste den opp til "/ wp-content / themes / THEME_NAME /" på din server via FTP.

4 Logg inn på WordPress og naviger til "Editor" under "Utseende" menyen i sidepanelet. Last inn "style.css" fil ved å klikke på linken på høyre side av "Rediger Temaer" skjerm. Gå til bunnen av filen og skrive en ny stil regel for "<header>" tags:

header {

}

Tag-type velgere trenger ikke noen prefikser, så "header" er den riktige måten å velge disse kodene.

5 Legg en bredde på header, men bruke en prosentverdi i stedet for en pikselverdi. Dette vil gjøre din header bredde væske:

header {

width: 75%;

}

6 Legg disse to stilregler som skal erstatte tekst tittel og slagord med en logo:

header h1 a {

bakgrunn: URL (sti / til / logo.png) senter no-repeat;

width: 200px;

height: 150px;

display: block;

}

header span {

margin-left: -999em;

}

Endre banen til logoen for å matche din egen og endre bredden og høyden til at av din logo. Du må bruke "display: block" når du legger dimensjoner til "<a>" tags. Den "margin-left: -999em" code skift teksten utenfor skjermen uten å fjerne den fra synet av robotsøkeprogrammer.

Hint

  • Hvis du gir hele bloggen et sett bredde, så overskriften vil miste sin flytende bredde. Gjør hele bloggen utformingen væske.
  • WordPress header vil ikke fungere før du oppretter en "index.php" mal og kaller overskriften med "<? Php get_header ();?>".