分类
WordPress建站笔记

WordPress 🏳‍🌈无限滚动Infinite scroll折腾记录

WP的滚动加载文章插件有很多,支持最好是jetpack里的滚动设置,但是安装这个插件会调用一些wp.com的资源,会降低网站速度,所以我还是放弃这个安装jetpack了。

我这里用的是 Catch Infinite Scroll,我的主题是官方的twentytwenty 2020主题。本来我好想用2021主题的,但对比了一下,我还是更喜欢2020的一些细节局部,干脆就用2020算了

默认安装好这个插件就直接实现滚动加载了,我猜测是这个插件会识别当前主题自动设置选择器。但我用的是我自己的子主题,所以要自己设置一下选择器

  • Navigation Selector是分页器的选择器 nav.navigation
  • Next Selector 是下一页的链接选择器,a 元素 nav.navigation .nav-links a.next
  • Content Selector 不填。填了无法实现加载,我也不知道怎么回事
  • Item Selector 是单个文章的选择器 article.status-publish

填好之后这个插件就会把原来的分页器换成 read more 的按钮

但是我又发现一个问题,用2020主题加载的话,文章之间的 hr 分隔栏是正常显示的。但是子主题就不会显示 hr 元素

所以我在子主题里把hr元素放到 article 里了

while (have_posts()) {
  $i++;

  the_post();

  get_template_part("template-parts/content", get_post_type());
}
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

<?php if(is_archive()||is_home()) : ?>
    <hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />
<?php endif; ?>
...

接下来设置一下加载按钮的样式,默认就是个 read more 链接,我把它改成2020主题的按钮样式

#infinite-handle span button,
#infinite-handle span button:focus,
#infinite-handle span button:hover {
    background: #cd2653;
    border: none;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.0333em;
    line-height: 1.25;
    margin: 0;
    opacity: 1;
    padding: 18px 24px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.15s linear;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
}

加到子主题的style.css文件或者wp自定义主题里都行。

另外还要设置一下第一篇文章上面不需要分隔栏


#site-content article.status-publish:first-child hr {
	display:none;
}

.archive-header + article hr {
	display:none;
}

好了。到此完成,不用jetpack完美实现无限加载

分类
WordPress建站笔记

WordPress随机获取文章里的一张图片

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches);
    shuffle($matches[1]);
    $first_img = $matches[1][0];

    if(empty($first_img)) {
        $first_img = 'http://www.ruanyifeng.com/images_pub/pub_' . rand(1, 300) . '.jpg';
    }
    return $first_img;

}
分类
WordPress建站笔记

WordPress主题制作之相关文章代码

查找相同分类,随机输出文章

<?php
$categories = get_the_category($post->ID);
if ($categories) {
    $category_ids = array();

    foreach ($categories as $individual_category) {
        $category_ids[] = $individual_category->term_id;
    }

    $args = array(
        'category__in' => $category_ids,
        'post__not_in' => array($post->ID),
        'ignore_sticky_posts' => 1,
        'showposts' => 6,
        'orderby' => 'rand',
    );

    $my_query = new wp_query($args);
    if ($my_query->have_posts()) {
        while ($my_query->have_posts()) {
            $my_query->the_post();
            ?>
            <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
            <?php
        }

    }
    wp_reset_postdata();
}
?>
分类
使用笔记

WordPress网站每天定时备份到百度网盘

我之前写过一个备份到百度网盘的办法,适用于Windows,是使用filegee这个软件加Windows自己的定时任务。现在我服务器切换到Linux来了,所以就找了个能在linux下运行的工具。就是它——houtianze/bypy: Python client for Baidu Yun (Personal Cloud Storage) 百度云/百度网盘Python客户端

这个工具用起来更加简单,且在任意平台都能使用,只要安装Python即可

怎么安装Python和pip就不解释了,然后直接用pip安装bypy

pip install bypy

安装好后,执行任意命令,验证账号,比如执行 bypy list ,然后打开生成的验证链接,看到验证码后复制到终端里即可

之后就可以执行上传等命令了

bypy upload 是上传

bypy mkdir 是创建目录

然后编写一个脚本,定时执行就行了

对了,在服务器内上传到百度盘的速度取决于你的服务器带宽,5MB的带宽每秒上传800kb左右,如果你是1、2MB的带宽并且网站很大的话,上传要很长时间的

#!/bin/bash

rm -rf /root/backuptemp

mkdir /root/backuptemp ## 创建临时目录
## tar打包网站根目录,并且分卷压缩
tar --warning=no-file-changed -zcf - /www/wwwroot/zuoridangnian.com |split -d -b 100m - /root/backuptemp/$(date +%Y-%m-%d).tar.gz. 
## 导出数据库
mysqldump -uroot -p123456 zrdn > /root/backuptemp/zrdn.sql
## 用当前日期创建一个目录
bypy mkdir $(date +%Y-%m-%d)
## 上传网站内容和数据库到这个目录
bypy upload /root/backuptemp $(date +%Y-%m-%d)
## 删除临时文件夹
rm -rf /root/backuptemp

然后在crontab中创建好定时任务,怎么使用crontab自行谷歌,或者像我一样图方便,直接在宝塔后台创建一个定时任务,然后将脚本复制进去就好了!非常方便

每日凌晨两点准时备份,免费享受百度网盘2TB容量,岂不美哉!

至于百度盘的下载速度,在客户端设置里打开下载提速,速度也不慢呀

不少人老吐槽百度、腾讯,依我看,它们也都是有一些不错的服务的,像百度网盘,全世界还找有第二个免费容量到2TB的网盘吗?没有了吧,国外dropbox、谷歌盘虽然快,但是容量却只有区区2GB、15GB。至于腾讯,腾讯云也算是国内最实惠的云服务商了吧,价格亲民,我能在国内用到5MB带宽的服务器也得感谢腾讯云了(* ̄︶ ̄)

分类
使用笔记

WordPress批量给以前没有特色图片的文章添加特色图片

这里用到的插件是【Quick Featured Images】——Quick Featured Images – WordPress plugin | WordPress.org

安装启用后,可以在左侧找到【特色图片】,打开后选择第一个

选择第一个是添加一个特色图片,选择2是设置多个特色图片然后从中随机设置特色图片

这里我选第一个,我随便到网上搜了张Debian的图片,想把它设置到所有有Debian标签的文章上

点击最下方的下一页

然后添加过滤器,设置仅为没有特色图片的文章添加特色图片,在下面选择按照标签过滤文章,然后进入【下一页】

选择好标签后点击预览过滤

然后下一页就列出了符合条件的文章

选择应用即可。

批量设置完成

分类
WordPress建站笔记 使用笔记

自定义wordpress主题

稍微修改了一下twenty fifteen主题

首先,不建议直接在主题文件上进行修改,因为wordpress的官方主题是偶尔会更新一下的,比如在wp更新到5.0版本之后,就在所有之前的主题上面增加了对古腾堡区块(block)的样式更新,如果你直接修改了主题文件,则不好直接更新主题?

分类
使用笔记

xampp 开启gzip压缩

首先编辑php.ini,修改zlib.output_compression 为On

然后编辑httpd.conf,取消注释以下两个模块

LoadModule deflate_module modules/mod_deflate.so
LoadModule filter_module modules/mod_filter.so

接下来在httpd.conf文件最下面加入:

SetOutputFilter DEFLATE 

# Set the path to the directory where you wish to apply the gzip compression
# Usually you would like to apply that to the entire htdocs folder, but you can change it
<Directory "C:/xampp/htdocs">  
    <IfModule mod_deflate.c>
        # Add any file type you want
        AddOutputFilterByType DEFLATE text/html
    </IfModule>
</Directory> 

C:/xampp/htdocs为你要开启gzip压缩的web目录,改为你自己的目录即可

开启之后,我的网站首页打开速度对比

加载内容和时间减少一半

分类
WordPress建站笔记

wordpress搭建企业官网流程

首先域名服务器准备好,国内买服务器,国外买vps或者主机

程序选用wordpress,主题选择一个用的人多的,可以到国外主题森林找销量高的,比如avada,astra,enfold等等,有条件的买正版,没条件的找破解版

企业网站一般要的页面有 主页,产品分类页,产品展示页,企业动态,行业资讯,联系方式页面,在线留言页面,和关于页面

1。主页直接新建页面设为主页,用页面构建器直接就能做,一般包括一个轮播,下面产品展示,然后企业动态文章,公司介绍,荣誉资质展示,案例展示

2。产品页用 Portfolio 做

3。公司动态等写文章就好了

4。联系页面可以加个百度地图

5。留言页面用contact form7加smtp插件做

完事!

分类
WordPress建站笔记

contact form 7设置方法

安装好contact form7,然后安装wp mail smtp,设置好qq邮箱,wordpress设置邮件服务器 – 昨日当年,最后编辑联系表单,把发件人改成qq邮箱

分类
WordPress建站笔记 技术相关

wordpress设置邮件服务器

这里用qq邮箱,方便,简单快捷,又不容易被屏蔽

首先安装一个邮箱插件,用的人最多的是WP Mail SMTP

这个插件支持 中文!

然后【发件人】填你的qq邮箱

【邮件程序】选择 其他SMTP

然后下面 【SMTP主机】 设置为 smtp.qq.com

【加密】 选 SSL 【SSL端口】默认 465

下面【自动TLS】【认证】都默认开启

【SMTP用户名】填的qq邮箱

【SMTP密码】 要到你的qq邮箱 【设置】【账户】下面找到【POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务】。开启【IMAP/SMTP服务】,这个时候应该要你验证手机,然后会给你一个独立的密码!填这个密码即可