Category: WordPress进阶

  • WordPress网站配置SMTP邮件功能完全教程

    WordPress网站配置SMTP邮件功能完全教程

    这篇文章,沃普思将从几个角度来讲WordPress网站如何配置SMTP邮件功能。

    一,使用默认邮件功能

    这个功能是使用主机或者云主机默认的PHP邮件功能,使用的是PHP mail(),使用的邮件服务器软件一般是两种,sendmail和postfix。

    具体使用哪个,你可以咨询主机提供商,云主机是可以自定义的。

    早期使用的都是sendmail,现在通常都使用postfix,相比sendmail,postfix软件优势明显。postfix邮件服务器软件就是为了替代sendmail而开发的,配置简单,模块化设计,功能更强大,有更多的可扩展性。

    postfix支持使用25端口,也只是465端口,需要自己配置,比较复杂,这部分略过。

    那WP Mail SMTP邮件插件来说,如果使用Default (none)默认功能无法发送邮件,就说明邮件服务器的配置不正确。

    如果是虚拟主机,就不用不管了,因为主机商不会为了你的需求更改整台服务器的配置。

    如果是云主机,使用宝塔面板,可以自己尝试折腾一下,可以自行去搜索教程。

    二,第三方邮件服务商

    第三方服务商分两种:免费版,收费版。

    1,国外WP Mail SMTP插件兼容的免费版邮件提供商:

    2,每款SMTP插件都有专业版才能用的邮件服务商

    这是策略问题,如果是个人网站,免费版的额度已经足够了,特别是Mailersend,每月的额度有12000封。

    WP Mail SMTP插件只有专业版才能用邮件服务商是:Amazon SES,365 / Outlook,Zoho Mail,这三个也就被排除了。另外,没有列出Gmail的,因为Gmail的设置太复杂了,也建议不要使用。

    3,最佳WordPress邮件功能插件:WP Mail SMTP插件。

    虽然WordPress官方收录和超过50款WordPress邮件功能插件,但最好就是WP Mail SMTP插件,功能做的足够好,用户体验也足够好,每个邮件服务商的教程文档都非常详细,而且是视频+详细的图文教程。

    三,邮件服务商自己发布的SMTP插件

    这也是一种趋势,因为自家的东西,完全没有兼容性的问题,上手更容易,也就更容易获得客户。在AI时代,生产力逐渐过剩,邮件服务商自行发布SMTP插件或许也是无奈之举,至于如何选择,各位可以多多测试,如果竞争过于激烈,也许会推出邮件服务商使用自家的SMTP插件有更大的免费额度等优惠。

    一下服务商有自己的SMTP插件:

    1,SMTP2GO;

    2,Brevo;

    3,Mailgun ;

    4,MailerSend – Official SMTP Integration ;

    5,Zoho Flow ;

    6,Icegram Mailer ;

    四,给WordPress网站SMTP插件搭配独立的邮件日志插件

    WP Mail SMTP插件的日志功能是收费版本才有,是在想用这个插件,可以搭配一个第三方的独立邮件日志插件。

    1,WP Mail Logging;

    2,Check & Log Email ;

    3,WP Email Log – PostBox ;

    4,Email Tracker ;

    五,总结

    这篇文章主要是打通WordPress网站发送邮件的全流程问题。

    1,自行配置云主机的邮件软件(较复杂,新手勿用);

    2,使用第三方成熟的SMTP插件配置邮件功能(简单,推荐新手使用);

    3,工具配置好以后,还要一个发送邮件的服务商,不然邮件从哪里发送?

    邮件服务商可以选择国内的,也可以选择国外的,国内的个人邮箱,企业邮箱都可以。国外的有独立的第三方邮件服务商也可以,大多数都有免费额度,如果是个人网站可以选择使用。

    4,国外有一部分SMTP邮件服务商为了能更好的吸引用户,开发了自己的SMTP插件。

    5,功能增强:把所有的发布记录都通过日志功能都记录下来,大部分SMTP插件都有这个功能,只是收费或者免费。

    到此为止,这就是这篇文章的主要内容。

    六,延伸阅读

    发送邮件就会有邮件的格式,如果能根据不同的场景,自定义邮件的格式,也就是邮件的模板,那么网站显得更加专业。这部分会在新的一篇文章中独立发布。

  • WordPress网站图片格式最佳选择

    WordPress网站图片格式最佳选择

    WordPress网站会包含图片和文字,图片可以增加文章的可阅读性,而且很多网站基于自身的功能,是离不开图片的。

    目前主要使用的图片格式有:png,jpg,jpeg,gif,webp,avif,tiff等。

    关于我们,我们先说几个常识:

    • 一张图片可以有多种格式;
    • 每种格式可以相互转换,转换工具可以是作图软件,现在也有很多在线的工具;
    • 一张图片的格式不同,体积大小也不一样;

    在选择最佳图片格式的时候,我们需要考虑以下几种情况:

    • 选择最佳的图片格式,不能牺牲图片的清晰度;
    • 一张图片,格式不同,清晰度不同,以清晰度为准则;
    • 一张最佳的图片:清晰度足够,体积足够小。
    • 目前最佳选择是:webp和avif,这也是Google官方的建议。

    一篇文章,包含四张png,每张png的格式是300k,这样一个页面1.2M。

    还是这篇文章,如果把图片转换成webp格式的,每张的图片大概只有30K,这样一个页面就只有120K。

    这两个页面在服务器配置完全一致的情况下,第二种情况的打开方式会非常快。

    这里有两个重要的问题:

    1,提升的网站打开速度,优化了用户访问体验;

    2,减轻了服务器的存储压力,如果有5000篇文章,每篇文章20张图片,这种差距会非常大,所以选择合适的图片,非常重要。

    网站类型不同,对图片质量的要求也不相同,不同的应用场景,对图片的使用也有不同。

    比如有一个客户,他经常出差,但不喜欢带笔记本,每次写稿子直接用iPhone发布到WordPress网站了,因为iPhone拍摄出来的图片格式HEIC格式。所以之前非常苦恼,怎么能把HEIC格式的图片上传到WordPress媒体库。

    什么是WEBP格式的图片?

    由 Google 开发的 WebP 格式提供了出色的图像优化,支持有损和无损压缩。它以更小的文件大小提供高质量的图像,支持有损和无损压缩、透明度,甚至动画。Google PageSpeed Insights 推荐使用该格式以通过审核,并有助于提升核心网络指标。与一些非常老旧的浏览器的兼容性仍然是一个轻微的局限性。

    沃普斯继续分享解决实际应用的文章。

    如果您是一个新搭建的网站,请务必注意,所有的图片都一定要使用webp格式;

    日常可以使用软件在电脑里做图片格式转换,我们日常使用的软件是PP鸭,一次购买终身授权。

    想免费的,也可以试试这个地址:Free Online Image Compression

    也可以搜索其他在线的工具。

    如果您的WordPress网站已经在运行了,也已经有大量的图片是png或者jpg格式。

    最佳的方案是:您可以购买一个图片转换流量包,比如这个:Plans & Pricing | ShortPixel

    这种转环包有几个好处:

    • 永不会过期;
    • 支持webp和avif格式;
    • 上传一张,转换一张,不用就一直放着就行;
    • 遇到问题可以获取官方的支持。

    沃普斯并没有和ShortPixel合作,只是在实际应用中,需要解决一个客户的十万张png的图片。发现了这是最好的解决方案。

    图片有100G,压缩以后直接只有35G了。每篇文章的图片数量超过20个,页面的体积大小也有14.5M降低到5.2M。

  • 纯CSS+HTML实现圆圈+箭头动画

    今天分享一个纯 HTML + CSS 实现的圆圈+箭头动画。100vh 高度,通过 jQuery 控制每次滚动一屏的网站风靡一时,在第一屏的页面底部中间,可以考虑加上这个动画,提示可以往下滚动。

    如果引入了 Fontawesome 之类的字体,那么箭头伪类可以替换成更好看的样式。

    以下是 HTML 代码

    /* html sample */
    <html>
      <head>
      </head>
      <body>
        <div class="container">
          <div class="arrow"></div>
        </div>
      </body>
    </html>

    以下是 CSS 代码

    /* 用于滚屏,居中下部 */
    body {
      margin:0;
      padding:0;
    }
    .container {
      height:100vh;
      background:#333
    }
    .arrow {
      opacity: 1;
      animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
      -webkit-animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      position: absolute;
      bottom: 10px;
      left: 50%;
      margin-left: -30px;
      width: 60px;
      height: 60px;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      line-height: 60px;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border: 1px solid #fff;
      cursor: pointer;
      overflow: hidden;
    }
    
    .arrow:hover {
      animation-play-state: paused;
      -webkit-animation-play-state: paused;
    }
    
    .arrow::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid white; /* 箭头的颜色 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(0);
    }
    
    @keyframes arrow {
      0%, 100% {
        transform: translateY(0); /* 动画开始和结束时元素在原始位置 */
      }
      50% {
        transform: translateY(-20px); /* 动画中间,元素向上移动10像素 */
      }
    }

    实际效果预览:

    想自己上手改改的,Codepen 代码点这里

  • WordPress数据备份插件UpdraftPlus详细使用教程–功能介绍

    WordPress数据备份插件UpdraftPlus详细使用教程–功能介绍

    关于WordPress数据备份插件UpdraftPlus,之前这篇文章有过介绍:UpdraftPlus WordPress Backup Plugin,今天写一篇文章,详细的说一下这个插件的使用教程。

    UpdraftPlus插件主要功能:

    • 可以为WordPress提供完美的数据备份,数据安全,数据恢复功能;
    • 支持WordPress多站点数据备份;
    • 备份数据不限制大小,目前最大的单个数据备份是100G,只要主机不限制大小,插件不限制;
    • 可以设置多种备份选项;支持设置计划任务;
    • 支持备份数据异地备份及恢复;
    • 支持程序,主题,插件,数据库分别备份,存储,恢复;
    • 插件在主题,插件和程序在升级之前自动备份数据;
    • 数据库备份加密功能;备份数据传输到远程云存储加密功能;
    • 所有备份功能都有日志详细记录;
    • 进行中的备份会在WordPress仪表盘里显示,有任何错误或者警告都会显示;
    • 备份完成或者中断,或者备份到远程云存储完成后都会发邮件提醒;
    • 总之一句话,这款插件可以满足我们备份,存储,恢复的所有功能。

     

     

  • 再聊如何在WordPress 5.8程序的网站上使用webP格式的图片

    再聊如何在WordPress 5.8程序的网站上使用webP格式的图片

    前几天Wopus写过一篇文章:如何在WordPress网站上使用webP图片,在这篇文章里,分析了webP图片格式的优势,也有如何在WordPress 5.8程序网站上使用webP格式的图片。但是没特别的细说,今天再通过这篇文章聊一聊如何在WordPress站点上使用WebP格式的图片。

    在WordPress站点上使用webP格式的图片,需要有几个条件:

    1,WordPress程序要是5.8及以上版本;
    2,当前的WordPress主题支持webP图片格式;
    3,你需要能获取到webP格式的图片,如果没有,需要用通过WordPress图片插件进行图片格式转换,但是目前三个插件都是套餐,而且很贵,所以格式转换也是比较麻烦的事情;

    所以目前来说,使用webP格式的图片,还有不小的困难,虽然webP格式的图片可以节省很多磁盘,这个确实可以大大的提升网站速度,但是目前来说,使用webP还是很麻烦的。

    一个很难过的事实是,现在使用各种搜索引擎搜索图片,webP格式的几乎没有,这个确实很尴尬。但是既然WordPress官方支持了webP格式的图片,那后续肯定会有新动作,如果WordPress官方能内置图片格式转换功能,那真的就无敌了。

    目前,实在想要使用webP格式的图片,只能先使用在线转换了。

  • 删除 WP-Rocket 插件隐藏在页面中的广告

    前言

    WP-Rocket 是一款非常好用的缓存生成和管理插件,能极大的提升网站访问速度。

    但是无论付费与否,它的开发者都会在你的网站中留下它的广告,感觉就像硬在你家塞了个人人都可以看到的广告,如下图:

    下面介绍如何删除它的方法。

     

    解决方法

    WP-Rocket 自 2.0 版本开始加入了 get_rocket_footprint() 方法以在页面源码末尾加入尾部足迹,就是上面那段话。可编辑以下路径中的文件进行删除:

    /wp-content/plugins/wp-rocket/inc/classes/Buffer/class-cache.php
    

    版本 3.9.x 大约位于 430 行左右,可以看到 get_rocket_footprint() 方法,大致如下:

    private function get_rocket_footprint( $time = '' ) {
    	$footprint = defined( 'WP_ROCKET_WHITE_LABEL_FOOTPRINT' ) ?
    					"\n" . '<!-- Cached for great performance' :
    					"\n" . '<!-- This website is like a Rocket, isn\'t it? Performance optimized by ' . WP_ROCKET_PLUGIN_NAME . '. Learn more: https://wp-rocket.me';
    	if ( ! empty( $time ) ) {
    		$footprint .= ' - Debug: cached@' . $time;
    	}
    	$footprint .= ' -->';
    	return $footprint;
    }
    

    只需将末尾的 return 注释掉,让它不返回任何值,即可。

    由于插件一般都处于不断更新的周期中,具体位置可能发生变化,这种情况可以把插件文件下载到本地,使用 Visual Studio Code 或其它编辑工具进行全局查找,搜索关键词“This Website”或“Performance optimized”等等,找到后注释或删除即可。

     

     

  • 如何在WordPress网站上使用webP图片

    如何在WordPress网站上使用webP图片

    从WordPress 5.8开始,WordPress程序开始支持webP图片格式。详情可以参考这篇文章:图文详解WordPress 5.8正式版主要功能 。

    只要你的网站使用的是WordPress 5.8的程序,不需要任何第三方插件,就可以上传webP格式的图片到媒体库即可。和jpg,png图片使用一样,直接插入到文章里即可。这里需要说明的是,上传的jpg,png等格式的图片并不会转换成webP格式的。

    如果从现在开始,你只想让你的WordPress展示webP格式的图片,可以通过插件来实现这个功能,这里需要注意一个问题,因为webP的市场份额还比较小,所以现在并不是所有的主流浏览器都支持webP格式的图片,但基本上主流的浏览器都已经支持了webP格式的图片:

    • Chrome (电脑版和移动版)
    • Firefox (电脑版和移动版)
    • Microsoft Edge(WordPress 5.8开始,不支持Edge 11及以下版本)
    • iOS and macOS Safari (macOS 11 Big Sur 及更高版本)
    • Opera (电脑版和移动版)

    虽然webP在图片体积上非常有优势,但是不得不说,webP要想成为和jpg,png一样的流行的图片格式,还有很长的路要走,因为现在基本上所有的相机,手机等默认的图片格式,都是jpg,这个是最大的问题,这样想用webP,只能先转换,否则只能继续使用jpg,png等格式的图片。

    总结来说,想要在WordPress网站上使用webP格式的图片,目前来说,有三个路径:

    1. 原生的格式就是webP,这样直接上传使用即可;
    2. jpg,png等格式的图片,通过在线图片工具转换成webP格式的,再上传,直接使用搜索引擎搜索即可,很多这种在线的工具网站;
    3. 使用WordPress插件把上传的图片转换成webP格式,插件当前有这么几个:ShortPixel  ; Imagify ;Optimole

     

  • 完整的WordPress缓存包含哪些方面

    完整的WordPress缓存包含哪些方面

    这是一个关于缓存的系列文章,之前写了第一篇文章:聊聊缓存 ,今天继续聊一下,一个WordPress网站,包含哪些缓存。

    1,服务器层面

    PHP版本最近几年更迭的非常快,进入php 7以后,PHP在运行效率上有了显著的提高,配合上opcache,使得PHP效率更高,所以在更高的PHP版本里,WordPress可以运行的更快。

    每次请求,除了运行PHP,还会向数据库发出查询请求,而这个查询会消耗大量的服务器资源,所以,更好的数据库版本,更好的服务器性能,加上数据库的缓存,使得请求能减少服务器资源的消耗,这也需要缓存的配合。

    前几年还是apache的天下,现在nginx已经是主流了,虽然apache也在奋勇前进,但是nginx被越来越多的应用,nginx也可以加上缓存。

    所有的缓存,都只有一个目的,尽量少的消耗服务器资源,使得服务器能更快的执行进程。

    2,网络层面

    不差钱的直接加大带宽,但是这里需要明确一点,选择多少M带宽合适,这个事情需要想明白的一点是:网站日常能占用带宽总量的80%,这样才是正确的,如果仅仅是为了一瞬间的大并发量而购买大量的带宽,这就没意义了。选择带宽的大小,应该是可以计算,通过优化以后得到一个大概的值,这样才是经济实惠。

    关于CDN也是,虽然国内数据中心的建设越来越完善,CDN流量包最近几年已经越来越便宜了。 CDN也是缓存的一种,但是要根据网站的类型设置好缓存过期的时间,否则cdn的功能就适得其反。

    3,WordPress插件

    这个是比较重要的,WordPress有一个悖论:生态强大,可以实现各种功能,但是实现各种功能却需要使用大量的插件和js代码以及第三方资源,这会让WordPress变得越来越臃肿。这样WordPress就会越来越慢。

    通过使用缓存插件,尽可能的让功能齐全的WordPress减少对服务器的请求,减少对服务器资源的消耗。关于服务器的状态,如果一直是空闲状态,要么是服务器买贵了,要么是业务没起来。

    还是要把大部分的服务器资源都利用起来,这样才是物尽其用,而不是一直处于空闲状态。

    缓存的优化,虽然是为了降低使用服务器的资源,但也是在资源紧张的情况下,如果很空闲,速度很快了,那就要考虑,是否降低服务器配置了。

    现在大部分情况是这样:服务器负载很低,但是网站访问速度却很慢,这种不算是极端情况,是普遍的情况,这种也需要缓存来处理。

    下一篇文章,会开始讲缓存插件。

     

  • 给 WordPress 后台菜单重新排序

    给 WordPress 后台菜单重新排序

    前言

    这是一个比较特殊的需求,某位客户定制的模板新增了大量的自定义菜单项,需要对主菜单进行重新排序以方便后续的内容管理和日常使用。我发现 WordPress 核心扩展出的原始管理菜单一看源码就让人忍不住要说一声“卧槽”,不明白 WP 团队为嘛要这么设计,做个人不好嘛。

    但是经过简单研究,我还是找到了一种简单的解决方法,这里抛砖引玉。

     

    自定义菜单排序

    以下代码可以作为一个插件使用,也可以添加到主题的 Functions.php 中。

    // 管理菜单重新排序
      function wopus_menu_order($menu_ord) {
        if (!$menu_ord) return true;
        return array(
          'index.php', // 仪表盘
          'edit.php?post_type=custom_type_one', // 自定义文章类型1
          'edit.php?post_type=custom_type_two', // 自定义文章类型2
          'edit.php?post_type=custom_type_three', // 自定义文章类型3,其它以此类推
          'separator1', // 第一分隔符
          'edit.php?post_type=page', // 页面
          'edit.php', // 文章
          'upload.php', // 媒体
          'link-manager.php', // 链接
          'edit-comments.php', // 评论
          'separator2', // 第二分隔符
          'themes.php', // 外观
          'plugins.php', // 插件
          'users.php', // 用户
          'tools.php', // 工具
          'options-general.php', // 设置
          'separator-last', // 第三分隔符
        );
      }
      add_filter('wopus_menu_order', 'wopus_menu_order'); // 激活自定义排序
      add_filter('menu_order', 'wopus_menu_order');
    

    如果是作为单独的插件使用,不要忘记插件钩子:

    register_activation_hook(__FILE__, 'wopus_menu_order');
    

     

    尾声

    我不想把自己绕进 Menu_Order() 这个巨坑中,于是使用了这个简单的解决方法。原版管理菜单中的项目,如果没有写在方法里,不会被删除或隐藏,会被附到管理菜单的底部。

    参考:http://codex.wordpress.org/Plugin_API/Filter_Reference/menu_order

     

     

  • aioseo插件的常见问题

    aioseo插件的常见问题

    一,哪些人应该使用aioseo?

    aioseo插件是一款功能强大的WordPress搜索引擎插件,可以为企业网站,个人网站,电子商务网站,设计师,开发者摄影师等所有类型的网站提供搜索引擎优化服务,建立网站还是希望能获得更好的价值,而aioseo插件可以协助站长提升网站流量,给网站带来更好的价值。

    二,使用aioseo插件需要什么条件?

    aioseo是一款基于WordPress程序的插件,所以只要有完全权限的WordPress网站就可以使用aioseo插件,这里的完全权限是插件和主题的安装,删除,网站服务器的所有权等权限。

    三,使用aioseo是否会让网站速度变慢?

    aioseo插件是一款功能强大且性能出色的插件,使用这款插件并不会拖慢网站的访问速度。

    四,aioseo是否有多语言版本?

    aioseo插件因为有庞大的用户使用量,所以全球需求非常大,当前aioseo插件已经被翻译成54种语言。当然也已经支持中文。

    五,使用aioseo插件是否需要编程基础?

    aioseo强大的功能大,即使没有任何编程基础,也可以轻松上手使用aioseo插件,只是插件的设置点有点多,需要多花点时间,仅此而已。