Embed Size (px)
Citation preview
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.
Strukturen av en Wordpressmall
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
Strukturen av en Wordpressmall
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
Strukturen av en Wordpressmall
WORDPRESSKURSER.SEwww.acosmin.com
Strukturen av en Wordpressmall
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.
Strukturen av en Wordpressmall
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…
Grundläggande funktioner för mallar
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…
Grundläggande funktioner för mallar
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…
Grundläggande funktioner för mallar
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>
Grundläggande funktioner för mallar
WORDPRESSKURSER.SE
I Loopen har du bl.a:
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
<?php the_title();?><?php the_content();?>
<?php endwhile; ?> <?php endif; ?>
Grundläggande funktioner för mallar
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();?>
<?php endwhile; ?> <?php endif; ?>
Effektivt arbetssätt för mallskapande
WORDPRESSKURSER.SE
HTML-editor FTP-program Firefox – webbläsare FireBug – plugin till Firefox
Effektivt arbetssätt för mallskapande
WORDPRESSKURSER.SE
CODA Firefox FireBug
Mac OS
Dreamweaver / HTML-kit Firefox FireBug
Windows
Effektivt arbetssätt för mallskapande
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
Effektivt arbetssätt för mallskapande
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
Effektivt arbetssätt för mallskapande
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
Effektivt arbetssätt för mallskapande
WORDPRESSKURSER.SE
Välj din HTML-editor och öppna FireFox
Ladda ner
Effektivt arbetssätt för mallskapande
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)
Effektivt arbetssätt för mallskapande
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.
Effektivt arbetssätt för mallskapande
WORDPRESSKURSER.SE
Använd både FireBug och din HTML-editor. Använd helst en HTML-editor som är uppkopplad mot FTP
Effektivt arbetssätt för mallskapande
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!!
Effektivt arbetssätt för mallskapande
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!
Effektivt arbetssätt för mallskapande
WORDPRESSKURSER.SE
Ändra border-top till 4px!
Effektivt arbetssätt för mallskapande
WORDPRESSKURSER.SE
Resultatet: Ändring direkt på hemsidan
Effektivt arbetssätt för mallskapande
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.
Sidor och Inlägg i Wordpress
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.
Sidor och Inlägg i Wordpress
WORDPRESSKURSER.SE
Sidor och Inlägg i Wordpress
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
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
