wordpress升级_升级到新的WordPress颜色选择器

wordpress升级

If you’re like me and you’ve been using the old Farbtastic color picker for a WordPress plugin, I’m sure you were eager to use the new and improved color picker with the release of WordPress 3.5.

如果您像我一样，并且一直在使用旧的Farbtastic颜色选择器作为WordPress插件，那么我敢肯定您渴望在WordPress 3.5发行版中使用经过改进的新颜色选择器。

Upgrading your plugin to use the new color picker is fairly straightforward. What’s difficult is knowing how to easily fall back to the Farbtastic color picker for older versions of WordPress.

升级插件以使用新的颜色选择器非常简单。 困难的是要知道如何轻松退回到旧版本WordPress的Farbtastic颜色选择器。

In the following screencast and article we’ll talk through how to do exactly that and provide a full plugin example on Github to help get you started.

在下面的截屏视频和文章中，我们将讨论如何做到这一点，并在Github上提供完整的插件示例，以帮助您入门。

截屏 (The Screencast)

实施WP颜色选择器的步骤 (The Steps to Implement the WP Color Picker)

Before getting to the nitty gritty PHP and JavaScript, let’s take a look at the steps to implement the new color picker.

在使用精巧PHP和JavaScript之前，让我们看一下实现新颜色选择器的步骤。

1. Determine the version of WordPress installed on the server.
   确定服务器上安装的WordPress版本。
2. Enqueue both the styles and script for the new color picker if the install of WordPress is version 3.5 or higher.
   如果WordPress的安装版本为3.5或更高版本，请同时为新颜色选择器添加样式和脚本。
3. If the WordPress version is less than 3.5, enqueue the styles and scripts for the deprecated Farbtastic color picker.
   如果WordPress版本低于3.5，请加入不推荐使用的Farbtastic颜色选择器的样式和脚本。
4. In your custom JavaScript file, check to see if the new color picker function exists and, if so, initialize the color picker on your text input field.
   在您的自定义JavaScript文件中，检查是否存在新的颜色选择器功能，如果存在，请在文本输入字段上初始化颜色选择器。
5. If the new color picker doesn’t exist, then initialize the Farbtastic color picker.
   如果不存在新的颜色选择器，则初始化Farbtastic颜色选择器。

Pretty easy right? Now let’s take a look at the PHP we use within our plugin.

很容易吧？ 现在让我们看一下我们在插件中使用PHP。

使用PHP排列正确的样式和脚本 (Use PHP to Enqueue the Right Styles and Scripts)

If you’re just starting to create plugins for WordPress, you’ll need a solid understanding of how to create settings pages and how to appropriately call your styles and scripts within those pages.

如果您刚刚开始为WordPress创建插件，则需要对如何创建设置页面以及如何在这些页面中正确调用样式和脚本有深入的了解。

Going through how to create a settings page for your plugin isn’t in the scope of this article, but if you need more info on how to handle settings for your plugin, check out Creating Custom Options Pages in WordPress by Jeffrey Way.

本文不讨论如何为插件创建设置页面，但是如果您需要有关如何处理插件设置的更多信息，请查看Jeffrey Way的在WordPress中创建自定义选项页面 。

For our purposes, you’ll need to know that the final input field and necessary div on our admin page look like this:

为了我们的目的，您需要知道管理页面上的最终输入字段和必要的div如下所示：

<input id="color" name="color_options[color]" type="text" value="" />
<div id="colorpicker"></div>

view raw gistfile1.html

查看原始的 gistfile1.html

Once you hook your function or method appropriately through add_action(), you’ll use PHP to call your styles and scripts:

通过add_action()适当地挂钩函数或方法后，将使用PHP调用样式和脚本：

< ?php
function add_styles_scripts(){
    //Access the global $wp_version variable to see which version of WordPress is installed.
    global $wp_version;
 
    //If the WordPress version is greater than or equal to 3.5, then load the new WordPress color picker.

    if ( 3.5 <= $wp_version ){ both the necessary css and javascript have been registered already by wordpress, so all we to do is load them with their handle. wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( } if wordpress version less than 3.5 older farbtasic color picker. else { as wp-color-picker 'farbtastic' our custom file 'wp-color-picker-settings', plugin_dir_url( __file__ ) . 'js settings.js' ?>=>

view raw gistfile1.php

查看原始的 gistfile1.php

At the top of the method we use the global $wp_version variable which provides us with the version number for this install of WordPress. We simply check whether we’re using 3.5 or higher and if so, load the new color picker using the preregistered styles and script. Otherwise, we load the older Farbtastic styles and script.

在该方法的顶部，我们使用全局$wp_version变量，该变量为我们提供了此WordPress安装的版本号。 我们只需检查我们是否使用3.5或更高版本，如果是，则使用预注册的样式和脚本加载新的颜色选择器。 否则，我们将加载较旧的Farbtastic样式和脚本。

At this point we’ve loaded the correct files, but we need to call the script on our text input field. We do that through our own JavaScript file.

至此，我们已经加载了正确的文件，但是我们需要在文本输入字段中调用脚本。 我们通过自己JavaScript文件来实现。

使用JavaScript初始化拾色器 (Use JavaScript to Initialize a Color Picker)

You can see at the bottom of the add_styles_scripts() method above that we load one JavaScript file.

您可以在上方的add_styles_scripts()方法的底部看到我们加载了一个JavaScript文件。

In the short term, the easier way would be to have two Javascript files, one for the new color picker and one for Farbtastic. With this plugin that would be fine, but it would become very inefficient to manage if we had to update two files every time we needed to make a change to our JavaScript.

在短期内，更简单的方法是拥有两个Javascript文件，一个用于新的颜色选择器，一个用于Farbtastic。 有了这个插件就可以了，但是如果每次需要对JavaScript进行更改时都必须更新两个文件，则管理起来效率将非常低下。

So, how do we set up only one JavaScript file to initialize the right color picker?

那么，我们如何只设置一个JavaScript文件来初始化正确的颜色选择器？

//Set up the color pickers to work with our text input field

jQuery( document ).ready(function(){

    "use strict";
 
    //This if statement checks if the color picker widget exists within jQuery UI

    //If it does exist then we initialize the WordPress color picker on our text input field

    if( typeof jQuery.wp === 'object' && typeof jQuery.wp.wpColorPicker === 'function' ){

        jQuery( '#color' ).wpColorPicker();

    }

    else {

        //We use farbtastic if the WordPress color picker widget doesn't exist

        jQuery( '#colorpicker' ).farbtastic( '#color' );

    }

});

view raw gistfile1.js

查看原始的 gistfile1.js

The if statement checks whether the new color picker exists as a widget within jQuery UI by first determining whether jQuery.wp is an object, and if so, ensuring that wpColorPicker is a function of that object. If both of these conditions are true we call the new color picker. If not, we load Farbtastic.

if语句通过首先确定jQuery.wp是否为对象，然后确保wpColorPicker是该对象的函数，来检查新颜色选择器是否作为jQuery UI中的小部件存在。 如果这两个条件都成立，则称为新颜色选择器。 如果没有，我们将加载Farbtastic。

And that’s it. We used the new WP color picker while still providing older versions of WordPress with a usable fallback.

就是这样。 我们使用了新的WP颜色选择器，同时仍为旧版本的WordPress提供了可用的备用。

If you’re looking for the entire plugin example you can find it on Github.

如果您正在寻找整个插件示例，则可以在Github上找到它。

翻译自: https://www.sitepoint.com/upgrading-to-the-new-wordpress-color-picker/

wordpress升级