WordPress som CMS 1:2. Erhvervsakademi Sjælland, Campus Køge 2. semester, januar 2015 Lasse Claes

Transkript

1 WordPress som CMS 1:2 Erhvervsakademi Sjælland, Campus Køge 2. semester, januar 2015 Lasse Claes

2 Jeg er Lasse Claes

3 De næste to uger Mål Du skal lave din portfolio i WordPress Sidegevinster Du lærer at bruge WordPress som CMS Du kan lave hjemmesider i WordPress

4 Resten af semestret Client-side scripting: JavaScript og jquery Start om tre uger Lektionsplan er på vej. I skal sørge for at have styr på HTML og CSS Alle har brug for det (grafikere, kommunikatører, udviklere)

5 I dag (1:2) Du skal lære at bruge WordPress kontrolpanel (dashboard) indlæg (posts) sider (pages) widgets media håndtering temaer (themes) plugins

6 I dag (2:2) Kort introduktion til WordPress måde at fungere på (teknisk) Du skal installere WordPress lokalt (MAMP) Vi hjælper hinanden vi skal ikke se så meget kode i dag Opslag (Se links i lektionsplanen) +-+Lektionsplan

7 Hvad er et CMS? Content Management System = Indholds-Administrations-System Gør det let for redaktører at vedligeholde/udgive indhold på større sites WordPress = CMS??? Alt fra private blogger til

8 Et af Danmarks største web-udviklingshuse: bl.a.

9 1. WP-filer er skrevet i PHP m.m. WordPress.org is built in PHP and MySQL

10 1. WP-filer er skrevet i PHP m.m. WordPress.org is built in PHP and MySQL 2. Kodeord til database i wp-config.php

11 1. WP-filer er skrevet i PHP m.m. WordPress.org is built in PHP and MySQL 3. Browseren: HTML, CSS, JS 2. Kodeord til database i wp-config.php

12 Sider (page) Indlæg (post) (1/2) Sider Indlæg Eksempler Om Kontakt os Organisationsdiagram Find os Eksempler Nyheder Begivenheder Blogindlæg Et emne ( kategori ), en sideejer ofte udgiver under Indhold opdateres sjældent Kun vist ét sted Har én fast plads i menuen Der kommer ofte nyt indhold (af samme type) Vises ofte to steder: 1. Teaser 2. Selve indlægget Indhold med dato

13 Sider (page) Indlæg (post) (2/2) Sider vises ét sted Indlæg vises flere steder Modsat indlæg: Sider har ikke kategorier og tags Sider har (som regel) ikke indlæggets thumbnail Sider kan have forskellige skabeloner En side kan have (eller være) en underside 1. Resumé/uddrag (eng.: Excerpt) er vist flere steder: på blog-forsiden, på kategori-, arkiv- og tag sider 2. Hele indlægget (eng.: the content ) er vist på selve indlæggets URL/web-adresse Resuméet) indeholder (som regel) indlæggets thumbnail (=et fremhævet billede) (eng.: post thumbnail) og en teaser tekst (Det, der er skrevet over more -linjen i tekst-editoren) afhængigt af hvordan temaet er kodet

14 Indlæg tags vs kategorier Kategorier (anvendes ofte i praksis) Tøj-metafor: Sko, skjorter, trøjer, sokker, underbukser Tags (anvendes sjældent i praksis efter mobile sites fremmarch og kun på hjemmesider med meget indhold) Tøj-metafor: Læder, Gul, rød, blå, sort, Med lynlås, Med snor, ternet, bomuld

15 Overvej i næste uge Kategorier ~ portfolio Om I kan kategorisere jeres projekter i portfolien på en måde, der giver mening for modtageren Overvej kategorier: Grafisk design, kodning, kommunikation?

16 Nice URL s / Pretty permalinks 1:3 Kontrolpanel: indstillinger -> Permanente links

17 Nice URL s / Pretty permalinks 2:3 Kontrolpanel: Sider ( Tilføj ny / Redigér)

18 Browser Nice URL s / Pretty permalinks 3:3 + brugervenligt ( menneskesprog og ikke computersprog ) + SEO

19 Øvelse i dag 1. Vi skal have alle up n running med lokalt udviklingsmiljø 2. I skal øve jer i at bruge kontrolpanelet (Chrome) (Safari) Slå ting op (via links) på lektionsplanen: semester+-+Lektionsplan

20 Dagens øvelse: Superbruger i WordPress kontrolpanel 1AQIMATtdwzCtkpJjKGAucwhU6y7KnWh_N00n6ai0eag /edit?usp=sharing

21 SLUT

22 WordPress som CMS 2:2 Erhvervsakademi Sjælland, Campus Køge 2. semester, januar 2015 Lasse Claes

23 I dag Lidt opsamling på sidst Child theme Upload din hjemmeside til dit webhotel Flere øvelser

24 Dagens øvelse (bygger videre på gårsdagens øvelse) Det grundliggende i at lave et Child-theme Sådan lægger du din hjemmeside online:

25 Tema 1: portfolio i WordPress = en opgave lige nu Men først I vælger selv om I vil bruge det ene eller det andet portfolio fremover (men i næste uge skal I lave jeres portfolio i WordPress) PHP??? 3. semester, men må gerne I skal lave ændringer i et child theme i CSS en

26 Du kender nu kontrolpanelet Ændringer i kontrolpanelet: Check kontrolpanelet, når du har installeret et plugin Plugin: kommer ofte med (flere) indstillinger Tema: Tjek Udseende -> Tilpas (som noget af det første)

27 Du kender også WordPress Lingo /terminologi Side, indlæg, widget, kategori, tag, menu, tema, plugin (Page, post, widget, category, tag, menu, theme, plugin) og indstillinger for alt Hvad er forskellen på en page (da.: side) og en post (da.: indlæg)?

28 WordPress.com WordPress.org WordPress.com Cloud hosted No editing of code and no plugins (free version) Limited (mostly blogging) Simple Plug n play (can t break nor fix things) WordPress.org self-hosted Full control over the code (and server depending on hosting solution) (PHP, MySQL, HTML, CSS and JS) Unlimited + customized CMS Simple -> complex Plug n play (but can break and fix things) In common Approx. 10 years old Main features /start structure is the same Dashboard (/kontrolpanel) look similar (when you start) automattic.com is behind both

29 WordPress.org - self-hosted sites Multiple approaches 1. Premium themes (/frameworks) Often huge with lots of options and an elaborated GUI (a lot of code you need to look through if you at some point need to edit the code - but the point is you shouldn t need to ) Headway, PageLines, Genesis, ThemeForrest 2. Customizing existing themes (= making a child theme) A lot of code given, but can be challenging to make major changes 3. Use a starter theme (basic WordPress template tags (=PHP) and mark up (HTML) - some also offers CSS selectors with/without styling) _s ( by Automattic (+tutorials) ***(bones - (with lots of empty SCSS selectors and explanations))*** ((( Roots ( ))) 4. whatever method meets your end users needs the most ~ Find the shortest path to implementing your designs Always be ready to provide arguments for your choices

30 WordPress-temaer.php => html Afgør, hvad der vises fra databasen =hvilke data/hvilket indhold standard WordPress HTML-opmærkning (klasse og id er).css (= vores hovedfokus lige nu) hvordan det vises layout, design, udseende.js

31 1. WP-filer er skrevet i PHP m.m. WordPress.org is built in PHP and MySQL 3. Browseren: HTML, CSS, JS 2. Kodeord til database i wp-config.php

32

33 Template hierarchy

34 Theme templates Sådan bygger et tema forskellige sider ud fra template -filerne template filer = Blokke af koder (HTML & PHP) (Findes i temaets mappe)

35 Portfolio child theme Før man beslutter sig for et child theme til sin portfolio: Afprøv forskellige lokalt - tjek bl.a. Passer det overordnede look med dit design (grid, menu) - husk du kan ændre detaljer i CSS en, hvis de her ting er på plads Er koden til at gennemskue? (=kan vi relativt let ændre udseende i CSS en?) Tal gerne med en interaktionsunderviser Findes der guides online til at lave et child theme på netop dette tema? Hvilke indstillinger har det? Og er der mange? (Mange indstillinger gør ofte temaet vanskeligere at tweake i child themet) Responsive?

36 Hvorfor bruge et child theme? Ved opdateringer til (forældre-)temaet, overskrives vores ændringer ikke Vi kan udvikle en hjemmeside meget hurtigere, hvis vi finder det rette tema At anvende child themes er et godt sted at starte for at lære om WordPress temaer - måske med henblik på at lave et selv på et tidspunkt

37 Child theme-mappen Et child-theme består af functions.php copy-paste kodesnippet, der inkluderer forældre-temaets style.css style.css ændringer til forældre-temaets style.css bliver overtrumfet her evt. egne udgaver af template-filer (f.eks. page.php, som så ville erstatte forældretemaets page.php) I dagens øvelse skal I selv slå nogle ting op for det er en stor af at udvikle til nettet (også i WordPress)

38 Eksempel Child-theme til twentyfourteen 1. navngivning af mappe/child-theme: twentyfourteen-child 2. functions.php 3. style.css Du skal selv oprette mappe og filer

39 twentyfourteen-child

40 functions.php

41 style.css

42 A note on Child themes & template files From (my highlight)

43 Dagens øvelser: Lav et child theme + upload hjemmeside til dit webhotel Du skal først lave øvelsen fra i går færdig 1tUXXp5wrpidQxdELBKWLVSuJK0HzK_ZsQpdLLK5EUv s/edit#

44 Gårsdagens øvelse: Superbruger i WordPress 1AQIMATtdwzCtkpJjKGAucwhU6y7KnWh_N00n6ai0eag /edit

45 Alle øvelser Øvelse Øvelse