Das Flatsome-Theme ist ein beliebtes WordPress-Theme, das für seine anpassbaren Funktionen und den benutzerfreundlichen UX Builder bekannt ist. Eine häufige Herausforderung besteht jedoch darin, dass keine integrierte Option zum Hinzufügen von Untertiteln in Accordion-Elementen vorhanden ist. In dieser Anleitung zeigen wir dir, wie du ein Feld für Untertitel in deinen Accordion-Elementen im Flatsome-Theme mithilfe von benutzerdefiniertem Code in der functions.php deines Child-Themes hinzufügst. Lass uns loslegen!
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
Jetzt müssen wir die Standard-Shortcodes für Accordion-Elemente entfernen und durch benutzerdefinierte Shortcodes ersetzen. Öffne die functions.php deines Child-Themes und füge folgenden Code hinzu:
<?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
Nachdem du den gesamten Code in die functions.php deines Child-Themes eingefügt hast, leere den Cache deines Browsers und die Cache-Plugins deiner Webseite. Lade dann die Seite neu, um sicherzustellen, dass die Änderungen wirksam sind.
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!
