作者: 李初一

  • 初一小盏 – 小清新风格的博客主题源码 | DearLicy主题-Typecho主题模版

    介绍

    DearLicy主题,一款小众化小清新风格的博客主题 主题支持Typecho所支持的所有版本PHP 简约、小众、优雅

    截图

    首页
    文章页
    评论区
    友情链接

    安装教程

    1. 将主题上传至/usr/themes/文件夹下解压
    2. 后台进行启用
    3. 访问前台查看效果

    使用说明

    1. 本主题永久免费,请勿二次销售
    2. 个人博客主题,不支持商业化使用
    3. 请勿坑骗、倒卖本主题

    更新优化

     优化图片灯箱,修复PJAX切页日夜间切换bug

    初一小盏QQ交流群:770351424

  • 优化图片来提高WordPress网站加载速度

    为了使您的WordPress网站更能吸引访问者并增加转化次数,网站的内容必须吸引人。图文搭配可以使你的文章更具吸引力,但是,高质量图像通常意味着较大的文件大小,会导致网页加载速度变慢。

    所以,我们应该在确保图文排版需求的情况下,尽可能优化图片来减少对网页加载速度的影响。

    在这篇文章中,我们将说明图像如何影响WordPress网站的速度和性能。然后,我们将为您提供4种优化方式,以减少页面加载时间。

    图片[1]-如何优化图片来提高WordPress网站加载速度-初一小盏

    图片如何影响网站的速度和性能

    根据HTTP Archive的说法,图像占网页总重量的近四分之一。您的服务器会努力加载媒体文件,尤其是大文件。

    对于页面加载时间,每一秒都很重要。渲染时间太长的网站会带来糟糕的用户体验(UX),从而导致跳出率更高。

    除了您的访问者之外,Google、百度等搜索引擎也不喜欢缓慢的网站。优化的图像更易于爬网和索引。更快的网站,越有可能是在搜索引擎结果排名更高。

    降低图像的质量和大小将占用较少的站点带宽和磁盘空间。您的页面将变得更轻巧,服务器将更快地与用户的浏览器通信,最终,您的内容将更快地加载。

    可以将图像压缩与打包旅行箱进行比较。首先,您可能会将衣服不进行折迭就扔进旅行箱,然后一下子就满了,以至于您几乎无法关闭它。然后,您将衣服整齐地折迭然后放进旅行箱,你会发现,同样数量的衣服,折迭好以后占用的空间少了很多。

    图片压缩就是一种“打包”方式,适当的图像优化是要在质量和尺寸之间找到适当的平衡。

    优化图片以提高网站速度的4种方法

    您无需在优质媒体和缩短加载时间之间进行选择。如果您使用适当的工具和方法,就可能实现两全其美。您可以通过以下4种方式优化图像以提高WordPress网站速度。

    1.减小图片的文件大小,然后再将其上传到您的站点

    优化图像的一种方法是在将其上传到WordPress媒体库之前,减小其文件大小。简而言之,这涉及调整尺寸大小并通过压缩来调整质量。

    图像压缩有两种类型:

    • 有损压缩,是指图像丢失某些数据以减小文件大小。虽然不足以对访问者造成任何明显的变化,但它可以减轻服务器的负担。
    • 无损压缩,所有图像数据都是完整且可检索的。画质不会受到影响,图像仅在未压缩时才会呈现。

    您应该使用哪种类型取决于您的文件格式,我们将在后面讨论。

    可用于压缩图像的在线工具是TinyPNG(或TinyJPG):

    它会自动应用理想的压缩方法以最大程度地减小图像的文件大小,而不会降低质量。

    太大的尺寸也会给您的站点和服务器增加不必要的负担。因此,您还可以通过调整图像的高度和宽度来减小文件大小。您可以在上传HTML或使用照片编辑平台之前定义这些度量。

    假设您的图片原始尺寸为5,472 x 3,648像素(px)。文件大小(或重量)为3MB。但是,您的网站只需要1,920 x 1,280像素的横幅图像。

    将图像调整为这些尺寸并将其质量稍微降低百分之十,会将文件的总大小从3 MB(3,000 KB)减小到613 KB(KB)。

    在这里,倡萌推荐大家使用 Imsanity:限制上传图片尺寸大小,对于允许用户上传图片的网站来说,限制图片尺寸非常重要!

    2.选择适当的文件格式

    如前所述,压缩类型和文件格式都是进行优化的重要因素。选择适当的图像类型可以减轻其重量,从而提高站点的速度。

    网络上的图像有四种主要文件格式:

    1. PNG – 此格式需要无损压缩。通常,PNG图像是高质量的,但文件大小自然很大。
    2. JPEG – JPEG图像的质量往往低于PNG文件,但自然也较小。有损压缩是进一步减小其大小的最常用方法。
    3. GIF – 此格式仅使用无损压缩。它是为文件较小的动画图像保留的,通常用于社交媒体和博客文章。
    4. WebP – 一种相对较新的文件格式,可以使用有损或无损压缩。WebP图像比PNG小26%,比JPEG小34%。但是,并非所有主要的互联网浏览器(最著名的是Safari)都支持该格式。

    WebP图像在提供最小的文件大小和最高的质量方面具有优势。但是,由于Safari是仅次于Google Chrome的第二受欢迎的浏览器(尤其是对于移动设备),因此它并不是可靠交付视觉内容的最佳选择。

    应谨慎使用GIF。尽管它们通常是幽默或教学信息的极好来源,但动画往往会拖累您的网站速度。

    在PNG和JPEG图像之间进行选择时,普遍的共识是,前者最适合屏幕截图和图形,而后者则可以产生更好的照片。

    3.使用延迟加载插件,例如WP Smush

    正如我们已经提到的,有一些在线工具可用于压缩媒体文件。但是,除了调整格式和大小外,您还可以利用延迟加载来进一步优化图像。

    如果使用延迟加载图片,当访问者仍位于顶部时,页面底部的照片或图形将不会加载呈现。用户向下滚动页面时,底部的图片才会逐步加载出来。

    该技术的目的是最大程度地减少访问者的浏览器必须同时加载的图像数量。它有助于带宽占用和提高站点速度。

    要启用此功能,我们建议使用图像优化和延迟加载插件,例如WP Smush:

    这个免费的插件拥有超过一百万的活跃安装和五星级的WordPress评级,是解决各种图像优化任务(包括延迟加载)的强大解决方案:

    除了延迟加载外,WP Smush还使用无损压缩和图像大小调整来自动优化将媒体文件上传到WordPress时的媒体文件。您可以将其用于所有文件格式,包括PNG、JPEG和GIF。这样就无需记住要提前执行此过程。

    安装并激活插件后,它将立即开始扫描您的站点以查找需要优化的图像。您可以通过网站后台的 Smush > Dashboard > Settings 进行设置。

    4.使用CDN服务加速图片加载

    CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。https://baike.baidu.com/item/CDN

    正如百度百科所说,CDN可以就近分发文件,所以采用CDN托管图片和其他静态资源,可以一定程度上改善图片等静态文件的加载速度。WordPress大学目前托管于阿里云ECS服务器,然后采用OSS托管图片并使用CDN服务,这样的构架相比于单纯增加服务器带宽来说,加速效果更佳明显,而且费用也差不多。

    总结

    高质量图像是您网站的重要组成部分。不幸的是,它们还可能拖累您网站的性能,进而损害您的用户体验和SEO。

    在本文中,我们介绍了4种优化图像以提高网站速度的方法:

    1. 在将图像上传到您的站点之前,请减小它们的文件大小
    2. 选择适当的文件格式
    3. 使用延迟加载插件,例如WP Smush
    4. 使用cdn服务加速图片加载
  • 初一小盏美化合集(带后台) – 年终钜惠

    这段时间很多人联系我说想要研究一下我的代码,想要学习怎么写的,对于这一点我很难说楚,因为我都在自己瞎摸索的,根本不知道怎么教,不过我也是花了点时间把我网站发过的、没发过的美化教程都写成了子比主题美化包,食用方法非常简单,对于小白也容易上手,大佬可自行研究

    美化包演示站:https://demo.vxras.com/

    后台截图:

    基础美化菜单

    进阶美化菜单

    老演员音乐播放器

    介绍

    本美化合集将后台写入了子比主题底部,同时将音乐播放器也一并写了进去,如果你使用了初一小盏的ACG美化插件或者音乐播放器等插件,将无法使用本美化包,需要先停用才可使用

    基础美化一览

    • H标题美化

    • 猫耳朵

    • 首页大图搜索框美化

    • 简易化loading加载

    • 边框拟态

    • 会员开通弹窗背景底图

    • 分类栏目背景美化

    • 马里奥鼠标指针

    • 初一小盏原创侧边栏按钮
    • 文章列表图片倾斜放大

    • 文章列表悬停萝莉

    • 加载更多粉色背景美化

    • 登录弹窗logo上方增加一个小萝莉

    • 页面首次加载完小工具头像摇摆

    进阶美化一览

    • 卡片模式数量修改
    • 子比自带86个svg图标美化

    • 评论区红、蓝背景轮询切换
    • 果冻效果

    • 评论区UID

    • 机甲风特效按钮

    • 页脚美化

    • 子比主题用户中心侧边栏扩展

    使用方法

    将压缩包解压至子比主题目录下,如果你已经在子比主题目录下创建func.php文件则在func.php文件内增加代码引入文件:

    if (file_exists(get_theme_file_path('/DearLicy.php'))) {
        require_once get_theme_file_path('/DearLicy.php');
    }

    如果你没有创建过func.php文件直接将DearLicy.php文件名修改为func.php即可

    购买链接:https://www.vxras.com/2704.html

  • WordPress悬浮音乐播放器

    本插件已在gitee开源,请遵循GPL3.0开源协议,禁止商业化使用以及销售行为

    WordPress悬浮音乐播放器

    介绍

    作者:李初一 QQ:82719519

    博客:初一小盏

    本插件已在诸多Wordpress热门主题中进行了简单的运行测试

    兼容:

    子比主题、B2 Pro、Ripro、总裁主题、一为导航等付费主题

    免费主题仅简单的测试了几款,请大家不要嫌麻烦自行测试一下

    核心代码为小枫独立开发,由李初一改自Wordpress插件,播放器目前有6种不同颜色的主题样式可任意切换 + 3种获取音乐的方式!

    注意:该插件代码有用到ES6语法和css3新特性,如果你使用浏览器内核还是IE10以下,那请回避吧~

    插件说明

    一款基于网易云音乐所制作的第三方音乐嵌入插件,其核心代码为小枫独立制作,音乐所有权归网易所有

    禁止商业化使用以及二次销售

    2023.12.30

    • 修复播放器文字图标高度问题
    • 新增data-bottomHeight高度属性和ES5语法
    • 新增子比主题日夜间模式自适应开关
    • 新增底部歌词关闭、乱序播放选项
    • 补充自动淡出音乐播放器备注:开启后会自动播放音乐,但是大部分浏览器都禁止自动播放,具体自测
    • 功能备注补全,让小白也能轻松上手
    • 新增赞助广告位  tips:免费插件,需要赞助才会有更新的动力

    2023.12.28

    补充子比主题夜间模式css,替换插件css目录下的css文件即可

    待更新功能

    • 可视化管理
    • 记忆播放
    • 更多待添加…

    插件截图

    20231227172018889-image-15

    20231227172044645-image-16

    安装教程

    1. 下载插件
    2. 上传至Wordpress插件目录
    3. 启用插件

    使用说明

    1. 不可和本人ACG美化插件一起使用
    2. 大概率与诸多csf框架开发的插件冲突
    3. 很多细节方面的东西没有多大的心思去补充,有能力的小伙伴们可以自行补充

    鸣谢

    特此感谢为本项目提供支持与灵感的项目

    HTML5音乐播放器

  • 【7B2美化】增加FancyBox灯箱(修复)

    如果你购买了之前的教程,但是7b2主题使用后无效,请看这篇文章

    [b2_insert_post id=”12659″]

    首先,将functions代码里的data-fancybox=”images”删掉

    前往b2主题目录,打开b2/Modules/Common/Post.php

    找到大概103行左右,有个B2_DEFAULT_IMG,你也可以直接搜索B2_DEFAULT_IMG

    在他的下面有这么一段代码

    $v->setAttribute(
                        'class',
                        $v->getAttribute('class').' lazy'
                    );

    在他的下面新增一个

    $v->setAttribute(
                            'data-fancybox',
                            'images'
                        );

    OK,7b2完美兼容fancybox灯箱,有什么不懂的可以随时问我,我在森鹿语用户交流群全天在线

    群号:783754655

    初一小盏:www.vxras.com

  • 初一小盏头像框素材分享

    版权是南山必胜客的,是否使用请自行斟酌

    演示地址:李初一的用户中心-初一小盏 (vxras.com)

  • 自建米游社随机头像API

    效果演示

    ?食用教程

    1、下载附件上传至网站根目录

    2、主题后台——用户&互动——用户功能——用户默认头像填写以下格式

    https://你的域名/api/touxaing.php
  • ErphpdownV12+V13会员vip下载+付费下载资源/付费查看内容+前端个人中心【WordPress插件】

    内容会员推广下载专业版 WordPress插件(erphpdown)是模板兔开发的一款针对虚拟资源收费下载/付费下载/收费查看/付费查看/VIP下载查看的插件,经过完美测试运行于wordpress 3.x-5.x版本。后续模板兔会增加更多实用的功能。 模板兔已针对此插件开发了一个前端用户中心,基本适用于任何主题(不排除有的主题使用错位的可能),此前端个人中心页面模板免费赠送。本插件无域名限制

    插件不做技术支持,使用上有什么问题可以评论交流

    此链接产品属于永久更新系列,一旦购买,有最新的版本保持更新也不再重复收费下载(但也不能保证后期版本能够完全PJ)

    Erphpdown后台演示截图

    最新更新日志

    已经涨价到30,已购买不影响,且行且珍惜
    已经增加更新到V13.33
    已经增加更新到V13.31
    已经更新到V12
    新增升级VIP奖励站内金币、前台充值支付方式排序(用最新的前端个人中心文件)、普通用户下载免费资源等待时间(VIP无需等待)、下载地址跳转时替换字符串、年月收入统计、免登录增加两个接口、修复bug (v12.0 2021.06.16)
    …
    新增后台可设置收费类型、VIP优惠、价格等信息的默认值,新增每篇文章可设置多附件多价格收费下载(modown、monster8主题请看各自的更新记录是否支持此版本的多附件多价格功能),此版本请使用新的前端个人中心文件 (v11.0 2020.06.07)

  • WordPress网站宝塔面板开启404防盗链教程

    宝塔面板防盗链教程

    宝塔面板-站点管理—防盗链,先简单设置开启

    image
     

    再到网站的配置文件里面修改(宝塔上面防盗链设置有点bug,保存了不生效),添加好之后,就能在这里找到了

    image
     
     #SECURITY-START 防盗链配置
    location ~ .*.(jpg|jpeg|gif|png|js|css|webp)$
    {
    expires 30d;
    access_log /dev/null;
    valid_referers none blocked *.qitablog.com *.xcbtmw.com;
    if ($invalid_referer){
    return https://i3.wp.com/w.wallhaven.cc/full/qd/wallhaven-qdojr7.jpg;
    }
    }
    #SECURITY-END
     
    • 第一个就是需要设置的静态文件,一般就这些jpg|jpeg|gif|png|js|css|webp
    • 下面是域名,我此处设置为所有子域名
    • return就是返回的文件,可设置404,也可以设置图片
  • MYM码支付 – 初一定制主题

    一款漂亮的主页,已集成制作为MYM码支付前端模板

    演示地址:初一支付

    请勿修改Zy-Pay文件夹名字,否则造成的错误概不处理
    本人站点以及打包文件已加密核心js,非本站域名自动跳转本站,私信域名至QQ:82719519获取授权使用文件