Elementor 开发者文档

title: "Print Widget Template" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Hooks - Src - Repos

Print Widget Template

Elementor has a hook that lets developers change a widget's JavaScript template in the preview area.

Hook Details

Hook Arguments

Argument Type Description
template string The JavaScript template output
widget \Elementor\Widget_Base The widget instance

Example

/**
 * Update the heading widget JS template in Elementor preview.
 *
 * Adds an icon to all the external links.
 *
 * @since 1.0.0
 * @param string                 $template The JavaScript template output.
 * @param \Elementor\Widget_Base $widget   The widget instance.
 */
function change_heading_js_template( $template, $widget ) {

    if ( 'heading' === $widget->get_name() ) {
        $old_template = '<a href="\' + settings.link.url + \'">\' + title_html + \'</a>';
        $new_template = '<a href="\' + settings.link.url + \'">\' + title_html + ( settings.link.is_external ? \'<i class="fa fa-external-link" aria-hidden="true"></i>\' : \'\' ) + \'</a>';
        $template = str_replace( $old_template, $new_template, $template );
    }

    return $template;

}
add_filter( 'elementor/widget/print_template', 'change_heading_js_template', 10, 2 );

The code above is only an example. We do not recommend using str_replace on templates, because the template may be changed and the str_replace will fail. Instead, edit the entire original template for your needs.

Notes

To change the widget content in the frontend see elementor/widget/render_content.