如何在Wordpress后端中插入简码

时间:2019-03-20 01:40:16

标签: javascript php wordpress shortcode

我需要在wordpress后端页面中插入一个聊天whatsapp按钮,但我不知道如何使它工作。我尝试使用此代码,但无法:

function lh_add_whatsapp_js_code() {
?>
    <!-- Start of whatsapp code -->
<script type="text/javascript">
    var yourHTML = '<div class="mydiv"><?php do_shortcode("[njwa_button id="1044"]");?></div>';
    document.getElementsByClassName('services-right')[0].innerHTML = yourHTML;
</script>
    <!-- End of Whatsapp code -->
<?php
}
add_action( 'admin_footer', 'lh_add_whatsapp_js_code' ); // For back-end

我将这段代码放入了子主题的functions.php文件中。

1 个答案:

答案 0 :(得分:0)

首先,我不是专家。我将发布一个适用于我的示例,您可以根据需要对其进行修改。

第1步

将whatssapp API作为常规脚本声明为functions.php文件中的函数:

    Function anyname_function(){
  wp_enqueue_style( 'whatssapp','https://api.whatsapp.com/send?phone=593xxxxxxxx&text=Hi%21%20I%20Want%20information%20about%20you.' );
  wp_enqueue_style('fontawesome','https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');  //whatssap icon from bootstrap


}

add_action('wp_enqueue_scripts', 'anyname_function');

第2步

在header.php文件中,我们编写了这段代码

<!-- whatssapp icon -->

  <a id="whatssap"  class="float" target="_blank">
  <i class="fa fa-whatsapp my-float"></i>
  </a>

  <!-- end whatssap icon -->

第3步

在您的style.css文件中,您必须定义样式,就我而言,它仅适用于移动设备,因此让我们看一下示例:

@media (max-width: 719px){

        #whatssap{
            display:block;
        }

        .float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
  font-size:30px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
    margin-top:16px;
}


.my-float{
    margin-top:16px;
}

}

就这样,或者您可以从wordpress网站上下载插件。