2024-11-06 15:55:54 +01:00
<!DOCTYPE html>
2025-01-28 18:18:59 +01:00
< html lang = "de" dir = "auto" >
2025-02-12 19:43:36 +01:00
< head > < script src = "/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer > < / script > < meta charset = "utf-8" >
2025-01-28 18:18:59 +01:00
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
2025-02-12 19:43:36 +01:00
< meta name = "robots" content = "noindex, nofollow" >
2025-01-28 18:18:59 +01:00
< 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" >
2025-02-12 19:43:36 +01:00
< link rel = "canonical" href = "http://localhost:1313/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/" >
< link crossorigin = "anonymous" href = "/assets/css/stylesheet.fcb38834b6dee4645dbe7c77d6c5278e12448b758b3f769e48a2d86d35709cb2.css" integrity = "sha256-/LOINLbe5GRdvnx31sUnjhJEi3WLP3aeSKLYbTVwnLI=" rel = "preload stylesheet" as = "style" >
< link rel = "icon" href = "http://localhost:1313/favicon.ico" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "http://localhost:1313/favicon-16x16.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "http://localhost:1313/favicon-32x32.png" >
< link rel = "apple-touch-icon" href = "http://localhost:1313/apple-touch-icon.png" >
< link rel = "mask-icon" href = "http://localhost:1313/safari-pinned-tab.svg" >
2025-01-28 18:18:59 +01:00
< meta name = "theme-color" content = "#2e2e33" >
< meta name = "msapplication-TileColor" content = "#2e2e33" >
2025-02-12 19:43:36 +01:00
< link rel = "alternate" hreflang = "de" href = "http://localhost:1313/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/" >
2025-01-28 18:18:59 +01:00
< 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 >
2025-02-12 19:43:36 +01:00
< / noscript >
2024-11-06 15:55:54 +01:00
< / head >
2025-01-28 18:18:59 +01:00
< 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');
}
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
< / script >
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
< header class = "header" >
< nav class = "nav" >
< div class = "logo" >
2025-02-12 19:43:36 +01:00
< a href = "http://localhost:1313/" accesskey = "h" title = "Jörg Lohrer (Alt + H)" > Jörg Lohrer< / a >
2025-01-28 18:18:59 +01:00
< 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 >
2025-02-12 19:43:36 +01:00
< a href = "http://localhost:1313/" title = "Jörg Lohrer" >
2025-01-28 18:18:59 +01:00
< span > Home< / span >
< / a >
< / li >
< li >
2025-02-12 19:43:36 +01:00
< a href = "http://localhost:1313/archives/" title = "Archive" >
2025-01-28 18:18:59 +01:00
< span > Blog< / span >
< / a >
< / li >
< li >
2025-02-12 19:43:36 +01:00
< a href = "http://localhost:1313/impressum/" title = "Impressum" >
2025-01-28 18:18:59 +01:00
< span > Impressum< / span >
< / a >
< / li >
< li >
< a href = "https://reliverse.social/@joerglohrer" title = "Mastodon" >
< span > < i class = "fa fa-heart" > < / i > Mastodon< / span >
< 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" >
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
< 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
2024-11-06 15:55:54 +01:00
< / div >
2025-01-28 18:18:59 +01:00
< div class = "post-meta" > < span title = '2023-07-25 00:00:00 +0000 UTC' > Juli 25, 2023< / span > · Jörg Lohrer
2024-11-06 15:55:54 +01:00
< / div >
2025-01-28 18:18:59 +01:00
< / header >
2025-02-01 07:52:15 +01:00
< figure class = "entry-cover" >
2025-02-12 19:43:36 +01:00
< img loading = "eager" src = "http://localhost:1313/2023/07/25/wordpress-statt-padlet-oder-taskcards.html/wordpress-horizontales-scrollen.gif" alt = "" >
2025-02-01 07:52:15 +01:00
< / figure >
2025-01-28 18:18:59 +01:00
< 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 >
2024-11-06 15:55:54 +01:00
< p > Als Bonus sind< / p >
< ul >
< li > einzelnen Spalten jetzt auch in jeweiligen Kategorienseiten aufrufbar :
2025-01-28 18:18:59 +01:00
< 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 >
2024-11-06 15:55:54 +01:00
< / ul >
2025-01-28 18:18:59 +01:00
< 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. “ horizontales Scrollen” < a hidden class = "anchor" aria-hidden = "true" href = "#1-horizontales-scrollen" > #< / a > < / h3 >
< p > < img loading = "lazy" src = "wordpress-horizontales-scrollen.gif" alt = "" / >
2024-11-06 15:55:54 +01:00
einfach umsetzbar mit verschiedenen WordPress-Plugins.
2025-01-28 18:18:59 +01:00
Hier wurde der “ < a href = "https://docs.wpstackable.com/article/502-how-to-use-the-horizontal-scroller" > horizontal Scroller< / a > ” von Stackable benutzt.< / p >
< h3 id = "2-spalten-als-posts-block" > 2. Spalten als “ posts block” < 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 “ < a href = "https://docs.wpstackable.com/article/492-how-to-use-the-posts-block" > posts block< / a > ” wiederum von Stackable benutzt.
< img loading = "lazy" src = "spalten-als-posts-block.png" alt = "" / >
2024-11-06 15:55:54 +01:00
< / p >
2025-01-28 18:18:59 +01:00
< 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 “ < a href = "https://de.wordpress.org/plugins/intuitive-custom-post-order/" > Intuitive Custom Post Order< / a > ” , dass dies per Drag& Drop ermöglicht.
< img loading = "lazy" src = "posts-per-drag-and-drop-sortieren.png" alt = "" / >
2024-11-06 15:55:54 +01:00
< / p >
2025-01-28 18:18:59 +01:00
< 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 >
2024-11-06 15:55:54 +01:00
< 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 >
2025-01-28 18:18:59 +01:00
< footer class = "post-footer" >
< ul class = "post-tags" >
< / ul >
< / footer >
2025-02-12 19:43:36 +01:00
2025-01-28 18:18:59 +01:00
< / article >
< / main >
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
< footer class = "footer" >
2025-02-12 19:43:36 +01:00
< span > © 2025 < a href = "http://localhost:1313/" > Jörg Lohrer< / a > < / span >
2025-01-28 18:18:59 +01:00
< 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 >
2024-11-06 15:55:54 +01:00
< / span >
2025-01-28 18:18:59 +01:00
< / 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}`);
}
});
});
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
< / 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";
}
};
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
< / 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');
}
})
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
< / script >
2024-11-06 15:55:54 +01:00
< / body >
2025-01-28 18:18:59 +01:00
2024-11-06 15:55:54 +01:00
< / html >
