在 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

在您的網站上新增 DataTable 最簡單的方法是安裝 Tobias Bäthge 的 TablePress WordPress 外掛程式。您可以使用易於使用的表單定義表格，該表單會產生一個短代碼，可以新增到任何文章或頁面。所有必要的 Javascript 和 CSS 檔案都嵌入到該短代碼中，因此非常易於使用。

手動方法

如果您想要更多控制權，您可以手動新增表格和必要的腳本。DataTables 是開源的、CDN 託管的軟體，因此您只需參考 CDN 中的那些檔案（或者如果您願意，可以下載一份副本進行自託管）。安裝一個外掛程式，例如 Header And Footer Scripts，可讓您將腳本和 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>

然後，在該頁面的底部，將必要的腳本和樣式包含在 head 中。

<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>

設定 Editor

在您可以使用 Editor 之前，您需要將發行檔案複製到您的伺服器。可以使用 Generator 或下載頁面建立包含所有必要檔案的發行版本。這在手冊中進行了解釋，因此我不會在此重複。我將 PHP 程式庫安裝到網頁伺服器的子目錄中 (‘/Editor’)。

WordPress 使用 MariaDB 或 MySQL 作為其資料庫。為了避免安裝第二個資料庫，我專門為 DataTables 資料建立了一個額外的資料庫 - 這使用相同的資料庫憑證（使用者名稱和密碼）。透過更新檔案 Editor/lib/config.php，將 Editor 設定為使用這個新的資料庫。這個過程在Editor 手冊中進行了解釋。這是我的 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 的範例資料載入了資料庫 - SQL 腳本可以在 Editor 下載的 examples/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>

然後，像之前一樣，將腳本和樣式插入到頁面底部的 head 區段中。請注意 Editor 檔案的路徑 - 它們位於 WordPress 網站內。Generator 將所有 DataTables 腳本合併為單個 CDN 包含 - 如果您想減少網站的依賴性，這些腳本可以是本機伺服器的。

請注意，如果您使用的是 TablePress 短代碼，則表格的 ID 為 tablepress-#，其中 ‘#’ 是表格編號。只需將下面程式碼中的 example 替換為該 TablePress ID 即可。

<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>

就是這樣！我希望這對您有所幫助。如果您有任何意見，請在下方發表。