Wordpress修改为五星评级脚本

时间:2016-07-22 04:46:13

标签: javascript php jquery json wordpress

我已将自定义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();
}

}

?>

以下是添加到header.php的完整javascript代码,mouseover / mouseout似乎工作正常,所以我认为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>

1 个答案:

答案 0 :(得分:0)

要解决这个问题,我必须做的就是将我的ratings.php文件和ratings.data.txt放在我的wordpress主题文件夹中,并将自定义javascript链接到我的header.php文件中的这些文件。 javascript现在正常运行。这不是执行此操作的正确方法,理想情况下我应该使用header.php中的wp_enqueue_scripts挂钩并在css / js文件夹中使用自定义css和js。但是现在这个临时修复工作正常,我可以继续试验。