Twenty Eleven geschikt maken voor mobiele weergave (responsive?)

Misschien is het minder omslachtig om een theme toe te gaan passen die vanuit zichzelf als responsive is, want zeker voor een theme dat met tabellen werkt ipv div’s en niet vanuit zichzelf responsive is opgezet, zul je heel veel, maar dan ook echt heel veel met css moeten veranderen en steeds moeten uittesten.

Succes!

Lianne

Als altijd… je hebt responsive… en responsive…
De ene is de andere niet…
2011 is nauwelijks responsive te noemen… Verbouwen is een [piep]-klus.
Gewoon op zoek naar een ander theme, scheelt heeeel veel werk.

Inderdaad is op de kwaliteit van sommige thema’s e.e.a. af te dingen, die zoekfunctie geeft geen 100%-garantie (die zetten de themabouwers er zelf in). In 2011 stond responsive niet echt helemaal meer in de kinderschoenen, maar dan toch in puberschoenen. Let bij de keuze om populariteit, op reviews en waarderingen, op topics in de supportfora en op changelogs (welke aanpassingen zijn er gepleegd. Komt themabouwer actief over? Volgt hij actuele ontwikkelingen?). Zoek bovendien via Google op ‘wordpress je-themanaam responsive’ en mochten er problemen zijn, dan komen die wel omhoog. Zo waardeer je ook betaalde thema’s. En maak gebruik van de demosite van het thema. Werkt die zoals je verwacht?

En soms heb je dan nog een beetje een teleurstelling, dat is nu eenmaal het risico.

Succes!

Lianne

Hier zijn meerdere opties… bijvoorbeeld:

1. maak een testsite naast het origineel om de ontwikkeling te doen >> en zet de boel over // of re-direct als het klaar is
2. maak een ‘localhost’ site [op je eigen pc] en zet de boel over als het klaar is

Beide opties lijken in grote lijnen op elkaar; ’t is maar wat je handiger lijkt.
== == ==

Misschien is het handig om WP een beetje te leren kennen, zonder risico’s..;)
Dan is een localhost-versie wel zo veilig…

Tips:

• werk langzaam en nauwkeurig
• neem de volgende stap pas als de vorige succesvol is afgerond
• gaat er iets fout? ga een stap / wat stappen terug en loop de zaak na [maar daarbij zo weinig mogelijk wijzigingen; Controleer steeds of je aanpassing werkt; je wilt systematisch zoeken naar een oplossing]

VRAAG GERUST!

== == == VOORBEREIDING

Je hebt wat basisgereedschappen nodig
>>
1. Download, Installeer / gebruik een FTP-programma bv. filezilla[gratis] – [zie onderaan] http://filezilla-project.org/download.php
   om bestanden op de server te beheren.
   De server is de plek waar de webhost jouw site draait.
   [De beheerder heeft je vast een mail / bestand / papier gegeven met de nodige inlogggegevens.]

>>

2. download EN INSTALLEER een EDITOR [NIET een wordprocessor] bijv. NOTEPAD++; Als editor is ‘NOTEPAD++’ [gratis] veel meer geschikt, want echte [web]editor.
   Verder is Notepad++ ook te koppelen aan Filezilla [FTP], waardoor het aanpassen straks van CSS en PHP eenvoudiger wordt.

== == == STAP 1 maak een back-up van de database
De database bevat de INHOUD van je bestaande site. Maak regelmatig een backup.
Login als administrator / beheerder van je bestaande site

3. Dashboard > Extra > Exporteren
4. kies: Gehele Inhoud
5. Desgevraagd: Installeer en Run Export plugin
6. Sla exportbestand op de PC op

Je hebt nu de INHOUD [=teksten en bijv. plaatjes etc.] veiliggesteld.

De INHOUD van de site is nu bewaard, om straks over te zetten naar je localhost testversie.[en vice versa]

== == == Stap 2: Installatie XAMPP
Om een site op je eigen PC [=localhost] te installeren heb je een programma als ‘XAMPP’ nodig. Kies de versie passend bij jouw systeem [windows / MAC of Linux] Download hier.
[windows] Download en gebruik de ‘windows installer-versie’ om XAMPP te installeren. dat is veruit het eenvoudigst.

7. start de ‘windows installer’ en volg de instructies op het scherm
8. start de ‘xampp setup wizzard’
9. installeer in de standaardmap ‘C:\XAMPP’
10. vink UIT ‘learn more about Bitnami for xampp’ > next
11. >’setup is now ready to begin installing XAMPP on your computer’ >next

..effe wachten…

‘Setup has completed installing XAMPP on your computer.
Vink AAN ‘do you want to start the control panel now?’ >> finish

== == == XAMPP Control Panel
Het XAMPP Control Panel start

12. controleer of de knoppen GROEN zijn. Zo niet: stop programma’s zoals skype, teamviewer etc. tijdelijk >> start de rode programma’s > groen > herstart de tijdelijk uitgeschakelde programma’s.

== == == XAMPP is succesvol gestart

13. browser:’http://localhost’ >kies de gewenste taal
14. het welkom!-scherm opent – in de li-zijbalk vind je alle functies / info

== == == installeren mbv BITNAMI

15. browser – localhost: klik de WP-icoon > de bitmani-site opent
16. klik wordpress > download [recommended]
17. klik de installer > kies de gewenste taal [engels]
18. geef aan in welke folder / map de xampp staat ‘C:\xampp’ [of de plek die jij gekozen hebt] >> next
19. maak een account voor de beheerder [bewaar de gegevens GOED!]
20. geef de localhost-site een naam > next
21. configureer [alleen als beslist nodig] mailsupport > next
22. vink UIT bitnami cloudhosting > next > next
23. effe wachten…
24. browser:’http://localhost/wordpress’ > je nieuwe site met ‘voorbeeldpagina start

opgelet het kan zijn dat xampp een andere ‘poort’gebruikt om je site te tonen. Probeer eens: ‘http://localhost:8081/wordpress/’ of ‘http://localhost:80/wordpress/’

== == == IMPORTEREN inhoud //=database van de originele site

25. Dashboard > Extra > IMporteren
26. kies ‘wordpress’
27. kies: Gehele Inhoud
28. selecteer het backup-bestand dat je eerder op je PC hebt opgeslagen
29. Desgevraagd: Installeer en Run IMport plugin
30. volg de instructies op het scherm

Je hebt nu de INHOUD [=teksten en bijv. plaatjes etc.] van de bestaande site overgezet naar je localhost-versie.

== == == WP geïnstalleerd: en wat nu…?

31. bepaal wat voor een soort / type site je wilt hebben
32. voor wie de site bedoeld is en welke wensen en eisen je ‘gebruikers’ hebben
33. bekijk welke zaken daarbij horen / passen op het gebied van

• uiterlijk: indeling, vorm, kleuren etc.
• functionaliteit: blog, krant, webwinkel, vereniging etc.
• etc. etc.

• ga op zoek naar een THEMA dat zoveel mogelijk past bij het bovenstaande
• maak je niet druk om kleuren, lettertypen etc. Die zijn eenvoudig aan te passen
• richt je vooral op layout / opbouw van de pagina’s / berichten
• kijk daarna op de benodigde functionaliteit van de meest favoriete thema’s
• probeer wat thema’s uit; WP heeft vele 10.000-den gratis thema’s, die doorgaans van goede kwaliteit zijn. Begin daar maar eens mee.
• Installeer thema’s mbv je dashboard, kijk rond en probeer of ze voldoen aan je wensen, aanpasbaarheid etc.
• ben je niet tevreden? Niks aan de hand! gewoon een volgend thema installeren en activeren om te kijken of dat beter is. De INHOUD van je site blijft gewoon in orde… no worries.
• Heb je een mooi thema gevonden? Joepie!

== == == Maak een CHILDTHEME

• DASHBOARD >PLUGINS > NIEUWE PLUGIN INSTALLEREN
• zoek CHILDTHEME
• installeer en ACTIVEER de door jou gekozen CT-plugin
• plaats nu de door jou gewenste aanpassingen steeds in /via het CT.

== == ==

• Tijd om de ’toeters en bellen’ te installeren zoals widgets, social media, formulieren, etc. etc. Leef je uit

Heb je de de site naar wens ‘opgefrist’?
Zet dan jouw nieuwe versie ‘online’; geef tegen die tijd maar een berichtje dan krijg je vast wel weer instructies over hoe dat te doen.

== == == EXTRA INFO

…Beginner / gevorderd / expert…
Om succesvol te werken aan een website is het belangrijk dat je de basisbeginselen onder de knie krijgt van HTML en CSS. Je hoeft geen expert te worden, maar met wat basiskennis gaat het een stuk makkelijker 😉 [Een heel klein beetje kennis van PHP helpt ook, maar is doorgaans niet direct nodig]
Zo kan je een gekozen theme makkelijker aanpassen aan je behoeften.

== == == browsergeschiedenis…
Na elke aanpassing is het handig om je browser te verversen om de wijzigingen te zien.

>> Druk <CTRL-F5> om je browser te verversen. [meestal is dat genoeg…
of leeg je browser-cache grondiger [zie uitleg]:
http://www.browserchecker.nl/cache-bestanden-verwijderen

== == == Zo werkt een [CT] childtheme…
== == ==
Een CT dient er voor om het origineel te scheiden van de aanpassingen die jij als webbouwer maakt.
Zo voorkom je dat al je aanpassingen worden overschreven als de makers van je theme een update installeren.
Verder heeft het als voordeel dat alle aanpassingen overzichtelijk bij elkaar staan. Dat is makkelijk, overzichtelijk en eenvoudiger te onderhouden.
== == ==
Wat gebeurt er met de CSS [cascading opmaak / stijlblad] een childtheme…

In een childtheme [en CSS] geldt dat de code die als laatste wordt uitgevoerd, het uiterlijk / acties van de site bepaalt.
bijvoorbeeld:

body{ background-color: #ffffff; /*wit*/
       background-color: #000000; /*zwart*/
}

Resultaat: ‘zwart’.
Dat geldt ook als de opmaakkenmerken 100 regels verderop in het stijlbestand staan!

** ** **
Heb je een CT, dan zal EERST het origineel [parent] doorlopen / getoond worden, DAARNA de opdrachten opgenomen in het CHILDtheme. >>Dat gaat RAZENDSNEL: de site ziet er uit als bedoeld in het childtheme.

Belangrijk om te weten…
De site bestaat uit meer dan een bestand als style.css.
Wil je andere zaken aanpassen, bijv de header of footer, dan moet je mogelijk de bestanden header.php en footer.php aanpassen.
Hoe werkt dat…

LAAT de PARENT INTACT!
Kopieer het aan te passen bestand naar de map van het childtheme.
Maak dan de wijzigingen in het betreffende bestand in het childtheme.

== == ==

als ik nu iets wil toevoegen aan style.css dan zet ik dat in het childtheme ,maar als ik nu iets wil verwijderen of veranderen?

Om succesvol te werken aan een website is het belangrijk dat je de basisbeginselen onder de knie krijgt van HTML en CSS. Je hoeft geen expert te worden, maar met wat basiskennis gaat het een stuk makkelijker 😉

De stylesheet van het CT heeft in de basis alleen een ‘kop’ die de koppeling maakt met de parent [het originele theme].
Zolang er niks in staat, gebeurt er niks.

Vervolgens plaats je de gewenste wijzigingen.
Hieronder wat voorbeelden.

Parent:

body {
     font-size: 62.5%; /*grootte van de tekst*/
     background: #fff; /*achtergrondkleur*/
     background-image:url('achtergrond.gif');
        font-family: sans-serif; /*lettertype*/
     line-height: 22px; /*regelafstand*/
     color: #444; /*tekstkleur*/
}

CHILD
Vervolgens hoef je alleen DIE zaken aan te passen of toe te voegen die jij wilt.

body {
     font-size: 45.5%; /*grootte van de tekst kleiner*/
     background: #0000FF; /*achtergrondkleur veranderd*/
     background-image:none; /*achtergrond-afbeelding verwijderd*/
        font-family: universe; /*ander lettertype*/
     line-height: 12px; /*regelafstand kleiner*/
     color: #99cc66; /*tekstkleur appeltjes groen*/
        margin-left:25px; /*marge-links toegevoegd*/
}

Wil je zaken VERWIJDEREN zoals menu-balken, elementen in de lay-out, dan kijk je waar je dat het handigst doet:

• mbv CSS
• door het PHP-bestand aan te passen

Je vertelt niet wat je NIET wilt met een element, maar wat je dan wel wilt

background-image:none; /*achtergrond-afbeelding verwijderd*/

== == ==
Hoe weet je wat je moet aanpassen…

Het zoeken naar welke css / php / HTML je moet aanpassen is een beetje een puzzel.
Gelukkig zijn daar goede gereedschappen voor.

>>
In je browser: rechtsklik in de browser en kies ‘element inspecteren’
Deze gereedschappen laten je ‘onder de motorkap’ van je site kijken.

1. re-klik > element inspecteren
2. Het sub-scherm opent:

* bovenin de webpagina
* het sub-cherm met eigen werkbalkje en iconen
* li-onder: scherm met ‘style | computed | event listeners >>’
* re-onder: stijl= css

3. In de sub-scherm: klik het eerste icoon van links [vergrootglas];
4. Beweeg je muis over de webpagina [en klik]. Hiermee selecteer je een element in de webpagina, om daarmee de code zichtbaar te maken in het sub-scherm
5. In het sub-scherm:

* Links: de HTML-code van het gekozen element
* rechts: de stijl =CSS
* klik in de css en verander de waarde; kleur grootte of voeg een regel toe
* controleer in het deel van de webpagina of het gewenste effect wordt bereikt
* Nee? Druk <F5> verversen browser. Probeer iets anders
* Ja: neem de aanpassing op in de ‘style.css’ van je childtheme
== == ==

Veel plezier!
== == == leesvoer
http://www.w3schools.com/css/default.asp
http://codex.wordpress.org/Getting_Started_with_WordPress
http://codex.wordpress.org/CSS
http://codex.wordpress.org/Finding_Your_CSS_Styles
http://codex.wordpress.org/FAQ_Troubleshooting
http://codex.wordpress.org/Backing_Up_Your_Database
Natuurlijk zijn er ook trainingen op het internet te vinden…
bijv. [engels, betaald] Lynda.com:
http://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/154417-2.html
Natuurlijk zijn we op dit forum bereid je verder te helpen met je vragen / keuzes…

Ik ken die plugin niet…
Zo zou ik ’t doen.

1. log in op de oude site
2. Dashboard > extra > exporteren
3. volg de instructies op het scherm
4. Maak een backup van de database [content en settings van site]

== == == IMPORTEREN inhoud //=database van de originele site in je nieuwe [lochalhost] site

1. Dashboard > Extra > IMporteren
2. kies ‘wordpress’
3. kies: Gehele Inhoud
4. selecteer het backup-bestand dat je eerder op je PC hebt opgeslagen
5. Desgevraagd: Installeer en Run IMport plugin
6. volg de instructies op het scherm

Je hebt nu de INHOUD [=teksten en bijv. plaatjes etc.] van de bestaande site overgezet naar je localhost-versie.

== == == WP geïnstalleerd: en wat nu…?

7. bepaal wat voor een soort / type site je wilt hebben
8. voor wie de site bedoeld is en welke wensen en eisen je ‘gebruikers’ hebben
9. bekijk welke zaken daarbij horen / passen op het gebied van

• uiterlijk: indeling, vorm, kleuren etc.
• functionaliteit: blog, krant, webwinkel, vereniging etc.
• etc. etc.

• ga op zoek naar een THEMA dat zoveel mogelijk past bij het bovenstaande
• maak je niet druk om kleuren, lettertypen etc. Die zijn eenvoudig aan te passen
• richt je vooral op layout / opbouw van de pagina’s / berichten
• kijk daarna op de benodigde functionaliteit van de meest favoriete thema’s
• probeer wat thema’s uit; WP heeft vele 10.000-den gratis thema’s, die doorgaans van goede kwaliteit zijn. Begin daar maar eens mee.
• Installeer thema’s mbv je dashboard, kijk rond en probeer of ze voldoen aan je wensen, aanpasbaarheid etc.
• ben je niet tevreden? Niks aan de hand! gewoon een volgend thema installeren en activeren om te kijken of dat beter is. De INHOUD van je site blijft gewoon in orde… no worries.
• Heb je een mooi thema gevonden? Joepie!

== == == Maak een CHILDTHEME

• DASHBOARD >PLUGINS > NIEUWE PLUGIN INSTALLEREN
• zoek CHILDTHEME
• installeer en ACTIVEER de door jou gekozen CT-plugin
• plaats nu de door jou gewenste aanpassingen steeds in /via het CT.

== == ==

• Tijd om de ’toeters en bellen’ te installeren zoals widgets, social media, formulieren, etc. etc. Leef je uit

Je moet je WP gebruikersnaam en WP–password invullen;
Volledigheidshalve, je moet wel inloggen als administrator / beheerder