Free Schema Ready Accordion For Code Snippets

//This code snippet creates an accordion menu on WordPress using the "code snippets" plugin. It converts between shortcodes into sections styled with "kadabra-accordion" and then generates schema data for Google to improve search results consolidating all FAQ items on the page.

$GLOBALS['custom_accordion_faqs'] = [];
function custom_accordion_shortcode($atts, $content = null) {
wp_enqueue_script('jquery-ui-accordion');
 $custom_styles = '<style>
.kadabra-accordion, .kadabra-accordion * {margin:0; padding:0; box-sizing:border-box;}
.kadabra-accordion {background-color:#f4f6f8; color:#FFF; border:0px solid #012e60;}
.kadabra-accordion h3 {background-color:#000000; color:#ffffff; padding:3px 1.5%; cursor:pointer; position:relative; transition:background-color .3s ease;font-size: 1.2em;}
.kadabra-accordion .ui-accordion-content {color:#012e60; padding:0px; border-top:none;}
.kadabra-accordion .ui-accordion-content p {margin-top:0; margin-bottom:0;}
.kadabra-accordion .ui-accordion-content a {color:#1866e7; text-decoration:underline;} 
.kadabra-accordion .ui-accordion-content a:hover {color:#f14e4e;} 
.kadabra-accordion h3:hover {color:#fff; background-color:#f14e4e;}
.kadabra-accordion h3:after {content:"+"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#337d92; transition:transform .3s ease;}
.kadabra-accordion h3.ui-accordion-header-active:after {content:"-"; color:#519b2f;}
.ui-accordion-content-active .accordion-content {opacity:1;}
.ui-accordion-content-active .accordion-content p {margin:0;}
.ui-accordion-content-active {margin:2%; padding-bottom:2%;}
</style>'; // Shortened for brevity
    $processed_content = do_shortcode(shortcode_unautop($content));
    $processed_content = preg_replace('/(<h3>.*?<\/h3>)(.*?)(?=<h3>|$)/si', '$1<div class="accordion-content">$2</div>', $processed_content);
    $return = $custom_styles . '<div class="kadabra-accordion">' . $processed_content . '</div>';
    generate_json_ld($content);
    $return .= '<script>
jQuery(function(e){e(".kadabra-accordion").accordion({header:"h3",collapsible:!0,active:!1,heightStyle:"content"})});
    </script>'; // Your accordion script here, shortened for brevity
    return $return;
}
function generate_json_ld($content) {
    preg_match_all('/<h3&#91;^>]*>(.*?)<\/h3>(.*?)(?=<h3|$)/si', $content, $matches, PREG_SET_ORDER);
    if (!empty($matches)) {
        foreach ($matches as $match) {
            $question = strip_tags($match&#91;1&#93;);
            $answer = strip_tags($match&#91;2&#93;, '<p><a><br><ul><ol><li><strong><em>');
            $answer = html_entity_decode(trim($answer), ENT_QUOTES, 'UTF-8');
            $GLOBALS['custom_accordion_faqs'][] = [
                '@type' => 'Question',
                'name' => $question,
                'acceptedAnswer' => [
                    '@type' => 'Answer',
                    'text' => $answer
                ]
            ];
        }
    }
}
function output_json_ld_schema() {
    if (!empty($GLOBALS['custom_accordion_faqs'])) {
        $json_ld = [
            '@context' => 'https://schema.org',
            '@type' => 'FAQPage',
            'mainEntity' => $GLOBALS['custom_accordion_faqs']
        ];
        echo '<script type="application/ld+json">' . json_encode($json_ld) . '</script>';
    }
}
add_action('wp_footer', 'output_json_ld_schema');
add_shortcode('accordion', 'custom_accordion_shortcode');

Copy