NemProgrammering.dk logo

Sådan opretter du et child theme

Avanceret WordPress » Sådan opretter du et child theme # 5
Denne video kræver medlemskab
Læs mere!
Sådan opretter du et child theme

Information om denne video

Underviser: Thomas M. Iversen   Video: 16:38   Lektion nr. 5 af 39

I denne video lærer du, hvordan du opsætter og kommer i gang med et child theme i WordPress. Det er vigtigt, når man arbejder med sine temaer i WordPress, at man aldrig laver rettelser direkte i det oprindelige tema, da du herved risikerer, at dine rettelser vil blive overskrevet af en eventuel opdatering af temaet. Det er kun, hvis du har udviklet et tema fra bunden og selv har kontrol over opdateringerne af temaet, at du kan lave rettelser direkte i original temaet.

Med et child tema kan du lave rettelser, som automatisk vil overskrive de ting, som findes i det originale tema (parent theme). Et child theme nedarver altså fra sit parent theme, medmindre der i child temaet er specificeret andet.  Det kan måske være lidt svært at forstå, men efter du har set denne video, så burde det være helt klart, hvad man bruger et child theme til og hvordan du selv kan begynde at lave rettelser til dit tema.

I videoen kopieres og indsættes en kode i functions.php filen, som sørger for at hente de nødvendige CSS filer til child temaet. Du finder koden, der skal indsættes, via dette link.

I næste videolektion skal vi se på, hvordan du via dit nyoprettede child theme kan begynde at lave design rettelser i dit tema. Vi skal eksempelvis se, hvordan du kan ændre baggrundsfarver på forskellige områder eller gøre afstanden mellem sektioner på siden mindre.

Spørgsmål og kommentarer

Kun medlemmer med adgang til dette kursus kan stille spørgsmål og kommentere. Bliv medlem her!

  • mette m. siger:

    Hej Thomas
    Kan man rette HTML i en child theme som en anden har lavet for en uden at lave et udviklingsmiljø og localhost.

    1. Thomas I. siger:

      Hej Mette,

      Ja, hvis din side allerede kører på et child-theme, kan du faktisk gå ind i WordPress under udseende og så “editor”. Her kan du så rette direkte i filerne, men jeg vil klart anbefale, at du henter filerne ned, tager en backup og så uploade igen, når du har lavet rettelser.

      Mvh.

  • Lars L. siger:

    Hej Thomas. Din video er fin, men du henviser i videoen til https://codex.wordpress.org/Child_Theme. Desværre er siden ændret, indholdet er flyttet eller hvad ved jeg. Kan du sende en ny URL med den kode, der skal bruges til functions.php til child themes?

    // Lars

    1. Thomas I. siger:

      Hej Lars,
      Du mangler lige et “s” i url´en ;-)
      https://codex.wordpress.org/Child_Themes

  • Leif C. siger:

    Jeg har indtil nu gennemgået jeres WordPress og CSS kurser, og dette syntes jeg er rigtigt godt.
    Jeg er nu igang med WordPress Avanceret WordPress, her ville jeg også gerne rose jer, men det kræver at der er noget at rose, i kommer for let hen over det.
    Allerede i afsnittet om Child bliver der skiftet editor, og hvorfor lige det. Atom med mørk baggrund er så svært at læse fra jeres video, i brude i det mindste have valgt hvid baggrund. I videoen startes med 2 filen (funktions og style) hvor der skal kopieres tekst ind fra en WP hjemmeside, men denne side har skiftet struktur siden i lavede videoen, så det nu er umuligt at finde. Det er sikkert ikke det sidste jeg har at klage over, men jeg skal nok lade høre fra mig.
    Hilsen Leif Christophersen

    1. Thomas I. siger:

      Hej Leif,

      Tak for din kommentar.

      Du har ret i, at det er lidt forvirrende at vi skifter editor. Derfor arbejder jeg pt. også på at genoptage de første videoer, så vi bruger Atom fra start. Jeg er faktisk i tvivl om Atom kan køre hvid baggrund. Grunden til at alle nyere editors (deriblandt Atom) anvender en sort baggrund er for at skåne øjnene, da det kan været hårdt at kigge på en hvid skærm mange timer i træk. Derudover bruger det også mindre strøm med en sort baggrund ;-)

      Angående siden som du skal kopiere fra, som har skiftet struktur, er jeg ikke helt sikker på hvad du mener. Går du ind på https://codex.wordpress.org/Child_Themes som der linkes til under videoen, så er siden mere eller mindre den samme som da jeg optagede videoen – måske du er røget ind på en forkert side?

      Mvh.
      Thomas

  • Morten A. siger:

    Hej Thomas

    Jeg har nogle problemer med at bibehold hastigheden på en webside, når jeg begynder at redigere i mit child theme.
    Jeg har feks. tilføjet lidt Php og lidt jquery, men kan se det slikker lidt på hastigheden på siden.
    Er der noget jeg skal sørger for, når jeg tilføjer noget, er der noget bestemt jeg skal huske. Er der en bestem måde jeg skal kode på, og hvordan sikre jeg mig et er den rigtige måde.
    Jeg er ikke Webdesigner eller noget der ligner. Men har altid selv lavet CMS systemer, slet ikke i den dur som WordPress :D
    Er der en bestemt måde jeg skal kode på, for ikke at påvirke den for meget. Er igang med at lave et child theme til storefront temaet.

    Med venlig hilsen
    Morten

    1. Thomas I. siger:

      Hej Morten,

      Tak for dit spørgsmål.

      Jeg kan desværre ikke give dig en “best practice” i forhold til, hvordan du skal kode i WordPress. Det er egentlig meget det samme som hvis du kodede dit eget CMS, nemlig at det skal være “god” kode – der er ikke en bestemt måde der er rigtig eller forkert i WordPress.

      Du snakker om at dit child-tema ødelægger hastigheden – hvor mange milisekunder snakker vi om?

      Jeg har aldrig oplevet at mine child-themes ødelægger sidens hastighed, men spørgsmålet er nok også, hvad det er du forsøger at bygge ovenpå via dit child-theme – måske noget tungt? Måske med databasekald eller andet der kan sænke sidens hastighed?

      Har du prøvet at debugge dig igennem det du selv har lavet for at finde frem til synderen i forhold til hasigheden?

      1. Morten A. siger:

        Hej Thomas

        Tak for svar :)

        Jeg kiggede lidt på det med hastighed den siger 6.64 sek. Tjekkede det med “tools.pingdom”
        Har aldrig oplevet så meget før, har også lavet child theme andre gange, hvor det ikke har nogen effekt på hastighed.

        Det jeg har lavet er et ekstra kald af en menu:
        register_nav_menus(
        array(
        ‘pige-menu’ => __( ‘Pige Menu’ )
        )
        );
        Under functions filen.

        Og så for at hente den i header:
        ‘pige-menu’, ‘menu-position’ => ‘wp-sites’, ‘container_class’ => ‘dreng_pige-navigation’ ) );

        ?>

        Er det dårlig kode??

        Og så har jeg lavet noget Jquery til at gøre menu header forsvinder når man scroller ned og når man scroller op kommer den frem.
        Tænkte ikke det havde nogen effekt på storefront temaet.

        Håber ikke jeg stiller for mange spørgsmål, tænkte du måske kunne se, om det er noget som skulle sløve.

        Med venlig hilsen
        Morten

        1. Morten A. siger:

          Hov det er som om når jeg vil ligge det ind forsvinder det her inde :D
          Prøver igen:

          $url = $_SERVER[“REQUEST_URI”];

          $pige = strpos($url, ‘pige’);
          $dreng = strpos($url, ‘dreng’);

          if ($pige!==false)
          {
          wp_nav_menu( array( ‘theme_location’ => ‘pige-menu’, ‘menu-position’ => ‘wp-sites’, ‘container_class’ => ‘dreng_pige-navigation’ ) );
          }
          elseif ($dreng!==false)
          {
          wp_nav_menu( array( ‘theme_location’ => ‘dreng-menu’, ‘menu-position’ => ‘wp-sites’, ‘container_class’ => ‘dreng_pige-navigation’ ) );
          }

          1. Thomas I. siger:

            Hej Morten,

            Den smule kode burde ikke give det helt store udslag.
            Du bruger Pingdom, hvilket må betyde, at din side er live – kan du sende et link? Så kan jeg selv teste den.

            Jeg er dog ikke hastighedsekspert, så det er ikke sikkert jeg kan finde fejlen (hvis der er en)

            Har du prøvet et andet tema og lave de samme ændringer i et child-tema i dette. Måske er det hovedtemaet, der ikke håndterer child-temaer specielt godt.

            Mvh.

            1. Morten A. siger:

              Hej Thomas

              Lyder som en god test løsning.

              Jeg sender det lige på din mail håber det er iorden.

              Med venlig hilsen
              Morten

  • Carsten Lund M. siger:

    Hej Thomas, kan Atom editoren bruges på andet, end på en local host server, jeg har hidtil brugt TextWrangler, hvor der er en mulighed for at forbinde til en FTP server, denne mulighed kan jeg ikke finde i Atom, under open, kan der kun åbnes lokale filer?

    1. Thomas I. siger:

      Hej Carsten,

      Nej i Atom er der som standard ikke indbygge FTP-funktionalitet, men der findes en lang række plugins til Atom, som du kan installere for at få den FTP funktionalitet du ønsker.

      Se her: https://atom.io/packages/search?q=ftp

      Mvh.
      Thomas

      1. Carsten Lund M. siger:

        Hej Thomas, tak for link til FTP packages til Atom, umiddelbart lidt svært at finde ud af, dels, hvordan man henter pluginen ned, og hvordan installationen med atom foregår.
        Har du erfaring med nogen af de listede?

        Hilsen Carsten

        1. Thomas I. siger:

          Hej Carsten,
          Ja, det er desværre ikke så lige til som i andre IDE´er
          Personligt plejer jeg at gøre det, at jeg laver alt lokalt, og når jeg er tilfreds, så pusher jeg via Filezilla FTP. Derfor har jeg ikke prøvet nogle af deres packages af.
          Men som sagt, hvis du gerne vil have en editor med FTP indbygget, så er der ikke noget i vejen for at du prøver dette af istedet. Her kan du f.eks. se på NetBeans, Dreamweaver, Notepad++ eller Coda.
          Mvh.

          1. Carsten Lund M. siger:

            Hej Thomas, tak for svaret.
            Problemet for mig, med at bruge local host, er at BuddyPress som tidligere nævnt, ikke fungerer herunder.
            Atom FTP bliver for kompliceret, så jeg vælger at bruge TextWrangler, som jeg kender. Ulempen, i forhold til Atom, er at jeg ikke bare kan kopiere mapper og filer til mit child theme, til gengæld kan jeg oprette nye mapper og filer, og så bare kopiere indholdet over, og det fungerer også fint.

  • Carsten Lund M. siger:

    Hej Thomas, på 14:20, beskriver du, hvordan du sletter filer fra template-parts mappen. Jeg ved ikke, hvordan du gør det, for jeg har googlet emnet lidt, da jeg ikke har tilladelse til at slette emner, og en fejl fremkommer
    The following file couldn’t be moved to the trash.
    /Users/navn/.bitnami/stackman/machines/xampp/volumes/root/htdocs/domain/wp-content/themes/twentyseventeen-child/template-parts/post
    Is Trash enabled on the volume where the files are stored?

    Problemet er beskrevet af andre herunder:
    >Atom doesn’t allow you to delete a project root directory from disk via the Tree View, this is true. This is an intentional choice to prevent people from accidentally deleting a bunch of files when they meant to remove a root directory from their project, not delete it from disk.<
    https://discuss.atom.io/t/can-not-delete-files-from-tree-view/37639

    1. Thomas I. siger:

      Hej Carsten,

      Du behøver nødvendigvis ikke at slette mappen via Atom, hvis det ikke fungerer. Du kan også sagtens bare gå ud og slette mappen og dens filer, som du normalt ville gøre det på din computer. Når du så går ind i atom igen, så er mappen væk.

      Mvh.
      Thomas