WordPress som ett CMS - Högskolan Västmedia.hv.se/.../26/2014/03/Wordpress-som-ett-CMS.pdf · Det...

Preview:

Citation preview

WordPress som ett CMS

Christian Ohlsson 1

Wordpress som ett CMS

§  CMS, Content Management System §  Helt enkelt ett system för att hantera content

§  Hanterar allt som placeras på sajten §  Text, bilder, ljud, video

§  Wordpress är ett CMS §  Med rötterna i bloggvärlden §  Många alternativ finns, men oftast dyra

Christian Ohlsson 2

Varför Wordpress?

§  Öppen källkod och fritt §  Snabbt och enkelt att använda §  Utbyggbart

§  Enkelt att designa om och bygga plugins §  Duktigt med texter §  Bra på bildhantering

Christian Ohlsson 3

Kritik mot Wordpress

§  Säkerhetsproblem → Välj bra lösenord §  Cachning av sidor → Plugins ordnar detta §  Kommentars-SPAM → Akismet

§  Kommersiella CMS:er har support §  ...men varför inte anlita en konsult när det ”brinner”?

Christian Ohlsson 4

Det finns några

§  ...som använder Wordpress!

Christian Ohlsson 5

Ebay kör Wordpress

Christian Ohlsson 6

Yahoo kör Wordpress

Christian Ohlsson 7

Ford kör Wordpress

Christian Ohlsson 8

Wall Street Journal kör Wordpress

Christian Ohlsson 9

Sony kör Wordpress

Christian Ohlsson 10

People Magazine kör Wordpress

Christian Ohlsson 11

NY Times kör Wordpress

Christian Ohlsson 12

Wired Magazine kör Wordpress

Christian Ohlsson 13

Mozilla Firefox kör Wordpress

Christian Ohlsson 14

CNN kör Wordpress

Christian Ohlsson 15

Download.com kör Wordpress

Christian Ohlsson 16

Flickr kör Wordpress

Christian Ohlsson 17

Punktlistan

Christian Ohlsson 18

Saker att tänka på 1

§  Till att börja med: §  Behövs verkligen ett CMS?

§  Varför inte hacka lite HTML?

§  Är Wordpress rätt verktyg? §  Alternativ finns i Joomla och Drupal

Christian Ohlsson 19

Saker att tänka på 2

§  Saker att tänka på angående Admin-interfacet: §  Vilken mer funktionalitet behövs? §  Pluggar för att minska funktionalitet

§  Utseende på admin-interfacet (kan skinnas)

Christian Ohlsson 20

Saker att tänka på 3

§  Angående kategorier och taggning: §  Vilken strategi skall användas? §  Vilka kategorier ska finnas? Vem ska få göra

kategorier? §  Hur ska taggar användas? Hur noga skall det

berättas för användare om taggar?

Christian Ohlsson 21

Saker att tänka på 4

§  Om sidor och poster: §  Behövs ”Custom Fields”? §  Måste Page Templates skapas?

§  Gör de i sådana fall i början

§  Skall sidor relatera till varandra? §  Skall sidor ha undersidor: Tänk på navigering!

§  Framsidan: Statisk eller senaste nyheterna?

Christian Ohlsson 22

Saker att tänka på 5

§  Annat att tänka på: §  Permalänkar: Tänk ut det redan från början

§  Och ändra inte

§  Shortcodes: Tänk ut det direkt §  Och ändra verkligen inte

§  Vad kan inte WP ur lådan och vilka pluggar behövs

§  Översatta versioner av WP? Av pluggar?

Christian Ohlsson 23

Manualen

§  Även om webbutvecklare tycker att WP är smidigt att använda tycker inte alla det §  En poäng med WP är ju att ”icke-utvecklare” skall

hantera ”content”

§  Gör manualer som förklara hur och varför! §  Rutingrejjerna skall i alla fall beskrivas

§  Presenteras som skrivet dokument eller video

Christian Ohlsson 24

Wordpress på bantning

§  Om du själv inte skall vara den primära användaren behöver du trimma funktionalitet

§  Bara det nödvändiga skall finnas för användaren

§  Använd user levels! §  Finns från 0 till 6 (admin=6)

Christian Ohlsson 25

Tweaks

Christian Ohlsson 26

Tweak'a admin-interface

§  Flera pluggar finns för att fixa till admin-interfacet för sajtens alla användare

§  Ett exempel: WP-CMS Post Control

Christian Ohlsson 27

WP-CMS Post Control

Christian Ohlsson 28

Shortcodes

§  En shortcode är en självtillverkad ”tagg” §  Bra att ha om du:

§  Har vanligt förekommande texter som skrivs ut

§  Vill inkludera YouTube-videos

§  Exempel kommer

Christian Ohlsson 29

Sjortcode: [subpages]

Christian Ohlsson 30

/* * Shortcode "subpages" visar upp de * olika undersidor som finns till en sida */ function show_courses( $atts) { global $post; // Setup the global variable $post $kiddies = wp_list_pages( 'sort_column=post_title&title_li=&depth=1&echo=0' ); return "<ul>" . $kiddies . "</ul>"; } add_shortcode( 'courses', 'show_courses' );

Lite plugins

Christian Ohlsson 31

Viktiga pluggar

§  Antalet plugins till Wordpress är enastående §  29.849 i dag, fler kommer hela tiden

§  Vad du än vill ha, finns troligen ett färdigt plugin för detta

§  Man kan inte testa alla, men här kommer en del bra (och nödvändiga) pluggar

Christian Ohlsson 32

Angående innehåll

§  WP Greet Box §  Beskrivning av sajten för Social Nätverks-besökare

§  Popularity Contest §  Håller räkningen på vilka sidor/postar folk besöker

§  PollDaddy §  Bra för undersökningar

§  WP-Postratings §  Hur populära är dina poster

Christian Ohlsson 33

Media-plugins

§  NextGEN Gallery §  Ursnyggt bildgalleri för Wordpress

§  FancyBox §  Snygga effekter för bildhantering

§  WP Youtube Player §  Länka in videos från Youtube §  Numera hanteras detta bra automatiskt

Christian Ohlsson 34

Administrativa plugins

§  WP-DB Backup §  Smidigt sätt att göra backuper av din databas

§  Maintenance Mode §  Försätter sajten i viloläge för alla utom admins

§  Google Analytics for WP §  Enkel koppling till Google

Christian Ohlsson 35

SPAM-hantering

§  Akismet §  Följer med WP-installationen och rensar SPAM rejält

§  Really Simple CAPTCHA §  Enkelt stöd för CAPTCHA's till WP

Christian Ohlsson 36

Plugins för sociala nätverk

§  Lifestream §  Visar strömmar från ditt sociala nätverk

§  Twitter Tools §  Tvåvägs-kommunikation mellan din blog och Twitter

§  Facebook Connect §  Koppla ihop FB med din sajt

§  Wordbook §  Posta dina blogginlägg på FB

Christian Ohlsson 37

Installation

Christian Ohlsson 38

Kom igång med Wordpress

§  Wordpress är ett CMS, Content Management System

§  Med Wordpress tar du ett standardsystem och anpassar det till precis det du vill ha

§  Funktionalitet? §  Det får man med plugins!

§  Utseende? §  Det fixar du med teman!

Christian Ohlsson 39

Installation av Wordpress

§  Du behöver 4 saker för din installation:

§  Senaste versionen av Wordpress

§  MySQL databas §  FTP eller SFTP-program §  Din favorit-texteditor

Christian Ohlsson 40

Ladda ner Wordpress

Christian Ohlsson 41

h"p://wordpress.org/download/  

Sedan...

§  Packa upp §  Ladda upp med FTP/SFTP §  Surfa till din sida för att fylla I databas-info

§  Enjoy!

Christian Ohlsson 42

Live-exempel

Christian Ohlsson 43

Installation av Wordpress

Teman och Mallar

§  Ett tema är ett skin för din blogg §  Kan dessutom vara mycket mer än så

§  Tema: style.css

§  Mallar: Alla PHP-filer

§  functions.php → lägg till plugin-liknande saker §  Widgets §  Installation av ett tema

Christian Ohlsson 44

Kärnan i WordPress

§  Alla bra CMS har ”systemfilerna” separerade från vanliga användarfiler

§  I WordPress gäller: §  Saker i wp-content-katalogen är användarfiler, resten

är systemfiler

§  Pilla bara på grejjer i denna katalog §  Annars kan det bli kul! :-)

Christian Ohlsson 45

Villkorsstyrda taggar

§  Praktiska att ha när man skall ha olika saker beroende på vad som händer

§  Exempel i sidebar.php:

Christian Ohlsson 46

<?php if (is_home()) { echo '<p>This is the home page</p>'; } else { echo '<p>Where am I?</p>'; }

?>

Back in the loop

§  I temats index.php finns Wordpress loop §  Den kan se ut så här:

Christian Ohlsson 47

<?php if (have_posts()) : while (have_posts(); : the_post(); ?>

<?php endwhile; else: echo '<p>Felmeddelande</p>' ?>

Fullständigt exempel

Christian Ohlsson 48

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<h2><a href="<?php the_permalink(); ?>" title="<?php

the_title(); ?>"><?php the_title();?></a></h2>

<?php the_content(); ?>

<?php get_comments(); ?>

</div>

<?php endwhile; else: ?>

<div class="post">

<h2>Error!</h2>

<p>Something went wrong! Please try again.</p>

</div>

<?php endif; ?>

WP_Query

§  Hjärtat av Wordpress-loopen §  Klassen som hanterar allt med loopen §  Denna klass har flera metoder

§  have_posts() §  the_post()

§  Osv

§  query_posts('showposts=5');

Christian Ohlsson 49

Temahantering

Christian Ohlsson 50

Temahantering

§  Det finns några sätt att få sajten som du vill ha den: §  Leta upp ett tema på nätet som ”typ” passar §  Modifiera standardtemat (Twenty Fourteen)

§  Använda ett naket tema (Starkers, Bones) §  Börja från ruta 1

Christian Ohlsson 51

Grunderna med tema

§  Tema handlar om att separera design från innehåll §  Men är egentligen mycket mer

§  Ett tema är en katalog under themes/ som innehåller minst: §  index.php: Vad skall skrivas ut

§  style.css: Hur ska det se ut (samt tema-info)

Christian Ohlsson 52

Exempel på style.css

Christian Ohlsson 53

/*

Theme Name: Mitt coola tema

Theme URI: http://mitt-tema.com

Description: Kort förklaring på mitt tema

Author: Mitt namn

Author URI: http://min-hemsida.com

Template: Om detta är ett child-tema: namnet på förälder-temat

Version: Versions-numret

Annan info om temat såsom krav på pluggar, licenser osv

*/

#rubriker {

stil för rubriker

}

Exempel på index.php

Christian Ohlsson 54

<?php get_header(); ?>

<div id="content">

<?php get_template_part (”loop.php"); ?>

</div> <!-- END CONTENT -->

<div id="sidebar">

<?php get_sidebar(); ?>

</div> <!-- END SIDEBAR -->

<div id="footer">

<?php get_footer(); ?>

</div> <!-- END FOOTER !

Ett typiskt tema

Christian Ohlsson 55

HEADER  

CONTENT  

FOOTER  

SIDEBAR  

Widgets

§  En widget en en drag-and-drop modul som kan läggas till/tas bort via admin-gränssnittet

§  Riktigt smidigt!

Christian Ohlsson 56

Hur ger man stöd för detta?

Christian Ohlsson 57

<?php

register_sidebar(array('name'=>'Sidebar 1',

'before_widget' => '<div class="sidebar-widget">',

'after_widget' => '</div><!-- END SIDEBAR-WIDGET -->',

'before_title' => '<h3>',

'after_title' => '</h3>',

));

?>

<div id="sidebar1"> <?php dynamic_sidebar('Sidebar 1'); ?> </div> <!-- END SIDEBAR1 -->

FuncAons.php  

Sidebar.php  

Child-teman: Briljant helt enkelt!

Christian Ohlsson 58

Ursprungstema  

Child-­‐tema  

Resultatet  

Hur funkar det?

§  Alla teman kan vara ett förälder-tema §  Alla teman måste ligga i themes/ -katalogen §  Ditt child-tema måste innehålla minst style.css

§  Tänk på Template & import! (kommer strax)

§  Allt som deklareras i child-temat tar kommandot över samma deklaration i förälder-temat

Christian Ohlsson 59

Ändringar i style.css

Christian Ohlsson 60

/*

Theme Name: mychild theme

Description: Fina temat för in sajt

Version: 1.0

Author: Christian Ohlsson

Template: vesper

*/

@import url("../vesper/style.css");

body {

font: 14pt Impact, sans-serif;

}

Informationshantering

Christian Ohlsson 61

Tag-baserad design

§  Så gott som alltid vill du bygga din sajt runt kategorier och sidor (pages)

§  Man kan dessutom använda sig av taggar och poster

§  ...så, vad är skillnaden mellan dessa?

Christian Ohlsson 62

Post

§  En post är ett inlägg i bloggen, eller en ”informationklump” skapad vid ett tillfälle

§  Hur en post ser ut definieras i Loopen

Christian Ohlsson 63

Page

§  En Page är en ”statisk” sida §  Den tillverkas på samma sätt som en post, men en Page

ses som en enhet som kan uppta hela webbsidans utrymme

§  Hur en Page ser ut definieras i page.php

Christian Ohlsson 64

Kategorier

§  Kategorier är en samling av poster som samlas under ett paraply med relaterade poster

§  Exempel på en matsajt's kategorier

§  En kategori kan listas upp §  Utseendet definieras då i filen category.php

Christian Ohlsson 65

Taggar

§  En post eller en sida i Wordpress kan tilldelas ett visst antal taggar

§  Taggarna beskriver med finare granularitet vad posten/sidan handlar om

§  Hur taggar ser ut definieras i tag.php

Christian Ohlsson 66

Skillnaden mellan Post och Page

§  En Page (sida) skall folk kunna läsa oavsett när du skrivit den

§  Den är statisk och innehåller ofta en beskrivning/förklaring av något §  Precis som ”icke-blogg”-sajter gör

§  En post är ett aktuellt inlägg som oftast sorteras per datum §  Äldre poster måste användaren aktivt söka fram

Christian Ohlsson 67

Skillnaden mellan Taggar och Kategorier

§  En kategori är en större samlings-container där poster grovsorteras in till §  En sajt bör inte innehålla mer är 10-15 stycken

kategorier §  En post bör tilldelas 1-2 kategorier

§  En tagg är en noggrannare beskrivning av vad posten innehåller. En post innehåller normalt flera taggar §  En post bör tilldelas 2-5 taggar

Christian Ohlsson 68

Definition av Content Management

Christian Ohlsson 69

Vad är Content Management?

§  "Content management" har blivit svårt att exakt definiera eftersom det har tillämpats på ett brett utbud av mjukvara och system.

§  På ena änden av skalan du har wikis §  Multi-författare redigering och versionshantering §  Nästan ingen organisation eller navigation

§  Andra änden kommersiella mjukvarupaket §  Företag sköter åtkomstkontroll

§  Gemenskap delning av företagsdokument.

Christian Ohlsson 70

Var passar WordPress in?

§  I den smalaste definitionen är bloggmotorer en form av CMS som hanterar innehåll i kronologisk visningsordning

§  WordPress var i början ett bloggsystem §  Har numera kraft, flexibilitet och resurser för att

utföra de uppgifter som krävs av ett CMS idag

§  Hanteringen av en webbplats med administration, användare och innehållsstruktur kräver anpassning, utformning, och ett multi-roll delegationssystem

Christian Ohlsson 71

CMS-funktioner

§  Workflow och delegering §  Wordpress gör det enkelt för icke-tekniska användare att lägga

till innehåll och hantera distributionen.

§  Organisation av innehåll §  I WordPress finns flera olika sätt att ”tagga” information i form

av poster, pages, kategorier, taggar och Custom Fields

§  Interaktivitet §  E-postlistor, formulär, diskussioner och handel funktioner är

typiska CMS funktioner som kan kräva plugins

§  Andra content management system §  WordPress kan vara en kraftfull plattform för skapande av

material som matar andra CMS’er med information såsom Drupal

Christian Ohlsson 72

Wordpress: Ett riktigt CMS

§  Enkelhet §  Wordpress kan vara enkelt eller komplex för att

matcha användarens skicklighet och behov.

§  Flexibilitet §  Wordpress hanterar en mängd olika sajter, från enkla

bloggar till avancerade sajter med mycket trafik

§  Utbyggbart §  Du kan hitta plugins och teman för att skapa ett

enormt utbud av stilar, integrera flera olika källor samt förenkla processen att gå från textdokument till komplexa webbsidor

Christian Ohlsson 73

Arbetsflöde och Delegation

§  En av de primära sakerna med ett CMS är förenklandet av att skapa innehåll och hantering av detta.

§  Nära knutet till detta är §  Uppdelning av arbetsuppgifter, så att rätt användare

kontrollerar rätt information

§  Administratörer med redaktionell kontroll över innehållet ges tillgång, ansvar och kontroll över vad som faktiskt publiceras via CMS

Christian Ohlsson 74

Roller och Delegation

§  Rollhantering i ett CMS är en nyckelkomponent §  Man måste kunna tilldela roller och rättigheter

som bygger på den information du har i ditt CMS §  Dessutom beaktar personerna som fyller CMS med

info och de som redigerar det

§  I det enkla fallet med en liten webbsajt spelar det kanske ingen roll §  Men om du använder Wordpress som ansiktet på en

e-handelsplats eller för ett företags produktkatalog, flera avdelningar och godkännare kräver normalt medverkan

Christian Ohlsson 75

Roller i WordPress

Christian Ohlsson 76

Roller i Wordpress

§  Var försiktig med administratörsroller §  Se dem som root eller sudo-användare

§  Behandla redaktörer som sådana §  De kommer att få behörighet att redigera sidor , ändra

innehållet eller status i på inlägg

§  Om du verkligen vill att allt innehåll granskas innan den träffar det publiceras, separera §  Contributers

§  som inte kan publicera

§  Authors §  som kan publicera sitt eget arbete , men inte redigera andras

Christian Ohlsson 77

Arbetsflöde

§  Efter att ha bestämt användare och deras roller, är nästa steg att tydligt fastställa ett arbetsflöde för att få innehåll ur huvudet till webben

§  Efter redaktionell användarstruktur är arbetsflöde den näst mest efterfrågade termen när man frågar vad användarna förknippar med ett CMS

§  Två viktiga komponenter för ett gott arbetsflöde inom Wordpress finns: §  Revisionshistorik §  Post-kontroll

Christian Ohlsson 78

Wordpress på företaget

Christian Ohlsson 79

Är Wordpress rätt för ditt företag?

§  Beror på företagets behov §  Enkelt att sätta upp §  Optimerat för sökmotorer

§  Säkert §  Underhålls bra §  Utbyggbart med plugins

§  RSS med taggar kan skicka meddelanden rätt §  Open Source

Christian Ohlsson 80

När är det inte rätt?

§  Passar inte in i ditt företags kultur §  Arbetsflödet i WP kanske är annorlunda? §  Open Source: Finns ingen ansvarig

Christian Ohlsson 81

Skalbarhet

§  Någon gång kommer frågan att komma upp: Kan WordPress skala uppåt? §  Jo, titta på wordpress.com

§  Dock kanske det inte är enkelt

§  Optimering kräver arbete på många olika lager §  Kod, teman & plugins §  PHP-versionen och dess inställningar

§  Webbserver och dess moduler

§  Operativsystemet och hårdvaran

Christian Ohlsson 82

Optimering av Teman & Plugins

§  Skall vara en naturlig del av webbutveckling! §  Kontrollera storlek på bilder §  Minimera CSS och JS

§  Minska antalet HTTP-förfrågningar

Christian Ohlsson 83

Optimera PHP

§  Massvis kan göras, några exempel att göra i php.ini är:

Christian Ohlsson 84

;Hide PHP for security expose_php = Off ;Turn off for performance register_globals = Off register_long_arrays = Off register_argc_argv = Off magic_quotes_gpc = Off magic_quotes_runtime = Off magic_quotes_sybase = Off

Cachning

§  Cachning innebär att saker lagras på ett mer statiskt sätt

§  Cachning kan utföras på många olika nivåer §  För webbsidan kan plugins användas för att skapa

statiska HTML-versioner av ditt dynamiska innehåll §  Exempel: Super Cache

§  Cachning kan även göras på databas-sidan där två typer av MySQL tabelltyper används §  MyISAM §  InnoDB

Christian Ohlsson 85

Vanligt underhåll

§  Precis som att byta oljan på bilen behöver databaserna underhåll §  Gör det i intervall så rullar allt på

§  Kan enkelt göras i phpMyAdmin §  Eller pluginet: WP-DBManager som även gör

backuper och kan schemaläggas

Christian Ohlsson 86

Skala hårdvara

Christian Ohlsson 87

MySQL & Webb på samma server

Skala hårdvara

Christian Ohlsson 88

MySQL & Webb på olika servrar

Skala hårdvara

Christian Ohlsson 89

Två Webbservrar lastbalanseras mot DB

Skala hårdvara

Christian Ohlsson 90

Lastbalanseras mot DB, + en hot-spare

The end

Christian Ohlsson 91

Christian Ohlsson 92

Recommended