标签: wordpress

  • 大绵羊外链跳转插件-WordPress免费的外链转内链跳转插件

    大绵羊外链跳转插件-WordPress免费的外链转内链跳转插件

    大绵羊外链跳转插件是专为WordPress站点设计的外部链接管理工具。它能够智能拦截文章中的外部链接,并在跳转前提醒用户即将离开本站,提升安全意识的同时,优化浏览体验。用户可自由选择跳转提醒的样式,并通过白名单设置,确保信任的外部链接不受影响。

    Github: https://github.com/dmmyblog/dmy-link

    插件功能

    1. 自动拦截外部链接

    插件会自动检查并拦截文章中的外部链接,所有非本站链接都会跳转到提示页面,提醒用户即将跳转到外部网站。

    大绵羊外链跳转插件-WordPress免费的外链转内链跳转插件

    2. 白名单功能

    用户可以在插件设置中添加白名单链接,指定哪些外部链接不受拦截,直接访问。白名单链接无需加 http:// 或 https://,每行一个即可。

    大绵羊外链跳转插件-WordPress免费的外链转内链跳转插件

    3. 多种提示页面样式

    插件提供五种风格的提示页面,用户可以根据需求选择合适的样式:

    • 默认样式
    • 哔哩哔哩风格
    • 腾讯风格
    • CSDN风格
    • 知乎风格
    大绵羊外链跳转插件-WordPress免费的外链转内链跳转插件

    插件可以提供一个简单的界面,允许站长直接上传自定义的 Logo 图片,而无需修改代码。界面可以在插件的设置页面中,提供一个上传按钮,让站长上传图片文件。

    大绵羊外链跳转插件-WordPress免费的外链转内链跳转插件

    5. 外部链接重定向

    点击外部链接时,插件会首先跳转到提示页面,再通过重定向跳转到目标链接。

    6. 易用的后台设置界面

    插件基于 Codestar Framework 提供了直观、易用的后台设置界面,用户可以轻松进行各项配置。

    使用方法

    1. 安装并激活插件。
    2. 进入 WordPress 后台,点击菜单中的“外链跳转插件”。
    3. 在插件设置中,您可以:
      • 配置外部链接白名单。
      • 选择提示页面样式。
      • 上传自定义 Logo。
    4. 保存设置后,插件将自动生效,所有文章中的外部链接都会进行拦截和跳转提示。

    插件设置

    • 白名单设置:用户可以输入信任的外部链接,插件将跳过这些链接,不进行跳转提示。
    • 样式设置:提供五种不同的页面样式,用户可以选择适合自己网站的样式。
    • Logo 设置:可以上传一个 Logo 图片,替换默认的 Logo,提升网站个性化。

    插件免责声明

    • 本插件是开源免费使用的,但禁止修改插件的版权信息或将插件用于商业目的。插件作者保留所有版权。

    开源链接

    dmmyblog/dmy-link

    (如果可以的话可以点个Starred嘛((()

    外链跳转插件(开源)

    • 大小: 623.9 K
    • 格式: zip,php,css

  • 保姆级教程 – WordPress网站用户同步,共用一个用户数据表,实现用户在任何一站注册即可登录在任何一个站

    保姆级教程 – WordPress网站用户同步,共用一个用户数据表,实现用户在任何一站注册即可登录在任何一个站

    首先我要讲一下关于这件事的经过,在很久很久以前(两年前)我就在想:“🤔我们的网站即然都是WordPress,下面有这么多用户都在用着我们的一些产品,但是每到一个站点都要重新注册一个账号,这很痛苦,说实话这真的不方便”于是就开启了长达两年的各种想解决方案。说真的我没什么技术,都是自学的,单纯爱好写代码或搭建一些很有成就感的东西,今年8月份也是把统一账号的系统做完了,也是自我感觉很成功的一种感觉,我确实很喜欢被代码折磨;所以你们可能也知道…我把WP改成了网盘,改成了多用户可视化建站,改成了OAuth服务器,改成了二级域名解析管理平台,改成了云服务器控制平台。说起来很离谱,我自己都感觉离谱。大家可以期待一下,以后代码完善好都会免费公布出来。

    项目的启动

    前两天有个小兄弟联系我,说:“哥,你那个登录系统怎么卖的,想购买”后来我答应免费给他用,但后来听了他的需求,感觉并不适用我这套系统,我这套系统是基于OAuth的第三方登录(类似这玩意,我也说不清楚)。他的需求是在他的任意网站的登录表单都可以用一个账号登录(这个我还是说不明白,但是可以参考网易公司的网站或产品,都是用网易邮箱账号登录的,而不是使用XXX授权登录。)于是我就想到了一种可以适用他的这种方案。

    解决方案

    目前想到的办法是多个WordPress共用一个数据库,适用表前缀作为区分;也就是安装WordPress时看到的“wp_”这个。本次介绍适用三个站做演示,各位大佬也可以使用演示站的数据进行登录和测试。最开始其实打算使用WordPress的网络模式,但是有很多地方不足,很多插件或者主题有冲突,在使用时有的地方还很别手,所以就放弃了。如果大家有什么新的解决办法也可以一起讨论出来。毕竟开源才是贡献,我也很希望帮到大家,因为我一开始就是没有什么人帮我,我真的很感谢张源源当初能在我什么都不懂的时候一点一点带着我写代码,真的非常感谢你们真的感谢!。

    搭建开始

    首先我再这里以一个数据库名为“ABCDEFG”及内部包含三个WordPress的数据,表单分别为主数据库表前缀“A_”、分站“B_”、分站“C_”。

    用户数据我这里存在了A_内。当然你们可以随便弄这个前缀,只要你的站不一样就行。如果你的站没有建在一个数据库内,那么很抱歉,请自行查找修改WordPress数据库表前缀的办法,修改后全部导出,并统一导入到一个数据库内,在您做些时,一定一定要提前做好备份!,全站备份,数据库也记得备份!

    用户数据站:a1.fohuis.com 分站:b2.fohuis.com 分站:c3.fohuis.com

    目前我创建了用户为“user2@u.cn”密码为“user2pw”各位可以使用这个账号和密码在这三个网站登陆进行测试看看是不是你们需要的效果(网站不一定会在啥时候关闭,反正文章发布后的三个月肯定不会关)。

    首先将WordPress安装至一个数据库内,现在您应该有三个表前缀,请您记住这三个表前缀,什么?刚把网站创建完就把表前缀给忘了???好吧,那你的记性和我差不多。如果忘记了请在你网站的目录找到个文件名为“wp-config.php”的文件,那么好请点进去(我这里用宝塔演示)

    就是个这个样子的代码,在差不多68行左右,你就能看到,那么这个就是你网站的数据库标前缀,其他网站的也是这样查看,各位大佬应该都知道的。

    那么好,到这步你应该已经安装了两个或三个或更多,这个时候只需要你做下一步工作;假如说你有三个网站,你把其中的A_表前缀的网站作为存用户数据的网站,那么这个时候需要你把其他的两个网站甚至更多或者你只建了两个网站,反正就是除了这个网站之外的网站,都需要打开“wp-config.php”这个文件并且需要给他加上一些奇奇妙妙的代码(bushi)正常的代码。

    define('CUSTOM_USER_TABLE', 'A_users');
    define('CUSTOM_USER_META_TABLE', 'A_usermeta');

    这两行代码是将网站的用户数据使用指定表。那么这两行加载哪呢,加载数据库名和密码那个位置上面就是可以的了,什么?你不会加?请复制我的代码至

    看到了吗,加载这个位置就可以了,我图片里第20和21行,但是你那里有没有加别的东西我就不知道了,反正就是你的数据库配置代码上方即可。此时你的两个站已经链接完了,可以去分站登陆你主站的管理员账号(诶☝️🤓这个时候你会发现,可以登陆了!但是登陆后台显示没得权限)没得权限怎么办呢,我来教你,首先把网站删了,数据库删了,服务器删了(bushi)

    这个时候请您点开您的数据库列表(不会写代码的请安装phpmyadmin)我这里也用这个演示,请先打开宝塔数据库列表,找到你装的数据库,然后点管理

    进入后首先找到你的主站数据表,我这里是A_为存用户数据的A_usermeta的表单

    点开A_usermeta的表单后你就能看到下面图片的内容,然后点击前面的复制按钮,系统会自动给你跳转到个页面,在这个页面你会看到一大堆表格,如果看不懂的话就会说:“啊这机霸都是啥啊,完全看不懂啊,我该干啥啊,调啥啊”诶!我不告诉你!(装比已起飞)点开后您仅需要按照图二的方式修改即可,将您想给权限的站点的表前缀修改一下即可,如图如A是用户数据,授权给B那么就要这样改。如果你有多个站请按照此方式继续复制并修改即可。如果你有100个站,那么请删除跑路(那就慢慢加吧),这老板纯纯想要要累死人。如果你是老板的话…请当我没说。

    如果你已经弄完了,那么你再使用管理员的账号进行登录你就会发现很神奇的事情,登陆成功了!那么你以后管理这些站点时您只需使用一个账号即可管理所有的站点。那么你还会问:“我这网站是多用户的网站啊,要不然我弄这个干嘛,总不可能注册一个我去添加一次吧”有些主题不用管,一样可以用,但是为了不会出现这种问题可以按照下面的步骤去设置(只设置在你存用户的主站内)找到你主题的functions.php文件并打开找到个合适的位置(这个我没法演示了,每个主题都不一样,基本上不报错就没问题)

    add_action( 'user_register', 'dup_capabilities' );
    add_action('profile_update', 'dup_capabilities');
    function dup_capabilities( $user_id ){
        //下面这个位置A_,B_,C_改成你所有网站的数据表前缀
        $prefixs = array('A_','B_','C_');
        global $table_prefix;
        $cap_val = get_user_meta( $user_id, $table_prefix.'capabilities',true);
        if( !empty( $cap_val ) ) {
            foreach( $prefixs as $prefix ){
                if( $prefix != $table_prefix )
                    update_user_meta( $user_id, $prefix.'capabilities', $cap_val );
            }
        }
    }

    添加完每次用户注册后都会自动添加每个网站的权限,用户就可以每个站都能登陆了,如果不确定可以在后台添加一个用户,看看其他站能不能登录到后台。

    尾声废话

    到这里全部搭建过程就已经结束了,有一些代码借鉴了一些别人的东西,但是他的链接总是出问题(严重问题,参杂color那种)所以我这里就不加链接了,但是很感谢你“黄聪”。本文章纯原创,可能话有点多,无用的语序有点多,而且参杂着一种乱七八糟的方言输出,看不懂可以评论,我来改一改。本人没什么文学底蕴,只能用白话文来讲了🤣可能还会出现错别字(我最爱犯的错误)请别在意!

    这个站是我最成功的一个平台,也稳定运营了3年,最开始用的是另一个域名,2023年8月换的这个域名目前平台也算是有一部分的活跃用户,也有人在默默的支持我们,网站内的教程类文章(原创)都没有付费的而且基本都和WordPress有关系,B2和Zibll的美化后面也会越来越多。感谢大家的支持!!!

    本文编辑编写:Xxiao王同学的基本信息 – DevSkyr

    关于DJOT:联合运营 – DevSkyr

    如果你也热爱写代码,并且想让自己的代码帮到更多人,您可以加入我们!我们一起创作这一切!

    加入我们:https://www.rutno.com/contact

  • 几个觉得不错的画廊插件分享,适合产品展示/多种不同排列组合

    几个觉得不错的画廊插件分享,适合产品展示/多种不同排列组合

    最近开发另一个网站,在实现某些功能的时候,翻了不少插件库,实际也使用了不少插件。在插件的选择上,我一贯的选择是只选则最能符合需求的最精简插件。

    这里记录下一些我觉得不错的插件。

    这是一款图库画廊插件,其使用自定义文章类型,然后通过短代码来调用画廊。

    其样式多样,可以适用各种使用场景。

    这款插件是一款产品展示插件,可以通过画廊来展示产品而无需woocommerce

    三、KPIS CTA Buttons

    这是一款侧边栏悬浮联系框插件,非常简单,也没有什么设置项。但其在手机端的显示效果不错,有底部粘性菜单。应该有很多CSS JS 特效也能实现一样的,图省事,这个可以。

    这应该是所有画廊插件中,样式最多的一个插件,同时功能也多,支持从各大云存储网盘读取图片(youtube, vimeo,google 盘),但是这个插件是使用短代码引入画廊,对我来说不是特别方便,我个人不喜欢这种引入方式,略显麻烦。但这不妨碍我将其收藏下,尽管目前已有一年没有更新了。

  • 兼容缤纷云云存储的WordPress上传插件 – Media Cloud配置介绍

    兼容缤纷云云存储的WordPress上传插件 – Media Cloud配置介绍

    一、前言

    逛论坛时,听到有人提及缤纷云有对每个实名认证的新用户赠送免费的云存储、流量以及请求数!这对纯博客的我来说挺香的,查看了一番介绍后,的确有看到:

    很棒,对比UPYUN的10GB,很良心了。

    二、使用

    新注册用户,会发放2个充值金额就赠送的优惠券,我这小博客没这么大的消耗量,指着免费过日子的,只能浪费了。

    缤纷云网站打开速度超快,甚至到每个选项都响应非常迅速,着实有点惊艳我了。

    但在实际使用上,就略微不方便了。检查了整个文档资料,发现,其并没有对终端用户有很好的指引,所以,普通消费者应该只是顺带为之,其目标是为企业用户服务。个人这三瓜两枣的,暂时还不是最主要的考虑因素吧。

    这些个文档,我是没有精力去看然后集成到各个项目的。

    因此只能找下现成的插件,本鱼因为使用wordpress,所以首先找下wordpress相关的S3插件。

    界定几个值:

    • 需要设置Endpoint 【支持这个的插件,我就只找到(一)(五)】
    • 需要设置cn-east-1
    • 需要设置access key
    • 需要设置access secret

    首先说结果【这几乎是唯一一款能够支持缤纷云的插件】,如果你有更精简更好用的插件,请一定不要吝啬!务必告知本鱼!

    (一)Media Cloud for Bunny CDN, Amazon S3, Cloudflare R2, Google Cloud Storage, DigitalOcean and more

    优点,仅针对缤纷云而言,能够完成缤纷云存储和wordpress的集成!

    缺点:这个插件真的太大了,来张图简单看下吧:

    (二)S3-Uploads

    太强太暴力,兼容性是一点都不考虑。类似于强制接管wp-upload目录来实现S3的云存储上传。同时,也不支持直接对endpoint等选项的配置,文档复杂,报错很多,反正我是没有配置缤纷云的上传成功。

    (三)WP Offload Media Lite for Amazon S3, DigitalOcean Spaces, and Google Cloud Storage

    亚马逊官方有教程使用的一款插件,我没有实际安装配置过,但是从配置截图上,发现也无法配置endpoint,故弃。

    (四)WordPress Amazon S3 Plugin

    这是在所有插件中,我最看好的一款插件,但可惜的是,它也无法配置endpoint。检索了它的开发文件后,似乎不是我的能力能改的,如果你有能力,也有需求,推荐!【PS: 请务必发本鱼一份】

    (五)Upcasted S3 Offload – AWS S3, Digital Ocean Spaces, Backblaze, Minio and more

    这款插件对比(一)要精简不少,但存在报错输出,

    Warning: is_readable(): open_basedir restriction in effect. File(/home/www/.aws/config) is not within the allowed path(s): (/www/wwwroot/www.waoww.com/:/tmp/

    解决办法:需要关闭open_basedir(即:防跨站攻击),因为它的配置文件会写入Home/www目录,我使用了这么多的配件,鲜少有插件要这么写入的,担心安全问题,因此用AI看看具体是什么问题:

    就是配置文件写到系统目录去了?这好办,安排修复:

    替换这行代码,将配置文件写死在相对目录:

    public static function ini(
        $profile = null,
        $filename = 'config/config.ini' // 使用相对路径
    ) {
        $configFilePath = __DIR__ . '/' . $filename; // 拼接工作目录和相对路径
    
        return function () use ($profile, $configFilePath) {
            if (!is_readable($configFilePath)) {
                return self::reject("Cannot read configuration from $configFilePath");
            }
            $data = \Aws\parse_ini_file($configFilePath, true);
            if ($data === false) {
                return self::reject("Invalid config file: $configFilePath");
            }
            if (!isset($data[$profile])) {
                return self::reject("'$profile' not found in config file");
            }
            if (!isset($data[$profile][self::INI_MODE])) {
                return self::reject("Required defaults mode config values
                    not present in INI profile '{$profile}' ({$configFilePath})");
            }
            return Promise\Create::promiseFor(
                new Configuration(
                    $data[$profile][self::INI_MODE]
                )
            );
        };
    }
    

    再检查下还有没有报错,okay,搞定,上传正常。:

    毛线正常!图片上传都错乱了,而自定义域名功能要付费!

    遂,弃!

  • 汇总整理下本站所有使用的WordPress插件-精选WP博客插件推荐

    汇总整理下本站所有使用的WordPress插件-精选WP博客插件推荐

    网站到目前为止应该不会再有大的变动了,为了后续其他网站也有类似需求,故此,整理下本站在使用的所有插件。

    本站所有样式、页面、文章内容、侧边栏等等都是基于古登堡块。因此,轻松地:

    由于发现很多古登堡的块/样式插件使用时都会出现类似样式丢失的情况,而多次刷新后又恢复正常,反反复复,不厌其烦,因此,本鱼直接抛弃了所有的古登堡区块插件,转而使用wordpress内置区块编辑器完成所有的一切样式。但部分不影响主功能的古登堡插件保留了下来。

    插件下载地址:

    后台设置图:

    二、Bookmark Card

    这是一款将外链嵌入文章变成卡片式/列表样式风格的美化插件,兼容Anylink插件,本站没有使用这个插件,此处仅为收藏。该插件也有2年没有更新了。

    样图:

    三、Cachify

    用于做下网站基础的缓存,连接服务器的memcached使用。可以方便的完成缓存清除!

    后台配置图:

    设置区域,需要在nginx conf中添加的部分:

    以下是本站的nginx配置代码,含伪静态:

    location /
    {
    	 try_files $uri $uri/ /index.php?$args;
    	 error_page 404 405 = @nocache;
     
        if ( $query_string ) {
            return 405;
        }
        if ( $request_method = POST ) {
            return 405;
        }
        if ( $request_uri ~ "/wp-" ) {
            return 405;
        }
        if ( $http_cookie ~ (wp-postpass|wordpress_logged_in|comment_author)_ ) {
            return 405;
        }
    
        default_type text/html;
        add_header X-Powered-By Cachify;
        set $memcached_key $host$uri;
        memcached_pass localhost:11211;
    }
    
    rewrite /wp-admin$ $scheme://$host$uri/ permanent;
    ## GZIP
    gzip_static on;
    
    
    location @nocache {
        try_files $uri $uri/ /index.php?$args;
    }
    

    四、Code Snippets

    由于本站使用的是wordpress 默认的2024主题,因此没有地方可以用来放置部分php代码片段,因此,该插件能帮不少忙,同时能够清晰的知道那行代码是用来做什么的【手动备注】,删除修改也方便,

    免费版后台界面一览:

    五、IZ Block Editor Tooltips

    这个插件是找了好久才找到的一个插件,能够做到,快速添加tooltips,鼠标悬浮这里,你就可以看到什么叫tooltips了。强推!尤其是那些惜字如金的,有时候真的难以理解某些缩写/代号是什么意思,那使用这个插件即可,几乎没有占用。而且后台添加操作简直不要太丝滑!

    这就是所有的设置项:

    六、Prismatic

    这是一个代码高亮插件,内置了3种代码高亮方案【prissm.js/ highlight.js/ Plain Flavor】,对本鱼来说,其使用比很多代码高亮插件要简单,因此毫不犹豫地就上了。代码高亮对本站来说太有必要,还有代码复制功能,自己去集成这些总没有直接使用插件方便,快速。

    后台设置:

    七、Simply Static

    这个插件是为本站后续做纯静态化做准备,有试过 WP2STATIC ,出现了安装报错,可能是PHP版本问题,而这个插件还可以,可以生成全站链接的静态压缩包然后可以下载下来。方便地后续转移至任何一个能够托管纯静态资源的地方,如: GITEE, Serverless, Github, Cloudflare等等有太多的选择,而且几乎没有费用!

    八、TinyPNG – JPEG, PNG & WebP image compression

    一款图片压缩插件,后台简洁使用方便,压缩效果好。使用邮箱注册即可!如果有域名邮箱的话,可以注册多个,因为免费版限制每月500张图片,对于个人博客应该是足够了。

    九、USS Upyun

    wordpress图片上传UPYUN插件,搜一圈,upyun(及又拍云)可能太小众了?仅有2款插件:

    这款插件可以说是 bookmark card 插件的升级版【功能意思,非同一开发者,之间也没有关系】,做了许多自定义项。主要有:

    • 后台可设置自定义样式模板【不是特别好用以及方便设置】
    • 可点击选择下载获取到的图片/上传自定义图片作为目标网站图片
    • 可编辑网站名称/标题
    • 兼容古登堡编辑器
    • 可以放自己站的链接/站外的链接

    一些个图片:

    后台设置:

    十一、Wenprise Pinyin Slug

    自动转换 WordPress 中的中文文章别名、分类项目别名、图片文件名称为汉语拼音。

    【主要为了防止图片链接的中文编码乱码问题】

    十二、WP Sitemap Page

    通过短代码来输出网站地图,即,短代码输出站点地图。本鱼主要拿来做网站的搜索用,为后续的纯静态化做准备。放弃使用该插件了, 因为短代码有冲突,古登堡编辑器中存在与其他插件不兼容的情况。

    目前改为使用另一款插件:

    输出界面选项够用,html版本样式也不错,可以用来做后续的静态化搜索。

    关于Html的展示效果,你可以点击这里查看。

    十三、Wenprise Pinyin Slug

    一款能将URL中的中文字符转拼音的插件。旨在解决:很多图片上传时命名是用标题命名的,不使用转换直接上传的话,图片的文件名将是中文的,然后,图片链接就会是中文转编码之后的,很长而且可读性差不利于SEO,故此使用这类转换插件就可以解决这个问题。

    设置页面图:

    十四、WPOPT

    一款由果壳剥壳站长开发的wordpress优化插件,功能实用实测能有不错的优化效果,应该说,该插件并不改变站点结构,只是优化掉原wordpress中不适应中国地区使用习惯的部分选项,

    插件作者自述:

    WPOPT插件,是由本站开发的一款WordPress优化插件,能对WordPress底层功能进行优化,支持功能开关,系统加速等功能。

    目前有几十种开关可以供使用,同时,每个功能都有开关说明。将永久免费提供给广大WordPress用户使用。

    2.0版本全新发布,采用vite打包,界面采用Vue3+element-plus制作。无论是外观,还是框架功能,都是空前的强大。

    十五、简易目录(EOC(easy table of contents))

    一款精简的wordpress文章目录插件。具体效果你可以看本文章右侧边栏的文章目录区域。

  • WordPress转纯静态的简单易于实现的评论系统解决方案-Waline

    WordPress转纯静态的简单易于实现的评论系统解决方案-Waline

    之前偶然间看到有群友使用wordpress转纯静态做企业官网,并在更新时上传更新后的静态html文件至各静态服务处。觉得速度很快,而且可以完全不用担心安全问题,也能随时将静态文件丢到任意托管平台。

    遂仔细研究了一番,制作了本站的这个主题,为完全静态化做准备【ps:等服务器到期后,就转入无服务器部署,纯静态方案!】。

    而我并不希望做一个完全静态的博客,希望能跟更多网友交流,不管是了解最新趋势,还是单纯的讨论些问题,因此还要解决评论这个问题。

    搜索一番,有推荐twikoo, artalk的。但仔细翻阅后,发现与我的需求不太符:

    1. 能通过简单的js,css引入
    2. 简洁美观
    3. 数据可控
    4. 最好有用户管理
    5. 简单部署,最好不用部署

    最后找到了Waline这个项目,【配置丰富,部署简单,引入方便!】

    遂将其引入,作为本站评论的解决方案,具体可以看本站文章底部的评论框。

    以下是一些本站的配置:

    一、waline服务端的部署:

    基本参照waline官方教程一步步往下,非常简单直观。如下:

    (一)首先完成leancloud国际版的注册

    注册完成后,创建个应用,以供waline做数据库存储。

    然后点击设置,在应用凭证处查看部署waline所需的全部信息。

    【ps: 绑定自定义域名过程极慢,除了前期的绑定阶段,还有后期的证书部署阶段,建议至少留1天时间,和上传自己域名的SSL证书】

    (二)开始项目主体服务端在vercel上的部署

    请参考官方教程,然后填写相对应的环境变量,本站的一些变量参数如下:

    waline官方有对基本环境变量的解释,自行查阅。=.=上述参数不一定全有用,有些并没有实际用上。

    二、waline客户端的部署

    waline客户端引入非常简单,只需要一个绑定div和引入js即可,官方版本如下:

    <head>
      <!-- ... -->
      <link
        rel="stylesheet"
        href="https://unpkg.com/@waline/client@v3/dist/waline.css"
      />
      <!-- ... -->
    </head>
    <body>
      <!-- ... -->
      <div id="waline"></div>
      <script type="module">
        import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
    
        init({
          el: '#waline',
          serverURL: 'https://your-domain.vercel.app',
        });
      </script>
    </body>

    不建议用第三方资源库了,尤其哪些有投毒前科的,建议自托管,本身没多大的文件。

    三、waline的前端配置

    <div id="waline"></div>
      <script type="module">
        import { init } from '/waline/2.15.8/waline.js';
    
        init({
          imageUploader: false,
          el: '#waline',
          serverURL: 'https://comments.waoww.com',
        });
      </script>

    四、还有更多的一些

    waline的配套部署应该还有很多,但配置到现在这样,已经完全能够满足本站的需求了,因此后续将看情况继续添加和优化,并不断在本文继续补充。如果你有什么推荐的配置,欢迎留言评论!

    【更新补充】

    移除waline第三方静态资源库托管,转为自托管。(最近这些第三方静态库屡屡爆出投毒,除了大厂的,其他的真不敢用了,有些投毒藏得太深。)

    五、接入waline社交登陆系统

    Waline已经集成了社交登录,但是并没有默认开启,且文档资料也比较凌乱,仅在高级配置项有指向链接:

    对此本站理解不深,但最后运行起来了。就是Deploy, 绑定域名,然后添加各自平台登录的环境变量appket secret 之类。

  • WordPress纯代码实现自定义弹窗|支持多弹窗并存,简码,兼容古登堡

    WordPress纯代码实现自定义弹窗|支持多弹窗并存,简码,兼容古登堡

    如题,该代码来源于sola博客,原文链接如下:

    本站根据自己的实际情况分别相关文件放置在了:

    1. 古登堡编辑器全局样式内/任意供插入js/css代码的部分
    2. php部分使用的code snippes插件进行插入
    3. 代码输出部分,使用自定义html添加的按钮

    一些使用心得:

    (1)该弹窗可以多个同时启用进行

    不同地方使用不同弹窗,只需要修改弹窗的序号即可,同时,可以对弹窗的宽度样式进行自定义的调整,使其适应不同使用场景。非常好用,对本站这种不喜欢装那些繁杂的弹窗插件的人来说,很满足了。

    (2)弹窗简码的置入

    使用古登堡编辑器时,可以中间放很多内容类似,可以这样放入,不用像原文的演示那样全部放在一个简码后:

    (3)弹窗的触发

    以下这个触发代码,似乎只能使用按钮类型进行触发。因为如果时古登堡区块的话,似乎无法指定 data-modal-target=”#popup-1″ 元素。由于该项对本站来说没有影响,不想再去修改源代码了以适应了,如果有修改好,能够通过其他类型点击进行触发的,请务必发我一份!

    <button class="sola-modal-trigger" data-modal-target="#popup-1">打开</button>

    以下随附了本站使用的代码,供留存记录。

    Js代码放在页脚,css代码随意,我是放在古登堡编辑器样式内部,php代码可以放在function.php内,我是使用code snippes插件来放置的。

    <script type="text/javascript">
          jQuery(function($){
            const $overlay = $('<div class="sola-modal-overlay hidden">');
            const closeBtn = '<a class="sola-modal-close">×</a>';
            
            $overlay.appendTo('body');
            $('body').on('click','.sola-modal-trigger',openModal);
            $('body').on('click', '.sola-modal-close,sola-modal-overlay', closeModal);
            $('body').on('click', '.sola-modal-overlay', closeAllModals);
            
            function openModal(){
              const target = $(this).data('modal-target');
        
              if( target && $(target).length ){
                const $target = $(target);
        
                // Add close btn
                if( ! $target.find('sola-modal-close').length ){
                  $(closeBtn).appendTo($target);
                }
                
                // Set custom width
                const modalCustomWidth = $target.data('modal-width');
                if( modalCustomWidth ){
                  $target.css('width',modalCustomWidth);
                }
                
                // Open
                $target.removeClass('hidden');
                $overlay.removeClass('hidden');
              }   
            }
            
            function closeModal(){
        
              if( $('.sola-modal:not(.hidden)').length == 1 ){
                $overlay.addClass('hidden');
              }
        
              $(this).closest('.sola-modal').addClass('hidden');   
              
            }
            
            function closeAllModals(){
              $('.sola-modal').addClass('hidden');
              $overlay.addClass('hidden');
            }
          });
        </script>
    /*添加一个弹窗*/
    .sola-modal-close {
        position: absolute;
        top: 1.2rem;
        right: 2rem;
        font-size: 2rem;
        color: #333;
        cursor: pointer;
        border: none;
        background: none;
        text-decoration: none !important;
      }
      .hidden {
        display: none;
      }
      .sola-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
        max-width:100%;
        max-height:100vh;
        background-color: white;
        padding: 3rem;
        border-radius: 5px;
        box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
        z-index: 99999;
        overflow-y:auto;
      }
    
      .sola-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(3px);
        z-index: 9999;
      }
    //添加弹窗主体
    add_shortcode( 'sola-popup', 'sola_popup_handler');
    function sola_popup_handler( $atts, $content ){
      $atts = shortcode_atts( array(
        'width' => '',
        'id' => '',
      ), $atts );
      extract($atts);
      ob_start();?>
    
      <div class="sola-modal hidden" data-modal-width="<?php echo $width;?>" id="<?php echo $id;?>">
        <a class="sola-modal-close">×</a>
        <?php echo apply_filters('the_content',$content);?>
      </div>
      <?php
      return ob_get_clean();
    }