Danske Tutorials

Her finder du en rĂŠkke danske WordPress tutorials.

  • 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.
  • LĂžsning:

    PrĂžv at sĂŠtte en bred border pĂ„ gruppen – og giv denne border samme farve som sitets baggrund!

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

  • 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

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