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.
[code]
//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 = ‘
‘; // Shortened for brevity
$processed_content = do_shortcode(shortcode_unautop($content));
$processed_content = preg_replace(‘/(
.*?<\/h3>)(.*?)(?=
|$)/si’, ‘$1
$2
‘, $processed_content);
$return = $custom_styles . ‘
‘;
generate_json_ld($content);
$return .= ‘‘; // Your accordion script here, shortened for brevity
return $return;
}
function generate_json_ld($content) {
preg_match_all(‘/
- ‘);
$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 ‘‘;
}
}
add_action(‘wp_footer’, ‘output_json_ld_schema’);
add_shortcode(‘accordion’, ‘custom_accordion_shortcode’);
[/code]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 .kadabra{background:#f1f1f1;color:#333;border:1px solid #e0e0e0;padding:0;margin:0 auto 10px auto;max-width:900px;border-radius:0;box-shadow:0 2px 16px #0002;}.kadabra h3{background:#3782a6;color:#fff;padding:18px 48px 18px 24px;cursor:pointer;position:relative;transition:background-color .25s,color .25s;font-size:1.08em;margin:0;border-radius:0;border-bottom:1px solid #e0e0e0;font-weight:500;letter-spacing:0.01em;box-shadow:none;outline:none;}.kadabra h3:last-of-type{border-bottom:none;}.kadabra h3:hover,.kadabra h3:focus{background:#222!important;color:#fff!important;}.kadabra h3.active{background:#000!important;color:#fff!important;}.kadabra h3:after{content:"+";position:absolute;right:28px;top:50%;transform:translateY(-50%);font-size:1.35em;color:#fff;transition:color .25s;}.kadabra h3.active:after{content:"-";color:#fff;}.kadabra-faq-content{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),padding .15s;background:#fff;color:#222;padding:0 24px;margin:0;border-radius:0;border-bottom:1px solid #e0e0e0;}.kadabra-faq-content.open{max-height:500px!important;padding:16px 24px;}.kadabra ul,.kadabra ol{margin:10px 0 10px 20px;}.kadabra li{margin-bottom:8px;}
document.addEventListener("DOMContentLoaded",function(){var accs=document.querySelectorAll(".kadabra");accs.forEach(function(acc){var headers=acc.querySelectorAll("h3");headers.forEach(function(h){h.addEventListener("click",function(){headers.forEach(function(o){o.classList.remove("active");if(o.nextElementSibling&&o.nextElementSibling.classList)o.nextElementSibling.classList.remove("open");});h.classList.toggle("active");var p=h.nextElementSibling;if(p&&p.classList)p.classList.toggle("open");});});});}); 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.
More like this
Join the conversation