wordpress创建_创建2014年世界杯WordPress小部件

wordpress创建

Football (soccer) is undoubtedly the most popular and prestigious sporting game in the world. It is globally governed by the Fédération Internationale de Football Association (FIFA), the sport’s international administrative body.

足球(足球)无疑是世界上最受欢迎和最负盛名的体育比赛。 它由这项运动的国际管理机构国际足球联合会 (FIFA)监管。

The FIFA World Cup, usually referred to simply as the World Cup is a competition hosted every four years, contested by the senior men’s national teams of qualified countries. This year’s tournament hosted in Brazil is currently ongoing.

FIFA世界杯(通常简称为世界杯)是每四年举办一次的比赛，由合格国家的高级男子国家队参加。 今年在巴西举办的比赛正在进行中。

While reading Hacker News, I stumbled upon an API for the World Cup that scrapes current match results and outputs match data as JSON.

在阅读Hacker News时，我偶然发现了世界杯的API，该API会抓取当前的比赛结果并将比赛数据输出为JSON。

You can get the following World Cup data from this API:

您可以从此API获取以下世界杯数据：

• All match data, updated every minute
  所有比赛数据，每分钟更新
• Today’s matches
  今天的比赛
• Tomorrow’s matches
  明天的比赛
• Matches for any country by entering their FIFA Code
  通过输入FIFA代码与任何国家/地区匹配
• The current match if a match is happening, otherwise nothing.
  当前匹配(如果正在进行匹配)，否则为空。
• Results for group stage (wins, losses, draws, goals_for, goals_against)
  小组赛的结果(胜利，失败，平局，进球数，进球数)

I love football and I know a lot of us do too. Due to my busy schedule, I always find myself asking friends about the match schedule.

我喜欢足球，我也知道我们很多人也这样做。 由于我的日程安排很忙，所以我总是向朋友询问比赛日程安排。

To eliminate this barrier, I decided to build a Match Fixtures widget for WordPress that displays a list of matches to be played today and tomorrow, powered by the World Cup API.

为了消除这一障碍，我决定为WordPress构建一个Match Fixtures小部件，该小部件显示由World Cup API提供支持的今天和明天要进行的比赛的列表。

If you want to jump ahead of the tutorial below, you can view a a demo of the Fifa fixtures widget here and download the widget plugin files here.

如果您想跳到下面的教程，可以在此处查看Fifa固定装置小部件的演示，并在此处 下载小部件插件文件。

建立装置小工具 (Building the Fixtures Widget)

The Fixture widget to be developed at the end of this tutorial will be a tabbed widget; the first tab displays matches for today and the second tab displays matches for the next day.

本教程末尾要开发的Fixture小部件将是一个选项卡式小部件。 第一个标签显示今天的匹配项，第二个标签显示第二天的匹配项。

Let’s get started with widget plugin development.

让我们开始进行小部件插件开发。

First, we need to include the plugin header. Without the header, WordPress won’t recognize the widget plugin.

首先，我们需要包含插件标头。 没有标题，WordPress将无法识别小部件插件。

<?php
/*
  Plugin Name: FIFA World Cup Widget
  Plugin URI: http://tech4sky.com
  Description: Fifa World Cup Widget
  Version: 1.0
  Author: Agbonghama Collins
  Author URI: http://tech4sky.com
 */

Building Widgets in WordPress is easy and straightforward. Extend the standard WP_Widget class and include the required widget class methods, and finally register the widget.

在WordPress中构建小部件既简单又直接。 扩展标准的WP_Widget类并包括所需的小部件类方法，最后注册该小部件。

Create a child-class extending the WP_Widget class.

创建扩展WP_Widget类的子类。

class Fifa_WC_Fixtures extends WP_Widget {
// ...

Give the widget a name and description using the __construct() magic method.

使用__construct()魔术方法为小部件命名和描述。

function __construct() {
    parent::__construct(
        'fifa', // Base ID
        __('Fifa World Cup', 'text_domain'), // Name
        array('description' => __('World Cup Fixtures for Today and Tomorrow\'s Games', 'text_domain'),) 
    );
}

The class method matches_today(), shown below, queries the World Cup API, retrieves the matches to be played today and displays it together with the time of play.

如下所示的类方法matches_today() ，查询World Cup API，检索今天要进行的比赛并将其与比赛时间一起显示。

If no match is scheduled for that day, a No match for today message is shown.

如果当天没有安排No match for today则显示“ No match for today消息。

public function matches_today() {
    $today_matches = file_get_contents('http://worldcup.sfg.io/matches/today');
    $today_matches_data = json_decode($today_matches);

    echo ' <div><ul class="orange">';
    if (Count($today_matches_data) > 0) {

        foreach ($today_matches_data as $match) {
            echo '<li>';
            echo '<a class="widget-list-link"><strong>';
            echo $match->home_team->country;
            echo '</strong><span>vs</span><strong>' . $match->away_team->country;
            echo '</strong><span>' . (substr($match->datetime, 11, 2) + 5) . ':00' . '</span>';
            echo '</a>';
            echo '</li>';
        }
    } else {
        echo '<li>';
        echo 'No match for today';
        echo '</li>';
    }
    echo '</ul></div>';
}

Similar to the matches_today() class method above, the matches_tomorrow() method display matches to be played the following day:

与上面的matches_today()类方法类似， matches_tomorrow()方法显示第二天要进行的比赛：

public function matches_tomorrow() {
    $tomorrow_matches = file_get_contents('http://worldcup.sfg.io/matches/tomorrow/');
    $tomorrow_matches_data = json_decode($tomorrow_matches);

    echo ' <div><ul class="green">';
    if (Count($tomorrow_matches_data) > 0) {
        foreach ($tomorrow_matches_data as $match) {
            echo '<li>';
            echo '<a class="widget-list-link"><strong>';
            echo $match->home_team->country;
            echo '</strong><span>vs</span><strong>' . $match->away_team->country;
            echo '</strong><span>' . (substr($match->datetime, 11, 2) + 5) . ':00' . '</span>';
            echo '</a>';
            echo '</li>';
        }
    } else {
        echo '<li>';
        echo 'No match for today';
        echo '</li>';
    }

    echo '</ul></div>';
}

The back-end widget settings form is created using the form() method. The fixture widget will consist of a form field that will contain the title of the widget.

后端窗口小部件设置表单是使用form()方法创建的。 灯具小部件将由一个包含小部件标题的表单字段组成。

public function form($instance) {
   if (isset($instance['title'])) {
        $title = $instance['title'];
    } else {
        $title = __('World Cup Fixtures', 'text_domain');
    }
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> 
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" 
               name="<?php echo $this->get_field_name('title'); ?>" 
               type="text" value="<?php echo esc_attr($title); ?>">
    </p>
    <?php
}

When data are entered into the form widget fields, they need to be saved to the database for reuse. The update() method sanitizes and saves the data to the database.

将数据输入到表单窗口小部件字段时，需要将它们保存到数据库中以备重用。 update()方法清除数据并将其保存到数据库中。

public function update($new_instance, $old_instance) {
    $instance = array();
        $instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';

    return $instance;
}

Next is the widget() method that displays the match fixtures at the front-end of WordPress.

接下来是widget()方法，该方法在WordPress的前端显示匹配的灯具 。

public function widget($args, $instance) {
    ?>
    <script type="text/javascript" >
    $('document').ready(function(){
        $('#flip-container').quickFlip();

        $('#flip-navigation li a').each(function(){
            $(this).click(function(e){
                $('#flip-navigation li').each(function(){
                    $(this).removeClass('selected');
                });
                $(this).parent().addClass('selected');
                var flipid=$(this).attr('id').substr(4);
                $('#flip-container').quickFlipper({ }, flipid, 1);

                e.preventDefault();
            });
        });
    });
    </script>

    <?php
    $title = apply_filters('widget_title', $instance['title']);

    echo $args['before_widget'];
    if (!empty($title))
        echo $args['before_title'] . $title . $args['after_title'];

    echo '<div id="flip-tabs" >
    <ul id="flip-navigation" >
        <li class="selected"><a href="#" id="tab-0" >Today</a></li>
        <li><a href="#" id="tab-1">Tomorrow</a></li>
    </ul>
    <div id="flip-container" >';
    $this->matches_today();
    $this->matches_tomorrow();

    echo '</div>';
    echo '</div>';
    echo '</div>';

    echo $args['after_widget'];
}

Let me briefly explain what the codes in widget() does. The JavaScript code adds a tabbing and flipping effect to the widget. The matches_today() and matches_tomorrow() methods that return the matches for today and tomorrow also get included for display in the WordPress front-end.

让我简要解释一下widget()中的代码的作用。 JavaScript代码向小部件添加了跳动和翻转效果。 返回今天和明天的匹配项的matches_today()和matches_tomorrow()方法也包含在WordPress前端中以供显示。

Our fixture widget class Fifa_WC_Fixtures need to be registered using the widgets_init hook for it to be recognizable by WordPress.

我们的灯具小部件类Fifa_WC_Fixtures需要使用widgets_init钩子进行注册，以便WordPress可以识别。

function register_fifa_widget() {
    register_widget('Fifa_WC_Fixtures');
}

add_action('widgets_init', 'register_fifa_widget');

We still need to include jQuery and the QuickFlip library to get the tab and flipping effect in the widget working and also the widget CSS.

我们仍然需要包括jQuery和QuickFlip库，以在小部件工作以及小部件CSS中获得选项卡和翻转效果。

function fifa_widget_lib() {
    wp_enqueue_style('fifa-widget', plugins_url('styles.css', __FILE__));
    wp_enqueue_script('fifa-widgets', plugins_url('js/jquery.js', __FILE__));
    wp_enqueue_script('fifa-widget-js', plugins_url('js/jquery.quickflip.js', __FILE__));
}

add_action('wp_enqueue_scripts', 'fifa_widget_lib');

View a demo of the Fifa fixtures widget.

查看“ Fifa固定装置”小部件的演示 。

结论 (Conclusion)

We are done coding the World Cup Fixtures widget. To further understand how the widget was built and how to implement it on your WordPress site, download the widget plugin, which includes the jQuery, Quickflip, and stylesheet files.

我们已经完成了世界杯灯具小部件的编码。 为了进一步了解窗口小部件的构建方式以及如何在您的WordPress网站上实现它，请下载窗口小部件插件 ，其中包括jQuery，Quickflip和样式表文件。

I hope this helps some of you in learning how to build WordPress widgets and in enjoying this year’s World Cup. Let me know your thoughts in the comments.

我希望这对你们中的一些人有帮助，以帮助他们学习如何构建WordPress小部件并享受今年的世界杯比赛。 在评论中让我知道您的想法。

翻译自: https://www.sitepoint.com/world-cup-2014-wordpress-widget/

wordpress创建