Author: Per Thykjaer Jensen

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

  • Guitar

    Guitar

    Musik og guitar tabs …

    Spids Nøgenhats psykedeliske version af Gasolin’s klassiker “Langebro”

    Langebro: Tabs.

    Jimi Henrix “The Wind Cries Mary”

    Tabs: “The Wind Cries Mary”

    John Mayer: Slow Dancing in a Burning Room.

    Gutar tab

    JustinGuitar – Slow Dancing in a Burning Room
    Bob Marley solo.
    Redemption Song m. band.

    Tabs: Redemption Song.

    Johhny Cash: Hurt

  • 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
  • wp-now

    wp-now

    wp-now streamlines the process of setting up a local WordPress environment.”

    https://www.npmjs.com/package/@wp-now/wp-now

    If you want to host and run a WordPress Playgroundyou can install it via Node.js. First install node.js – if you don’t have it yet, follow the guide on the node.js webpage.

    Node.js works on Linux, Mac and Windows.

    Then install the package wp-now by npm, like this_

    
    sudo npm install -g @wp-now/wp-now
    cd my-plugin-or-theme-directory
    npx @wp-now/wp-now start
    • First line: on Linux and Mac use sudo, but probably not on windows.
    • Second line: you change to the directory with the theme or plugin to be tested.
    • Third line: now this will install WordPress in a hidden directort, and open a browser after a few seconds.

    Then you’re ready to develop or test.

    Reset

    When you restart the site will appear as when you left it. However, sometimes you may need a new version. You can reset your site like this, and then you’ll get a new WP for your experiments:

    npx @wp-now/wp-now start --reset

    Start in a Theme Directory

    A fast way to test a theme is to start wp-now up in the theme directory or in a plugin directory. Wp-now will then open WordPress in that theme. This is supereasy:

    cd /localhost/wordpress/wp-content/themes/your-theme/
    npx @wp-now/wp-now start
    wp-now started my homemade theme from the theme directory. In this way wp-now is a great tool when you need to test either a theme or a plugin.

    Blueprint

    A blueprint is a JSON file, that will define settings like the version of PHP or WordPress. You can install plugins and themes via blueprints too. You can load the blueprint like this:

    npx @wp-now/wp-now start --blueprint=path/to/blueprint.json

    The content of blueprint.json could be something along these lines:

    {
        "landingPage": "/wp-admin/",
        "preferredVersions": {
            "php": "7.4",
            "wp": "5.9"
        },
        "phpExtensionBundles": [
            "kitchen-sink"
        ],
        "steps": [
            {
                "step": "login",
                "username": "admin",
                "password": "password"
            },
            {
                "step": "installPlugin",
                "pluginZipFile": {
                    "resource": "wordpress.org\/plugins",
                    "slug": "instant-images"
                },
                "options": {
                    "activate": true
                }
            },
            {
                "step": "installPlugin",
                "pluginZipFile": {
                    "resource": "wordpress.org\/plugins",
                    "slug": "w3-total-cache"
                },
                "options": {
                    "activate": true
                }
            },
            {
                "step": "installPlugin",
                "pluginZipFile": {
                    "resource": "wordpress.org\/plugins",
                    "slug": "wordpress-seo"
                },
                "options": {
                    "activate": false
                }
            },
            {
                "step": "installPlugin",
                "pluginZipFile": {
                    "resource": "wordpress.org\/plugins",
                    "slug": "ewww-image-optimizer"
                },
                "options": {
                    "activate": true
                }
            },
            {
                "step": "installPlugin",
                "pluginZipFile": {
                    "resource": "wordpress.org\/plugins",
                    "slug": "blocks-animation"
                },
                "options": {
                    "activate": true
                }
            },
            {
                "step": "installPlugin",
                "pluginZipFile": {
                    "resource": "wordpress.org\/plugins",
                    "slug": "font-awesome"
                },
                "options": {
                    "activate": true
                }
            }       
        ]
    }

    “Man” wp-now start — help

    Here are the options from the man page:

    Options:
    –version Show version number [boolean]
    –path Path to the PHP or WordPress project. Defaults to the current working directory. [string]
    –php PHP version to use. [string]
    –wp WordPress version to use: e.g. ‘–wp=6.2’ [string]
    –port Server port [number]
    –blueprint Path to a blueprint file to be executed [string]
    –reset Create a new project environment, destroying the old project environment. [boolean]
    –skip-browser Do not launch the default browser
    [boolean] [default: false]
    –inspect Use Node debugging client. [number]
    –inspect-brk Use Node debugging client. Break immediately on script execution start. [number]
    –trace-exit Prints a stack trace whenever an environment is exited proactively, i.e. invoking process.exit(). [number]
    –trace-uncaught Print stack traces for uncaught exceptions; usually, the stack trace associated with the creation of an Error is
    printed, whereas this makes Node.js also print the stack trace associated with throwing the value (which does not need to be an Error instance). [number]
    –trace-warnings Print stack traces for process warnings (including deprecations). [number]
    -h, –help Show help [boolean]

    For more information, see:

  • WordPress Blueprints

    WordPress Blueprints

    Gallery of Blueprints

    Blueprints for a range of projects, watch the gallery on Github:

    Developer Resources

    Networking and Storage

  • [Workaround] WP Playground – menu does not work

    [Workaround] WP Playground – menu does not work

    The Problem

    When you create a menu in WP Playground and try to click a link to a page it does not work. So how can we fix this?

    Workaround

    The reason for the problem is the URL. The playground is not online, som the URL is a bit strange. If you want a working menu in the sandbox do thus:

    1. Go to Posts in the Dashboard.
    2. Right click on “View”
      Or: open the page.
    3. Copy the URL

    In the menu insert the link to the page as a custom link.

    New Problem …

    Well … if you export the Playground, it’s probably best to enter the pages / posts in the menu in the normal way. So it’s just a temporary workaround.

    It’s just a temporary thing
    (Lou Reed)

  • Random Colors

    Random Colors

    Random Colors

    We Need Colors

    More tham often randoms colors would be nice. Here’s a cool site – and as an extra you even get an explanation of the code behind it. So here’s cool tool for everyone who need a color or two.

  • WordPress Playground: Set up with Plugins and Themes

    WordPress Playground: Set up with Plugins and Themes

    WordPress Playground is made for experiments. However, plugins are not easy to install. If you want to install and use plugins you have to change the URL and add:

    &networking=yes.

    If you have local storage you will be asked if you want to continue working with the local files. Just answer yes.

    Playground is experimental. Some plugins will not run here. So you have to experiment. For example Kadence Blocks work like a charm. Jetpack did not.

  • Style Variations

    Style Variations

    How to Create a Style Variation for the WordPress Twenty Twenty-Four Theme

    WordPress themes provide a flexible foundation for designing websites, and with the introduction of Full Site Editing (FSE), customizing these themes has become more powerful and accessible. The Twenty Twenty-Four theme, one of WordPress’s default themes, is an excellent example of a theme that embraces modern design principles while offering a high degree of customization. One of the standout features is the ability to create and apply style variations. In this article, we’ll walk you through the steps to create a style variation for the Twenty Twenty-Four theme.

    Understanding Style Variations

    Style variations in WordPress allow you to create different design looks without altering the core structure of a theme. By tweaking colors, typography, and other design elements, you can create distinct visual styles that suit different brand identities or personal preferences. These variations can be saved and easily switched, offering a way to experiment with different aesthetics or provide users with multiple design options.

    Prerequisites

    Before diving into creating a style variation, ensure you have the following:

    1. A WordPress Site: Ensure your WordPress site is set up and running with the Twenty Twenty-Four theme installed.
    2. Basic Knowledge of CSS and JSON: While not mandatory, understanding CSS (Cascading Style Sheets) and JSON (JavaScript Object Notation) will help you fine-tune your style variation.
    3. A Child Theme (Optional): If you prefer not to modify the parent theme directly, creating a child theme is a good practice. This way, you can preserve your customizations even after theme updates.

    Step-by-Step Guide to Creating a Style Variation

    1. Set Up Your Development Environment
    • Access your WordPress installation files via FTP or your hosting provider’s file manager.
    • Navigate to the /wp-content/themes/twentytwentyfour/ directory.
    2. Create a styles Folder
    • Within the Twenty Twenty-Four theme directory, create a new folder named styles. This folder will store your custom style variations.
    3. Create a JSON File for Your Style Variation
    • Inside the styles folder, create a new file and name it something descriptive, such as custom-style.json.
    • This JSON file will define the properties of your style variation, such as colors, typography, and layout settings.
    4. Define Your Style Settings
    • Open the custom-style.json file in a code editor.
    • Here’s a basic structure to get you started:
       {
         "version": 2,
         "isGlobalStylesUserThemeJSON": true,
         "settings": {
           "color": {
             "palette": [
               {
                 "slug": "primary",
                 "color": "#1a1a1a",
                 "name": "Primary"
               },
               {
                 "slug": "secondary",
                 "color": "#ff6f61",
                 "name": "Secondary"
               }
             ],
             "background": "#ffffff"
           },
           "typography": {
             "fontSizes": [
               {
                 "slug": "small",
                 "size": "12px",
                 "name": "Small"
               },
               {
                 "slug": "large",
                 "size": "24px",
                 "name": "Large"
               }
             ],
             "lineHeight": "1.5"
           }
         }
       }
    • Color Palette: Customize the color palette by adding your preferred colors. Use the slug to identify the color, color for the hex value, and name for a human-readable label.
    • Typography: Adjust the font sizes and line heights to match your desired style.
    5. Add Additional Customizations
    • Beyond colors and typography, you can customize various other aspects such as spacing, border radii, and more. The structure follows the same JSON format.
    6. Save and Apply Your Style Variation
    • After defining your customizations, save the custom-style.json file.
    • To apply this style variation, go to the WordPress dashboard:
      • Navigate to Appearance > Editor.
      • In the Editor, select Styles from the top-right corner.
      • Your new style variation should appear as an option. Click on it to apply.
    7. Test and Refine
    • After applying your style variation, preview your site to ensure everything looks as expected. Tweak the JSON file as needed to refine your design.
    8. Making the Style Variation Available to Users
    • If you want your style variation to be available to other users of the theme, include a description and screenshot:
      • Description: Add a title and description key to your JSON file to provide context about your style variation.
      • Screenshot: Create a 1200x900px image showing a preview of your style variation. Name it the same as your JSON file but with a .png extension (e.g., custom-style.png). Place it in the styles folder.
    9. Distribute Your Style Variation
    • If you’ve created something worth sharing, consider distributing your style variation. You can package it with your theme or share it on platforms like GitHub for others to use.
    10. Shortcut

    Since the theme.json file in the root folder contain all the styles of the theme, a very fast way of working is this: just copy-paste the theme.json file from the root directory to the ./styles directory. Rename the file to something convenient, e.g. myWay.json. Then add the title of your style variation, as in line 4 below:

    Style variation title, see line 4.

    Conclusion

    Creating a style variation for the Twenty Twenty-Four WordPress theme is a powerful way to personalize your website’s appearance while keeping the underlying structure intact. Whether you’re aiming for a sleek, modern design or a playful, vibrant look, style variations offer a flexible way to achieve your vision. By following the steps outlined in this guide, you’ll be well on your way to creating a unique style variation that reflects your brand or personal aesthetic.

    Note

    This article was partly generated by ChatGPT from one of my conversations, see this link: https://chatgpt.com/share/e/8a300d32-5807-43a4-a85e-978a9290a332

    For some reason ChatGPT forgot to mention the title field in the json file, so I’ve added the missing information.

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