wordpress响应慢_WordPress中的响应式实时图形：插件和绘图

青旅半醒 2022-12-03 11:26 179阅读 0赞

wordpress响应慢

In this part of our series on creating a responsive, real-time graphs within a WordPress site, we’re going to finally get to the good stuff! The last three parts were for getting the newer designers up to speed. If you’re just arriving, skipped ahead too quickly, or got flagrantly confused, go back to the earlier parts and review a bit. Some of the code is fairly specific to this project, such as the Unix Timestamps needed to make our graph library work.

在我们的系列文章的这一部分中，我们将在WordPress网站上创建响应式实时图形，最后，我们将学习一些好东西！ 最后三部分是为了使新设计的设计师快速入门。 如果您只是到达，跳过得太快或感到困惑，请返回前面的部分并进行一些回顾。 一些代码是特定于该项目的，例如使我们的图形库工作所需的Unix时间戳。

I’ve been building a simple pushups tracker form and database table for using with our [Flot][] graphs. Of course, you can use just about any data source to populate the data in your pages. But, for the sake of teaching a newbie how to start working with forms and phpMyAdmin, I wanted to walk through the entire process from scratch.

我一直在构建一个简单的俯卧撑追踪器表单和数据库表，以用于我们的[Flot][]图。 当然，您几乎可以使用任何数据源来填充页面中的数据。 但是，为了教新手如何开始使用表单和phpMyAdmin，我想从头开始逐步进行整个过程。

Once you have this system in place within your WordPress site, you can literally create any kind of graphed data. The Flot graph library is extensive and very easy to implement. As I’ll be able to demonstrate, you can rinse and repeat with our pushups tracker and create a powerful system for displaying this data — all in real-time in a responsive website.

在WordPress网站中安装此系统后，就可以从字面上创建任何类型的图形化数据。 Flot图形库功能丰富且易于实现。 正如我将要演示的那样，您可以使用我们的俯卧撑追踪器进行冲洗和重复，并创建一个功能强大的系统来显示此数据-所有这些都可以在响应式网站中实时进行。

### 步骤1：获取批次库 **(**Step 1: Get the Flot Library**)** ###

I’m using [Flot][] for my graphs for lots of reasons, but mostly because it’s easy to implement and I was able to get it to work on every device imaginable. It uses the canvas feature in HTML5 to draw data and is capable of some crazy, amazing stuff. You can use whatever you want. But, for this tutorial we will be using Flot.

我出于很多原因在图表中使用[Flot][] ，但主要是因为它易于实现，并且能够在可以想象的每种设备上使用。 它使用HTML5中的画布功能绘制数据，并且能够处理一些令人惊讶的惊人事情。 您可以使用任何您想要的。 但是，对于本教程，我们将使用Flot。

Specifically, we’re using my plugin (Flot for WordPress) to properly register and run the Flot library in WordPress. I highly recommend using the plugin, but you can implement Flot without it.

具体来说，我们正在使用我的插件(适用于WordPress的Flot)在WordPress中正确注册并运行Flot库。 我强烈建议您使用该插件，但是您可以在没有插件的情况下实现Flot。

[Flot for WordPress Plugin][]

[Flot for WordPress插件][Flot for WordPress Plugin]

### 步骤2：发布俯卧撑结果 **(**Step 2: Make the Pushups Results Post**)** ###

In WordPress, go to “Post”s > “Add New” and create a post with the title “Pushups Results.” In the body, put the following shortcode:

在WordPress中，转到“帖子”>“添加新内容”，然后创建标题为“ Pushups Results”的帖子。 在正文中，输入以下简码：

[pushups_results_sc]

Publish the post and you’re done. Right now, the post content will display the exact text “\[pushups\_results\_sc\]” because we haven’t actually created the function for the shortcode yet.

发布帖子，您就完成了。 现在，帖子内容将显示确切的文本“ \[pushups\_results\_sc\]”，因为我们实际上尚未为短代码创建函数。

### 步骤3：建立图表 **(**Step 3: Create Our Graph**)** ###

In [part 2 of this series][], we created a new table in our WordPress database called pushups. We use it to store the pushups information from our forms. If you’re really comfortable with phpMyAdmin, go to the SQL tab and run this query to create the table we’ll be using:

在[本系列的第2部分中][part 2 of this series] ，我们在WordPress数据库中创建了一个名为pushups的新表。 我们使用它来存储表单中的俯卧撑信息。 如果您真的对phpMyAdmin感到满意，请转到“ SQL”选项卡并运行此查询以创建我们将要使用的表：

\[sourcecode language=”sql”\]

\[源代码语言=“ sql”\]

CREATE TABLE \`\{Your Database\}\`.\`pushups\` ( \`pushups\_id\` INT( 10 ) NOT NULL AUTO\_INCREMENT , \`pushups\_count\` INT( 3 ) NOT NULL , \`pushups\_date\` VARCHAR( 15 ) NOT NULL , \`pushups\_wpuser\` VARCHAR( 100 ) NOT NULL , \`active\` INT( 2 ) NOT NULL DEFAULT ‘1’, INDEX ( \`pushups\_id\` ) ) ENGINE = MYISAM

CREATE TABLE\`\{Your Database\}\`.\`pushups\`(\`pushups\_id\` INT(10)NOT NULL AUTO\_INCREMENT，\`pushups\_count\` INT(3)NOT NULL，\`pushups\_date\` VARCHAR(15)NOT NULL，\`pushups\_wpuser\` VARCHAR(100 )NOT NULL，\`active\` INT(2)NOT NULL DEFAULT'1'，INDEX(\`pushups\_id\`))引擎= MYISAM

\[/sourcecode\]

\[/源代码\]

Everything up to this point has been about getting the infrastructure in place so that you can start pulling data and displaying it in awesome ways. From here on out, it’s all about the graphs!

到目前为止，所有事情都与建立基础架构有关，以便您可以开始以惊人的方式提取数据并显示它们。 从这里开始，全部都是关于图形的！

Create a new PHP file and call it pushups\_results.php. You’re going to upload this to your wp-content/plugins/flot-for-wp/flot folder after you’ve pasted the following code:

创建一个新PHP文件，并将其命名为pushups\_results.php。 粘贴以下代码后，您将把它上传到wp-content / plugins / flot-for-wp / flot文件夹中：

\[sourcecode language=”php”\]

\[源代码语言=“ php”\]

<?php /\* Description: This code is meant to be called by a WordPress shortcode It makes a call to the database and displays the data in a Flot chart. Author: @jphornor and @tarahornor License: GPL3 \*/

<？php / \*说明：该代码旨在由WordPress短代码调用。它调用数据库并在Flot图表中显示数据。 作者：@jphornor和@tarahornor许可：GPL3 \* /

// Here’s our function! function pushups\_results()\{

//这是我们的功能！ 函数pushups\_results()\{

/\* Get the db connection. If you didn’t create a connect\_to\_db.php file, just add your own database connection info here \*/ include ("connect\_to\_db.php"); connect\_to\_db(); /\* This gets us the current logged in user and assigns the username to the variable wpuser, which is used in the main query \*/ get\_currentuserinfo(); $current\_user = wp\_get\_current\_user(); $wpuser = $current\_user->user\_login;

/ \*获取数据库连接。 如果您没有创建connect\_to\_db.php文件，则只需在此处\* / include(“ connect\_to\_db.php”)添加您自己的数据库连接信息。 connect\_to\_db(); / \*这将为我们提供当前的登录用户，并将用户名分配给变量wpuser，该变量在主查询中使用\* / get\_currentuserinfo(); $ current\_user = wp\_get\_current\_user(); $ wpuser = $ current\_user-> user\_login;

// The big test! If a user isn’t logged in, they get NOTHING! if(!is\_user\_logged\_in()) \{ echo ‘<a href="’. wp\_login\_url() . ‘">Login</a> to see pushup results! <p><a href="’ . home\_url() . ‘/wp-register.php">Register</a> if you have not already.</p>’;

//大测试！ 如果用户未登录，他们将一无所获！ if(！is\_user\_logged\_in())\{echo'<a href="'.wp\_login\_url()。'">登录</a>以查看下推结果！ <p> <ahref="'。home\_url()。'/wp-register.php">注册</a>(如果尚未注册)。</ p>'

\} else \{

\}其他\{

// The query $sql = mysql\_query("select \* from pushups where \`pushups\`.\`pushups\_wpuser\` = ‘$wpuser’ and \`pushups\`.\`active\`= 1 ORDER BY \`pushups\`.\`pushups\_date\` ASC ");

//查询$ sql = mysql\_query(“从下拉菜单中选择\*，其中\`pushups\`.\`pushups\_wpuser\` ='$ wpuser'和\`pushups\`.\`active\` = 1 ORDER BY\`pushups\`.\`pushups\_date\` ASC”);

/\* Min and Max queries. It’s generally not necessary to have to produce our own Min and Max figures for Flot, our process below creates a data set that ends with a comma, which Flot interprets as a zero. \*/ $min = mysql\_query("select pushups\_count FROM pushups ORDER BY pushups\_count ASC limit 1"); $max = mysql\_query("select pushups\_count FROM pushups ORDER BY pushups\_count DESC limit 1");

/ \*最小和最大查询。 通常不必为Flot生成自己的最小和最大数字，下面的过程将创建一个以逗号结尾的数据集，Flot会将其解释为零。 \* / $ min = mysql\_query(“从pushups中选择pushups\_count ORDER BY pushups\_count ASC限制1”)； $ max = mysql\_query(“从pushups中选择pushups\_count ORDER BY pushups\_count DESC限制1”);

// We need to calculate the min point on the graph while ($row = mysql\_fetch\_array($min)) \{ $min\_count = $row\[‘pushups\_count’\]; \} $min\_count = $min\_count \* .9; // This gives us some breathing room on the chart

//我们需要计算图中的最小点，而($ row = mysql\_fetch\_array($ min))\{$ min\_count = $ row \['pushups\_count'\]; \} $ min\_count = $ min\_count \* .9; //这为图表提供了一些喘息的空间

// Let’s calculate the max point on the graph while ($row = mysql\_fetch\_array($max)) \{ $max\_count = $row\[‘pushups\_count’\]; \} $max\_count = $max\_count \* 1.1; // This also gives us some breathing room on the chart

//让我们计算图上的最大点，而($ row = mysql\_fetch\_array($ max))\{$ max\_count = $ row \['pushups\_count'\]; \} $ max\_count = $ max\_count \* 1.1; //这也为图表提供了一些喘息的空间

/\* Now we generate our JavaScript and HTML onto the page. This isn’t my favorite way to do it, but it gets the job done. \*/ echo ‘ <div id="flot-container">’; //Customize the width and height for your WP install in the layout.css file echo ‘ <h1>Pushup Results for ‘ . $wpuser . ‘</h1>’; echo ‘ <script language="javascript" type="text/javascript" src="’ . plugins\_url( $path ) . ‘/flot-for-wp/flot/jquery.js"></script> <script language="javascript" type="text/javascript" src="’ . plugins\_url( $path ) . ‘/flot-for-wp/flot/jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="’ . plugins\_url( $path ) . ‘/flot-for-wp/flot/jquery.flot.resize.js"></script> <script language="javascript" type="text/javascript" src="’ . plugins\_url( $path ) . ‘/flot-for-wp/flot/excanvas.min.js"></script> <link href="’ . plugins\_url( $path ) . ‘/flot-for-wp/flot/layout.css" rel="stylesheet" type="text/css"> <div id="placeholder" style="width:95%; height:85%; max-width:100%; margin:auto;"></div> ‘; echo ‘ <script language="javascript" type="text/javascript" id="source">

/ \*现在，我们将JavaScript和HTML生成到页面上。 这不是我最喜欢的方法，但是可以完成工作。 \* / echo'<div id =“ flot-container”>'; //在layout.css文件中自定义WP安装的宽度和高度echo'<h1> Pushup Results for'。 $ wpuser。 '</ h1>'; echo'<script language =“ javascript” type =“ text / javascript” src =“'。plugins\_url($ path)。'/flot-for-wp/flot/jquery.js”> </ script> <script language = “ javascript” type =“ text / javascript” src =“'。plugins\_url($ path)。'/flot-for-wp/flot/jquery.flot.js”> </ script> <script language =“ javascript”类型=“ text / javascript” src =“'。plugins\_url($ path)。'/flot-for-wp/flot/jquery.flot.resize.js”> </ script> <script language =“ javascript” type =“ text / javascript“ src =”'。plugins\_url($ path)。'/flot-for-wp/flot/excanvas.min.js“> </ script> <link href =”'。plugins\_url($ path)。' /flot-for-wp/flot/layout.css“ rel =” stylesheet“ type =” text / css“> <div id =” placeholder“ style =” width：95％; height：85％; max-width： 100％; margin：auto;“> </ div>'; 回声'<script language =“ javascript” type =“ text / javascript” id =“ source”>

jQuery(document).ready(function($)\{ var d1 = \[ \{ label: "Pushups Tracker for ‘ . $wpuser . ‘", data: \[‘; while ($row = mysql\_fetch\_array($sql)) \{ echo ‘\[‘ .$row\[‘pushups\_date’\] . ‘,’ .$row\[‘pushups\_count’\] . ‘\],’; \} echo ‘ \]\}\]; var placeholder = $("\#placeholder"); var plot = $.plot(placeholder, d1, \{ xaxis: \{ mode: "time" \}, points: \{ show: true, symbol: "circle"\}, lines: \{ show: true\}, legend: \{ show: false \}, yaxis: \{ min: ‘ .$min\_count . ‘, max: ‘ .$max\_count . ‘ \} \} ); \} ); </script></div>’; \} \} // The shortcode in the Pushups Result post add\_shortcode( ‘pushups\_results\_sc’, ‘pushups\_results’ ); mysql\_close();

jQuery(document).ready(function($)\{var d1 = \[\{标签：“'。$ wpuser。'的Pushups Tracker，数据：\['; while($ row = mysql\_fetch\_array($ sql))\{echo' \['。$ row \['pushups\_date'\]。'，'。$ row \['pushups\_count'\]。'\]，';\} echo'\]\}\]; var占位符= $(“＃placeholder”); var plot = $ .plot(placeholder，d1，\{xaxis：\{mode：“ time”\}，点数：\{show：true，符号：“ circle”\}，线：\{show：true\}，图例：\{show：false\}，yaxis： \{min：'。$ min\_count。'，max：'。$ max\_count。'\}\});\}); </ script> </ div>'; \}\} //俯卧撑结果中的简码add\_shortcode('pushups\_results\_sc'，'pushups\_results'); mysql\_close();

？>

\[/sourcecode\]

\[/源代码\]

I know that’s a ton of information, and I did my best to add comments. Once again, this file called pushups\_results.php goes in your wp-content/plugins/flot-for-wp/flot folder. I’m sorry for how compressed the code looks here, but if you download my resource files, you can see the contents in a much more organized format.

我知道这是大量信息，所以我会尽力添加评论。 再一次，这个名为pushups\_results.php的文件进入您的wp-content / plugins / flot-for-wp / flot文件夹中。 对于代码在这里的压缩程度，我感到很抱歉，但是如果下载我的资源文件，您将以更加井井有条的格式查看内容。

### 回顾 **(**Recap**)** ###

While this is a lot of code, take the time to review the comments. There’s a lot going on and if you don’t track with how Flot interprets data, you’re going to struggle using your own data.

尽管这是很多代码，但请花一些时间查看注释。 发生了很多事情，如果您不了解Flot解释数据的方式，那么您将很难使用自己的数据。

In this piece, we tackled some pretty dense processes. I tried to make it easy on you by letting you copy and paste, but don’t get lazy! You cannot just add this plugin and get magically beautiful graphs. So take some time to review this code.

在这一部分中，我们解决了一些非常密集的过程。 我试图通过让您复制和粘贴来简化您的操作，但不要偷懒！ 您不能只添加此插件并获得神奇的精美图形。 因此，请花一些时间来查看此代码。

As a quick recap, in this part of the series we covered:

快速回顾一下，在本系列的这一部分中，我们介绍了：

*  Grab the Flot plugin (for folks just jumping into the series)
    
    抓取Flot插件(适用于刚加入该系列的人)
 *  Create a post to display results
    
    创建帖子以显示结果
 *  Add the Flot code to the page that pulls our data and displays it properly.
    
    将Flot代码添加到提取我们的数据并正确显示的页面。

Believe it or not, you’re actually mostly done! If you refresh your pushups results page, you should see a graph!

信不信由你，您实际上已经完成了！ 如果刷新俯卧撑结果页面，应该会看到一个图形！

In the next part of this series, I will cover some very detailed discussions of how to work with PHP and MySQL with regards to Flot.

在本系列的下一部分中，我将讨论有关如何在Flot上使用PHP和MySQL的一些非常详细的讨论。

In the last part, I discuss how to style your graphs. So, if you’re a developer and got your graphs working right away, you may want to skip to later parts of this series.

在最后一部分中，我将讨论如何设置图形样式。 因此，如果您是开发人员，并且可以立即使用图表，则可能需要跳到本系列的后续部分。

> 翻译自: [https://www.sitepoint.com/responsive-real-time-graphs-in-wordpress-plugins-and-plotting/][https_www.sitepoint.com_responsive-real-time-graphs-in-wordpress-plugins-and-plotting]

wordpress响应慢

[Flot]: http://www.flotcharts.org/
[Flot for WordPress Plugin]: http://wordpress.org/extend/plugins/flot-for-wp/
[part 2 of this series]: https://www.sitepoint.com/build-responsive-real-time-graphs-in-wordpress-functions-and-data/
[https_www.sitepoint.com_responsive-real-time-graphs-in-wordpress-plugins-and-plotting]: https://www.sitepoint.com/responsive-real-time-graphs-in-wordpress-plugins-and-plotting/