joerglohrerde/public/2023/07/25/wordpress-statt-padlet-oder.../index.html

<!DOCTYPE html>
<html lang="de" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>WordPress statt Padlet oder TaskCards | Jörg Lohrer</title>
<meta name="keywords" content="WordPress, Padlet, Kanban, TaskCards, horizontales Scrollen">
<meta name="description" content="Mit WordPress, horizontalem Scrolling und Beitragskategorien Sammlungen im Kanban-Style erstellen">
<meta name="author" content="Jörg Lohrer">
<link rel="canonical" href="https://joerg-lohrer.de/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/">
<link crossorigin="anonymous" href="/assets/css/stylesheet.b609c58d5c11bb90b1a54e04005d74ad1ddf22165eb79f5533967e57df9c3b50.css" integrity="sha256-tgnFjVwRu5CxpU4EAF10rR3fIhZet59VM5Z&#43;V9&#43;cO1A=" rel="preload stylesheet" as="style">
<link rel="icon" href="https://joerg-lohrer.de/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="https://joerg-lohrer.de/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://joerg-lohrer.de/favicon-32x32.png">
<link rel="apple-touch-icon" href="https://joerg-lohrer.de/apple-touch-icon.png">
<link rel="mask-icon" href="https://joerg-lohrer.de/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<link rel="alternate" hreflang="de" href="https://joerg-lohrer.de/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/">
<noscript>
    <style>
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: rgb(29, 30, 32);
                --entry: rgb(46, 46, 51);
                --primary: rgb(218, 218, 219);
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
                --code-block-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript><meta property="og:title" content="WordPress statt Padlet oder TaskCards" />
<meta property="og:description" content="Mit WordPress, horizontalem Scrolling und Beitragskategorien Sammlungen im Kanban-Style erstellen" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://joerg-lohrer.de/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/" />
<meta property="og:image" content="https://joerg-lohrer.de/wordpress-horizontales-scrollen.gif" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2023-07-25T00:00:00+00:00" />
<meta property="article:modified_time" content="2023-07-25T00:00:00+00:00" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://joerg-lohrer.de/wordpress-horizontales-scrollen.gif" />
<meta name="twitter:title" content="WordPress statt Padlet oder TaskCards"/>
<meta name="twitter:description" content="Mit WordPress, horizontalem Scrolling und Beitragskategorien Sammlungen im Kanban-Style erstellen"/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position":  1 ,
      "name": "Posts",
      "item": "https://joerg-lohrer.de/posts/"
    }, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "WordPress statt Padlet oder TaskCards",
      "item": "https://joerg-lohrer.de/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "WordPress statt Padlet oder TaskCards",
  "name": "WordPress statt Padlet oder TaskCards",
  "description": "Mit WordPress, horizontalem Scrolling und Beitragskategorien Sammlungen im Kanban-Style erstellen",
  "keywords": [
    "WordPress", "Padlet", "Kanban", "TaskCards", "horizontales Scrollen"
  ],
  "articleBody": "Eine Sammlung von Liedern für den Religionsunterricht ist auf Instagram in Zusammenarbeit von @relimomente @ezpz.lemon.sqz und @colibri260 entstanden und wurde zunächst hier auf TaskCards veröffentlicht.\nWeil TaskCards weder exportiert noch importiert werden können, es nur 2 kostenfreie gibt und somit kein #OER damit erstellt werden kann, haben wir uns Gedanken gemacht, wie man das Ganze in Wordpress umsetzen kann:\nhttps://blogs.rpi-virtuell.de/rulieder Als Bonus sind\neinzelnen Spalten jetzt auch in jeweiligen Kategorienseiten aufrufbar : Mensch sein, Lebensweg, Liebe / Beziehung, Gemeinschaft, Belastungen, Hoffnung / Gerechtigkeit / Frieden, Wunder, Schöpfung, Die Frage nach Gott, Tod / Jenseitsvorstellungen, Biblische Geschichten, Songs zum Kirchenjahr Es gibt eine Übersicht zu allen Lieder mit Unterrichtsimpuls von @45minuten. Und man kann weitere Lieder einreichen Alles was es dazu braucht ist: 1. “horizontales Scrollen” einfach umsetzbar mit verschiedenen WordPress-Plugins. Hier wurde der “horizontal Scroller” von Stackable benutzt.\n2. Spalten als “posts block” Es gibt wieder eine Vielzahl von WordPress-Blöcken, die Beiträge (posts) nach Kategorien sortiert in Spalten anzeigbar machen. Hier wurde “posts block” wiederum von Stackable benutzt. Sortieren der Beiträge in den Spalten Um die Beiträge nicht nach Erstellungsdatum sondern individuell in ihren Kategorien zu sortieren gibt es das Plugin “Intuitive Custom Post Order”, dass dies per Drag\u0026Drop ermöglicht. blogs.rpi-virtuell.de Die Blogs von rpi-virtuell haben alle hier beschriebenen Plugins schon vorinstalliert und müssen nur noch aktiviert werden. Somit steht deinen eigenen WordPress-TaskCards-Padlet-Sammlungen nichts mehr im Wege und du kannst sie kostenfrei und als offene Bildungsmaterialien anderen zugänglich machen.\n",
  "wordCount" : "239",
  "inLanguage": "de",
  "image":"https://joerg-lohrer.de/wordpress-horizontales-scrollen.gif","datePublished": "2023-07-25T00:00:00Z",
  "dateModified": "2023-07-25T00:00:00Z",
  "author":{
    "@type": "Person",
    "name": "Jörg Lohrer"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://joerg-lohrer.de/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Jörg Lohrer",
    "logo": {
      "@type": "ImageObject",
      "url": "https://joerg-lohrer.de/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="https://joerg-lohrer.de/" accesskey="h" title="Jörg Lohrer (Alt + H)">Jörg Lohrer</a>
            <div class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
                <ul class="lang-switch"><li>|</li>
                </ul>
            </div>
        </div>
        <ul id="menu">
            <li>
                <a href="https://joerg-lohrer.de/" title="Jörg Lohrer">
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="https://joerg-lohrer.de/archives/" title="Archive">
                    <span>Blog</span>
                </a>
            </li>
            <li>
                <a href="https://joerg-lohrer.de/impressum/" title="Impressum">
                    <span>Impressum</span>
                </a>
            </li>
            <li>
                <a href="https://reliverse.social/@joerglohrer" title="Mastodon">
                    <span><i class="fa fa-heart"></i>Mastodon</span>&nbsp;
                    <svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12">
                        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
                        <path d="M15 3h6v6"></path>
                        <path d="M10 14L21 3"></path>
                    </svg>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    
    <h1 class="post-title entry-hint-parent">
      WordPress statt Padlet oder TaskCards
    </h1>
    <div class="post-description">
      Mit WordPress, horizontalem Scrolling und Beitragskategorien Sammlungen im Kanban-Style erstellen
    </div>
    <div class="post-meta"><span title='2023-07-25 00:00:00 +0000 UTC'>Juli 25, 2023</span>&nbsp;·&nbsp;Jörg Lohrer

</div>
  </header> 
<figure class="entry-cover">
        <img loading="eager" srcset="https://joerg-lohrer.de/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/wordpress-horizontales-scrollen.gif 320w" 
            sizes="(min-width: 768px) 720px, 100vw" src="https://joerg-lohrer.de/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/wordpress-horizontales-scrollen.gif" alt="" 
            width="320" height="180">
        
</figure>
  <div class="post-content"><p>Eine <strong>Sammlung von Liedern für den Religionsunterricht</strong> ist auf Instagram in Zusammenarbeit von <a href="https://www.instagram.com/relimomente/">@relimomente</a> <a href="https://www.instagram.com/ezpz.lemon.sqz">@ezpz.lemon.sqz</a> und <a href="https://www.instagram.com/colibri260">@colibri260</a> entstanden und wurde zunächst <strong><a href="https://www.taskcards.de/#/board/16af7347-ec26-468e-a093-34549dd2dae3/view">hier auf TaskCards</a></strong> veröffentlicht.</p>
<p>Weil TaskCards  <a href="https://twitter.com/TaskCards_/status/1678706884323205122">weder exportiert noch importiert</a> werden können, es nur 2 kostenfreie gibt und somit kein <a href="https://open-educational-resources.de/5rs-auf-deutsch/">#OER</a> damit erstellt werden kann, haben wir uns Gedanken gemacht, wie man <strong><a href="https://blogs.rpi-virtuell.de/rulieder">das Ganze in Wordpress</a></strong> umsetzen kann:</p>
<h2 id="httpsblogsrpi-virtuellderuliederhttpsblogsrpi-virtuellderulieder"><a href="https://blogs.rpi-virtuell.de/rulieder">https://blogs.rpi-virtuell.de/rulieder</a><a hidden class="anchor" aria-hidden="true" href="#httpsblogsrpi-virtuellderuliederhttpsblogsrpi-virtuellderulieder">#</a></h2>
<p>Als Bonus sind</p>
<ul>
<li>einzelnen Spalten jetzt auch in jeweiligen Kategorienseiten aufrufbar :
<a href="https://blogs.rpi-virtuell.de/rulieder/category/mensch-sein/">Mensch sein</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/lebensweg/">Lebensweg</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/liebe-beziehung/">Liebe / Beziehung</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/gemeinschaft/">Gemeinschaft</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/belastungen/">Belastungen</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/hoffnung-gerechtigkeit-frieden/">Hoffnung / Gerechtigkeit / Frieden</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/wunder/">Wunder</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/schoepfung/">Schöpfung</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/die-frage-nach-gott/">Die Frage nach Gott</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/tod-jenseits/">Tod / Jenseitsvorstellungen</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/biblische-geschichten/">Biblische Geschichten</a>, <a href="https://blogs.rpi-virtuell.de/rulieder/category/songs-zum-kirchenjahr/">Songs zum Kirchenjahr</a></li>
<li>Es gibt eine <a href="https://blogs.rpi-virtuell.de/rulieder/tag/45minuten/">Übersicht zu allen Lieder mit Unterrichtsimpuls von @45minuten</a>.</li>
<li>Und man kann <a href="https://blogs.rpi-virtuell.de/rulieder/beitrag-einreichen/">weitere Lieder einreichen</a></li>
</ul>
<h2 id="alles-was-es-dazu-braucht-ist">Alles was es dazu braucht ist:<a hidden class="anchor" aria-hidden="true" href="#alles-was-es-dazu-braucht-ist">#</a></h2>
<h3 id="1-horizontales-scrollen">1. &ldquo;horizontales Scrollen&rdquo;<a hidden class="anchor" aria-hidden="true" href="#1-horizontales-scrollen">#</a></h3>
<p><img loading="lazy" src="wordpress-horizontales-scrollen.gif" alt=""  />

einfach umsetzbar mit verschiedenen WordPress-Plugins.
Hier wurde der &ldquo;<a href="https://docs.wpstackable.com/article/502-how-to-use-the-horizontal-scroller">horizontal Scroller</a>&rdquo; von Stackable benutzt.</p>
<h3 id="2-spalten-als-posts-block">2. Spalten als &ldquo;posts block&rdquo;<a hidden class="anchor" aria-hidden="true" href="#2-spalten-als-posts-block">#</a></h3>
<p>Es gibt wieder eine Vielzahl von WordPress-Blöcken, die Beiträge (posts) nach Kategorien sortiert in Spalten anzeigbar machen. Hier wurde &ldquo;<a href="https://docs.wpstackable.com/article/492-how-to-use-the-posts-block">posts block</a>&rdquo; wiederum von Stackable benutzt.
<img loading="lazy" src="spalten-als-posts-block.png" alt=""  />
</p>
<h4 id="sortieren-der-beiträge-in-den-spalten">Sortieren der Beiträge in den Spalten<a hidden class="anchor" aria-hidden="true" href="#sortieren-der-beiträge-in-den-spalten">#</a></h4>
<p>Um die Beiträge nicht nach Erstellungsdatum sondern individuell in ihren Kategorien zu sortieren gibt es das Plugin &ldquo;<a href="https://de.wordpress.org/plugins/intuitive-custom-post-order/">Intuitive Custom Post Order</a>&rdquo;, dass dies per Drag&amp;Drop ermöglicht.
<img loading="lazy" src="posts-per-drag-and-drop-sortieren.png" alt=""  />
</p>
<h2 id="blogsrpi-virtuelldehttpsblogsrpi-virtuellde"><a href="https://blogs.rpi-virtuell.de">blogs.rpi-virtuell.de</a><a hidden class="anchor" aria-hidden="true" href="#blogsrpi-virtuelldehttpsblogsrpi-virtuellde">#</a></h2>
<p>Die Blogs von rpi-virtuell haben alle hier beschriebenen Plugins schon vorinstalliert und müssen nur noch aktiviert werden. Somit steht deinen eigenen WordPress-TaskCards-Padlet-Sammlungen nichts mehr im Wege und du kannst sie kostenfrei und als offene Bildungsmaterialien anderen zugänglich machen.</p>


  </div>

  <footer class="post-footer">
    <ul class="post-tags">
    </ul>
  </footer>
</article>
    </main>
    
<footer class="footer">
    <span>&copy; 2025 <a href="https://joerg-lohrer.de/">Jörg Lohrer</a></span>
    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
        <a rel="me" href="https://reliverse.social/@joerglohrer">Mastodon</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a>

<script>
    let menu = document.getElementById('menu')
    if (menu) {
        menu.scrollLeft = localStorage.getItem("menu-scroll-position");
        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
</body>

</html>