Sådan opretter du en ‘Sticky’ Footer i Divi

“Content is King” som man siger, men nogle gange har man bare ikke nok indhold til at fylde hel side ud. F.eks. hvis man bare vil oprette et lille billedgalleri eller blot en side med et lille stykke tekst.

Problemet med at indholdet ikke fylder siden hel ud er dog kun visuelt og at footeren, den nederste linje kommer til at hoppe og danse midt på din computerskærm og at det kan ende med at se lidt underlig ud og ikke så professionel som du gerne vil have den til.

SKÆRMBILLEDE // på billedet kan man se footernes placering midt på siden.

Løsningen i Divi er enkelt

Når du har tilføjet denne kode til den korrekte sektion i Divi, vil din footer automatisk placere sig helt i bunden browservindue når du ikke har nok indhold.

Fra dit kontrolpanel skal du navigere til Divi -> Temaindstillinger-> Integrering og tilføje koden til < BODY > (god til tracking koder såsom Google Analytics).

Husk at gem ændringer

Her er koden:

<script>// <![CDATA[ var th = jQuery('#top-header').height(); var hh = jQuery('#main-header').height(); var fh = jQuery('#main-footer').height(); var wh = jQuery(window).height(); var ch = wh - (th + hh + fh); jQuery('#main-content').css('min-height', ch); // ]]></script>

Gem

SKÆRMBILLEDE // på billedet kan man se footernes placering nederst på siden.

Nu da koden er blevet tilføjet, kan du se hvordan footeren nu holder bund på siden.

God fornøjelse

Udskift standard footer med en global Divi Builder footer fra Divi-biblioteket

Kategori: Divi

Divi giver dig mulighed for at oprette cool footers ved hjælp af Divi Builder og med en global Skabelon, skal du kun foretage ændringer på ét sted.

Men desværre er du stadigvæk nødt til at tilføje dit custom footer modul manuelt til hver enkelt side, da der ikke er nogen indbygget automatik der gør, at dit custom footer modul blive vist på indlægssider, arkivsider og kategorisider osv.

I denne tutorial vise jeg dig, hvor nemt det er at få dit custom footer modul automatisk tilføjet i hver enkelt side og indlæg ved hjælp af .php og uden at skulle tilføje det manuelt til hver enkelt side.

Jeg kan kun anbefale at du opretter og arbejder i et Child-team. Hvis du ikke ved hvordan man opretter et Child-team, har jeg lavet en anden tutorial her du kan følge.

Som det første skal du oprette en footer sektion og gemme den til Divi-biblioteket.
Navngiv skabelonen og husk at vælge ‘Sektion’ som Skabelontype.
Opret en global footer sektion efter eget valg.

Indsætning af footer-sektionen i temaet

For at få det hele til at fungere, skal vi kende det nummer som Divi tildeler den footer sektion du netop har lavet og indsætte det i siden footer.php med en stump kode også kaldet for en snippet. Måden du finder ud af nummeret på er ved at gå ind i dit Divi-bibliotek og åbne det gemte layout.
Når du har åbnet footer layoutet, skal du tjekke webadressen. I webadressen finder det unikke nummer som Divi har tildelt den footer sektion som du netop har lavet.

I mit eksempel er nummeret 25400

I Kontrolpanel > Udseende > Editor finder du i højre side under Skabeloner filen footer.php
Find denne kodelinje:
Lige under den pågældende kodelinje tilføjer du dette nye kodestykke
Husk at erstatte mit nummer (25400), med det nummer som Divi har tildelt den footer sektion.

Du kan enten selv skrive koden eller kopier koden fra dette dokument som har rich text fil-format.

God fornøjelse

Swop logo i Divi når man Scroller ned

Kategori: Divi

Jeg anbefaler at det første der skal gøres, er at lave et Child theme. Derved overskrives ændringerne i temafilerne ikke, ved fremtidige opdateringer af temaet.

En let løsning til at lave et Child theme er f.eks. at bruge et plugin. Jeg har selv startet med at brugt plugginet Child Theme Configurator, som er super nem at sætte op.

Efter du oprettet et Child theme og valgt det som tema, laver du en kopi af filen header.php da det er i header filen at du skal sætte lidt kode ind.

Hvis du på nuværende tidspunkt ikke har uploadet det andet logo til medie biblioteket, det som du ønsker at swoppe det orginale med, skal det gøres nu (det er det logo som jeg referere til som logo2)

Maker Logo2 i medie biblioteket, så man kan se detaljer om billedet

Nu hvor billede detaljerne er fremme kopier og sæt URLen ind i f.eks. Notepad.

Gå i Kontrolpanelet -> Udseende -> Editor

Her kan temas header fil redigeres.

I denne fil skal man finde følgende originale kode:

Og indsætte følgende kode:

Nu indsættes logo2s URL (som tidligere blev gemt i Notepad), hvor der i koden står “2nd logo url”

Til sidst mangler nu kun lidt CSS-magi

Følgende kode sættes ind i Kontrrolpanel -> Divi -> tema tilpasser -> Ekstra CSS

/*———————————————————-*/
/*——– [ SWAP LOGO // on scroll ] ——*/
/*———————————————————-*/

#logo2 {
 display: none;
 }

.et-fixed-header #logo {
 display:none;
 }

.et-fixed-header #logo2 {
 display:inline;
 }

Nu skulle logoerne gerne Swoppe når der Scrolles på siden.

Alt efter indstillingerne i header kan det godt være man også er nød til at give .et-fixed-header #logo2 en max-height og padding-top

God fornøgelse

Sådan laver du et WordPress Child theme

Kategori: Divi

WordPress Child theme

Grunden til at jeg opretter et Child theme er fordi jeg gerne vil have at de tema ændringer jeg foretager efterfølgende bliver gemt ved opdatering af original temaet.

På den måde slipper jeg for hver gang der er større tema opdateringer, efterfølgende at gå ind og genskabe de ændringer jeg har foretaget.

1. Det første man skal gøre er at tilgå hjemmesiden via FTP, her navigere man ind til tema biblioteket i WordPress installationen.Hvis din installationen ligger i roden på sitet, ser det nogenlunde sådan ud:

/wp-content/themes/

2. Opret en ny og tom mappe også kaldet for et bibliotek under themes.
Jeg vælger at oprette et tema kaldet frankroth-2017, så mit bibliotek kommer til at se sådan ud:

/wp-content/themes/frankroth-2017/

Jeg anbefaler altid kun at bruge små bogstaver til navngivning af biblioteket og af fil navne generelt, da det er det flest servere kan forstå

Store bogstaver, æ, ø, å og andre speciale tegn her under også mellemrum skal man holde sig fra når der oprettes filer eller biblioteker.

3. Gå ind i det nye bibliotek og opret en ny Stylesheet fil. Filen skal hedde style.css

/wp-content/themes/frankroth2017/style.css

Det er vigtigt at navnet style.css bruges til denne fil, da det er den fil WordPress kigger efter for at finde ud af hvad der gemmer sig i et bibliotek under /themes/frankroth2017 mappen.

Når et tema er aktivt inde i wp-admin, aflæses style.css filen for at afgøre hvorledes temaet tager sig ud.

4. Vi skal nu sørge for at vores nye mappe og ene fil faktisk ER et tema. Vi laver ikke et hele temaet, men vælger blot at refererer til det eksisterende tema og de elementer WordPress kræver af temaet. Det gør vi i tilfælde af, hvis WordPress ikke kan finde vores child theme mappe.

Et child theme har første prioritet i forhold til det original tema, derfor overskriver det css definitioner forældre temaet måtte have, med de definitioner man selv ønsker.

Her kan du se hele den tekst, eller KODE som du skal skrive ind i din tomme style.css

/*
 Theme Name: Divi child tema
 Author: Frank Roth
 Author URI: http://www.frankroth.dk
 Template: Divi
 Version: 1.0.0
 */
 /* =Dit child temas css overskrivninger starter her
 -------------------------------------------------------------- */

Alt tekst der står mellem en /* og en */ er en kommentar, og ikke noget kode andre systemer end WordPress bruger til noget.

“Theme name:” er dit selvvalgte navn til dit tema. Her må du gerne være vildere end frankroth2015, og det kunne f.eks. godt hedde frankroth child tema for 2017.

“Description:” er en forklaring til temaet som vises i wp-admin området under Udseende – Temaer, så her kan det betale sig at give en forklaring på hvad dette tema gør eller kan.

“Author:” er dit navn. Benyt gerne dit brugernavn fra WordPress.org, så folk kan finde dig hvis de gerne vil have hjælp 😉

“Author URI:” er en henvisning til hvor folk kan finde dig på nettet. Det er måske ikke super relevant hvis du bare laver dit eget tema, men det er her du kan finde ophavsmanden til andre temaer du bruger.

“Template:” er SUPER VIGTIG, og skal være 100% lig med parent temaets biblioteksnavn. I mit tilfælde er det “Divi” med små bogstaver lige som biblioteksnavnet.

Det er blandt andet her vi fortæller WordPress at vi bygger dette tema oven på et andet, en template 😉

“Version:” ikke vigtig, men for kodenørder er det godt at holde styr på hvor mange gange man har været i gang med at ændre på ens kode 😉

For at give vores nye style.css fil vægt, skal den inkluders via en functions.php fil

Når vi sætter vores nye style.css fil i kø efter parent temaets style fil, vil vores child theme overskrive parent temaets styles.

functions.php filen oprettes på samme måde som style.css, og skal indeholde:

<?php
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array('parent-style')
 );
 }

Her beder vi WordPress sætte parent themets style.css i kø før vores child theme style.css.

Alt fra parent temaets style.css kommer altså til at stå før de CSS definitioner vi laver i vores child theme. Det er derfor vi kan overskrive et parent themes CSS.

Min style.css fil kommer med mit child theme navn til at se således ud:

/*
 Theme Name: frankroth2017
 Description: Divi Child Theme
 Author: Frank Roth
 Author URI: http://www.frankroth.dk
 Template: Divi
 Version: 1.0.0
 */
 /* =Theme customization starts here
 -------------------------------------------------------------- */

5. Når style.css og functions.php filerne er gemt, er det tid til at gå ind under:

Udseende > Temaer

Før musen hen over temaet med dit navn, og tryk på den grå “Aktiver” knap.

Skete der ikke noget specielt ? – Så har du gjort det hele rigtigt, og din side kører nu et tomt child theme, klar til dine egne CSS ændringer.

En anden metode

Hvis du måske syntes det lyder besværligt eller, du bare er for doven til at installere sætte et Child theme fra bunden, findes der også en anden mulighed. Der er flere udviklere der har programmeret gratis plug-ins der kan gøre for dig f.eks Lilaea Media, hvis Child Theme Configurator plugin jeg selv har brugt flere gange.

Den tredje metode

Hvis man bruger Divi eller Extra som Parant theme, kan man som et alternativ til at benytte et plugin oprette et Child theme via forskellige online tjenester som f.eks.:

https://divi.space/divi-child-theme-builder/

Her udfylder man et skema og når man trykker på “GENERATE” bliver der sendt en mail til dig, som indeholder et downloadlink til dit Child theme.

Så er der bare tilbage at installere Child themet som et hvert andet tema og aktivere det.

God fornøjelse

Lav en 404 fallback i Divi

Kategori: Divi

Tilføje indhold

1. Hvis du ikke allerede har oprettet et Child theme, er det et godt tidspunkt at gøre det nu.
2. I Child theme mappen opret en includes mappe, med en fil der hedder no-results.php
3. Åben filen no-results.php (hvis filen ikke er tom, skal alt indhold slettes).
4. Nu hvor filen no-results.php er tom, indsæt nyt indhold:

<div class="entry">
 <!--If no results are found-->
  <?php $id = ###; $p = get_page($id); echo apply_filters('the_content', $p->post_content); ?>
 </div>
 <!--End if no results are found-->

Page ID

Hvis du ikke allerede har oprettet en 404 side i kontrolpanel->ny side skal det gøres nu og gemme siden som klade.

Det skal du gøre for at finde sidens Page ID, og den finder du ved at forhåndsvise siden. Page Id nummeret kan nu findes i browserens winduets URL.

Page Id nummeret kopieres og nu åbner du no-results.php i den indbyggede Editor i WordPress

Udseende->Editor

Først vælges det tema der skal redigeres i (det Child theme man har oprettet), derefter vælges filen no-results.php

I filen no-results.php finder man i koden de 3 ###, og det er her man indsætter Page Id nummeret.

Til slut, det sidste stykke af puslespillet

.error404 #main-content .container, .error404 #content-area, .error404 #left-area {
 padding: 0 !important;
 margin: 0 ;
 width: 100% !important;
 max-width: none;
 }
 .error404 #sidebar {
 display: none;
 }
 .error404 .et_pb_post:last-child {
 margin-bottom: 0;
 }

Nu har du en 404 side uden resultater skabelon, som visuelt passer til resten af sitets sider og kan tilpasses i divi builder’en.

Gem

Sådan opretter du en ‘Sticky’ Footer i Divi

Løsningen i Divi er enkelt

Her er koden:

Udskift standard footer med en global Divi Builder footer fra Divi-biblioteket

Indsætning af footer-sektionen i temaet

Swop logo i Divi når man Scroller ned

Sådan laver du et WordPress Child theme

WordPress Child theme

En anden metode

Den tredje metode

Lav en 404 fallback i Divi

Tilføje indhold

Page ID

Til slut, det sidste stykke af puslespillet

Wordpress / Divi