php - Wordpress 显示/隐藏评论表单

Question

我的 wordpress 主题有问题。我无法创建一个按钮来显示/隐藏评论表单。

我有一个带有以下代码的comments.php文件：

if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
    ?>
        <p class="no-comments"><?php _e( 'Comments are close.', 'ffita' ); ?></p>
    <?php endif; ?>

<?php comment_form(); ?>

该文件可以正常工作，但我无法修改以添加按钮。

我尝试以这种方式更改它：

首先，我使用以下代码创建新文件comment_form.php ：

comment_form();

然后用这种方式修改comment.php

if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
    ?>
        <p class="no-comments"><?php _e( 'Comments are close.', 'ffita' ); ?></p>
    <?php endif; ?>

   <div class="commenti">
      <button type="button" id="ffita-add-comment" class="btn btn-primary">Add Comment</button>
      <script>
         $(document).ready(function(){
            $("#ffita-add-comment").click(function(){
               event.preventDefault();
               $.ajax({  
                  type: 'GET',  
                  url: '/wordpress/wp-content/themes/ffita/template-parts/comment_form.php',  
                  success: function(response){  
                     $( '#ffita-comment-form' ).html( response ); 
                  },  
    
               });  
            });
         });   
         </script>
      
      <div id="ffita-comment-form">

      </div>

      
    <?php //comment_form(); ?>

但是单击按钮会导致： 致命错误：调用未定义的函数comment_form()

所以我的问题是：如何创建一个按钮以仅在单击时加载 wordpress comment_form() 函数？我的博客上几乎没有评论，如果没有必要，我不想加载不必要的代码（如表单和验证码）。

谢谢

标签： phpjquerywordpress

Answer 1

在我之前的问题中，我遇到了两个问题：

• 在 wordpress 帖子中显示/隐藏评论表单
• 仅在需要时运行 google recaptcha 插件（当用户想要发表评论时）

从逻辑的角度来看，采用的解决方案如下：

• 禁用以前使用的插件
• 默认：通过 css 隐藏 wp 评论表单部分
• 添加按钮“添加评论”...单击时显示评论表单，提交按钮被禁用
• 当用户为输入评论选择文本区域时 - > loag google captcha
• 验证验证码，如果没问题 -> 在 wp 评论表单中启用提交按钮

经过各种研究和测试，我以这种方式解决了......感谢stackoverflow上的各种帖子

1. 我卸载了用于插入 google recaptcha 的插件

2. 在function.php中，当我将 js 脚本加入队列时，我添加了：

wp_enqueue_script( 'ffita_base_functions_js',  get_template_directory_uri() . '/inc/js/ffita_base_functions.min.js', array ( 'jquery' ));  //enqueue js script

wp_localize_script('ffita_base_functions_js',  'ffita_var', array("ffita_theme_path"=> get_template_directory_uri()) );  //use wp_localize_sript to pass var data from PHP to JavaScript 

3. 在style.css文件中，我插入了以下代码：

.comment-respond{
   visibility: hidden;   //default wordpress class for comment form 
}

#ffita-captcha{
    margin: 30px;
}

4. 在我的模板中，我以这种方式更改了comments.php ：

     <button type="button" class="btn btn-primary fita-add-comment">添加评论</button>
     <div id="ffita-captcha"> </div> //将显示谷歌验证码的div

<?php 
   $comments_args = array(
        'class_submit' => 'submit ffita-captcha-submit',    //add a class to standar submit button
   );     
   comment_form($comments_args); ?>    //wordpress function to call comments form
   
 
 <script>
$(document).ready(function() {                      //jquery function
   var id_activation='comment';                     //div id where click active captcha
   var id_captcha_view='ffita-captcha';             //div id where captcha will be displayed 
   $('.ffita-captcha-submit').prop('disabled',true);  //disable comment form submit button
    $('#'+id_activation).on('click', function(){      //when click on comment text area
      ffita_show_captcha(id_captcha_view);            //call js function and pass id where display captcha 
   });
   $('.ffita-add-comment').on('click', function(){     //jquery for button...., when clicked
       $(this).hide();                                 //hide button 
       $('.comment-respond').attr("style", "visibility: visible");  //show comment form
   });
});    
</script>

5. 在文件fita_base_function.js中（以前在 function.php 中排队）我添加了这个函数。注意：我在这个示例脚本中使用了谷歌的开发者密钥。 https://developers.google.com/recaptcha/docs/faq 在生产环境中使用自己的密钥

function ffita_form_activate(resp){  //function call from the next
  var simple_chk=false;              //false or true. see below notes
    if (simple_chk){
    if (resp.length != 0 ) {        //if response lenght is not 0 I evaluate captcha solved
      $('.ffita-captcha-submit').prop('disabled',false);  //enable wp comment submit button
    } 
    else {
      alert ("try again");
      grecaptcha.reset();         //on failed reset captcha
    }
  }
  else {
    if (resp.length != 0 ) {
      local_path=ffita_var.ffita_theme_path;     //var passed through wp_localize_script (theme root dir)
      $.ajax({
        url: local_path+'/inc/g_recaptcha_verify.php',   //php file for captcha verification see below
        type:'POST',
        data:{resp:resp},
          success: function (response) {              //php file returns OK if captcha was solved correctly
            if (response=="OK"){
              $('.ffita-captcha-submit').prop('disabled',false);
            }
            else {
              alert ("try again")
              grecaptcha.reset();
            }
          }
      });
    }
    else {
      alert ("try again");
      grecaptcha.reset();
    }
  }
}



var captchaLoaded = false;

function ffita_show_captcha(id_captcha_view){ //function call from jquery - comment.php
  // If we have loaded script once already, exit.
  if (captchaLoaded) {
    return;
  }
  // Variable Intialization
  var head = document.getElementsByTagName('head')[0];
  var recaptchaScript = document.createElement('script');

  
  //key for develop (site key)
  var recaptchaKey = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI';   //is key for developer...insert you public key!!
  
  // Dynamically add Recaptcha Script
  recaptchaScript.type = 'text/javascript';
  recaptchaScript.src = 'https://www.google.com/recaptcha/api.js';
  
  // Dynamically load  script 
  head.appendChild(recaptchaScript);
  
  //check grecaptcha is defined otherwise I wait
  var poll;
  var timeout = 200;
  poll = function () {
    setTimeout(function () {
      timeout--;
      if (typeof grecaptcha !== 'undefined') {
        grecaptcha.render(id_captcha_view,    //where catpcha  is shown
          {
           'sitekey': recaptchaKey,
           'theme': "light",
           'callback': ffita_form_activate, //call for prev function, return response from google function
          }
         );
      }
      else if (timeout > 0) {
        poll();
      }
      else {
        alert ("Failed to load. Please retry");
      }
    }, 200);
  };
  poll();
   
  //Set flag to only load once
   captchaLoaded = true;
}

注意：在 fita_form_activate 函数中，我有两种不同的方法来测试验证码响应......基于 simple_chk var。如果 simple_chk 为真，我检查从 grecaptcha.render 收到的响应的长度。如果响应长度不是 0，我评估验证码已解决

如果 simple_chk 为 false，我将响应值传递给 php 文件 (g_recaptcha_verify.php) 进行验证

6. 我创建g_recaptcha_verify.php 用于验证码的服务器端验证注意：我在此示例脚本中使用了谷歌的开发人员密钥。 https://developers.google.com/recaptcha/docs/faq 在生产环境中使用自己的密钥

<?php

//developer value
//Site key: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
//Secret key: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe


// check post value:  
    if (isset($_POST['resp'])) {        
      
// Create POST request:      
       
       $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';      
       $recaptcha_secret = '6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe';      //insert your secret key!!
       $recaptcha_response = $_POST['resp'];        
       
// Send POST request and decode respone:      
        
       $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);      
       $recaptcha = json_decode($recaptcha);        
      
// Google response evaluation:      
       
       if ($recaptcha && $recaptcha->success) {  
        
         echo ("OK");   //used in jquery 
   
       } else {  
        
       //    
           echo ("NO_OK"); //use in jquery 
  
      }    
} 
?>

7. 完成的！！您可以在我网站上的任何帖子上看到一个工作示例:)