Information om denne video
Underviser: Thomas M. Iversen Video: 16:38 Lektion nr. 5 af 39
Vigtig info: Atom er blevet udfaset. Vi anbefaler at du i stedet bruge Visual Studio Code som editor.
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.
Jeg bøvler med filen function.php
Jeg kan ikke finde ud af hvordan den skal se ud….
Torben
Men det refererer ikke til noget i det oprindelige tema…..
Det er lidt Hokus-Pokus :)
Jeg løste et med lidt snyd.
Downloadede plugin: Child Theme Wizard, som har dannet den korrekte kode til functions.php.
Jeg kan ikke rigtig vise koden her, men den ligner ret godt det som jeg har set under min læsning af diverse sider.
Nu videre til noget mere kreativt :)
Hej Torben,
God du fandt ud af det :-)
Hej Thomas,
Det var fint med introduktionen til Atom. Desværre er Atom en synkende sol – jf. deres Atom.io.
Den bliver ikke længere vedligeholdt og kan altså ikke længere anbefales at bruge.
I WordPress fællesskabet er det lige nu den fremstormende Visual Studio Code/ VS Code der anbefales. I mange af de instruktionsvideoer, der benyttet på learn.wordpress.org er det også Visual Studio Code, der anvendes.
Den minder en hel del om Atom – og er nok til dels baggrunden for at Atom ikke længere udvikles.
Tænkte lige at bidrage med denne information – også for nye, der har lyst til at kaste sig ud i Avanceret WordPress.
Hej Claus,
Tak for dit input – det er rigtigt at Atom udfases, og jeg er selv begyndt at bruge VS code i stedet.
Jeg har tilføjet en lille note herom under videoen :-)
Mvh.
Kodeeksemplet til functions.php på https://developer.wordpress.org/themes/advanced-topics/child-themes/
mangler php start og slut kode:
Hej Thomas,
Farven på søgeikonen ændres ikke i min child theme, når jeg ændre koden i style.css file for child theme. hvad kan dette skyldes.
Hej Sabaon,
Prøv at bruge !important – der er sikkert noget style et andet sted som bliver brugt fremfor det du skriver i style.css.
Mvh.
He Thomas
Jeg har oprettet et child-theme til et tema, som hedder Refresh Blog.
Der er anvendt de aktuelle kodestykker fra wordpress.org.
Når jeg aktiverer temaet, oplever jeg at der sker ændringer på siden, konkret at noget tekst i hhv. header og footer skifter farve samt at noget padding på et element i headeren ændres.
Dette sker uden at jeg har indsat nogen form for kode i style.css.
Kan du give et bud på hvad der går galt?
Mvh Tony
Hej Tony,
Det er ret svært at sige uden at sidde med temaet i hånden. Mit bedste bud er at dit parent theme bruger noget css fra plugins, som ikke følger med over, når du skifet til et child-theme.
Mvh.
Det link, du bruger til koden til functions.php melder:
This page was moved to https://developer.wordpress.org/themes/advanced-topics/child-themes/ except above language locator.
Hvis jeg tager koden derfra, får jeg fejlen:
Parse error: syntax error, unexpected ‘&’ in C:\xampp\htdocs\minside\wp-content\themes\twentyseventeen-child\functions.php on line 11
Og det er på en helt frisk og tom installation. Med temaet Twentyseventeen.
googlede mig frem til denne version, der virker:
get(‘Version’)
);
}
?>
Hov. Hele koden:
get(‘Version’)
);
}
?>
ok den skærer det af, ved ikke, hvordan jeg får det ind her. Pointen er, at det giver fejl med den kode, der står på WP’s egen side
Hej Mette,
Tak for dit svar – ja, jeg kan godt se, at siden er blevet flyttet – jeg har nu ændret linket.
Koden du finder på den nye side er rigtig nok, men der er sørme sneget sig en fejl ind på deres egen side.
Hvis du ser på den sidste linje i begge kodeeksempler, så slutter den med “?>”. Dette er forkert, det skal erstattes med “?>”, som er det som lukker din php kode.
Efter den ændring burde det virke!
Er det ikke det samme du skriver? Der står “?>” begge steder.
Hej Tony,
Det har du egentlig ret i – jeg huske desværre ikke, hvad fejlen var, og det ser ud til at den er blevet rettet nu. Men det er stadig rigtigt, at koden altid skal afsluttes med ?>
Mvh.
Nyt problem:
jeg kan ikke få andre sider frem end forsiden.
Hvis jeg beder om http://localhost/minside/wp-admin/themes.php redirecter den til http://localhost/dashboard/
og det sker uanset, hvad jeg skriver eller klikker på
arghhh…den havde ikke taget alle tabellerne med fra databasen.
Og når jeg nu prøver, får jeg denne fejl:
#1050 – Tabellen ‘wp_wpml_mails’ findes allerede
og den tager ikke det hele med. Bud på hvad jeg kan gøre?
tilføjede IF NOT EXISTS
det hjalp med importen
Super – håber det virker nogenlunde nu – det kan godt være lidt bøvlet at importere sin egen side. Alternativt, kan du altid følge kurset ved at arbejde i en frisk WP installation i det standard tema der følger med.
Efterfølgende, kan du så se om du kan få importeret dit eget og arbejde på det.
Jeg vil meget gerne gøre det på den rigtige side. Ellers vil jeg jo ikke rigtig kunne bruge det, jeg lærer. Det skal jo bruges på det site.
Nu er jeg startet helt forfra. Database osv går fint igennem. Men får nu denne:
Parse error: syntax error, unexpected ‘;’, expecting ‘)’ in C:\xampp\htdocs\mysite\wp-includes\formatting.php on line 5746
Fatal error: Uncaught Error: Call to undefined function load_default_textdomain() in C:\xampp\htdocs\mysite\wp-includes\class-wp-fatal-error-handler.php:41 Stack trace: #0 [internal function]: WP_Fatal_Error_Handler->handle() #1 {main} thrown in C:\xampp\htdocs\mysite\wp-includes\class-wp-fatal-error-handler.php on line 41
Har du nogen som helst anelse om, hvad jeg kan gøre?
Jeg er helt med på, at det ligger ud over kurset. Men måske du kan skubbe mig i rette retning
ok har besluttet at lave en clean installation lokalt og så prøve at sætte det hele op forfra og importere mine data til sidst (som vel er det, du foreslår).
Hvordan gør man egentligt med licensnøgler til temaer og plugins, som man har betalt for? man kan jo ikke installere dem to gange?
Hej Thomas
Kan man rette HTML i en child theme som en anden har lavet for en uden at lave et udviklingsmiljø og localhost.
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.
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
Hej Lars,
Du mangler lige et “s” i url´en ;-)
https://codex.wordpress.org/Child_Themes
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
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
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
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?
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
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’ ) );
}
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.
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
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?
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
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
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.
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.
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
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