wordpress后台文章列表快速编辑添加特色图像
橘子皮280 次
最近发现一个非常好用的功能,能够帮助您在WordPress文章列表中提高不少的效率,所以今天就给大家分享一篇基于WordPress默认上传的快速选择特色图像功能。如果你的主题不支持缩略图请首先在functions.php
中添加
- add_theme_support( ‘post-thumbnails’ );

操作流程
一、在后台文章列表添加数组复制下面的代码到你的functions.php
中
- /*
- * 添加数组到文章列表
- */
- add_filter(‘manage_post_posts_columns’, ‘lb_featured_image_column’);
- function lb_featured_image_column( $column_array ) {
- $column_array = array_slice( $column_array, 0, 1, true )
- + array(‘featured_image’ => ‘特色图像’)
- + array_slice( $column_array, 1, NULL, true );
- return $column_array;
- }
- /*
- * 使用钩子完善数组
- */
- add_action(‘manage_posts_custom_column’, ‘lb_render_the_column’, 10, 2);
- function lb_render_the_column( $column_name, $post_id ) {
- if( $column_name == ‘featured_image’ ) {
- if( has_post_thumbnail( $post_id ) ) {
- $thumb_id = get_post_thumbnail_id( $post_id );
- echo ‘<img data-id=“‘ . $thumb_id . ‘” src=“‘ . wp_get_attachment_url( $thumb_id ) . ‘” />’;
- } else {
- echo ‘<img data-id=“-1” src=“‘ . get_stylesheet_directory_uri() . ‘/placeholder.png” />’;
- }
- }
- }
二、添加一些CSS来美化数组
- add_action( ‘admin_head’, ‘lb_custom_css’ );
- function lb_custom_css(){
- echo ‘<style>
- #featured_image{
- width:120px;
- }
- td.featured_image.column-featured_image img{
- max-width: 100%;
- height: auto;
- }
- /* some styles to make Quick Edit meny beautiful */
- #lb_featured_image .title{margin-top:10px;display:block;}
- #lb_featured_image a.lb_upload_featured_image{
- display:inline–block;
- margin:10px 0 0;
- }
- #lb_featured_image img{
- display:block;
- max-width:200px !important;
- height:auto;
- }
- #lb_featured_image .lb_remove_featured_image{
- display:none;
- }
- </style>’;
- }
完成以上步骤时,可以查看效果

三、添加JavaScript使特色图像可以快速编辑和更新
首先排队加载WordPress默认上传
- add_action( ‘admin_enqueue_scripts’, ‘lb_include_myuploadscript’ );
- function lb_include_myuploadscript() {
- if ( ! did_action( ‘wp_enqueue_media’ ) ) {
- wp_enqueue_media();
- }
- }
然后添加快速编辑字段
- add_action(‘quick_edit_custom_box’, ‘lb_add_featured_image_quick_edit’, 10, 2);
- function lb_add_featured_image_quick_edit( $column_name, $post_type ) {
- if ($column_name != ‘featured_image’) return;
- echo ‘<fieldset id=“lb_featured_image” class=“inline-edit-col-left”>
- <div class=“inline-edit-col”>
- <span class=“title”>特色图像</span>
- <div>
- <a href=“#” class=“lb_upload_featured_image”>设置特色图像</a>
- <input type=“hidden” name=“_thumbnail_id” value=“” />
- </div>
- <a href=“#” class=“lb_remove_featured_image”>移除特色图像</a>
- </div></fieldset>’;
- }
最后就是更新保存,复制代码
- add_action(‘admin_footer’, ‘lb_quick_edit_js_update’);
- function lb_quick_edit_js_update() {
- global $current_screen;
- if (($current_screen->id != ‘edit-post’) || ($current_screen->post_type != ‘post’))
- return;
- ?><script>
- jQuery(function($){
- $(‘body’).on(‘click’, ‘.lb_upload_featured_image’, function(e){
- e.preventDefault();
- var button = $(this),
- custom_uploader = wp.media({
- title: ‘设置特色图像’,
- library : { type : ‘image’ },
- button: { text: ‘设置特色图像’ },
- }).on(‘select’, function() {
- var attachment = custom_uploader.state().get(‘selection’).first().toJSON();
- $(button).html(‘<img src=“‘ + attachment.url + ‘” />’).next().val(attachment.id).parent().next().show();
- }).open();
- });
- $(‘body’).on(‘click’, ‘.lb_remove_featured_image’, function(){
- $(this).hide().prev().val(‘-1’).prev().html(‘设置特色图像’);
- return false;
- });
- var $wp_inline_edit = inlineEditPost.edit;
- inlineEditPost.edit = function( id ) {
- $wp_inline_edit.apply( this, arguments );
- var $post_id = 0;
- if ( typeof( id ) == ‘object’ ) {
- $post_id = parseInt( this.getId( id ) );
- }
- if ( $post_id > 0 ) {
- var $edit_row = $( ‘#edit-‘ + $post_id ),
- $post_row = $( ‘#post-‘ + $post_id ),
- $featured_image = $( ‘.column-featured_image’, $post_row ).html(),
- $featured_image_id = $( ‘.column-featured_image’, $post_row ).find(‘img’).attr(‘data-id’);
- if( $featured_image_id != -1 ) {
- $( ‘:input[name=“_thumbnail_id”]’, $edit_row ).val( $featured_image_id ); // ID
- $( ‘.lb_upload_featured_image’, $edit_row ).html( $featured_image ); // 图像 HTML
- $( ‘.lb_remove_featured_image’, $edit_row ).show(); // 移除链接
- }
- }
- }
- });
- </script>
- <?php
- }
评论 | 0 条评论
登录之后才可留言,前往登录