Flatsome, WordPress

Wie man einen Untertitel in Accordion-Elementen des Flatsome-Themes hinzufügt: Eine Schritt-für-Schritt-Anleitung

Von Massimo Di Chiara·Webdesigner & Entwickler·3 Min. Lesezeit

functions.php

Schritt 1: Erstelle ein Child-Theme

Bevor du Änderungen vornimmst, stelle sicher, dass du ein Child-Theme eingerichtet hast. Child-Themes ermöglichen es dir, Änderungen vorzunehmen, ohne das Haupt-Theme zu beeinflussen, und schützen deine Anpassungen vor zukünftigen Updates.

Schritt 2: Füge die benutzerdefinierte Shortcode-Registrierung in der functions.php hinzu

functions.php

<?php
// Entferne die bestehenden Shortcodes für Accordion und Accordion-Item
remove_shortcode('accordion');
remove_shortcode('accordion-item');

// Registriere die Shortcodes neu, um die Child-Theme-Dateien zu verwenden
add_action('init', 'register_custom_accordion_shortcodes');

function register_custom_accordion_shortcodes() {
 // Verwende die angepassten Dateien aus dem Child-Theme
 add_shortcode('accordion', 'custom_ux_accordion');
 add_shortcode('accordion-item', 'custom_ux_accordion_item');
}

// Eigene Funktion für Accordion-Shortcode
function custom_ux_accordion($atts, $content = null) {
 global $flatsome_accordion_state;

 extract(shortcode_atts(array(
 'auto_open' => '',
 'open' => '',
 'title' => '',
 'class' => '',
 'faq_schema' => '',
 ), $atts));

 if ($auto_open) $open = 1;

 array_push($flatsome_accordion_state, array(
 'open' => (int)$open,
 'current' => 1,
 'faq_schema' => filter_var($faq_schema, FILTER_VALIDATE_BOOLEAN),
 ));

 $classes = array('accordion');
 if ($class) $classes[] = $class;

 if ($title) $title = '<h3 class="accordion_title">' . $title . '</h3>';

 $result = wp_kses_post($title) . '<div class="' . esc_attr(implode(' ', $classes)) . '">' . do_shortcode($content) . '</div>';

 array_pop($flatsome_accordion_state);

 return $result;
}

// Eigene Funktion für Accordion-Item-Shortcode
function custom_ux_accordion_item($atts, $content = null) {
 global $flatsome_accordion_state;

 $atts = shortcode_atts(
 array(
 'id' => 'accordion-' . wp_rand(),
 'title' => 'Accordion Panel',
 'subtitle' => '', // Subtitle-Feld hinzugefügt
 'anchor' => '',
 'class' => '',
 ),
 $atts
 );

 $is_open = false;
 $classes = array('accordion-item');
 $title_classes = array('accordion-title', 'plain');

 if (is_array($flatsome_accordion_state) && isset($flatsome_accordion_state['current']) && isset($flatsome_accordion_state['open']) && $flatsome_accordion_state['current'] === $flatsome_accordion_state['open']) {
 $is_open = true;
 $title_classes[] = 'active';
 }

 if (!empty($atts['class'])) $classes[] = $atts['class'];

 $link_atts = array(
 'id' => esc_attr($atts['id']) . '-label',
 'class' => esc_attr(implode(' ', $title_classes)),
 'href' => !empty($atts['anchor']) ? '#' . rawurlencode($atts['anchor']) : esc_url('#accordion-item-' . sanitize_title($atts['title'])),
 'aria-expanded' => $is_open ? 'true' : 'false',
 'aria-controls' => esc_attr($atts['id']) . '-content',
 );

 ob_start();
 ?>
 <div id="<?php echo esc_attr($atts['id']); ?>" class="<?php echo esc_attr(implode(' ', $classes)); ?>">
 <a <?php echo flatsome_html_atts($link_atts); ?>>
 <button class="toggle" aria-label="<?php esc_attr_e('Toggle', 'flatsome'); ?>">
 <i class="icon-angle-down"></i>
 </button>
 <span><?php echo esc_html($atts['title']); ?></span>

 <!-- Ausgabe des Subtitles -->
 <?php if (!empty($atts['subtitle'])) : ?>
 <p class="accordion-subtitle" style="font-size: 14px; color: #666;">
 <?php echo esc_html($atts['subtitle']); ?>
 </p>
 <?php endif; ?>
 </a>
 <div id="<?php echo esc_attr($atts['id']); ?>-content" class="accordion-inner">
 <?php echo do_shortcode($content); ?>
 </div>
 </div>
 <?php

 return ob_get_clean();
}

Schritt 3: Hinzufügen der Subtitle-Option zum UX Builder

Damit die Option für den Untertitel auch im Backend verfügbar ist, fügen wir dem UX Builder ein entsprechendes Feld hinzu. Hierfür verwenden wir den folgenden Code:

<?php
// UX Builder Subtitle-Option hinzufügen
add_action('ux_builder_setup', 'custom_add_accordion_subtitle_option');

function custom_add_accordion_subtitle_option() {
 if (function_exists('add_ux_builder_shortcode')) {
 add_ux_builder_shortcode('accordion-item', array(
 'name' => __('Accordion Panel', 'flatsome'),
 'type' => 'container',
 'template' => null, // Template wird nicht benötigt
 'info' => '{{ title }}',
 'wrap' => true,
 'options' => array(
 'title' => array(
 'type' => 'textfield',
 'heading' => __('Title', 'flatsome'),
 'default' => __('Accordion Panel Title', 'flatsome'),
 'auto_focus' => true,
 ),
 'subtitle' => array(
 'type' => 'textfield',
 'heading' => __('Subtitle', 'flatsome'),
 'default' => '',
 ),
 'anchor' => array(
 'type' => 'textfield',
 'heading' => __('Anchor', 'flatsome'),
 'default' => '',
 ),
 'class' => array(
 'type' => 'textfield',
 'heading' => __('Custom Class', 'flatsome'),
 'default' => '',
 ),
 ),
 ));
 }
}

Schritt 4: Cache leeren und Änderungen testen

functions.php

Fazit

Mit diesen einfachen Anpassungen kannst du nun in deinem Flatsome-Theme Untertitel zu Accordion-Elementen hinzufügen. Diese Lösung bietet dir mehr Flexibilität und Kontrolle über die Gestaltung deiner Inhalte. Denke daran, deine Änderungen in einem Child-Theme vorzunehmen, um sie bei zukünftigen Updates des Haupt-Themes zu bewahren.

Hast du Fragen oder benötigst Unterstützung? Hinterlasse einen Kommentar oder kontaktiere uns direkt!