Elementor社交图标组件：无ACF URL时隐藏图标及钩子使用问题

以下提供两种实用方案，根据你的ACF字段绑定方式选择：

方案一：渲染前过滤空链接图标（高效推荐） #

通过钩子在组件渲染前直接修改图标列表数据，移除空链接项，避免后续HTML处理开销。

add_filter( 'elementor/widget/args/before_render', function( $widget_args, $widget ) {
    // 仅针对社交图标组件
    if ( 'social-icons' !== $widget->get_name() ) {
        return $widget_args;
    }

    $post_id = get_the_ID();
    if ( ! $post_id ) {
        return $widget_args;
    }

    // 获取组件的图标设置列表
    $items = $widget->get_settings_for_display( 'social_icon_list' );
    if ( empty( $items ) ) {
        return $widget_args;
    }

    // 过滤空链接的图标
    $filtered_items = array_filter( $items, function( $item ) use ( $post_id ) {
        // 解析动态标签，获取ACF字段的实际值（适用于组件链接绑定ACF动态标签的情况）
        $link_value = \Elementor\Plugin::$instance->dynamic_tags->parse_tag( $item['link']['url'] );
        
        // 若你是按图标类型对应不同ACF字段，可替换为以下逻辑（示例）：
        // switch( $item['social_icon'] ) {
        //     case 'facebook': $link_value = get_field( 'facebook_link', $post_id ); break;
        //     case 'twitter': $link_value = get_field( 'twitter_link', $post_id ); break;
        // }
        
        return ! empty( trim( $link_value ) );
    } );

    // 更新组件设置，移除空链接图标
    $widget->set_settings( 'social_icon_list', $filtered_items );

    return $widget_args;
}, 10, 2 );

方案二：渲染后清理空链接图标（兜底方案） #

如果动态标签解析有问题，可直接处理渲染后的HTML，移除空链接的图标元素。

add_filter( 'elementor/widget/render_content', function( $content, $widget ) {
    if ( 'social-icons' !== $widget->get_name() ) {
        return $content;
    }

    // 解析HTML并清理空链接图标
    $dom = new DOMDocument();
    libxml_use_internal_errors( true );
    $dom->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) );
    libxml_clear_errors();

    $links = $dom->getElementsByTagName( 'a' );
    // 反向遍历避免索引错乱
    for ( $i = $links->length - 1; $i >= 0; $i-- ) {
        $link = $links->item( $i );
        $href = $link->getAttribute( 'href' );
        
        // 移除空链接或占位符链接的图标容器
        if ( empty( trim( $href ) ) || '#' === $href ) {
            $parent = $link->parentNode;
            $parent && $parent->parentNode->removeChild( $parent );
        }
    }

    // 清理DOM生成的多余标签
    $content = $dom->saveHTML();
    $content = preg_replace( '/^<!DOCTYPE.+?>/', '', str_replace( array( '<html>', '</html>', '<body>', '</body>' ), '', $content ) );

    return $content;
}, 10, 2 );

使用说明 #

1. 将代码添加到当前主题的functions.php文件，或自定义插件中
2. 根据你的ACF字段绑定方式调整代码逻辑（比如按图标类型匹配字段的情况）
3. 测试时确保ACF字段为空时，对应图标不再显示

内容的提问来源于stack exchange，提问作者StripyTiger