Free Schema Ready Accordion For Code Snippets

This code snippet creates an accordion menu on WordPress using the “Code Snippets” plugin, enabling users to embed collapsible sections within their content. When the shortcode ( accordion ) is used, it triggers the custom_accordion_shortcode function, which enqueues the jQuery UI Accordion script and applies custom styles to the accordion elements. The styles define the visual appearance, such as background colors, font sizes, and hover effects for the accordion headers and content. The content within the shortcode is processed to wrap each section title (<h3>) and its corresponding content in a div with the class accordion-content. This transformation prepares the content for the accordion functionality.

Additionally, the function generate_json_ld is called within the shortcode function to generate structured data for the content. It scans the content for sections marked by <h3> tags and extracts the text to form FAQ entries. Each FAQ entry includes a question (the text within the <h3> tags) and an answer (the text following each <h3> tag). This structured data is stored globally in $GLOBALS[‘custom_accordion_faqs’]. The structured data is used to enhance search engine results by providing clear and concise information about the FAQ items on the page, potentially leading to better visibility and higher click-through rates in search results.

Finally, the output_json_ld_schema function is hooked to the wp_footer action, ensuring that the structured data is output as JSON-LD script in the footer of the page. This script uses the schema.org format to describe the FAQ content, allowing search engines like Google to understand and present the information effectively in search results. By consolidating all FAQ items on the page, this approach improves SEO performance and provides a better user experience by making the content more accessible and organized.

//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');

Warning: All code found on this site is use at your own risk vibe. It worked for me when I wrote it, but if it breaks your stuff don’t come shout at me. Happy to help if I can, but there are no guarantees expressed and implied. This is merely an example for developers most of the code examples on this site are scripts that are used in Code Snippets functions.

Here’s an example of the shorcode / accordion in action and using the h3’s to to create the accordion titles. You can re-style to suit your website. You can view the Markup Schema for the accordion on Google Snippets thingy here.

Overview

This code snippet creates an accordion menu on WordPress using the “Code Snippets” plugin. It enhances user experience by allowing content to be displayed in collapsible sections and also generates structured data (JSON-LD) for better search engine optimization (SEO). The accordion functionality is activated through a custom shortcode, and the structured data helps improve search results by consolidating FAQ items.

Enqueue Necessary Scripts and Styles

The function enqueue_prism_and_clipboard is responsible for enqueuing the necessary scripts and styles. It loads the jQuery UI Accordion script and custom CSS styles that define the appearance of the accordion elements. This ensures that the accordion menu is styled correctly and functions properly when rendered on the webpage.

Custom Accordion Shortcode

The custom_accordion_shortcode function is the core of the accordion functionality. When the

shortcode is used, this function processes the content to wrap each section title (<h3>) and its corresponding content within a div with the class accordion-content. It also injects custom CSS styles directly into the HTML to style the accordion. After processing the content, it initializes the accordion using jQuery, making the sections collapsible and enhancing user interaction.

Accordion Styles

The custom styles within the custom_accordion_shortcode function define the visual appearance of the accordion. These styles include settings for the background color, text color, padding, cursor changes on hover, and transitions for expanding and collapsing the sections. These styles ensure that the accordion is visually appealing and consistent with the website’s design.

Generate JSON-LD Structured Data

The function generate_json_ld is called within the custom_accordion_shortcode function to generate structured data from the content. It scans the content for <h3> tags to identify sections, extracting the text to form questions and answers. This structured data is formatted according to the schema.org FAQPage specification and stored globally in $GLOBALS[‘custom_accordion_faqs’]. This helps search engines understand the content better and improves the visibility of FAQ items in search results.

Output JSON-LD Schema

The output_json_ld_schema function is hooked to the wp_footer action, ensuring that the structured data is included in the footer of the webpage as a JSON-LD script. This script provides search engines with detailed information about the FAQ content, enhancing SEO by making the content more accessible and likely to appear in rich results on search engine result pages.

Final Integration

By integrating these functions and styles, the code snippet provides a comprehensive solution for creating an accordion menu in WordPress. It not only improves user experience by making content collapsible and easy to navigate but also boosts SEO performance through the use of structured data. The combination of custom shortcodes, jQuery functionality, and schema markup ensures that the content is both user-friendly and optimized for search engines.

"The memory management on the PowerPC can be used to frighten small children."

Linus Torvalds

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top