建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

如果经常在 WordPress 上传同名的图片,最好开启这个选项(WordPress在后台文章列表编辑特色图像)

GG网络技术分享 2025-03-18 16:13 15


如果经常在 WordPress 上传同名的图片,最好开启这个选项

如果在 WordPress 上传的图片经常同名,比如都是 1.jpg 或者 未命名图片.jpg 这种,可能一次简单的图片上传行为就会造成上百次的 SQL 的请求,直接引起数据库请求数过多。

为什么一次简单的图片上传行为,就会造成上百次的 SQL 请求呢?感觉有点不可思议,这是怎么造成的呢?我们从源头说起,从 WordPress 后台上传图片的流程说起:

WordPress 上传图片的流程

  1. 首先使用 wp_handle_upload 函数把图片上传到 WordPress 上传目录。
  2. 然后整理好数据提交给 wp_insert_attachment,准备插入数据库。
  3. wp_insert_attachment 函数调用 wp_insert_post 插入到 WordPress 的 posts 数据库表。
  4. wp_insert_post 把图片信息插入到 WordPress 的 posts 数据库表之前,会使用 wp_unique_post_slug 函数设置唯一的 post_slug。

重点就是这个 wp_unique_post_slug 函数了,它会到数据库里面检查图片的名字是否已经有了,有了就会重命名图片的名字,比如 1.jpg,就会被重命名为 1-2.jpg,如果 1-2.jpg 名字也有了,就会重命名为 1-3.jpg,以此类推,一直到名字不再重复为止。

如果长期上传的图片名字都是 1.jpg 的话,那么上传一张图,会造成数据库进行几十到上百次的 SQL 查询,下图我是在监控系统大量 SQL 请求时候记录下来的截图,这只是一部分,实际是记录到1-999多,把 log 文件都撑到几十M,我当时就震惊了。

给图片加上时间戳,防止重名

我们不可能让用户坚持不上传 1.jpg 这样太常用的图片名字,但是又要为了防止造成这个大量 SQL 这个问题,我们只能在源头就杜绝这个问题,应该在上传的时候把图片的名字更改了,给图片的名字加多一个时间戳,这样就能几乎保证图片名字不可能重复了:

add_filter('wp_handle_upload_prefilter', function($file){

$file['name'] = time().'-'.$file['name'];

return $file;

});

把上面的代码复制到主题的 functions.php 文件即可,WPJAM Basic 的「优化设置」中的「功能增强」也带了该功能,这个就更加简单,无需添加任何代码,直接勾选保存即可。

WordPress在后台文章列表编辑特色图像

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{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3};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>\\\'; }

完成以上步骤后,在后台文章就可以查看效果了。

接下来添加JS代码使特色图像可以快速编辑和更新,首先排队加载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\\\" ><div ><span >特色图像</span><div><a href=\\\"#\\\" rel=\\\"external nofollow\\\"  rel=\\\"external nofollow\\\"  >设置特色图像</a><input type=\\\"hidden\\\" name=\\\"_thumbnail_id\\\" value=\\\"\\\" /></div><a href=\\\"#\\\" rel=\\\"external nofollow\\\"  rel=\\\"external nofollow\\\"  >移除特色图像</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}

这篇WordPress如何在文章列表编辑特色图像的教程到此就结束了,教程看到这里,你也应该能够自己实现在后台文章列表编辑特色图像的功能了吧?

扫码关注wpwp自学笔记

精选优质免费WordPress主题模板,分享最新WordPress实用建站教程!

记住我们的网址:ztJun.com

标签:

提交需求或反馈

Demand feedback