如何顯示前端頁面上WP_List_Tables

Question

CURRENT ISSUE： 我已經能夠從儀表盤管理區域內我WP的SQL數據庫成功地創造出各種表格列出的，以及創建利用WP_LIST_TABLE但是我遇到了困難插件關於如何使用簡碼在我的網站的前端顯示相同的表格。通常我會添加如下內容：

add_shortcode('joblist', 'Job_List_Plugin'); 

但是，在這種情況下，它似乎沒有工作。頁面不生產的表，而不是你剛纔看到你在這種情況下，[招賢納才]添加到頁面這樣的簡碼

問題： 我怎麼會一個簡碼元素添加到下面的代碼，讓我來顯示這個表格在登錄訪問者的前端頁面上看到了嗎？示例/片段將不勝感激。

if (! class_exists('WP_List_Table')) { 
    require_once(ABSPATH . 'wp-admin/includes/class-wp-list-table.php'); 
} 

class Job_List extends WP_List_Table { 

    /** Class constructor */ 
    public function __construct() { 
     parent::__construct([ 
      'singular' => __('Custom List', 'red'), //singular name of the listed records 
      'plural' => __('Custom Lists', 'red'), //plural name of the listed records 
      'ajax'  => false //does this table support ajax? 
     ]); 
    } 


    /** 
    * Retrieve members data from the database 
    * 
    * @param int $per_page 
    * @param int $page_number 
    * 
    * @return mixed 
    */ 
    public static function get_jobs($per_page = 10, $page_number = 1) { 

     global $wpdb; 
     $query = "SELECT * FROM custom_table ORDER BY PrintOrder"; 

     if(! empty($_REQUEST['s'])){ 
     $search = esc_sql($_REQUEST['s']); 
    $query .= " WHERE Description LIKE '%{$search}%'"; 
    } 

     if (! empty($_REQUEST['orderby'])) { 
      $query .= ' ORDER BY ' . esc_sql($_REQUEST['orderby']); 
      $query .= ! empty($_REQUEST['order']) ? ' ' . esc_sql($_REQUEST['order']) : ' ASC'; 
     } 

     $query .= " LIMIT $per_page"; 
     $query .= ' OFFSET ' . ($page_number - 1) * $per_page; 

     $result = $wpdb->get_results($query, 'ARRAY_A'); 

     return $result; 
    } 

    /** 
    * Returns the count of records in the database. 
    * 
    * @return null|string 
    */ 
    public static function record_count() { 
     global $wpdb; 

     $query = "SELECT COUNT(*) FROM custom_table"; 
     if(! empty($_REQUEST['s'])){ 
     $search = esc_sql($_REQUEST['s']); 
     $query .= " WHERE Description LIKE '%{$search}%'"; 
     } 
     return $wpdb->get_var($query); 
    } 

    /** Text displayed when no member data is available */ 
    public function no_items() { 
     _e('There is nothing display at this time.', 'red'); 
    } 

    /** 
    * Render a column when no column specific method exist. 
    * 
    * @param array $item 
    * @param string $column_name 
    * 
    * @return mixed 
    */ 
    public function column_default($item, $column_name) { 
     switch ($column_name) { 
     case 'Description': 
     case 'Class': 
     case 'EmpName': 
     case 'StartTime': 
      return $item[ $column_name ]; 
     default: 
      return print_r($item, true); //Show the whole array for troubleshooting purposes 
    } 
} 


/** 
* Associative array of columns 
* 
* @return array 
*/ 
function get_columns() { 
    $columns = [ 
     'Description' => __('Classification', 'red'), 
     'Class' => __('Class', 'red'), 
     'EmpName' => __('Employer Name', 'red'), 
     'StartTime' => __('Start Time', 'red') 
    ]; 

    return $columns; 
} 


/** 
* Columns to make sortable. 
* 
* @return array 
*/ 
public function get_sortable_columns() { 
    $sortable_columns = array(
     'Description' => array('Classification', true), 
     'Class' => array ('Class', true) 
    ); 

    return $sortable_columns; 
} 
/** 
* Handles data query and filter, sorting, and pagination. 
*/ 
public function prepare_items() { 

    $this->_column_headers = $this->get_column_info(); 

    /** Process bulk action */ 
    $this->process_bulk_action(); 

    $per_page  = $this->get_items_per_page('jobs_per_page', 7); 
    $current_page = $this->get_pagenum(); 
    $total_items = self::record_count(); 

    $this->set_pagination_args([ 
     'total_items' => $total_items, //calculate the total number of items 
     'per_page' => $per_page //determine how many items to show on a page 
    ]); 

    $this->items = self::get_jobs($per_page, $current_page); 
} 




} 

class Job_List_Plugin { 

// class instance 
static $instance; 

// joblist WP_List_Table object 
public $joblist_obj; 

// class constructor 
public function __construct() { 
    add_filter('set-screen-option', [ __CLASS__, 'set_screen' ], 10, 3); 
    add_action('admin_menu', [ $this, 'plugin_menu' ]); 
} 


public static function set_screen($status, $option, $value) { 
    return $value; 
} 

public function plugin_menu() { 

    $hook = add_menu_page(
     'Job List', 
     'Job List', 
     'manage_options', 
     'joblist_viewer', 
     [ $this, 'plugin_settings_page' ] 
    ); 

    add_action("load-$hook", [ $this, 'screen_option' ]); 

} 


/** 
* Plugin page 
*/ 
public function plugin_settings_page() { 
    ?> 
    <style> 
     table {display: block;overflow-x: scroll;} 
     th {min-width:100px;font-size:10px;} 
     p.search-box {float:none;} 
     #post-body-content {width:98%;} 
    </style> 
     <h2>IBEW 353 Member Management Portal</h2> 
     <p>To locate a specific Member enter their Card Number in the search field provided.</p> 
       <div id="post-body-content"> 
        <div class="meta-box-sortables ui-sortable"> 
         <form method="post"> 
    <input type="hidden" name="page" value="joblist_viewer" /> 
          <?php 
          $this->joblist_obj->prepare_items(); 
          $this->joblist_obj->search_box('Search', 'search'); 
          $this->joblist_obj->display(); ?> 
         </form> 
        </div> 
       </div> 
      <br class="clear"> 
<?php 
} 

/** 
* Screen options 
*/ 
public function screen_option() { 

    $option = 'per_page'; 
    $args = [ 
     'label' => 'Jobs Per Page:', 
     'default' => 5, 
     'option' => 'jobs_per_page' 
    ]; 

    add_screen_option($option, $args); 

    $this->joblist_obj = new Job_List(); 
} 


/** Singleton instance */ 
public static function get_instance() { 
    if (! isset(self::$instance)) { 
     self::$instance = new self(); 
    } 

    return self::$instance; 
} 

} 

add_action('plugins_loaded', function() { 
    Job_List_Plugin::get_instance(); 
}); 

UPDATE 從@Jared楚的幫助下，我能得到一點進展的但是我現在得到一個錯誤。但至少我看到短碼開始工作。

這是我編輯的。

線203（類結構）我加

// class constructor 
public function __construct() { 
    add_filter('set-screen-option', [ __CLASS__, 'set_screen' ], 10, 3); 
    add_action('admin_menu', [ $this, 'plugin_menu' ]); 
    add_shortcode('joblist', [ $this, 'plugin_settings_page' ]); // Added shortcode as per suggestion from @Jared Chu 
} 

的公共職能「plugin_settings_page」包含此代碼

/** 
* Plugin page 
*/ 
public function plugin_settings_page() { 
    ?> 
    <style> 
     table {display: block;overflow-x: scroll;} 
     th {min-width:100px;font-size:10px;} 
     p.search-box {float:none;} 
     #post-body-content {width:98%;} 
    </style> 
     <h2>IBEW 353 Member Management Portal</h2> 
     <p>To locate a specific Member enter their Card Number in the search field provided.</p> 
       <div id="post-body-content"> 
        <div class="meta-box-sortables ui-sortable"> 
         <form method="post"> 
<input type="hidden" name="page" value="joblist_viewer" /> 
          <?php 
          $this->joblist_obj->prepare_items(); 
          $this->joblist_obj->search_box('Search', 'search'); 
          $this->joblist_obj->display(); ?> 
         </form> 
        </div> 
       </div> 
      <br class="clear"> 
<?php 
} 

但是當我查看我放棄了簡碼的頁面到我得到以下錯誤：

致命錯誤：未捕獲錯誤：調用C：\ wamp64 \ www \ dev1 \ wp-content \ plugins \ Job-List-Plugin \ index.ph中的成員函數prepare_items（） p on line 249

Answer 1

add_shortcode('joblist', 'Job_List_Plugin');是不正確的。

add_shortcode二號參考變量必須是一個函數：

# 1. Standard usage 
add_shortcode('shortcode_name', 'shortcode_func'); 

function shortcode_func() 
{ 
// Contents of this function will execute when the blogger 
// uses the [shortcode_name] shortcode. 
} 

# 2. With PHP 5.3, we can pass an anonymous function. 
add_shortcode('shortcode_name', function() { 
    // Contents of this function will execute when the blogger 
    // uses the [shortcode_name] shortcode. 
}); 

#3. Within a class 
class YourPluginClass { 
    public function __construct() 
    { 
     add_shortcode('your_short_code_name', array($this, 'shortcode')); 
    } 

    public function shortcode() 
    { 
      // Contents of this function will execute when the blogger 
      // uses the [shortcode_name] shortcode. 
    } 
} 

所以，你的情況，我們將使用＃3。