Wordpress修改爲五星評級腳本

Question

我已將自定義JavaScript代碼添加到我的WordPress站點的header.php文件中。我已經在一個基本的html文件上測試了這段代碼，它工作正常，但我似乎無法讓投票記錄功能在wordpress文章上工作。該腳本的其他組件工作正常（懸停，從.txt文件投票顯示），但我無法獲得記錄投票工作的功能。所有文件都有讀/寫訪問權限。

如果有人能幫助我或指出我解決這個問題的正確方向，我將不勝感激。

這是記錄投票的腳本的一部分，我對PHP相當新，並想知道是否有某些我可以添加/替換以便修改，以便代碼在Wordpress上正常工作。

$('.ratings_stars').bind('click', function() { 
     var star = this; 
     var widget = $(this).parent(); 

     var clicked_data = { 
      clicked_on : $(star).attr('class'), 
      widget_id : $(star).parent().attr('id') 
     }; 
     $.post(
      'http://localhost/url/wordpress/wp-content/ratings.php', 
      clicked_data, 
      function(INFO) { 
       widget.data('fsr', INFO); 
       set_votes(widget); 
      }, 
      'json' 
     ); 
    }); 



}); 

function set_votes(widget) { 

    var avg = $(widget).data('fsr').whole_avg; 
    var votes = $(widget).data('fsr').number_votes; 
    var exact = $(widget).data('fsr').dec_avg; 

    window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes); 

    $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote'); 
    $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); 
    $(widget).find('.total_votes').text(votes + ' votes recorded (' + exact + ' rating)'); 
} 

Here is a visual example for reference

感謝您抽出時間來看看這個，如果有任何其他信息，我可以提供，請讓我知道。

以下是放在header.php中的腳本中提到的ratings.php。

ratings.php：

<?php 


$rating = new ratings($_POST['widget_id']); 


isset($_POST['fetch']) ? $rating->get_ratings() : $rating->vote(); 






class ratings { 

var $data_file = 'http://localhost/url/wordpress/wp-content/ratings.data.txt'; 
private $widget_id; 
private $data = array(); 


function __construct($wid) { 

$this->widget_id = $wid; 

$all = file_get_contents($this->data_file); 

if($all) { 
    $this->data = unserialize($all); 
} 
} 
    public function get_ratings() { 
if($this->data[$this->widget_id]) { 
    echo json_encode($this->data[$this->widget_id]); 
} 
else { 
    $data['widget_id'] = $this->widget_id; 
    $data['number_votes'] = 0; 
    $data['total_points'] = 0; 
    $data['dec_avg'] = 0; 
    $data['whole_avg'] = 0; 
    echo json_encode($data); 
} 
} 
public function vote() { 


preg_match('/star_([1-5]{1})/', $_POST['clicked_on'], $match); 
$vote = $match[1]; 

$ID = $this->widget_id; 

if($this->data[$ID]) { 
    $this->data[$ID]['number_votes'] += 1; 
    $this->data[$ID]['total_points'] += $vote; 
} 

else { 
    $this->data[$ID]['number_votes'] = 1; 
    $this->data[$ID]['total_points'] = $vote; 
} 

$this->data[$ID]['dec_avg'] = round($this->data[$ID]['total_points']/$this->data[$ID]['number_votes'], 1); 
$this->data[$ID]['whole_avg'] = round($this->data[$ID]['dec_avg']); 


file_put_contents($this->data_file, serialize($this->data)); 
$this->get_ratings(); 
} 

} 

?> 

下面是javascript代碼加入到header.php中完整的，鼠標懸停/鼠標移開似乎能正常工作，所以我覺得應該JavaScript的運行。

的Javascript加入的header.php：

<?php wp_head(); ?> 

<script type="text/javascript"> 


$(document).ready(function() { 

    $('.rate_widget').each(function(i) { 
     var widget = this; 
     var out_data = { 
      widget_id : $(widget).attr('id'), 
      fetch: 1 
     }; 
     $.post(
      'http://localhost/url/wordpress/wp-content/ratings.php', 
      out_data, 
      function(INFO) { 
       $(widget).data('fsr', INFO); 
       set_votes(widget); 
      }, 
      'json' 
     ); 
    }); 


    $('.ratings_stars').hover(

     function() { 
      $(this).prevAll().andSelf().addClass('ratings_over'); 
      $(this).nextAll().removeClass('ratings_vote'); 
     }, 

     function() { 
      $(this).prevAll().andSelf().removeClass('ratings_over'); 

      set_votes($(this).parent()); 
     } 
    ); 



    $('.ratings_stars').bind('click', function() { 
     var star = this; 
     var widget = $(this).parent(); 

     var clicked_data = { 
      clicked_on : $(star).attr('class'), 
      widget_id : $(star).parent().attr('id') 
     }; 
     $.post(
      'http://localhost/url/wordpress/wp-content/ratings.php', 
      clicked_data, 
      function(INFO) { 
       widget.data('fsr', INFO); 
       set_votes(widget); 
      }, 
      'json' 
     ); 
    }); 



}); 

function set_votes(widget) { 

    var avg = $(widget).data('fsr').whole_avg; 
    var votes = $(widget).data('fsr').number_votes; 
    var exact = $(widget).data('fsr').dec_avg; 

    window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes); 

    $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote'); 
    $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); 
    $(widget).find('.total_votes').text(votes + ' votes recorded (' + exact + ' rating)'); 
} 


</script> 

Answer 1

爲了解決這一切我所要做的就是地方我ratings.php文件和ratings.data.txt我的wordpress主題文件夾中，將自定義JavaScript鏈接到我的header.php文件中的這些文件。現在JavaScript運行正常。這不是正確的方法，但理想情況下，我應該使用header.php中的wp_enqueue_scripts鉤子，並在css/js文件夾中使用自定義css和js。但目前這個臨時解決方案有效，我可以繼續試驗。