Hybrid Layout Bredde på WordPress
En webside har tre typer side bredder: fast, flytende og hybrid. I et fast format, blir bredden på innholdsområdet ikke endres med bredden av nettleservinduet. I en dynamisk utforming gjør det. En hybrid layout inneholder elementer av både faste og flytende utforminger og er ofte brukt til å holde en hoved fast bredde innhold område i sentrum av et fluid bakgrunnsområde. Dette gjør området til å være optimalisert for en bestemt skjermoppløsning, men forblir sentrert, viser en bestemt bakgrunn med større oppløsning.
Bruk av Temaredigering
For å gjøre denne endringen til nettstedet ditt, trenger du tilgang til Theme Editor. Logg inn på din WordPress admin kontrollpanelet. Gå til "Utseende" og da vil du se en liste over filer til høyre "Editor.» - Disse styre utseendet på nettstedet ditt. Hvis du ikke ser "Utseende" alternativet, trenger du ikke har administratorrettigheter - kontakt eieren av nettstedet og be dem om å oppgradere dine rettigheter.
Redigere stil
Klikk "style.css" fra listen over filer på høyre side av skjermen. Legg til følgende kode i filen, starter på en ny linje nederst:
header-wrapper, # footer-wrapper {background: #fff;} header, #footer, side-wrapper # {width: 960 x; margin: 0 auto;} bunntekst-wrapper {klar: begge;}
Erstatt "960" med bredde i piksler som du vil væsken område av nettstedet ditt skal ha. Du kan også bla gjennom filen og endre breddeverdiene for "#sidebar" og "#content".
Redigere Header
Klikk "header.php" fra listen til høyre. Start en ny linje rett under "<body>" tag, legg deretter til følgende kode:
<Div id = "header-wrapper">
På bunnen av filen, legg til følgende linje med kode:
</ Div> <! - Header-wrapper ->
<Div id = "side-wrapper">
Skillet "side-wrapper" vil nå starte umiddelbart etter hovedmasthead av nettstedet. Dette er nødvendig fordi WordPress bruker flere filer for hoveddelen området. Starte <div> i overskriften sparer deg fra å måtte legge koden til hver enkelt fil.
Redigere Footer
Klikk "footer.php" fra hovedlisten til høyre. Legg til følgende på toppen av filen:
</ Div> <! - Side-wrapper ->
<Div id = "footer-wrapper">
Og følgende nederst, rett før </ body> -koden:
</ Div> <! - Footer-wrapper →
Den første linjen lukker "side-wrapper" delelinje som du åpnet i spissen. Plassering på toppen av filen sikrer at det ikke brytes bunnteksten også.