在 WordPress 中安装 Editor

最近有几个论坛问题询问如何在 WordPress 网站内配置 DataTables 或 Editor。这篇博客文章提供了一个简单的演示，以便让你快速在网页上让 DataTables 和 Editor 投入使用。在这个演示中，我们将展示如何使用两种不同的方法在 WordPress 中安装 DataTables

为了进行精细控制而直接包含脚本
TablePress - Tobias Bäthge 开发的一款适用于 WordPress 的插件，可用于创建完全集成的 DataTables/WordPress 编辑环境。

我们还讨论了如何使用直接包含的方式来安装和配置 Editor。

WordPress 安装

第一步是安装并配置 WordPress。你可以通过两种方式管理 WordPress 网站 - 你可以将其自托管在你的服务器上，或者让 WordPress 处理托管事宜。

如果你进行自托管，则拥有全部控制权。你获得了访问文件系统的权限，你可以使用 SSH 登录和移动文件，还可以添加和删除软件包。这意味着 DataTables 和 Editor 能够轻松部署。

WordPress 托管网站处于锁定状态。免费版本禁用了插件安装，并且阻止任何脚本运行 - 这意味着 DataTables 和 Editor 无法正常运行！如果你订阅了一个套餐，则可以安装允许使用页眉和页脚的插件，并且可以添加代码，但是你无法访问基础文件系统。这意味着，尽管尚未经过测试，但 DataTables 能够在这个环境中使用。Editor 需要访问其 Javascript 文件，因此只要这些文件可以托管在可访问的远程服务器上，这也可以行得通。

简而言之，如果你想要 DataTables，则需要使用付费套餐在 WordPress 上托管，或者需要进行自托管。如果你想要 Editor，则需要使用某个付费套餐才能访问远程服务器以托管 Javascript 文件，或者需要进行自托管。

顺带一提，对于那些有技术好奇心的人来说，我在一个托管在 Vagrant 管理的 Fedora 29 服务器上进行自托管。安装相当轻松 - 我使用了来自 MangoLassi.it 的这些极好的说明。我还运行了一个个人域，该域托管在一个 cPanel 服务器上，在该服务器上安装 WordPress 也很简单。

配置 DataTables

TablePress

向你的网站添加数据表的最简单方法是安装Tobias Bäthge 的 TablePress WordPress 插件。你可以使用一个易于使用的表单来定义表格，该表格会生成一个简码，该简码可以添加到任何文章或页面中。所有必需的 Javascript 和 CSS 文件都嵌入在该简码中，因此非常易于使用。

手动方法

如果你想要更高级的控制，则可以手动添加表格和必需的脚本。DataTables 是开源的 CDN 托管软件，因此你只需在 CDN 中引用那些文件（或者如果你愿意，下载一个副本进行自托管）。安装一个插件，例如页眉和页脚脚本，这样你就可以向页眉或页脚添加脚本和 CSS。

要在页面或帖子中插入表格和 DataTables 代码，请添加一个自定义 HTML区块并直接输入/粘贴表格的 HTML。对于一个最简单的表格而言，类似以下内容

<table id="example" class="display" width="100%">
    <thead>
        <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        </tr>
    </thead>

    <tbody>
        <tr>
        <td>Garrett Winters</td>
        <td>Director</td>
        <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
        </tr>
    </tbody>
</table>

然后，在该页面的底部，将必要的脚本和样式包含在头部。

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready( function () {
    $('#example').DataTable();
} );
</script>

配置编辑器

在使用编辑器之前，需要将分发文件复制到服务器。可以创建包含所有必要文件的分发，方法为使用生成器或下载页面。这已在手册中说明，因此此处不再重复。我将 PHP 代码库安装到 web 服务器的一个子目录（‘/Editor’）中。

WordPress 使用 MariaDB 或 MySQL 作为其数据库。为避免安装第二个数据库，我创建了一个专门用于 DataTables 数据的附加数据库 - 这使用了相同的数据库凭证（用户名和密码）。编辑器被配置为通过更新文件 Editor/lib/config.php 来使用这个新数据库。此过程在编辑器手册中进行了解释。这是我在 config.php 文件中的数据库设置

$sql_details = array(
    "type" => "Mysql",       // MariaDB === MySQL
    "user" => "sa",          // database user (from WP install)
    "pass" => "Pa55word123", // database password (from WP install)
    "host" => "localhost",
    "port" => "",
    "db"   => "datatables",  // database created for DataTables
    "dsn"  => "",
    "pdoAttr" => array()
);

我使用 DataTables 演示数据加载了数据库 - 可以在 Editor 下载的 examples/sql 目录中找到 SQL 脚本。

部署分发后，启动数据库，然后通过像之前一样添加 TablePress 简码或自定义 HTML区块即可插入表格。

<table id="example" class="display" width="100%">
    <thead>
        <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
    </tbody>
</table>

然后，像之前一样，在页面的底部，在头部部分插入脚本和样式。注意编辑器文件路径 - 它们位于 WordPress 网站内。生成器将所有 DataTables 脚本合并成一个 CDN include - 如果你希望减少网站的依赖项，它们可以位于服务器本地。

请注意，如果你正在使用 TablePress 简码，则表格的 ID 是 tablepress-#，其中“#”是表格编号。只需用 TablePress ID 替换以下代码中的 example。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.12.1/b-2.2.3/sl-1.4.0/datatables.min.css">
<link rel="stylesheet" type="text/css" href="/Editor/css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.12.1/b-2.2.3/sl-1.4.0/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/Editor/js/dataTables.editor.min.js"></script>

<script>
$(document).ready( function () {
    var editor = new $.fn.dataTable.Editor( {
        ajax: "/Editor/controllers/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
 
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "/Editor/controllers/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );
</script>

就是这样！我希望这对你有所帮助。如果你有任何意见，请在下面发表。