Cal.com-Kalender im WordPress-Block-Theme per Shortcode einbinden (auf Basis des „Inline-Einbettung“-Codes)

Einführung

Diese Anleitung zeigt, wie Sie den Cal.com Kalender als Shortcode in Ihr WordPress-Theme einbinden. Der Code wird direkt von Cal.com generiert und für optimale Performance angepasst.

Schritt 1: Kalender-Code von Cal.com holen

1. Gehen Sie zu app.cal.com
2. Wählen Sie Ihren Event-Type aus
3. Klicken Sie auf das Menü-Symbol (⋯) rechts
4. Wählen Sie “<> Einbetten”
5. Wählen Sie “Inline Einbettung”
6. Kopieren Sie den generierten Code

Schritt 2: Template-Datei erstellen

Erstellen Sie eine Datei namens calcom-section.php im Verzeichnis /wp-content/themes/IHR-THEME/parts/php/ und fügen Sie den kopierten Code ein:

<!-- Cal inline embed code begins --> 
<div style="width:100%;height:100%;overflow:scroll" 
     id="my-cal-inline-secret"></div> 

<script type="text/javascript"> 
    (function (C, A, L) { 
        let p = function (a, ar) { 
            a.q.push(ar); 
        }; 
        let d = C.document; 
        C.Cal = C.Cal || function () { 
            let cal = C.Cal; 
            let ar = arguments; 
            if (!cal.loaded) { 
                cal.ns = {}; 
                cal.q = cal.q || []; 
                d.head.appendChild(d.createElement("script")).src = A; 
                cal.loaded = true; 
            } 
            if (ar[0] === L) { 
                const api = function () { 
                    p(api, arguments); 
                }; 
                const namespace = ar[1]; 
                api.q = api.q || []; 
                if (typeof namespace === "string") { 
                    cal.ns[namespace] = cal.ns[namespace] || api; 
                    p(cal.ns[namespace], ar); 
                    p(cal, ["initNamespace", namespace]); 
                } else { 
                    p(cal, ar); 
                } 
                return; 
            } 
            p(cal, ar); 
        }; 
    })(window, "https://app.cal.com/embed/embed.js", "init"); 

    Cal("init", "secret", { origin: "https://app.cal.com" }); 

    Cal.ns.secret("inline", { 
        elementOrSelector: "#my-cal-inline-secret", 
        config: { "layout": "month_view" }, 
        calLink: "my-cal-inline/secret" 
    }); 

    Cal.ns.secret("ui", { 
        "hideEventTypeDetails": false, 
        "layout": "month_view" 
    }); 
</script> 

<!-- Cal inline embed code ends -->

Schritt 3: Shortcode-Funktion in functions.php einfügen

Fügen Sie diesen Code in die functions.php Ihres Themes ein:

function cal_shortcode() { 
    ob_start(); 
    
    $template = get_stylesheet_directory() . '/parts/php/calcom-section.php'; 
    
    if (file_exists($template)) { 
        // Inhalte direkt ausgeben ohne Filter 
        echo file_get_contents($template); 
    } else { 
        echo '<p>Die Datei "calcom-section" wurde nicht gefunden.</p>'; 
    } 
    
    $output = ob_get_clean(); 
    
    // Zeilenumbrüche entfernen, die WordPress veranlassen könnten, p-Tags einzufügen 
    return str_replace(array("\r", "\n"), '', $output); 
} 

add_shortcode('cal_com_embed', 'cal_shortcode'); 
 

Erklärung zur Zeilenumbruch-Entfernung

Die Zeile return str_replace(array("\r", "\n"), '', $output); ist wichtig, weil:

1. WordPress Auto-Formatierung: WordPress fügt automatisch <p>-Tags um Inhalte ein, die es als Absätze interpretiert
2. Zeilenumbrüche als Trigger: Zeilenumbrüche (\r, \n) können dazu führen, dass WordPress denkt, es handele sich um neue Absätze
3. JavaScript-Konflikte: Durch unerwünschte <p>-Tags im JavaScript-Code kann die Ausführung des Kalender-Scripts fehlschlagen
4. Validität des HTML: Durch die Entfernung der Zeilenumbrüche bleibt der HTML-Code kompakt und wird nicht versehentlich von WordPress modifiziert

Schritt 4: Shortcode verwenden

Verwenden Sie den Shortcode cal_com_embed in Ihren Seiten, Beiträgen oder im Block-Editor:

1. Im Classic Editor: Einfach zwischen eckigen Klammer [ ] cal_com_embed einfügen.
2. Im Gutenberg Editor:
   • “Shortcode”-Block hinzufügen
   • zwischen eckigen Klammer [ ] cal_com_embed einfügen. eingeben