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 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-12 19:43:36 +01:00
< link rel = "canonical" href = "http://localhost:1313/2021/11/17/wordpress-werkstatt.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/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-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 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" >
2025-02-12 19:43:36 +01:00
< img loading = "eager" src = "http://localhost:1313/2021/11/17/wordpress-werkstatt.html/04-termine-neu.png" alt = "" >
2025-02-01 07:52:15 +01:00
< / 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 >
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);
}
}
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 >
