Anpassad kurs för Acudira AB

Introduktion till Wordpress

Open Source – öppen källkod Baserat på PHP - programmeringsspråket

Ursprungligen ett bloggverktyg Byggt på funktioner Flexibel innehållshantering Stor användarbas – mycket plugins

WORDPRESSKURSER.SE

Installation av Wordpress

Ladda ner på wp-support.se Installera via FTP FTP-uppgifter MySQL-uppgifter Databasuppgifter

WORDPRESSKURSER.SE

Installation av Wordpress

Installera i rot eller underkatalog? Två olika sätt att installera – redigera direkt i wp-config-sample.php eller gå via Wordpress egna installation… Rättigheter i FTP? Rättigheter i databasen? (skapa tabeller, redigera tabeller m.m. )

WORDPRESSKURSER.SE

Strukturen av en Wordpressmall

WORDPRESSKURSER.SE

Består grundläggande av 4 huvudfiler1. header.php2. index.php3. sidebar.php4. footer.php

Dessa skriver tillsammans ut den HTML-kod som man sedan redigerar/stylar

Skriver ut m.h.a funktioner (php-kod) Nödvändiga för att Wordpress ska fungera

korrekt.


WORDPRESSKURSER.SE

header.php – skriver ut början av sidans HTML

index.php – skriver ut innehållet (det du skriver i administrationen m.m.)

sidebar.php – sidofält med widgets och andra

komponenter

footer.php – skriver ut det sista av HTML-koden


WORDPRESSKURSER.SE

header.php – skriver ut början av sidans HTML index.php – skriver ut innehållet (det du skriver i administrationen m.m.) sidebar.php – sidofält med widgets och andra komponenter footer.php – skriver ut det sista av HTML-koden


WORDPRESSKURSER.SEwww.acosmin.com


WORDPRESSKURSER.SE

index.php hämtar in - header.php, sidebar.php och footer.php.

…och skriver således ut all HTML-kod som krävs för att en sida ska visas.


WORDPRESSKURSER.SE

index.php hämtar in - header.php, sidebar.php och footer.php.

…och skriver således ut all HTML-kod som krävs för att en sida ska visas.

Kodexempel för index.php:

<?php get_header(); ?>

<!— HTML KOD HÄR MED OLIKA FUNKTIONER ---- >

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

Grundläggande funktioner för mallar

WORDPRESSKURSER.SE

Funktioner skriver ut HTML-kod Finns grundläggande funktioner för att

WP skall fungera korrekt En del klarar man sig utan, andra inte…


WORDPRESSKURSER.SE

<?php get_header();?> - hämtar header.php

<?php get_sidebar();?> - hämtar sidebar.php

<?php get_footer();?> - hämtar footer.php

Hämtas från index.php – rotfilen som visar allt innehåll…

I dessa filer finns då flera funktioner som i slutändan bygger upp hela hemsidan…


WORDPRESSKURSER.SE

Loopen:

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

<!– Här händer det grejer -- >

<? endwhile; else: endif;

Loopen är en funktion som är igång hela tiden och upprepar sig själv x antal gånger.

Exempel: En blogg visar 5 inlägg på startsidan – detta styrs av loopen.

Antal gånger den visas kan bestämmas i koden eller från administrationen.Loopen finns genomgående i olika php-filer, i den

mall som du arbetar med…


WORDPRESSKURSER.SE

Exempel på en Loop:<div class="left_content">

<h2>Bloggen</h2>

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

<div class="containers">

<h5><?php the_title();?></h5>

</div>

<?php endwhile; ?> <?php endif; ?>

</div>


WORDPRESSKURSER.SE

I Loopen har du bl.a:

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

<?php the_title();?><?php the_content();?>



WORDPRESSKURSER.SE

<?php the_title?> - Rubriken <?php the_content?> -

Brödtexten/Bilder m.m

<?php if (have_posts()) : ?>

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

<?php

the_title();?><?php

the_content();?>


Effektivt arbetssätt för mallskapande

WORDPRESSKURSER.SE

HTML-editor FTP-program Firefox – webbläsare FireBug – plugin till Firefox


WORDPRESSKURSER.SE

CODA Firefox FireBug

Mac OS

Dreamweaver / HTML-kit Firefox FireBug

Windows


WORDPRESSKURSER.SE

FTP-program och HTML-editor i ett! God överblick av kod som ska editeras. Möjlighet att editera sidan ”live”. Licensavgift.

Coda – Mac OS


WORDPRESSKURSER.SE

Koppla upp sig mot FTP server. Bra för nybörjare med mindre kodkunskap Valmöjligheter till färger, ramstorlekar, bildstorlek m.m Kostar en del…

Dreamweaver - Windows


WORDPRESSKURSER.SE

Koppla upp sig mot FTP server. God överblick av kod Valmöjligheter till färger, ramstorlekar, bildstorlek m.m Mycket plugins för att utöka arbetsmöjligheterna Gratis

HTML-KIT - Windows


WORDPRESSKURSER.SE

Välj din HTML-editor och öppna FireFox

Ladda ner


WORDPRESSKURSER.SE

Med Firebug installerat kan du nu testa verktyget.1. Öppna FireFox.2. Knappa in på valfri hemsida.3. Tryck på den lilla ikonen längst ner till

höger... (kackerlackan)


WORDPRESSKURSER.SE

Den nya rutan ger dig överblick hemsidans HTML och CSS Genom att markera olika element på sidan får du tillgång till HTML och

CSS-kod.


WORDPRESSKURSER.SE

Använd både FireBug och din HTML-editor. Använd helst en HTML-editor som är uppkopplad mot FTP


WORDPRESSKURSER.SE

Testa dina ändringar live med Firebug. Påverkar inte sidans integritet – ändringar sker bara hos dig. Bra för att lära sig CSS och testa sig fram innan man gör riktiga ändringar

Tips!!


WORDPRESSKURSER.SE

Knappa in på www.wordpresskurser.se Öppna upp FireBug och välj markeringsverktyget. Klicka på sidhuvudet. Ändra border-top till 4px.

Testa FireBug!

http://www.wordpresskurser.se/


WORDPRESSKURSER.SE

Ändra border-top till 4px!


WORDPRESSKURSER.SE

Resultatet: Ändring direkt på hemsidan


WORDPRESSKURSER.SE

Resultatet: Ändring direkt på hemsidan

Kom ihåg: Ändringar via FireBug sker endast på din webbläsare!

Bra för att testa sig fram. Ger god överblick av hemsidans HTML och CSS. Lär dig HTML och CSS så här!

Sidor och Inlägg i Wordpress

WORDPRESSKURSER.SE

Wordpress huvudsektion för skrivande är i Sidor och Inlägg.

Viss skillnad mellan Sidor och Inlägg. Gränssnitt likadant, funktionen annorlunda.


WORDPRESSKURSER.SE

Bloggfunktionens rot. Används för att kategorisera

information, skriva nyheter, artiklar. Bra för att dela upp information

genom kategorier och taggar. Används mest för

blogg/artikelfunktion.

Fungerar som en vanlig sida/undersida.

Används för statisk text/bild Möjlighet till sidomallar per

undersida. Används mest som vanliga

informations/kontaktsidor.


WORDPRESSKURSER.SE


WORDPRESSKURSER.SE

Inlägg är bra för att rikta information på olika sidor. Sidor med sidomallar får eget utseende!

Smart menyhantering

WORDPRESSKURSER.SE

Med Wordpress kan du styra flertalet menyer. Styr med Drag & Drop. Bestäm ordning. Kategorier, Inlägg och Sidor kan placeras som menyval. Mallen måste vara ”Wordpress 3.0+ compatible”

Smart menyhantering

WORDPRESSKURSER.SE

Menysystem på www.servir.se

http://www.servir.se/

Smart menyhantering

WORDPRESSKURSER.SE

Menysystem på www.servir.se

http://www.servir.se/

Smart menyhantering

WORDPRESSKURSER.SE

Diverse valmöjligheter Kategorier, Inlägg och Sidor kan placeras som menyval. Mallen måste vara ”Wordpress 3.0+ compatible”

Widgets

WORDPRESSKURSER.SE

Widgets är tillägg till Wordpress. Bör ses som en del av mallens utseende. Fungerar som en redigerbar modul. Placeras sig på mallens sidebar (sidebar.php)

Widgets

WORDPRESSKURSER.SE

Widgets är tillägg till Wordpress. Bör ses som en del av mallens utseende. Fungerar som en redigerbar modul. Placeras sig på mallens sidebar

(sidebar.php)

Widgets

WORDPRESSKURSER.SE

Widgets

WORDPRESSKURSER.SE

Bildhantering Textinnehåll HTML-kod Bildspel Senaste kommentarer Arkiv Senaste inlägg Kalender Länkar

Anpassad meny Sök RSS Etikettmoln Meta Nyhetsbrev Utökat arkiv Delningsfunktioner Twitter och Facebook

….och mycket, mycket mer!

Sidmallar i teman

WORDPRESSKURSER.SE

Varje mall kan ha en eller flera sidmallar

Sidmall = egen design och struktur

Används ofta för unik design till framsida, blogg och andra ”specialsidor”

Sidmallar i teman

WORDPRESSKURSER.SE

Varje mall kan ha en eller flera sidmallar Sidmall = egen design och struktur Används ofta för unik design till framsida, blogg och andra ”specialsidor”

Sidmall: ”Front” Sidmall: ”Artiklar”

Formulärhantering

WORDPRESSKURSER.SE

Enkel administration av formulär i Worpdress. Hundratals olika formulär finns färdiga att hämta hem. Lägg till fält, knappar, styr ordningen, mailadresser m.m

Formulärhantering

WORDPRESSKURSER.SE

Enkel administration av formulär i Worpdress. Hundratals olika formulär finns färdiga att hämta hem. Lägg till fält, knappar, styr ordningen, mailadresser m.m

Contact form 7 cForms II Enkel och snabb att upprätta. Visar kod och ger dig möjlighet att

redigera i kod. HTML-kunskap. Inte så god överblick.

Mycket valmöjligheter. Drag & Drop för ordning av fält. God överblick Olika utseende för formulären. Ingen HTML-kunskap.

Formulärhantering

WORDPRESSKURSER.SE

Contact form 7 cForms II Enkel och snabb att upprätta. Visar kod och ger dig möjlighet att redigera i kod. HTML-kunskap. Inte så god överblick.

Mycket valmöjligheter. Drag & Drop för ordning av fält. God överblick Olika utseende för formulären. Ingen HTML-kunskap.

Uppgradera Wordpress

WORDPRESSKURSER.SE

Wordpress meddelar när du ska uppdatera. Uppdateringar släpps med några månaders

mellanrum. Uppdateringar innebär för det mesta

säkerhetsuppdateringar. Viktigt att uppdatera alltid!

Uppgradera Wordpress

WORDPRESSKURSER.SE

Innan du uppgraderar är det viktigt att du gör backup!

Backup görs på hemsidans innehåll. Exporteras och sparas i en XML-fil Ladda sedan upp.

Backup på Wordpress

WORDPRESSKURSER.SE

Exportera all information Sparas i XML-fil Importeras sedan via Wordpress

Exportera Importera

Anpassad kurs för Acudira AB

Education