博客养成记(4) – WordPress笔记

彻底禁用WordPress的自动缩略图功能

WordPress会自动将上传到媒体库的图片裁剪为多个不同尺寸的图片。这个功能的好处是可以生成尺寸统一的缩略图,有利于排版,坏处是生成大量可能从来不会用到的尺寸版本,占用空间。因为我自己的文章特色图都会实现统一尺寸后再上传,因此这个功能对我来说有点鸡肋,斟酌之后决定禁用。

从两个方面进行禁用:

1、禁用主题自带的缩略图裁剪功能(如果有的话)

在主题这方面不同的主题情况有所不同,通常来讲通过搜索主题代码里的“add_image_size”关键字可以知道那里生成了自动缩略图。比如我自己的主题原本就有缩略图功能,每次上传图片时会生成4个不同尺寸的缩略图,原来的代码是这样:

// Thumbnail sizes
add_image_size( 'gridchar-small', 200, 200, true );
add_image_size( 'gridchar-medium', 520, 347, true );
add_image_size( 'gridchar-medium-h', 520 );
add_image_size( 'gridchar-large-h', 940 );

当然不能直接删除,不然主题其他调用这个缩略图的地方会报错。我的做法是将这些函数的尺寸参数去掉,改成以下形式的调用:

add_image_size( 'gridchar-small' );
add_image_size( 'gridchar-medium' );
add_image_size( 'gridchar-medium-h' );
add_image_size( 'gridchar-large-h' );

2、禁用WordPress自带的裁剪缩略图功能

a、在站点后台的“设置-媒体”将“缩略图大小”、“中等大小”、“大尺寸”的宽跟高都设置为0。

b、跳到 https://域名/wp-admin/options.php,Ctrl+F寻找medium_large_size_w,将它的默认值768设置为0,这样就不会自动生成宽768的缩略图了。

c、从5.3.0版本开始,WordPress新增了一个函数 _wp_add_additional_image_sizes(),会自动为大图生成 1536×1536 和 2048×2048 的缩略图。如果不需要的话可以注释这个函数,我自己是保留的,因为上传的大图(宽或高大于2048)不多,而且这个功能可以为在小分辨率设备查看博客大图时提供更好的响应式体验。wp-includes/media.php:4383

function _wp_add_additional_image_sizes() {
   // 2x medium_large size
   add_image_size( '1536x1536', 1536, 1536 );
   // 2x large size
   add_image_size( '2048x2048', 2048, 2048 );
}

WordPress添加PrismJs语法高亮支持

1、下载 PrismJs

PrismJs 官网,选择所需的 PrismJs 主题、支持语言(建议全选)、插件(行号显示等)后下载 prism.css 和 prism.js 文件,上传到 wp-content/themes/your-theme/plugin/prismjs/ 中。

2、引用PrismJs

在主题的 function.php 文件末尾添加引用。

/* ---------------------------------------------------------------- *
 *  Load migchar.com custom files
/* ---------------------------------------------------------------- */

/*  add PrismJs support
/* ------------------------------------ */
function add_prism() {
    wp_register_style(
        'prismCSS',
        get_stylesheet_directory_uri() . '/plugin/prismjs/prism.css'
    );
    wp_register_script(
        'prismJS',
        get_stylesheet_directory_uri() . '/plugin/prismjs/prism.js'
    );
    wp_enqueue_style('prismCSS');
    wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

3、常规用法

文章写作时可以将代码块设置为“内联代码”,并在(古腾堡编辑器)“区块”的“高级”设置中添加“额外的CSS类”,如 language-php 代表为该代码块使用php语言样式的语法高亮,line-nmubers 代表为该代码块使用行号显示。行号显示的前提是在下载 PrismJs 时勾选了 line-numbers 插件。

4、建议用法

在主题的 script.js 或类似的 js 文件添加下列语句:

/* --------------------------------------------------------------- *
*  Load migchar custom files
/* --------------------------------------------------------------- */

/*  PrismJs line-numbers
/* ------------------------------------ */
$(document).ready(function(){
    $("pre[class*='wp-block-preformatted'],code[class*='language-']")
        .addClass('language-markup')
        .addClass('line-numbers');
});

这样在未指定“额外的CSS类”时,代码块以一个默认的 language-markup 样式高亮,并显示行号,有进一步指定语言的高亮需求时再手动设置“额外的CSS类”为 language-php 之类的样式,这个手动设置的 CSS 类会覆盖默认的 language-markup。

插件

Featured Image by URL

设置外链图片为文章的特色图片。WordPress自带的媒体库功能很是鸡肋,不支持自定义目录和分类, 所以我的文章图片都是使用外链cdn的,但是WordPress默认不支持将外链图片设置为文章的特色图片。 Featured Image by URL 安装启用后在文档编辑发布页面会有“Featured Image by URL”选项,直接输入外链图片地址即可作为文档的特色图片。

LuckyWP Table of Contents

文章目录插件。