WordPress som CMS 1:2 Erhvervsakademi Sjælland, Campus Køge 2. semester, januar 2015 Lasse Claes
Jeg er Lasse Claes
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
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)
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
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) http://46h-wiki.wikispaces.com/dk2014e+-+2.+semester +-+Lektionsplan
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
Et af Danmarks største web-udviklingshuse: bl.a. http://www.soelleroed-kro.dk/
1. WP-filer er skrevet i PHP m.m. WordPress.org is built in PHP and MySQL
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
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
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
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
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
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?
Nice URL s / Pretty permalinks 1:3 Kontrolpanel: indstillinger -> Permanente links
Nice URL s / Pretty permalinks 2:3 Kontrolpanel: Sider ( Tilføj ny / Redigér)
Browser Nice URL s / Pretty permalinks 3:3 + brugervenligt ( menneskesprog og ikke computersprog ) + SEO
Øvelse i dag 1. Vi skal have alle up n running med lokalt udviklingsmiljø 2. I skal øve jer i at bruge kontrolpanelet http://localhost:8888/ex1/ (Chrome) http://localhost:8888/ex1/wp-admin/ (Safari) Slå ting op (via links) på lektionsplanen: http://46h-wiki.wikispaces.com/dk2014e+- +2.+semester+-+Lektionsplan
Dagens øvelse: Superbruger i WordPress kontrolpanel https://docs.google.com/document/d/ 1AQIMATtdwzCtkpJjKGAucwhU6y7KnWh_N00n6ai0eag /edit?usp=sharing http://goo.gl/sdlz5d
SLUT
WordPress som CMS 2:2 Erhvervsakademi Sjælland, Campus Køge 2. semester, januar 2015 Lasse Claes
I dag Lidt opsamling på sidst Child theme Upload din hjemmeside til dit webhotel Flere øvelser
Dagens øvelse (bygger videre på gårsdagens øvelse) Det grundliggende i at lave et Child-theme Sådan lægger du din hjemmeside online: http://it-studerende.dk/ex1/
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
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)
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)?
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
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 ) http://www.woothemes.com/product-category/themes 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 (http://underscores.me/) by Automattic (+tutorials) ***(bones - https://github.com/eddiemachado/bones (with lots of empty SCSS selectors and explanations))*** ((( Roots (http://roots.io/) ))) 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
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
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
Template hierarchy http://codex.wordpress.org/template_hierarchy
Theme templates Sådan bygger et tema forskellige sider ud fra template -filerne template filer = Blokke af koder (HTML & PHP) (Findes i temaets mappe) http://www.designer-daily.com/6-infographics-to-help-you-better-understand-wordpress-28101
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?
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
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)
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
twentyfourteen-child
functions.php
style.css
A note on Child themes & template files From http://codex.wordpress.org/child_themes#template_files (my highlight)
Dagens øvelser: Lav et child theme + upload hjemmeside til dit webhotel Du skal først lave øvelsen fra i går færdig https://docs.google.com/document/d/ 1tUXXp5wrpidQxdELBKWLVSuJK0HzK_ZsQpdLLK5EUv s/edit# http://goo.gl/vv3zgl
Gårsdagens øvelse: Superbruger i WordPress https://docs.google.com/document/d/ 1AQIMATtdwzCtkpJjKGAucwhU6y7KnWh_N00n6ai0eag /edit http://bit.ly/1ygjggu
Alle øvelser Øvelse 1 + 2 http://bit.ly/1ygjggu Øvelse 3 + 4 http://goo.gl/vv3zgl