Trick # 252 | Dieser Beitrag beinhaltet 500 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Das Divi-Theme bietet ein Galeriemodul, mit dem Sie eine Diashow von Bildern in Ihren Beiträgen anzeigen können. Mit einem Hack – bestehend aus PHP-Code – können Sie die enthaltenen Galeriebilder zusätzlich zählen lassen.
Der Zähler kann einfach installiert werden. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei functions.php ein. Sie finden die Datei unter Design/Theme-Editor:
add_filter('et_pb_gallery_shortcode_output', 'add_gallery_image_count');
function add_gallery_image_count($output) {
$total = substr_count($output, 'class="et_pb_gallery_item ');
$counter = '<div class="slide-counter"><span class="slide-counter-active">1</span> '.esc_html__('von', 'gallery-counter').' <span class="slide-counter-total">'.esc_html($total).'</span></div>';
$output = preg_replace('/<\/div>$/s', $counter.'</div>', $output);
return $output;
}
add_action('wp_footer', 'update_image_count');
function update_image_count() { ?>
<script>
jQuery(function($){
function update($gallery) {
setTimeout(
function($gallery) {
$gallery.find('.slide-counter-active').text($gallery.find('.et-pb-active-slide').index()+1);
},
50,
$gallery
);
}
update($('.et_pb_gallery'));
$(document).on('mouseup', '.et_pb_gallery .et-pb-slider-arrows a, .et_pb_gallery .et-pb-controllers a',
function () {
update($(this).closest('.et_pb_gallery'));
}
);
});
</script>
<?php
}Das war’s schon. Die Bilder werden nun gezählt und nach dem Muster «3 von 34» angezeigt.
Übersetzen des Bildzähltextes
Wenn Sie eine andere Sprache als Deutsch verwenden, ist die Zeichenkette «von» übersetzbar. Zum Beispiel mit einem Plugin wie «WPML» oder mit dem folgenden PHP-Code. Auch diesen Code fügen Sie in die Datei functions.php (unter Design/Theme-Editor) ein:
add_filter('gettext', 'translate_gallery_image_count', 10, 3 );
function translate_gallery_image_count($translated, $untranslated, $domain) {
if (!is_admin() && $domain === 'gallery-counter') {
if ($untranslated === 'von') {
$translated = 'fr';
}
}
return $translated;
}In Zeile 6 ist «fr» für französisch hinterlegt. Allenfalls müssen Sie diesen Sprachcode Ihren Bedürfnissen anpassen.
Werbung
Werbung
