Category: Danske Tutorials

Her finder du en række danske WordPress tutorials.

  • WordPress 6.7 er klar

    WordPress 6.7 er klar

    To videoer om den nye version af WP 6.7:

    Den nye version af WP kommer selvfølgelig med en ny version af standardtemaet, som præsenterer de nyeste muligheder med WP. Uanset om du bruger standardtemaet eller noget andet, så er det altid en god ide at sætte sig ind i nyhederne.

    Officiel video for udgaven
    Som altid har Jamie Marsland en introduktion til de nye muligheder.
  • Hvordan laver man “margin” omkring en gruppe?

    Hvordan laver man “margin” omkring en gruppe?

    Løsning:

    Prøv at sætte en bred border på gruppen – og giv denne border samme farve som sitets baggrund!

  • Onepager princippet

    Onepager princippet

    I princippet handler onepagers om at navigere fra et link til et “anker” (anchor) på en webside. Onepagers gør dette på en ekstrem måde. Som regel er ankeret en id i et element.

    Du kan tilføje et anchor ved at:

    • marker blokken i Dokumentpanelet
    • under “Blok” skal du klikke på “Avanceret”
    • her kan du tilføje en “anker”

    Når du vil navigere til et anker skal du lave et link. Du kan linke fra mange elementer, fx knapper, billeder, nogle markerede ord etc.

    Lad os sige, at du kalder dit html anker hobbies. Da skal det link du laver pege på det sådan:

    Relative eller Absolutte links?

    Linket herover er relativt, dvs. en kort form. Hvis din WP-løsning har flere sider, så virker det relative link ikke fra andre sider eller indlæg. Derfor vil jeg anbefale, at du bruger absolutte links i stedet for. Et absolut link er hele URL’en til siden eller indlægget med tilføjelse af #hobbies, fx sådan:

    https://thoth.dk/index.php/background-image/#hobbies

    Fordi at WP-løsninger sjældent er rene onepagers, vil jeg anbefale, at du vælger de absolutte links frem for de relavite.

    Knappen øverst i denne artikel peger på et anker over billedet.

    Knappens link ser sådan ud:

    https://thoth.dk/index.php/2024/09/10/onepager/#gruOgGys
  • Eksport af tema

    Eksport af tema

    Sådan kan du eksportere dit tema. Resultatet er en *.zip som du kan importere i en anden WP installation og anvende som tema.

    Åbn > Udseende > Editor > “blyant-ikon” > “kebab” yderst og øverst til højre. Et vindue åbnes, og her trykker du på Eksport.

    Hvis du redigerer filen style.css – og ændrer temaets navn, så vil WP opfatte dette som et nyt tema. Det er nok den hurtigste måde til at lave sit eget tema.

    Og hvis du redigerer filen screenshot.png til noget, der ligner dit eget design – så er det billedet man ser i Kontrolpanelet.

    I mappen styles/ ligger en række JSON-filer. Hvis du kopierer en af dem – eller theme.json – og omdøber filen til noget andet, så kan du lave dine egne varianter af temaets stilarter.

    Screendump af eksport af tema.
  • En ny karrusel

    En ny karrusel

    Sådan kunne løsningen se ud, når du implementerer en karrusel fra W3 Schools i en “Tilpasset HTML” blok.

    1 / 3

    Caption Text

    2 / 3

    Caption Two

    3 / 3

    Caption Three




    CSS, HTML & JavaScript

    Herunder ser du indholdet i blokken "Tilpasset HTML":

    <style>
        * {box-sizing: border-box}
        body {font-family: Verdana, sans-serif; margin:0}
        .mySlides {display: none}
        img {vertical-align: middle;}
    
        /* Slideshow container */
        .slideshow-container {
          max-width: 1000px;
          position: relative;
          margin: auto;
        }
    
        /* Next & previous buttons */
        .prev, .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -22px;
          color: white;
          font-weight: bold;
          font-size: 18px;
          transition: 0.6s ease;
          border-radius: 0 3px 3px 0;
          user-select: none;
        }
    
        /* Position the "next button" to the right */
        .next {
          right: 0;
          border-radius: 3px 0 0 3px;
        }
    
        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next:hover {
          background-color: rgba(0,0,0,0.8);
        }
    
        /* Caption text */
        .text {
          color: #f2f2f2;
          font-size: 15px;
          padding: 8px 12px;
          position: absolute;
          bottom: 8px;
          width: 100%;
          text-align: center;
        }
    
        /* Number text (1/3 etc) */
        .numbertext {
          color: #f2f2f2;
          font-size: 12px;
          padding: 8px 12px;
          position: absolute;
          top: 0;
        }
    
        /* The dots/bullets/indicators */
        .dot {
          cursor: pointer;
          height: 15px;
          width: 15px;
          margin: 0 2px;
          background-color: #bbb;
          border-radius: 50%;
          display: inline-block;
          transition: background-color 0.6s ease;
        }
    
        .active, .dot:hover {
          background-color: #717171;
        }
    
        /* Fading animation */
        .fade {
          animation-name: fade;
          animation-duration: 1.5s;
        }
    
        @keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }
    
        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
          .prev, .next,.text {font-size: 11px}
        }
        </style>
      <div>
        <div class="slideshow-container">
    
        <div class="mySlides fade">
          <div class="numbertext">1 / 3</div>
          <img src="https://multimusen.dk/wp-content/uploads/witch-edited.jpeg" style="width:100%">
          <div class="text">Caption Text</div>
        </div>
    
        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img src="https://multimusen.dk/wp-content/uploads/superwoman-coder-edited.jpeg" style="width:100%">
          <div class="text">Caption Two</div>
        </div>
    
        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img src="https://multimusen.dk/wp-content/uploads/hugin-munin-2.jpeg" style="width:100%">
          <div class="text">Caption Three</div>
        </div>
    
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
    
        </div>
        <br>
    
        <div style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>
    </div>
    
        <script>
        let slideIndex = 1;
        showSlides(slideIndex);
    
        function plusSlides(n) {
          showSlides(slideIndex += n);
        }
    
        function currentSlide(n) {
          showSlides(slideIndex = n);
        }
    
        function showSlides(n) {
          let i;
          let slides = document.getElementsByClassName("mySlides");
          let dots = document.getElementsByClassName("dot");
          if (n > slides.length) {slideIndex = 1}
          if (n < 1) {slideIndex = slides.length}
          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
          }
          for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
          }
          slides[slideIndex-1].style.display = "block";
          dots[slideIndex-1].className += " active";
        }
        </script>

    Kilde: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

  • Sådan sætter du en forside op

    Sådan sætter du en forside op

    Sådan laver du forsiden til dit website i Twenty Twenty-four

    Lav templagen “Front Page”

    Twenty twenty-four bruger som standard templaten “Blog Home” som forside. Du kan definere din egen forside ved at tilføje templaten “Front Page”

    Videoen viser, hvordan “Front Page” laves. Videoen slutter med et website, hvor der står “Hello World” – og det er så forsiden. Resten er dit kreative design 😉

  • Backup af WP

    Backup af WP

    Hvis du vil sikre dine data, så er den manuelle backup af WordPress vigtig at kende.

    Ferdy viser den manuelle metode.

    Trin 1) Backup af filerne

    Download en kopi af alle filer i mappen:

    ./wp-content

    Og kopier filen wp-config.php, der ligger i roden – og som indeholder opsætningen til databasen.

    Trin 2) Export af databasen i phpMyAdmin

    Dine sider ligger ikke i en masse HTML-filer. Siderne er gemt i databasen. De fleste webhosts giver mulighed for at eksportere dine data, fx via phpMyAdmin.

    3) Installer WP fra din backup

    Når du får brug for sikkerhedskopien:

    • Download en zip af wordpress fra wordpress.org.
    • Upload filerne til din server, gerne med Filezilla (det er hurtigere, så jeg er uenig med Ferdy her)
    • Upload filerne fra wp-content
    • Upload wp-config.php (overskriv den nye)
    • Importer sql backupen i phpMyAdmin
  • One Click Install af WordPress på Simply.com

    One Click Install af WordPress på Simply.com

    One Click Install

    På Simply.com – og en lang række alternative webhoteller – kan du installere WordPress [WP] med en hurtig one click install. En modal i stil med denne dukker op:

    Simply.com’s one click modal.

    Udfyld den sådan:

    Admin username Hvis du vælger navnet “admin” er hackerne allerede 50% inde. Brug noget andet.
    Admin password Sørg for at dit password er sikkert. Du har sikkert 100+ passwords, og ingen husker så meget. Brug en password manager til at huske det, fx den indbyggede i Chrome.
    Admin email Brug en email, som du faktisk læser. Hvis der sker fejl eller noget mistænkeligt kan WP sende beskedder til dig.
    Site name Vælg et passende sitename. Du kan altid ændre det under “Settings” eller “Indstillinger”, hvis du finder et bedere navn. Sitenavnet kan sættes ind via en block i WP editoren.
    Language Vælg et passende sprog.
    Forklaring af mulighederne.

    Installation i et Subdomæne

    Med one-click kan du installere flere versioner af WP i subdomæner. Du kan med andre ord sætte dit website op, så der er plads til flere udgaver af WP. Det er praktisk, hvis du vil reservere en særlig WP til din portfolio – eller hvis du ønsker at et projekt får sin egen webadresse.

    Her er et par eksempler:

    Før du installerer WP i et subdomæne skal det oprettes i Simplys administrationspanel.

    Du kan hurtigt installere en WP i et subdomæne; men husk at vælge subdomænet inden du klikker installer. Og pas på her! Husk at vælge subdomænet inden du installerer – ellers risikerer du at overskrive dit website!

    Installation af WP i et subdomæne.

    Denne video viser processen:

    Installation af WP i et subdomæne på Simply.com – live session fra en international klasse på Multimediedesigeneruddannselsen.
  • Easy SMTP på Simply.com

    Easy SMTP på Simply.com

    Her er en vejledning til opsætning af email på Simply.com sites – nyttig når fx WordPress / WooCommerce skal sættes korrekt op.

    Video: WP Easy SMPT (email-settings)
  • Rellax e-Com

    Rellax e-Com

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close