Mobile first

Dette er artikel nr. to i en serie der handler om at bygge et responsive WordPress tema med udgangspunkt i _s (Den første finder du her)

Vi fortsætter hvor vi slap med at tilføje layout, skrifttyper og farver. I første omgang koncentrerer vi os om at få hjemmesiden til at tage sig godt ud når den ses på en smartphone.

Fordi vi endnu ikke har arbejdet med style.css, ser vores side endnu ikke ud af noget særligt (underscores.webthings.dk), men det gør vi noget ved nu.

1. Indhold

Vi skal bruge en forside, en kontakt-side, et par indlæg i kategorien 'Nyheder', samt indlæg i kategorien 'Medarbejdere'. Du kan arbejde med dit eget indhold, eller du kan importere indholdet fra vores demo-site. Hent og udpak denne zip-fil: Webðings indhold og importer indholdet via Kontrolpanel > Værktøjer > Importer.

Sørg for at vælge en forside (Kontrolpanel > Indstillinger > Læsning). På demositet er forsiden sat til siden 'Kommunikation' som bruger sideskabelonen 'No sidebar'.

Menuen skal også oprettes og tilpasses så den svarer til demositet (Kontrolpanel > Udseende > Menuer).

I denne artikel arbejder vi med et enkelt stylesheet, og vi holder os til simple teknikker af hensyn til overskueligheden.

2. Sektioner i style.css

style.css indeholder bl.a. følgende sektioner:

  • Reset - nulstiller styling, så forskellige browsere så vidt muligt opfører sig ens (tak for det!)
  • Typography & Elements - generelle css-regler
  • Navigation - links og menuer
  • Content - styling af indhold af sider og indlæg
  • Media - billeder, lyd, video
  • Widgets - i sidebar og evt. footer

De skal suppleres med media queries, så vi kan målrette css-regler til forskellige skærmstørrelser.

3. Skrifttyper

I afsnit 2.0 Typography i style.css er skrifttypen defineret:

font-family: sans-serif;
Den udskiftes med f.eks.
font-family: 'trebuchet ms', Helvetica, Arial, sans-serif
På et "rigtigt" website vil man som ofte gerne have et større udvalg af skrifttyper at vælge imellem (f.eks. Google Fonts), men her holder vi os til standard webfonts.

4. Links

I Navigation-sektionen (5.1) af style.css ænder vi farven på links ved at erstatte:
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
a {
    color: royalblue;
}
a:visited {
    color: purple;
}
a:hover,
a:focus,
a:active {
    color: midnightblue;
}
med nydelige blå og røde farver:
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
a,
a:visited {
  color: #757D98;
}
a:hover,
a:focus,
a:active {
  color: #B31E64;
}
.textlinks a,
.textlinks a:visited,
.textlinks a:hover,
.textlinks a:focus,
.textlinks a:active {
  text-decoration:none;
}
Bemærk at der er tilføjet en sektion hvor vi styler på klassen .textlinks - disse regler skal bruges på steder hvor vi ikke vil have understregede links, f.eks. i overskrifter. (Vi bruger denne klasse lidt senere, i header.php) Læs mere om brug af farver i denne artikel.

5. Media Queries

For at gøre vores tema responsive, skal vi først tilføje media queries nederst i vores stylesheet: Mini til styling der kun vedrører små skærme Midi til styling der vedrører mellem og store skærmstørrelser Maxi til styling på store skærmstørrelser Indholdet af style.css struktureres så css-reglerne kun hentes hvor de skal bruges. Det handler altså om hele tiden at vurdere om en regel er generel, eller om den kun vedrører én skærmstørrelse, og så placere reglen det rigtige sted i stylesheetet. Tilføj følgende nederst i style.css:
/*--------------------------------------------------------------
13.0 Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
13.1 Mini
--------------------------------------------------------------*/
@media screen and (max-width: 599px) {
}

/*--------------------------------------------------------------
13.2 Midi
--------------------------------------------------------------*/
@media screen and (min-width: 600px) {
}

/*--------------------------------------------------------------
13.3 Maxi
--------------------------------------------------------------*/
@media screen and (min-width: 1200px) {
}
I denne artikel koncentrerer vi os den styling der gælder alle skærmstørrelser, samt den som gælder størrelser mindre end 600px. Husk – når vi arbejder med media queries i style.css skal du sørge for at checke ændringerne i et skærmvindue med den rigtige bredde!

6. Menu

Find sektionen i style.css der starter med
/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
Den skal kun indeholde denne kode:
/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation a {
  display: block;
  text-decoration: none;
  padding: .5em;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .875em;
}
.site-main .comment-navigation,
.site-main .paging-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
}
.comment-navigation .nav-previous,
.paging-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
}
.comment-navigation .nav-next,
.paging-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}
Resten af css-reglerne for Menu/Main Navigation tilføjer vi senere i 13.1 Mini og 13.2 Midi da menuerne skal se forskelligt ud på smartphone og på større skærme. Vær opmærksom på at menu-funktionen også er afhængig af JavaScript (/js/navigation.js). I 13.1 Mini-media query laver vi en fin smartphone-menu. Først centreres menu-området:
.main-navigation {
  text-align: center;
  margin: 1em auto 2em;
}
Dernæst får menuen baggrundsfarve, padding og afrundede hjørner:
/* Small menu */
.menu-toggle {
  cursor: pointer;
  display: inline-block;
  padding: .5em 2em;
  font-weight: 400;
  color: rgb(255, 255, 255);
  background: #757D98;
  border-radius: 3px;
  width: auto;
}
.menu-toggle:hover {
  background: #8CC7C2;
}
Den udvidede menu skal vises, når man klikker på menu-linket:
.main-navigation.toggled .nav-menu {
  display: inline-block;
}
og vi skal huske at skjule den store udgave af menuen:
.main-navigation ul {
  display: none;
}

7. Site Header

Vi har ikke et logo eller et billede til headeren, så vi skriver WordPress's sidetitel og tagline (Kontrolpanel > Indstillinger > Generelt) øverst på siden og styler det så det ser pænt ud. I style.css tilføjes følgende til afsnit 5.3 Site-branding:
/*--------------------------------------------------------------
5.3 Site-branding
--------------------------------------------------------------*/
.site-title {
  letter-spacing: .1em;
}
.site-title a {
  color: #840642;
  transition: color 0.5s ease;
  text-decoration: none;
}
.site-title a:hover,
.site-title a:focus,
.site-title a:active {
  color: #B31E64;
  text-decoration: none;
}
.site-description {
  color: #840642;
  font-style: italic;
  line-height: 1.1em;
}
Ovenstående er de generelle css-regler der gælder for både store og små skærmstørrelser. I 13.1 Mini tilføjes:
.site-branding {
  padding: .5em 2%;
  text-align: center;
}
.site-title {
  font-size: 3em;
}
Nu ser headeren med overskrift, tagline og menu sådan ud på en lille skærm:

8. Overskrifter

I afsnittet 10.1 Posts and pages i style.css definerer vi hvordan bl.a. overskrifterne skal se ud. Igen er det vigtigt at overveje hvilke regler der gælder for alle skærmstørrelser, og hvilke der kun gælder for de små skærmstørrelser, og så placere dem i det rigtige område af stylesheetet. Tilføj disse to blokke af styling:
.page-title {
  line-height:1em;
  padding-bottom: .5em;
  border-bottom: 2px dashed #8CC7C2;
  margin-bottom: 1em;
}
og
.page-title {
  font-size: 2em;
  text-align: center;
}
Den første del gælder for alle skærmstørrelser, og placeres i afsnit 10.1, mens den anden del kun vedrører små skærme, og placeres i 13.1 Mini. Men hov, det ser alligevel ikke rigtigt ud, kun på 'Nyheder' kan vi se den rigtige styling: Af en eller anden grund har udviklerne af \_s-temaet valgt at brug 'entry-header'/'entry-title' og 'page-header'/'page-title' lidt ulogisk... I vores tema vil vi gerne have store 'page-title'-overskrifter på alle sider, kategorier og enkelt-indlæg, og mindre 'entry-title'-overskrifter på de enkelte indlæg i kategorivisningen. Derfor skal mark-up ændres så vi kan skelne mellem 'page-title' (sidens overskrift, der skal være én på hver side) og 'entry-title' (der kan være flere på en side, f.eks. siden 'Medarbejdere'). I content-page.php erstattes: med og i content-single.php erstattes 'entry-header' og'entry-title' ligeledes med 'page-header' og 'page-title': og nu ser sidens overskrift rigtig ud:

9. Billeder med billedtekst

Billedtkster (captions), som vi f.eks. har brugt på forsiden, styles i afsnit 12.0 Media i style.css. Den eksisterende kode:
.wp-caption {
  border: 1px solid #ccc;
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
  display: block;
  margin: 1.2% auto 0;
  max-width: 98%;
}
.wp-caption-text {
  text-align: center;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}
skal erstattes med
.wp-caption {
  box-shadow: 1px 1px 4px 0px #9B8E7F;
  margin-bottom: 1.5em;
  max-width: 100%;
  background: #E8E8E1;
}
.wp-caption img[class*="wp-image-"] {
  display: block;
  width: 100%;
}
.wp-caption-text {
  text-align: center;
  font-size: .8em;
  padding: 1em 0;
}
.wp-caption .wp-caption-text {
  margin: 0 0 .5em;
}

10. Indlæg/kategorier

Visning af kategorier er stadig ikke helt på plads: Først og fremmest skal indlæggets overskrift og metadata (dato mm.) ikke være understreget, det retter vi ved at tilføje class="textlinks" på den container i content-php, der indeholder entry-title: Overskrifterne skal være større, og metadata (dato, kategori m.m.) skal være mindre, så i afsnit 10.1 Posts and page i style.css tilføjes:
.entry-title {
  font-size: 1.6em;
  line-height: 1.1em;
}
.entry-meta {
  font-size: .8em;
}
Desuden skal der lidt mere afstand mellem indlæggene, så i afsnit 10.1 Posts and pages i style.css rettes denne kode:
.hentry {
  margin: 0 0 1.5em;
}

til

.hentry {
  margin: 0 0 4em;
}

Nu skal vi have lidt padding, så teksten ikke går helt ud til kanten. Dette gælder kun på små skærme, så det tilføjes i style.css sektion 13.1 Mini:

.type-post, .type-page, .comments-area {
  padding: 1em;
}

Det ser bedre ud:

11. Widgets

Widgets bliver på små skærmstørrelser vist under det egentlige side-indhold. I afsnit 9.0 Widgets i style.css tilføjes en baggrundsfarve og desuden ændres overskrifterne og vi definerer at lister skal vises uden bullet-points. Den eksisterende kode:

.widget {
  margin: 0 0 1.5em;
}

erstattes med

.widget {
  background: #f1f1f1;
  padding: 1em;
}
.widget-title {
  font-weight: 700;
  text-transform: uppercase;
}
.widget ul {
  list-style-type: none;
  margin: 0;
}

Derefter skal der lidt luft mellem hver widget på små skærmstørrelser. I afsnit 13.1 Mini i style.css tilføjes:

.widget {
  margin: 0 0 2em;
}

12. Baggrundsfarve og footer

Sidens baggrundsfarve skal ændres fra hvid til lys grå. I style.css afsnit 1.0 Reset ændres:

body {
  background: #fff;
}

til:

body {
  background: #eee;
}

Footeren skal også have en baggrundsfarve og teksten skal centreres, så i afsnit 13.1 Mini af style.css tilføjes:

.site-footer {
  background: #989792;
  color: #F1f1f1;
  padding: 1em;
  text-align: center;
}
.site-footer a {
  color: #f1f1f1;
}

Indholdet i footer.php kan selvfølgelig ændres, f.eks. kan adressen tilføjes her. I denne omgang nøjes vi dog med at fjerne linket til Wordpress samt understregning af links. Det gør vi ved at tilføj class="textlinks" samt fjerne linjen med linket til WordPress. Indholdet af footer.php ser sådan ud:

Mobile first!

Læg mærke til at hjemmesiden nu ser fin ud på en smartphone, mens den stadig ser noget ufærdig ud på en større skærm.

Hvis vi havde valgt ikke at bruge media queries, ville temaet med nogle få ændringer kunne fungere på alle størrelser. I dette tilfælde vil vi gerne tilføje mere styling til større skærme - det gør vi næste afsnit!

Dette er den anden artikel i en serie om at bygge WordPress-temaer.

Læs også:
Kapitel 1: Om at bruge underscores (_s) som udgangspunkt for et nyt WordPress-tema
Kapitel 3: Responsive betyder "at tilpasse sig"

Links:
_s på github
Se en demo af temaet med de foreløbige tilpasninger
Tema-filerne med Mobile First-stylesheet
Zip-fil med indhold til demo-site: Webðings indhold
Se det færdige demo-site: webdings.webthings.dk