Slik konverterer Fixed Width til WordPress Fluid Bredde

Slik konverterer Fixed Width til WordPress Fluid Bredde


Hvis du endrer CSS-kode litt, kan du konvertere fast bredde WordPress site til en væske bredde layout. Dette betyr at hovedinnholdet av området vil automatisk utvide seg og trekke til å passe størrelsen på nettleservinduet, uten en vannrett rullefelt vises nederst. Denne endringen krever tilgang til WordPress Theme Editor. Du må være administrator eller Super Admin av området for å fullføre konverteringen.

Bruksanvisning

1 Logg inn på din WordPress admin kontrollpanelet. Klikk "Utseende" fra menylinjen til venstre, og klikk "Editor".

2 Klikk "index.php" fra listen over filer til høyre. Disse filene kontrollere WordPress tema. Bla ned til du finner den største <div> tag som styrer bredden på nettstedet. Dette er vanligvis den første <div>, og er vanligvis kalles "wrapper" eller "container". Legg merke til id av <div>, for eksempel: "<div id =" wrapper ">".

3 Klikk "style.css" fra listen over filer. Kopier og lim inn denne koden inn i en ny fil og lagre den på datamaskinen. Nå har du en sikkerhetskopi som du kan gjenopprette i tilfelle du gjør en feil.

4 Bla gjennom filen til du finner navnet på hoved <div>. For å opprette en flytende bredde oppsett, må du endre "width" attributt til "100%". For eksempel, hvis det er i dag oppført som "width: 927px;", endre det til "width: 100%;".

5 Klikk "Lagre endringer", og deretter laste bloggen din i en nettleser. Hvis nettstedet ditt fylles opp i full bredde i nettleservinduet, er konverteringen vellykket. Prøv å lage vinduet mindre, og se på nettstedet krympe å passe.

Hint

  • Hvis du ikke merke noen forskjell i utseendet på nettstedet ditt, de endringene du har gjort i "style.css" har ikke lagret på riktig måte.
  • Hvis nettstedet ditt ser annerledes ut, men endringen er ikke det du ville, er det fordi du ikke har endret bredden på riktig <div>, eller fordi det er en egen wrapper for ulike deler av nettstedet. Noen nettsteder bruker en wrapper for overskriften, og en for innholdsområdet. Gjenta prosessen fra trinn 2, hopper trinn 3 hvis du allerede har en backup, og sjekk resultatene med en annen <div>. Fortsett til du finner den rette.