<?php
// Google Pagespeed insights may complain about links without a href not being crawlable.
// The following code replaces these <a> tags with class .facetwp-toggle with <span> tags.
// .facetwp-toggle links are in Checkboxes, Hierarchy and Color facets.
// Option 1: with JS
add_action( 'facetwp_scripts', function() {
?>
<script>
document.addEventListener('facetwp-loaded', function() {
const anchorElements = document.querySelectorAll('a.facetwp-toggle');
anchorElements.forEach(anchor => {
const span = document.createElement('span');
for (let i = 0; i < anchor.attributes.length; i++) {
const attribute = anchor.attributes[i];
if (attribute.name !== 'href') {
span.setAttribute(attribute.name, attribute.value);
}
}
span.innerHTML = anchor.innerHTML;
if (anchor.parentNode) {
anchor.parentNode.replaceChild(span, anchor);
}
});
});
</script>
<?php
}, 100 );
// Option 2: with the 'facetwp_facet_html' hook
add_filter( 'facetwp_facet_html', function( $output, $params ) {
if ( in_array( $params['facet']['type'], [ 'checkboxes', 'hierarchy', 'color' ] ) ) {
// Regex to find <a> tags with class="facetwp-toggle" and capture their content and any other attributes
$pattern = '/<a\s+(class="[^"]*\bfacetwp-toggle\b[^"]*")([^>]*)>(.*?)<\/a>/si';
// Replacement string: change <a> to <span>, keep class and other attributes, and content
// $1 captures the class attribute
// $2 captures any other attributes
// $3 captures the inner HTML content
$replacement = '<span $1$2>$3</span>';
$output = preg_replace( $pattern, $replacement, $output );
}
return $output;
}, 10, 2 );