Responsive betyder "at tilpasse sig"

Dette er tredje (og foreløbig sidste) del af artikelserien om at lave et responsive WordPress-tema med udgangspunkt i _s. Læs første og andet afsnit af artikelserien.

I den foregående artikel gjorde vi smartphone-versionen færdig. I denne artikel tilpasser vi udseendet til skærme med en bredde mellem 600 og 1200 pixels (f.eks. en tablet) samt skærme med den bredde over 1200 pixels. I den foregående artikel tilføjede vi media queries til vores stylesheet der gør det muligt for os at ramme disse skærmstørrelser: "Mini" (smartphones), "Midi" (600-1200px, beregnet på tablets) og "Maxi" (fra 1200px og opefter).

I vores eksempel ændrer vi layoutet ved skærmbredder på 600px og 1200px. Vi har valgt disse breakpoints fordi det passer med indhold og design til den side vi arbejder med, men disse grænser er ikke faste (smartphones og tablets kommer I alle mulige størrelser). Prøv dig frem indtil du finder breakpoints der passer til det design og det website du arbejder med.

1. Titel & tagline

Vi starter oppefra, med at tilpasse header og menu, og vi retter i den sektion af style.css som vi kalder 13.2 Midi. Denne sektion af vores stylesheet indeholder dels styling der gælder alle skærme der er 600px eller mere i bredden, og dels styling der rammer skærmbredder i intervallet 600px - 1199px.

For alle skærme der er 600px eller mere i bredden vil vi gerne have lidt luft omkring indholdet, og overskriften skal være STOR:

/*--------------------------------------------------------------
13.2 Midi
--------------------------------------------------------------*/

@media screen and (min-width: 600px) {
    .site {
        margin: 2em 0 0;
    }
    .site-branding {
        padding:0 4em 2em;
    }
    .site-title {
        font-size: 3em;
    }
}

2. Menu

Lige nu ser menuen sådan ud:
website menu
og sådan skal den se ud:
website header Ordet 'Menu' skal skjules, det bruges kun til menu-knappen på smartphones. Selve menuen skal være vandret, med mulighed for dropdown-undermenuer. Tilføj følgende til style.css, afsnit 13.2 Midi:
  .main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
    padding: 0 3.5em;
    background: #507383;
    margin: 0 0 2em;
    text-align: left;
  }
  /* Small menu */
  .menu-toggle {
    display: none;
  }
  .main-navigation li {
    float: left;
    position: relative;
    margin-right: 1em;
    transition: background 0.5s ease;
  }
  .main-navigation li:hover {
    background: #8CC7C2;
  }
  .main-navigation a {
    display: block;
    text-decoration: none;
    padding: .5em;
    color: #f1f1f1;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .875em;
  }
  .main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    position: absolute;
    top: 2em;
    background: #507383;
    z-index: 99999;
    padding-bottom: 1em;
  }
  .main-navigation ul ul ul {
    left: 100%;
    top: 0;
  }
  .main-navigation ul ul a {
    padding: .5em .5em 0;
    line-height: 1.2em;
    text-transform: none;
    letter-spacing: 0;
  }
  .main-navigation .current_page_item,
  .main-navigation .current-menu-parent,
  .main-navigation .current-post-ancestor,
  .main-navigation .current-menu-item {
    background: #8CC7C2;
  }
  .main-navigation .current_page_item li,
  .main-navigation .current-menu-parent li,
  .main-navigation  .current-post-ancestor li,
  .main-navigation  .current-menu-item li,
  .main-navigation ul ul li:hover {
  background: #507383;
  }
  .main-navigation ul li:hover > ul {
    display: block;
  }

3. Layout

På mindre skærme - iPad og andre tablets - vises indholdet i én kolonne med widgets nedenunder, mens vi på større skærme (over 1200 pixels bredde) viser en sidebar med widgets til højre for indholdet.

Tablet:
website uden sidebar

Computer:
website med sidebar

D.v.s. at vi har brug for et ekstra media query, som dækker skærmbredder mellem 600 pixels og 1200 pixels - det tilføjer vi i afsnit 13.2 i style.css:

@media screen and (min-width: 600px) and (max-width: 1199px) {
    .site-title {
        font-size: 3em;
    }
    .page-title {
        padding: .5em 2em;
    }
    .media {
        padding: 0 4em 1em;
    }
    .page .entry-content,
    .single .entry-content,
    .widget-area {
        padding: 0 4em;
    }
    .single .entry-meta {
        padding: 0 5em;
    }
    .widget {
        display: inline-block;
        width: 30%;
        margin: 0 4% 2em 0;
        vertical-align: top;
    }
    .widget:nth-child(3n+3) {
        margin-right: 0;
    }
}
Med sidebar: Til skærme over 1200px bredde skal vi definere en maksimum-bredde for vores indhold, så det stadig er læseligt. Dernæst tildeler vi 75% af bredden til indholdet, og 25% til sidebar. Desuden angiver vi en ny baggrundsfarve til body og .site (og nej, den behøver ikke at være så skrap i farven som den jeg har valgt!), stadig i style.css:
/*--------------------------------------------------------------
13.3 Maxi
--------------------------------------------------------------*/
@media screen and (min-width: 1200px) {
    body {
        background: #8CC7C2;
    }

    /* =Layout: Content-Sidebar
    ----------------------------------------------- */
    .site {
        margin: 1em auto 0;
        max-width: 1200px;
    }
    .site-main {
        max-width: 720px;
        margin: 0 25% 0 0;
        padding-right: 5%;
    }
    .site-wide {
        max-width: 720px;
        margin: 0 auto;
    }
    .site-content {
        padding: 1em 5% 0;
    }
    .site-content .widget-area {
        float: right;
        overflow: hidden;
        width: 25%;
    }
    .content-area {
        float: left;
        margin: 0 -25% 0 0;
        width: 100%;
    }
}
Desuden skruer vi endnu mere op for størrelsen af sidens overskrift - det er der jo plads til, når skærmen er mere end 1200px bred, altså i afsnit 13.3 af style.css:
    .site-title {
        font-size: 4.5em;
    }
    .site-description {
        font-size: 1.6em;
    }

4. Kategori-visning

visning af medarbejdere, uden styling På medarbejder-oversigten (kategori-visning) vil vi gerne vise thumbnails ved siden af teksten i stedet for ovenover. Derfor har vi tidligere sørget for at alle indlæg i content.php får class="media", at thumbnail-billederne får class="image" og teksten (både overskrift og brødtekst) ligger i en container med class="content-text". Nu skal det så styles, i sektion 13.2 Midi i style.css:
  .media {
    overflow: hidden;
    padding-bottom: 1.5em;
    border-bottom: 2px dashed #840642;
    margin-bottom: 1.5em;
  }
  .media:last-child {
    border-bottom: none;
  }
  .image {
    float: left;
    margin-right: 2em;
  }
  .image img {
    display: block;
  }
  .content-text {
    overflow: hidden;
  }
visning af medarbejdere, nu med css-styling Hvis vi bruger thumbnails på indlæg i kategorien 'Nyheder' vil de også blive vist på samme måde. Hvis du gerne vil vide mere om stylingen af disse elementer, kan du læse mere hos Nicole Sullivan: The Media Object.

5. Single visning

Når et enkelt indlæg f.eks. nyheden "Ny adresse" vises, skal det også se ordentligt ud. På skærme mellem 600 pixels og 1200 pixels bredde skal tilføjes en margin, afsnit 13.2 Midi i style.css:
    .single .attachment-medium {
        margin: 0 0 0 4em;
    }

6. Side uden sidebar

Indholdet på sider, der bruger skabelonen 'No sidebar', skal centreres, det gøres ved at tilføje følgende til sektion 13.3 Maxi i style.css

    .site-wide {
        max-width: 720px;
        margin: 0 auto;
    }

7. Footer

Til sidst skal sidens footer styles, i afsnit 13.2 Midi i style.php tilføjes:

     .site-footer {
        border-top: 1px solid #ccc;
        padding: 2em 0;
        margin: 1em 0 0;
        text-align: center;
        font-size: .8em;
    }
    .site-footer a {
        color: #404040;
    }

Nu har vi et site, der er responsive!

Dette er blot et eksempel med et meget simpelt design - fremgangsmåden afhænger af designet, indholdet og hjælpemidler. Det du har lært her er blot begyndelsen, der skal masser af viden om WordPress, php, CSS og HTML til. Forhåbentlig har du fået lyst til at lære mere!

Dette er den tredje og sidste artikel i serien om at bygge et responsive WordPress-tema med udgangspunkt i _s.

Se det færdige demo-site: Demo - Webðings
Hent det færdige WordPress-tema: Responsive
Hent xml-fil med indholdet: webthings.xml

Links:
1. artikel
2. artikel
Se den færdige udgave af temaet