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

深藏阁楼爱情的钟 2022-12-03 11:25 143阅读 0赞

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

![World Cup 2014][]

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 for the World Cup]的[API，该API][API for the World Cup]会抓取当前的比赛结果并将比赛数据输出为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][API for the World Cup].

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

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固定装置小部件的演示，并在此处][view a a demo of the Fifa fixtures widget here] [下载小部件插件][download the widget plugin]文件。

## 建立装置小工具 **(**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小部件将是一个选项卡式小部件。 第一个标签显示今天的匹配项，第二个标签显示第二天的匹配项。

![World Cup Widget][]

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
    }

![World Cup Widget][World Cup Widget 1]

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**][view a a demo of the Fifa fixtures widget here].

[**查看“ Fifa固定装置”小部件的演示**][view a a demo of the Fifa fixtures widget here] 。

## 结论 **(**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**][download the widget plugin], which includes the jQuery, Quickflip, and stylesheet files.

我们已经完成了世界杯灯具小部件的编码。 为了进一步了解窗口小部件的构建方式以及如何在您的WordPress网站上实现它，请[**下载窗口小部件插件**][download the widget plugin] ，其中包括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/][https_www.sitepoint.com_world-cup-2014-wordpress-widget]

wordpress创建

[World Cup 2014]: /images/20221123/7c2ec45316c14785b8c72574cc2651eb.png
[API for the World Cup]: http://worldcup.sfg.io/
[view a a demo of the Fifa fixtures widget here]: http://fifa-wc.tk/
[download the widget plugin]: https://uploads.sitepoint.com/wp-content/uploads/2014/06/1403820326fifa-world-cup-widget.zip
[World Cup Widget]: /images/20221123/5b4b99166542499db18228cb2a95092b.png
[World Cup Widget 1]: /images/20221123/558c8bea72794ed78b0d01a667c03332.png
[QuickFlip]: http://jonraasch.com/blog/quickflip-2-jquery-plugin
[https_www.sitepoint.com_world-cup-2014-wordpress-widget]: https://www.sitepoint.com/world-cup-2014-wordpress-widget/