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-01 07:52:15 +01:00
< head > < 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-01 07:52:15 +01:00
< meta name = "robots" content = "index, follow" >
2025-01-28 18:18:59 +01:00
< title > WordPress Werkstatt PHP | Jörg Lohrer< / title >
< meta name = "keywords" content = "ACF, WordPress, Formulare, JSON, Plugin" >
< meta name = "description" content = "Advanced Custom Fields und Formulareingaben" >
< meta name = "author" content = "Jörg Lohrer" >
2025-02-01 07:52:15 +01:00
< link rel = "canonical" href = "https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/" >
2025-01-28 18:18:59 +01:00
< link crossorigin = "anonymous" href = "/assets/css/stylesheet.b609c58d5c11bb90b1a54e04005d74ad1ddf22165eb79f5533967e57df9c3b50.css" integrity = "sha256-tgnFjVwRu5CxpU4EAF10rR3fIhZet59VM5Z+V9+cO1A=" rel = "preload stylesheet" as = "style" >
2025-02-01 07:52:15 +01:00
< 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" >
2025-01-28 18:18:59 +01:00
< meta name = "theme-color" content = "#2e2e33" >
< meta name = "msapplication-TileColor" content = "#2e2e33" >
2025-02-01 07:52:15 +01:00
< link rel = "alternate" hreflang = "de" href = "https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.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);
}
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
.list {
background: var(--theme);
}
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
< / style >
2025-02-01 07:52:15 +01:00
< / noscript > < meta property = "og:title" content = "WordPress Werkstatt PHP" / >
< meta property = "og:description" content = "Advanced Custom Fields und Formulareingaben" / >
< meta property = "og:type" content = "article" / >
< meta property = "og:url" content = "https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/" / >
< meta property = "og:image" content = "https://joerg-lohrer.de/04-termine-neu.png" / > < meta property = "article:section" content = "posts" / >
< meta property = "article:published_time" content = "2021-11-17T00:00:00+00:00" / >
< meta property = "article:modified_time" content = "2021-11-17T00:00:00+00:00" / >
< meta name = "twitter:card" content = "summary_large_image" / >
< meta name = "twitter:image" content = "https://joerg-lohrer.de/04-termine-neu.png" / >
< meta name = "twitter:title" content = "WordPress Werkstatt PHP" / >
< meta name = "twitter:description" content = "Advanced Custom Fields und Formulareingaben" / >
< 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 Werkstatt PHP",
"item": "https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/"
}
]
}
< / script >
< script type = "application/ld+json" >
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "WordPress Werkstatt PHP",
"name": "WordPress Werkstatt PHP",
"description": "Advanced Custom Fields und Formulareingaben",
"keywords": [
"ACF", "WordPress", "Formulare", "JSON", "Plugin"
],
"articleBody": "WordPress Werkstatt PHP Zunächst wird auf relilab.org das kostenfreie Plugin ACF - Advanced Custom Fields installiert und aktiviert. Dies ermöglicht weitere individuelle Beitragsfelder für die Beiträge. Nun kann manuell aktiviert oder eine Feldgruppe importiert werden - hier mittels dieser JSON-Datei, die das abkürzt: mit dem Ergebnis, dass unter allen WordPress-Beiträgen jetzt zwei Terminfelder erscheinen, die ausgefüllt werden können: Zudem gibt es neu eine Kategorie “Termine”, die aktiviert werden kann mit Unterkategorien, die später Übersichtsseiten ermöglichen: Jetzt wird das Plugin relilab-termine installiert und aktiviert Nun kann mittels Shortcode [relilab_termine] eine Terminübersicht als WordPress-Block erzeugt werden: JSON ACF-JSON-Export: [ { \"key\": \"group_6193936e4f12c\", \"title\": \"Termin\", \"fields\": [ { \"key\": \"field_619393f8e62e0\", \"label\": \"Startet am\", \"name\": \"relilab_startdate\", \"type\": \"date_time_picker\", \"instructions\": \"\", \"required\": 0, \"conditional_logic\": 0, \"wrapper\": { \"width\": \"\", \"class\": \"\", \"id\": \"\" }, \"display_format\": \"d.m.Y H:i\", \"return_format\": \"Y-m-d H:i\", \"first_day\": 1 }, { \"key\": \"field_619394a3e62e1\", \"label\": \"Endet am\", \"name\": \"relilab_enddate\", \"type\": \"date_time_picker\", \"instructions\": \"\", \"required\": 0, \"conditional_logic\": 0, \"wrapper\": { \"width\": \"\", \"class\": \"\", \"id\": \"\" }, \"display_format\": \"d.m.Y H:i\", \"return_format\": \"Y-m-d H:i\", \"first_day\": 1 } ], \"location\": [ [ { \"param\": \"post_type\", \"operator\": \"==\", \"value\": \"post\" } ] ], \"menu_order\": 0, \"position\": \"normal\", \"style\": \"default\", \"label_placement\": \"left\", \"instruction_placement\": \"label\", \"hide_on_screen\": \"\", \"active\": true, \"description\": \"\", \"show_in_rest\": 0, \"acfe_display_title\": \"\", \"acfe_autosync\": \"\", \"acfe_form\": 0, \"acfe_meta\": \"\", \"acfe_note\": \"\" } ] PHP Software PHP-Storm https://www.jetbrains.com/de-de/phpstorm/\nShortcode zum Sprechen bringen https://developer.wordpress.org/reference/functions/add_shortcode/ In PhpStorm add_shortcode( string $tag, callable $callback )\nalle Termine listen, die https://www.advancedcustomfields.com/resources/orde-posts-by-custom-fields/\nPHP-Storm nutzt als External Library dann WordPress Plugin Unsere Funktion:\n/** *Plugin Name: relilab Termine */ add_shortcode('termine','termineAusgeben'); function termineAusgeben( $atts ) { $posts = get_posts(array( 'post_type'\t=\u003e 'post', 'posts_per_page'\t=\u003e -1, 'category' =\u003e 'termine', 'meta_key'\t=\u003e 'relilab_startdate', 'orderby'\t=\u003e 'meta_value', 'order'\t=\u003e 'DESC' )); // ob_start(); global $post; ?\u003e \u003c?php foreach ($posts as $post) { setup_postdata( $post ) ?\u003e \u003c?php the_title(); ?\u003e (date: \u003c?php the_field('relilab_startdate'); ?\u003e) \u003c?php } ?\u003e \u003c?php wp_reset_postdata(); // return ob_get_clean(); } ",
"wordCount" : "320",
"inLanguage": "de",
"image":"https://joerg-lohrer.de/04-termine-neu.png","datePublished": "2021-11-17T00:00:00Z",
"dateModified": "2021-11-17T00:00:00Z",
"author":{
"@type": "Person",
"name": "Jörg Lohrer"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/"
},
"publisher": {
"@type": "Organization",
"name": "Jörg Lohrer",
"logo": {
"@type": "ImageObject",
"url": "https://joerg-lohrer.de/favicon.ico"
}
}
}
< / script >
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-01 07:52:15 +01:00
< a href = "https://joerg-lohrer.de/" 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-01 07:52:15 +01:00
< a href = "https://joerg-lohrer.de/" title = "Jörg Lohrer" >
2025-01-28 18:18:59 +01:00
< span > Home< / span >
< / a >
< / li >
< li >
2025-02-01 07:52:15 +01:00
< a href = "https://joerg-lohrer.de/archives/" title = "Archive" >
2025-01-28 18:18:59 +01:00
< span > Blog< / span >
< / a >
< / li >
< li >
2025-02-01 07:52:15 +01:00
< a href = "https://joerg-lohrer.de/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 Werkstatt PHP
< / h1 >
< div class = "post-description" >
Advanced Custom Fields und Formulareingaben
2024-11-06 15:55:54 +01:00
< / div >
2025-01-28 18:18:59 +01:00
< div class = "post-meta" > < span title = '2021-11-17 00:00:00 +0000 UTC' > November 17, 2021< / 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" >
< img loading = "eager" srcset = "https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/04-termine-neu_hu_d84b3ea31f65de04.png 360w ,https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/04-termine-neu_hu_76b59ae104e8ad4.png 480w ,https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/04-termine-neu_hu_ecfff05140c1e1bf.png 720w ,https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/04-termine-neu_hu_10d171ed75ea1064.png 1080w ,https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/04-termine-neu.png 1350w"
sizes="(min-width: 768px) 720px, 100vw" src="https://joerg-lohrer.de/2021/11/17/wordpress-werkstatt.html/04-termine-neu.png" alt=""
width="1350" height="590">
< / figure >
2025-01-28 18:18:59 +01:00
< div class = "post-content" > < h1 id = "wordpress-werkstatt-php" > WordPress Werkstatt PHP< a hidden class = "anchor" aria-hidden = "true" href = "#wordpress-werkstatt-php" > #< / a > < / h1 >
< p > Zunächst wird auf relilab.org das kostenfreie < a href = "https://de.wordpress.org/plugins/advanced-custom-fields/" > Plugin ACF - Advanced Custom Fields< / a > installiert und aktiviert.
2024-11-06 15:55:54 +01:00
Dies ermöglicht weitere individuelle Beitragsfelder für die Beiträge.
2025-01-28 18:18:59 +01:00
Nun kann manuell aktiviert oder eine Feldgruppe importiert werden - hier mittels < a href = "#ACF-JSON-Export" > dieser JSON-Datei< / a > , die das abkürzt:
< img loading = "lazy" src = "h01-json-import.png" alt = "" / >
2024-11-06 15:55:54 +01:00
mit dem Ergebnis, dass unter allen WordPress-Beiträgen jetzt zwei Terminfelder erscheinen, die ausgefüllt werden können:
2025-01-28 18:18:59 +01:00
< img loading = "lazy" src = "02-terminfelder.png" alt = "" / >
2024-11-06 15:55:54 +01:00
Zudem gibt es neu eine Kategorie “ Termine” , die aktiviert werden kann mit Unterkategorien, die später Übersichtsseiten ermöglichen:
2025-01-28 18:18:59 +01:00
< img loading = "lazy" src = "03-kategorien.png" alt = "" / >
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
Jetzt wird das < a href = "https://github.com/rpi-virtuell/relilab-termine" > Plugin relilab-termine< / a > installiert und aktiviert
2024-11-06 15:55:54 +01:00
Nun kann mittels Shortcode < code > [relilab_termine]< / code > eine Terminübersicht als WordPress-Block erzeugt werden:
2025-01-28 18:18:59 +01:00
< img loading = "lazy" src = "04-termine-neu.png" alt = "" / >
2024-11-06 15:55:54 +01:00
< / p >
2025-01-28 18:18:59 +01:00
< h2 id = "json" > JSON< a hidden class = "anchor" aria-hidden = "true" href = "#json" > #< / a > < / h2 >
< h4 id = "acf-json-export" > ACF-JSON-Export:< a hidden class = "anchor" aria-hidden = "true" href = "#acf-json-export" > #< / a > < / h4 >
2024-11-06 15:55:54 +01:00
< pre tabindex = "0" > < code class = "language-json=" data-lang = "json=" > [
{
" key" : " group_6193936e4f12c" ,
" title" : " Termin" ,
" fields" : [
{
" key" : " field_619393f8e62e0" ,
" label" : " Startet am" ,
" name" : " relilab_startdate" ,
" type" : " date_time_picker" ,
" instructions" : " " ,
" required" : 0,
" conditional_logic" : 0,
" wrapper" : {
" width" : " " ,
" class" : " " ,
" id" : " "
},
" display_format" : " d.m.Y H:i" ,
" return_format" : " Y-m-d H:i" ,
" first_day" : 1
},
{
" key" : " field_619394a3e62e1" ,
" label" : " Endet am" ,
" name" : " relilab_enddate" ,
" type" : " date_time_picker" ,
" instructions" : " " ,
" required" : 0,
" conditional_logic" : 0,
" wrapper" : {
" width" : " " ,
" class" : " " ,
" id" : " "
},
" display_format" : " d.m.Y H:i" ,
" return_format" : " Y-m-d H:i" ,
" first_day" : 1
}
],
" location" : [
[
{
" param" : " post_type" ,
" operator" : " ==" ,
" value" : " post"
}
]
],
" menu_order" : 0,
" position" : " normal" ,
" style" : " default" ,
" label_placement" : " left" ,
" instruction_placement" : " label" ,
" hide_on_screen" : " " ,
" active" : true,
" description" : " " ,
" show_in_rest" : 0,
" acfe_display_title" : " " ,
" acfe_autosync" : " " ,
" acfe_form" : 0,
" acfe_meta" : " " ,
" acfe_note" : " "
}
]
2025-01-28 18:18:59 +01:00
< / code > < / pre > < h2 id = "php" > PHP< a hidden class = "anchor" aria-hidden = "true" href = "#php" > #< / a > < / h2 >
< h3 id = "software" > Software< a hidden class = "anchor" aria-hidden = "true" href = "#software" > #< / a > < / h3 >
< h4 id = "php-storm" > PHP-Storm< a hidden class = "anchor" aria-hidden = "true" href = "#php-storm" > #< / a > < / h4 >
< p > < a href = "https://www.jetbrains.com/de-de/phpstorm/" > https://www.jetbrains.com/de-de/phpstorm/< / a > < / p >
< h5 id = "shortcode-zum-sprechen-bringen" > Shortcode zum Sprechen bringen< a hidden class = "anchor" aria-hidden = "true" href = "#shortcode-zum-sprechen-bringen" > #< / a > < / h5 >
< p > < a href = "https://developer.wordpress.org/reference/functions/add_shortcode/" > https://developer.wordpress.org/reference/functions/add_shortcode/< / a >
2024-11-06 15:55:54 +01:00
In PhpStorm
2025-01-28 18:18:59 +01:00
< img loading = "lazy" src = "05-php-storm.png" alt = "" / >
2024-11-06 15:55:54 +01:00
< code > add_shortcode( string $tag, callable $callback )< / code > < / p >
< p > alle Termine listen, die
2025-01-28 18:18:59 +01:00
< a href = "https://www.advancedcustomfields.com/resources/orde-posts-by-custom-fields/" > https://www.advancedcustomfields.com/resources/orde-posts-by-custom-fields/< / a > < / p >
< p > < img loading = "lazy" src = "06-termine-listen.png" alt = "" / >
2024-11-06 15:55:54 +01:00
< / p >
< p > PHP-Storm nutzt als External Library dann WordPress
2025-01-28 18:18:59 +01:00
< img loading = "lazy" src = "07-external-library.png" alt = "" / >
2024-11-06 15:55:54 +01:00
< / p >
2025-01-28 18:18:59 +01:00
< h3 id = "plugin" > Plugin< a hidden class = "anchor" aria-hidden = "true" href = "#plugin" > #< / a > < / h3 >
2024-11-06 15:55:54 +01:00
< p > Unsere Funktion:< / p >
< pre tabindex = "0" > < code > /**
*Plugin Name: relilab Termine
*/
add_shortcode(' termine' ,' termineAusgeben' );
function termineAusgeben( $atts ) {
$posts = get_posts(array(
' post_type' => ' post' ,
' posts_per_page' => -1,
' category' => ' termine' ,
' meta_key' => ' relilab_startdate' ,
' orderby' => ' meta_value' ,
' order' => ' DESC'
));
// ob_start();
global $post;
?>
< ul>
< ?php
foreach ($posts as $post) {
setup_postdata( $post )
?>
< li>
< a href=" < ?php the_permalink(); ?> " > < ?php the_title(); ?> (date: < ?php the_field(' relilab_startdate' ); ?> )< /a>
< /li>
< ?php
}
?>
< /ul>
< ?php
wp_reset_postdata();
// return ob_get_clean();
}
< / code > < / pre >
< / div >
2025-01-28 18:18:59 +01:00
< footer class = "post-footer" >
< ul class = "post-tags" >
< / ul >
< / footer >
< / article >
< / main >
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
< footer class = "footer" >
2025-02-01 07:52:15 +01:00
< span > © 2025 < a href = "https://joerg-lohrer.de/" > 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);
}
}
2024-11-06 15:55:54 +01:00
2025-01-28 18:18:59 +01:00
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 >
