Support » Algemeen WordPress » Een nieuw thema testen in WordPress Multisite

  • Hi allemaal,

    Ik heb een klein vraagje over WordPress Multisite.

    Op dit moment heb ik een wordpress website waarbij ik erg gelimiteerd wordt door mijn wordpress thema. Ik heb een betere template gevonden waarvan ik zeker weet dat dit thema the one is. Nu wil ik mijn website langzaam opbouwen en testen in de nieuwe template.
    Omdat ik mijn huidige website online wil houden terwijl ik aan de nieuwe werk zoek ik een optie om als de nieuwe website af is deze met een paar klikjes online te zetten en de oude offline zonder hier aparte servers voor aan te schaffen.

    Mijn vraag is dus:
    Kan ik mijn WordPress website omzetten naar een WordPress multisite en vanuit daar een 2e website maken met een ander thema om als volgt deze onder hetzelfde domeinnaam online te krijgen als de nieuwe website (en de oude website offline behouden voor als ik deze later nog nodig heb.)

    Alvast bedankt.

1 reactie aan het bekijken (van in totaal 1)
  • Hi,
    Hier zijn meer opties mogelijk:

    1. maak een ‘localhost’ testsite en zet die na afronding online
    2. maak een tijdelijk subdomein bijv. ‘test24.mijndomeinnaam.com’ en ontwikkel hier je nieuwe site en verplaats die na afronding naar het hoofddomein
    3. verbouw in de live site… ?dom / dapper?
    4. anders

    De 1e optie is het veiligst en relatief eenvoudig.

    == == == details

    • 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. >>

    3. 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.
    4. == == == 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

    5. Dashboard > Extra > Exporteren
    6. kies: Gehele Inhoud
    7. Desgevraagd: Installeer en Run Export plugin
    8. Sla exportbestand op de PC op
    9. 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.

    10. start de ‘windows installer’ en volg de instructies op het scherm
    11. start de ‘xampp setup wizzard’
    12. installeer in de standaardmap ‘C:\XAMPP’
    13. vink UIT ‘learn more about Bitnami for xampp’ > next
    14. >’setup is now ready to begin installing XAMPP on your computer’ >next
    15. ..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

    16. 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.
    17. == == == XAMPP is succesvol gestart

    18. browser:’http://localhost’ >kies de gewenste taal
    19. het welkom!-scherm opent – in de li-zijbalk vind je alle functies / info
    20. == == == installeren mbv BITNAMI

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

    32. Dashboard > Extra > IMporteren
    33. kies ‘wordpress’
    34. kies: Gehele Inhoud
    35. selecteer het backup-bestand dat je eerder op je PC hebt opgeslagen
    36. Desgevraagd: Installeer en Run IMport plugin
    37. volg de instructies op het scherm
    38. 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…?

    39. bepaal wat voor een soort / type site je wilt hebben
    40. voor wie de site bedoeld is en welke wensen en eisen je ‘gebruikers’ hebben
    41. 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…

1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Een nieuw thema testen in WordPress Multisite’ is gesloten voor nieuwe reacties.