如何在WordPress中添加自定义文章排序功能?
请提供在WordPress中创建和管理自定义文章排序功能的方法。
-
玖比肆 评论1. 创建自定义文章类型
要添加自定义文章排序功能,请首先创建自定义文章类型。使用函数register_post_type() 或插件“CPT UI”可快速创建。
例如,要创建名为“产品”的自定义文章类型,可以添加以下代码:
```
function create_product_post_type() {
register_post_type( 'product',
array(
'labels' => array(
'name' => __( 'Products' ),
'singular_name' => __( 'Product' )
),
'public' => true,
'has_archive' => true,
'supports' => array( 'title', 'editor', 'thumbnail' ),
)
);
}
add_action( 'init', 'create_product_post_type' );
```2. 为自定义文章类型添加排序功能
添加自定义文章排序功能的方式有很多种,以下是其中两种常见的方法:
方法一:通过插件
为自定义文章类型添加排序功能的简单方法是使用“Post Types Order”插件。安装并激活该插件后,您可以转到设置- > PT Order页面,然后将自定义文章排序为所需顺序。此插件的好处是您无需编写代码即可轻松添加自定义文章排序功能。
方法二:通过自定义功能
使用自定义功能添加自定义文章排序功能的方法如下:
1) 添加以下代码以向自定义文章类型添加自定义字段:
```
function wpb_admin_enqueue_scripts() {
global $pagenow, $typenow;
if ( ( $pagenow == 'post.php' || $pagenow == 'post-new.php' ) && $typenow == 'product' ) {
wp_enqueue_script( 'jquery-ui-sortable' );
wp_enqueue_script( 'meta-box-sortable', get_stylesheet_directory_uri() . '/js/meta-box-sortable.js' );
}
}
add_action( 'admin_enqueue_scripts', 'wpb_admin_enqueue_scripts' );function add_sortable_meta_box() {
add_meta_box( 'product_sortable', 'Product Order', 'product_sortable_callback', 'product', 'normal', 'core' );
}
add_action( 'add_meta_boxes', 'add_sortable_meta_box' );function product_sortable_callback( $post ) {
$products = get_posts( array(
'post_type' => 'product',
'posts_per_page' => -1,
'orderby' => 'menu_order',
'order' => 'ASC',
'suppress_filters' => true,
) );wp_nonce_field( 'product_sortable_nonce', 'product_sortable_nonce' );
echo '
- ';
- ' . $product->post_title . '
foreach ( $products as $product ) {
echo '';
}
echo '';
}function save_product_sort_order( $post_id ) {
if ( !isset( $_POST['product_sortable_nonce'] ) || !wp_verify_nonce( $_POST['product_sortable_nonce'], 'product_sortable_nonce' ) ) {
return;
}if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}if ( !current_user_can( 'edit_post', $post_id ) ) {
return;
}$products = explode( ',', sanitize_text_field( $_POST['product_order'] ) );
foreach ( $products as $order => $product_id ) {
update_post_meta( $product_id, 'menu_order', $order );
}
}
add_action( 'save_post_product', 'save_product_sort_order' );
```2) 添加一些样式和脚本以创建可拖动的排序列表。可以在functions.php文件中添加以下代码:
```
function custom_admin_styles() {
wp_enqueue_style( 'wpb-admin-css', get_stylesheet_directory_uri() . '/css/admin.css' );
}
add_action( 'admin_print_styles', 'custom_admin_styles' );function custom_admin_scripts( $hook ) {
global $typenow;
if ( $typenow == 'product' || $hook == 'post-new.php' || $hook == 'post.php' ) {
wp_enqueue_script( 'jquery-ui-sortable' );
wp_enqueue_script( 'product-sorting', get_stylesheet_directory_uri() . '/js/product-sorting.js', array( 'jquery-ui-sortable' ) );
}
}
add_action( 'admin_enqueue_scripts', 'custom_admin_scripts', 100 );
```3) 创建两个文件:admin.css和product-sorting.js。以下是示例代码:
admin.css:
```
#product_sortable .inside { margin: 0; padding: 0; }
#product_sortable #products-list { margin: 0; padding: 0; list-style: none; }
#product_sortable #products-list li { margin: 0; padding: 5px; background-color: #f9f9f9; border: 1px solid #ddd; cursor: move; }
```product-sorting.js:
```
jQuery(document).ready(function($) {
$('#products-list').sortable({
update: function( event, ui ) {
var order = $('#products-list').sortable('toArray');
$('#product_order').val(order);
}
});
});
```这些文件要放在主题文件夹中的“css”和“js”文件夹中。
3. 总结
以上是在WordPress中添加自定义文章排序功能的两种常见方法。如果您不想使用插件,构建自定义字段和编写相关代码是必需的。就速度而言,使用插件要更快速便捷。无论哪种方式,均需要具有基本的WordPress编程技能。
2023年 5月 14日 上午7:40
