wordpress文章列表集成特色图片功能

Wordpress 天白 6个月前 (02-20) 97次浏览 0个评论

这个功能很简单就是在您的wordpress后台文章列表里面的右侧可以显示出当时有设置特色图片文章的图片缩略图,很实力的一个小的增强功能,可以更方法的将文章封面展示在列表里,免除了打开内容或是跳转前端确认文章封面特色图片的步骤,而且操作方法也是简单易学,下面大挖把代码贴出来分享给大家,喜欢wordpress的小伙伴可以动手折腾一下。
首页还是找到我们主题的functions.php文件在里面添加以下代码

/**
* WordPress 后台文章列表设置文章特色图片(缩略图)集成版
* Plugin Name: Easy Thumbnail Switcher
*/
class doocii_Easy_Thumbnail_Switcher {

public $add_new_str;
public $change_str;
public $remove_str;
public $upload_title;
public $upload_add;
public $confirm_str;

public function __construct() {

$this->add_new_str = __( '添加');
$this->change_str = __( '更改');
$this->remove_str = __( '移除');
$this->upload_title = __( '上传特色图片');
$this->upload_add = __( '确定');
$this->confirm_str = __( '你确定?');

add_filter( 'manage_posts_columns', array( $this, 'add_column' ) );
add_action( 'manage_posts_custom_column', array( $this, 'thumb_column' ), 10, 2 );
add_action( 'admin_footer', array( $this, 'add_nonce' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'scripts' ) );

add_action( 'wp_ajax_ts_ets_update', array( $this, 'update' ) );
add_action( 'wp_ajax_ts_ets_remove', array( $this, 'remove' ) );

add_image_size( 'ts-ets-thumb', 75, 75, array( 'center', 'center' ) );

}

/**
* 安全检查
*/
public function add_nonce() {

global $pagenow;

if( $pagenow !== 'edit.php' ) {
return;
}
wp_nonce_field( 'ts_ets_nonce', 'ts_ets_nonce' );

}

/**
* 加载脚本
*/
public function scripts( $pagenow ) {

if( $pagenow !== 'edit.php' ) {
return;
}

wp_enqueue_media();
wp_enqueue_script( 'doocii-ets-js', get_template_directory_uri() . '/js/script.js', array( 'jquery', 'media-upload', 'thickbox' ), '1.0', true );

wp_localize_script( 'doocii-ets-js', 'ets_strings', array(
'upload_title' => $this->upload_title,
'upload_add' => $this->upload_add,
'confirm' => $this->confirm_str,
) );

}

/**
* The action which is added to the post row actions
*/
public function add_column( $columns ) {

$columns['ts-ets-option'] = __( '缩略图');
return $columns;

}

/**
* 显示列
*/
public function thumb_column( $column, $id ) {

switch( $column ) {
case 'ts-ets-option':

if( has_post_thumbnail() ) {
the_post_thumbnail( 'ts-ets-thumb' );
echo '<br>';
echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );
echo sprintf( ' <button type="button" class="button-secondary ts-ets-remove" data-id="%s">%s</button>', esc_attr( $id ), $this->remove_str );
} else {
echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->add_new_str );
}

break;
}

}

/**
* AJAX保存更新缩略图
*/
public function update() {

// 检查是否所有需要的数据都设置与否
if( !isset( $_POST['nonce'] ) || !isset( $_POST['post_id'] ) || !isset( $_POST['thumb_id'] ) ) {
wp_die();
}

//验证
if( !wp_verify_nonce( $_POST['nonce'], 'ts_ets_nonce' ) ) {
wp_die();
}

$id = $_POST['post_id'];
$thumb_id = $_POST['thumb_id'];

set_post_thumbnail( $id, $thumb_id );

echo wp_get_attachment_image( $thumb_id, 'ts-ets-thumb' );
echo '<br>';
echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );
echo sprintf( ' <button type="button" class="button-secondary ts-ets-remove" data-id="%s">%s</button>', esc_attr( $id ), $this->remove_str );

wp_die();

}

/**
* AJAX回调后删除缩略图
*/
public function remove() {

// Check if all required data are set or not
if( !isset( $_POST['nonce'] ) || !isset( $_POST['post_id'] ) ) {
wp_die();
}

// Verify nonce
if( !wp_verify_nonce( $_POST['nonce'], 'ts_ets_nonce' ) ) {
wp_die();
}

$id = $_POST['post_id'];

delete_post_thumbnail( $id );

echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->add_new_str );

wp_die();

}

}

new doocii_Easy_Thumbnail_Switcher();

/**
* WordPress 后台文章列表设置文章特色图片(缩略图)集成版
* Plugin Name: Easy Thumbnail Switcher
*/
class doocii_Easy_Thumbnail_Switcher {

public $add_new_str;
public $change_str;
public $remove_str;
public $upload_title;
public $upload_add;
public $confirm_str;

public function __construct() {

$this->add_new_str = __( '添加');
$this->change_str = __( '更改');
$this->remove_str = __( '移除');
$this->upload_title = __( '上传特色图片');
$this->upload_add = __( '确定');
$this->confirm_str = __( '你确定?');

add_filter( 'manage_posts_columns', array( $this, 'add_column' ) );
add_action( 'manage_posts_custom_column', array( $this, 'thumb_column' ), 10, 2 );
add_action( 'admin_footer', array( $this, 'add_nonce' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'scripts' ) );

add_action( 'wp_ajax_ts_ets_update', array( $this, 'update' ) );
add_action( 'wp_ajax_ts_ets_remove', array( $this, 'remove' ) );

add_image_size( 'ts-ets-thumb', 75, 75, array( 'center', 'center' ) );

}

/**
* 安全检查
*/
public function add_nonce() {

global $pagenow;

if( $pagenow !== 'edit.php' ) {
return;
}
wp_nonce_field( 'ts_ets_nonce', 'ts_ets_nonce' );

}

/**
* 加载脚本
*/
public function scripts( $pagenow ) {

if( $pagenow !== 'edit.php' ) {
return;
}

wp_enqueue_media();
wp_enqueue_script( 'doocii-ets-js', get_template_directory_uri() . '/js/script.js', array( 'jquery', 'media-upload', 'thickbox' ), '1.0', true );

wp_localize_script( 'doocii-ets-js', 'ets_strings', array(
'upload_title' => $this->upload_title,
'upload_add' => $this->upload_add,
'confirm' => $this->confirm_str,
) );

}

/**
* The action which is added to the post row actions
*/
public function add_column( $columns ) {

$columns['ts-ets-option'] = __( '缩略图');
return $columns;

}

/**
* 显示列
*/
public function thumb_column( $column, $id ) {

switch( $column ) {
case 'ts-ets-option':

if( has_post_thumbnail() ) {
the_post_thumbnail( 'ts-ets-thumb' );
echo '<br>';
echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );
echo sprintf( ' <button type="button" class="button-secondary ts-ets-remove" data-id="%s">%s</button>', esc_attr( $id ), $this->remove_str );
} else {
echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->add_new_str );
}

break;
}

}

/**
* AJAX保存更新缩略图
*/
public function update() {

// 检查是否所有需要的数据都设置与否
if( !isset( $_POST['nonce'] ) || !isset( $_POST['post_id'] ) || !isset( $_POST['thumb_id'] ) ) {
wp_die();
}

//验证
if( !wp_verify_nonce( $_POST['nonce'], 'ts_ets_nonce' ) ) {
wp_die();
}

$id = $_POST['post_id'];
$thumb_id = $_POST['thumb_id'];

set_post_thumbnail( $id, $thumb_id );

echo wp_get_attachment_image( $thumb_id, 'ts-ets-thumb' );
echo '<br>';
echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->change_str );
echo sprintf( ' <button type="button" class="button-secondary ts-ets-remove" data-id="%s">%s</button>', esc_attr( $id ), $this->remove_str );

wp_die();

}

/**
* AJAX回调后删除缩略图
*/
public function remove() {

// Check if all required data are set or not
if( !isset( $_POST['nonce'] ) || !isset( $_POST['post_id'] ) ) {
wp_die();
}

// Verify nonce
if( !wp_verify_nonce( $_POST['nonce'], 'ts_ets_nonce' ) ) {
wp_die();
}

$id = $_POST['post_id'];

delete_post_thumbnail( $id );

echo sprintf( '<button type="button" class="button-primary ts-ets-add" data-id="%s">%s</button>', esc_attr( $id ), $this->add_new_str );

wp_die();

}

}

new doocii_Easy_Thumbnail_Switcher();
以下代码保存为script.js,保存至 主题名/js 目录下

(function($) {

"use strict";

if( typeof ts_ets === 'undefined' ) {
window.ts_ets = {};
ts_ets.upload_frame = false;
}

$(document).on( 'click', 'button.ts-ets-remove', function() {

ts_ets.tmp_id = $(this).data('id');
ts_ets.tmp_parent = $(this).closest('td.ts-ets-option');

if( !confirm( ets_strings.confirm ) ) {
return;
}

$.ajax({
url: ajaxurl,
method: "POST",
data: {
action: 'ts_ets_remove',
nonce: $('#ts_ets_nonce').val(),
post_id: ts_ets.tmp_id
},
success: function( data ) {
if( data != '' ) {
ts_ets.tmp_parent.html( data );
}
}
});

});

$(document).ready(function() {

ts_ets.upload_frame = wp.media({
title: ets_strings.upload_title,
button: {
text: ets_strings.upload_add,
},
multiple: false
});

ts_ets.upload_frame.on( 'select', function() {

ts_ets.selection = ts_ets.upload_frame.state().get('selection');

ts_ets.selection.map( function( attachment ) {
if( attachment.id ) {
$.ajax({
url: ajaxurl,
method: "POST",
data: {
action: 'ts_ets_update',
nonce: $('#ts_ets_nonce').val(),
post_id: ts_ets.tmp_id,
thumb_id: attachment.id
},
success: function( data ) {
if( data != '' ) {
ts_ets.tmp_parent.html( data );
}
}
});
}
});

});

});

$(document).on( 'click', 'button.ts-ets-add', function(e) {

e.preventDefault();

ts_ets.tmp_id = $(this).data('id');
ts_ets.tmp_parent = $(this).closest('td.ts-ets-option');

if( ts_ets.upload_frame ) {
ts_ets.upload_frame.open();
}

});

})(jQuery);

(function($) {

"use strict";

if( typeof ts_ets === 'undefined' ) {
window.ts_ets = {};
ts_ets.upload_frame = false;
}

$(document).on( 'click', 'button.ts-ets-remove', function() {

ts_ets.tmp_id = $(this).data('id');
ts_ets.tmp_parent = $(this).closest('td.ts-ets-option');

if( !confirm( ets_strings.confirm ) ) {
return;
}

$.ajax({
url: ajaxurl,
method: "POST",
data: {
action: 'ts_ets_remove',
nonce: $('#ts_ets_nonce').val(),
post_id: ts_ets.tmp_id
},
success: function( data ) {
if( data != '' ) {
ts_ets.tmp_parent.html( data );
}
}
});

});

$(document).ready(function() {

ts_ets.upload_frame = wp.media({
title: ets_strings.upload_title,
button: {
text: ets_strings.upload_add,
},
multiple: false
});

ts_ets.upload_frame.on( 'select', function() {

ts_ets.selection = ts_ets.upload_frame.state().get('selection');

ts_ets.selection.map( function( attachment ) {
if( attachment.id ) {
$.ajax({
url: ajaxurl,
method: "POST",
data: {
action: 'ts_ets_update',
nonce: $('#ts_ets_nonce').val(),
post_id: ts_ets.tmp_id,
thumb_id: attachment.id
},
success: function( data ) {
if( data != '' ) {
ts_ets.tmp_parent.html( data );
}
}
});
}
});

});

});

$(document).on( 'click', 'button.ts-ets-add', function(e) {

e.preventDefault();

ts_ets.tmp_id = $(this).data('id');
ts_ets.tmp_parent = $(this).closest('td.ts-ets-option');

if( ts_ets.upload_frame ) {
ts_ets.upload_frame.open();
}

});

})(jQuery);

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址