Elementor 使用自定义简码破坏网站

Posted 2023-02-19

【中文标题】Elementor 使用自定义简码破坏网站

【英文标题】：Elementor breaks site with custom shortcode

【发布时间】：2019-01-26 01:23:53

【问题描述】：

我创建了一个自定义简码，其中包含一个特殊循环，其中包含来自不同多站点博客的所有帖子。此解决方案由此插件提供：https://rudrastyh.com/。简码在所有正常页面和帖子中都能完美运行。

但我也在使用页面构建器 Elementor。将此简码插入 Elementor 时，发生了一些奇怪的事情：在编辑器模式下，简码输出显示两次，一次在编辑器区域的顶部，另一次在我实际放置简码的地方。当我点击保存时，我的整个网站都会中断并在访问任何页面时显示标准图像。那么唯一的解决办法就是恢复我最新的数据库备份。

这里给大家看几张编辑器模式的截图：

这是我的简码功能：

// Add Shortcode
function all_events_shortcode ($atts) 

    // Attributes
    $atts = shortcode_atts(
        array(
            'lang' => '',
            'blog' => '',
        ),
        $atts
    );





        // Network_Query parameters
        $args = array(
            'posts_per_page' => 14,
            'blog_id' => esc_attr($atts ['blog']),
            'lang' => esc_attr($atts ['lang']),
            'orderby' => 'meta_value_num',
            'order' => 'ASC',
            'post_type' => 'noo_event',
            'meta_key'  => '_noo_event_start_date',
            'meta_value' => date( "U" ),
            'meta_compare' => '>'
        );

        $network_q = new Network_Query( $args );

        // if there are posts, then print <ul>
        if( $network_q->have_posts() ) :
            echo '<div id="all_events">';

            // run the loop
            while( $network_q->have_posts() ) : $network_q->the_post();

                // the get_permalink() function won't work without switch_to_blog()
                // you can use network_get_permalink() instead but it is a little slower
                switch_to_blog( $network_q->post->BLOG_ID );

        // Get the dates
        $start_date=get_post_meta($network_q->post->ID, '_noo_event_start_date', true);
        $_start_date = gmdate("d.m.Y", $start_date);

        $end_date=get_post_meta($network_q->post->ID, '_noo_event_end_date', true);
        $_end_date = gmdate("d.m.Y", $end_date);


                // you can obtain the post title from $network_q->post object
                echo '<div class="all_events_item post-' . $network_q->post->ID . ' blog-' . $network_q->post->BLOG_ID . '">
                    <div class="all_events_img">
                        <a href="' . get_permalink( $network_q->post->ID ) . '">
                            '.get_the_post_thumbnail( $network_q->post->ID, 'large' ).'
                        </a>
                    </div>

                    <div class="all_events_content">
                        <h2><a href="' . get_permalink( $network_q->post->ID ) . '">' . $network_q->post->post_title . '</a></h2>
                        <br />
                        <span class="start_date">'.$_start_date.'</span> - 
                        <span class="end_date">'.$_end_date.'</span>
                    </div>
                </div>';

                // restore_current_blog() to switch to the previous (!) website
                restore_current_blog();
            endwhile;

            echo '</div>';
        endif;
        network_reset_postdata(); // add it after the loop if you plan to use Network_Query multiple times on the page

add_shortcode('all-events', 'all_events_shortcode');

您能否给我一些提示，我该如何解决这个问题？

最好的祝福

【问题讨论】：

短代码不应该echo 任何东西，而只能是return。

【参考方案1】：

试试这个，它对我有帮助。 添加ob_start();，然后添加ob_get_clean();

function function_name()
  ob_start();
    
  //..your code here...
    
  $content = ob_get_clean();
  return $content;

    
add_shortcode('shortcode_name','function_name');

在这里找到解决方案并尝试过。它对我有用。 Elementor page builder shortcode issue

原作：https://***.com/a/48813883/9364624

发布者：https://***.com/users/1753934/colin-oakes

【参考方案2】：

您需要在变量中绑定 html，然后从短代码返回此 HTML..

请检查下面的代码

function _login_popup() 

$html = '<form id="user-login-form" method="post" action="#" class="js-form-redirect js-form-action" novalidate="">
           <div class="floating-label form-group">
              <input id="useremail" name="user_name" required="" value="" type="email">
              <label for="useremail">Email</label>
           </div>
           <div class="floating-label form-group">
              <input id="userpassword" name="password" required="" value="" type="password">
              <label for="userpassword">Password</label>
           </div>
           <div class="o-form__buttons text-right --small-center">
              <button type="submit" id="submit_login" class="a-button-form --save a-no-before" value="edit">Sign in</button>
           </div>
  </form>';
return $html;

add_shortcode('yg-login-popup', '_login_popup');

在这个shotcode中我创建了登录表单..