Lägga till bootstrap i wordpress

Detta är för att lägga till bootstrap i ett parent-theme i WordPress.

function my_scripts_enqueue() {
    wp_register_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Bootstrap-klasser att känna till

Vissa klasser för bootstrap måste man helt enkelt memorera för att skynda på arbetet. Här är några.

Bilder

<img src="bild.jpg" class="img-responsive">

Det är inte mer komplicerat än att bilden blir responsiv. För mer info om klassen se bootstraps dokumentation.

Centrera bild

Om du vill centera bilden så använd .center-block iställer för .text-center.

Text

Om du vill positionerna texten så anväd dessa klasser.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Om du vill göra en viss text med stora bokstäver eller bara små använd följande klasser.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Gör statis bootstrap-sida wordpress-kompatibel

Det krävs en del knep å knåpande för att få en statisk html-sida att fungera i WordPress.

1. Skapa tema-mapp

Skapa en mapp i wp-content/themes/Saft. Jag har valt att kalla vårt låtsastema för Saft i den här övningen.

2. Skapa style.css

I mappen saft måste du lägga till filen style.css. Det smidigaste är att du tar din .css-fil som du har använt och helt enkelt byter namn på den till style.css. Därefter kopierar du in följande kod längst upp i style.css. Fast men din egen info såklart.

/*
Theme Name: Saft
Theme URI: http://www.saft.com
Author: Ditt namn
Author URI: https://www.saft.com
Description: Single page website. 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: images, scroll
This theme is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

De flesta av de här uppgifterna tror jag är frivilliga. Det enda som är absolut nödvändigt är att ha Theme name.

3. Dela upp index.html-filen.

WordPress är konstruerat så att header och footer är desamma på alla sidor. Om du klickar på en bloggpost så kommer header och footer antagligen se likadana ut som på första sidan. Det är för att index-filen är uppdelad.

  • Eftersom vi kommer använda oss av programmeringsspråket php så behöver du ändra namn på dina filer. byt namn på index.html till index.php.
  • Klipper du ut alla rader i index.php som ingår i headern. Vanligtvis från html-taggen ner till efter menyn och din header. Klipp ut det och klistra in det i filen header.php. Filen måste heta exakt så för att wordpress ska förstå den.
  • Gör samma sak med footer-koden. Lägg all kod som hör till footern i footer.php
  • Om du har en sidebar så gör samma sak med den koden. Klipp ut den och lägg den i sidebar.php

4. Lägg upp det på din server.

Om du behöver hjälp med ftp-kommandon se här. Filerna ska ligga i mappen /wp-content/themes/Saft.

5. Aktivera temat

Sådär, nu kan du logga in på sidan via wordpress-loginen som vanligtvis är saft.com/wp-admin.

6. Knyt ihop.

Så, om du nu går in på din hemsida så ser du att din header och footer inte visas. För att visa den måste du redigera index.php-filen.

Precis i början av filen lägger du därför till.

<?php get_header(); ?>

I slutet av index.php lägger du till

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Man kan säga att dessa små koder är som länkar som binder samman filerna. Om du sprarar index.php å går till din hemsida kan du nu se header och footer.

7. Css

Sådär, nu är sidans innehåll på plats. Men sidan har ingen CSS. För att koppla in css måste du gå in i header.php och lägga till följande kod.

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Såhär, om du nu går in på hemsidan så ska sidan ha fått sin css. I alla fall style.css. Men för att koppla ihop bootstrap-css måste du lägga till följande kod.


<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap.min.css" type="text/css" media="screen" />

Bilder

Dina bilder har nu en ny plats på servern. Därför måste du ändra bildadresserna i din html-kod.

Om du har lagt till bilderna direkt i html-koden måste du ändra till följande adress:
wp-content/themes/saft/img/bild.jpg eller den korrekta adressen. Men bildens adress skall börja från wp-content.

Exempel:

<img src="wp-content/themes/butikboot/img/web.png" class"img-responsive" alt="Cinque Terre">

Om du däremot har lagt till bilderna från ditt stylesheet så blir adressen relativ i förhållande till ditt style.css-dokument. Därför ska adressen börja vara img/bild.jpg.
Det skall exempelvis se ut såhär:

background:url(img/28H.jpg) no-repeat center center fixed;

Om du skriver in adressen korrekt men det ändå inte händer något. Bilderna inte laddas, så kan det vara ett problem med att gamla css har cachats på servern. För att lösa det problemet, kolla min bloggpost om det här.

Skapa ett grid-system enligt Bootstrap-modellen

Den bästa förklaringen för hur ett grid-system bör byggas är av Udacity.

Det är inte helt enkelt att positionera element på en sida. Det bästa sättet för att få tydligt kontroll över elementens position är att skapa ett grid. Alltså ett nät av kolumner. Det vanligaste och bästa sättet är att skapa ett grid med tolv kolumner. Eftersom tolv är ett nummer som kan delas på många olika sätt 12/6, 12/4, 12/3, 12/2.

För att göra gridet responsivt bör det skrivas i procent och inte i pixel.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Projekt 2</title>
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>

        <h1>Framework test page</h1>

        <div class="grid">
            <div class="row">
                <div class="col-2">Two columns</div>
                <div class="col-10">Ten columns</div>
            </div>
            <div class="row">
                <div class="col-3">Three columns</div>
                <div class="col-9">Nine columns</div>
            </div>
            <div class="row">
                <div class="col-4">Four columns</div>
                <div class="col-8">Eight columns</div>
            </div>
            <div class="row">
                <div class="col-6">Six columns</div>
                <div class="col-6">Six columns</div>
            </div>
            <div class="row">
                <div class="col-7">Seven columns</div>
                <div class="col-5">Five columns</div>
            </div>
            <div class="row">
                <div class="col-8">Eight columns</div>
                <div class="col-4">Four columns</div>
            </div>
        </div> 
    </body>
</html>

Och här är CSS


* {
    border: 1px solid red !important;
}
* {
    box-sizing: border-box;
}
.grid {
    margin: 0 auto;
}
.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.col-1 {
    width: 8.33%;
}
.col-2 {
    width: 16.66%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33%;
}
.col-5 {
    width: 41.66%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33%;
}
.col-8 {
    width: 66.66%;
}
.col-9 {
    width: 74.99%;
}
.col-10 {
    width: 83.33%;
}
.col-11 {
    width: 91.66px;
}
.col-12 {
    width: 100%;
}
h1 {
    color: green;
}

Så gird-systemet består helt enkelt av en row och kolumner. Kolumnerna kan implementeras på många olika sätt. För att divvarna ska hamna bredvid varandra, och inte under varandra behöver man lägga till attributet display i elementet .row, och ge det värdet: flex; wrap-flex: wrap;. Se koden ovan.

Boostrap

Bootstrap är det mest populära web-utvecklingsframverket. Bootstrap 3 är ett mobile-first-ramverk.

En effekt av att det är mobile-first är dess gridsystem. I gridsystemet så räknar man från minsta device. Se följande exempel:

<div class="row">
<div class="col-xs-12">
<p>Här är en kolumn per rad</p>
</div>
<div class="col-xs-12">
<p>Här är en till rad</p>
</div>

I detta exempel så defineras row med att ha ett block med 12 kolumner. xs (mobil) sm (mobil/padda) md (laptop) xs (stor skärm). Det vill säga, regeln för den minsta devicen bestämmer avgör reglerna för större divices. Om vi till exempel vill att textblocken i exemplet ovan skall ligga bredvid varandra när vi besöker hemsidan från en laptop så ändrar man till följande kod.

<div class="row">
<div class="col-xs-12 col-md-6">
<p>Här är en kolumn per rad</p>
</div>
<div class="col-xs-12 col-md-6">
<p>Här är en till rad</p>

Normalize Bootstrap

Eftersom olika browsers är byggda på olika sätt, men egna unika default-inställning kan sidor se olika ut på olika sidor. Därför är det vanligt att ha med en normalize.css-fil bland css-filerna. Dessa tar bort browserna specialinställningar.

Detta är dock inte nödvändigt om du använder bootstrap eftersom bootstrap har normalize.css inbyggt in sin css-fil.