wordpress设置又拍云CDN配置正确方法

[wm_kuang title="前言"] CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。[/wm_kuang]
[wm_tips]西瓜君前一段时间也更新过一篇如何开启CDN与https回源设置,大家可以结合我前面的教程来一块配置,下面我就纤细的配置一次,针对于新手。[/wm_tips]

准备步骤:


1:注册登陆购买域名的网站(如腾讯云/阿里云/华为云),用于域名解析。
2:登陆又拍云控制台(用于添加需要CDN网站)
3:SSL证书,用于https,如果不懂,我会到时候更新一篇如何配置SSL证书教程
4:登陆网站管理面板后台(用于查看回源目录路径)

操作步骤:

1:注册过后,打开又拍云控制台,点击CDN下方的立即使用

2:点击创建服务
(1)服务名称:自己随便填写,英文开头不要写汉字
(2)加速域名:添加自己的网站域名 不能加https
(3)应用场景:选择全球加速
(4)回源协议:HTTPS(尽量选择https 很少有人用http了)
(5)源站证书校验:开启
(6)线路配置:源站地址添加服务器公网ip、端口默认写443
(7)加速区域:选择全球加速

3:创建成功会分配给你CNAME解析地址,需要前往购买域名的域名解析处添加解析记录。复制分配的CNAME地址!

4:西瓜君的域名是阿里云购买的,所以前往阿里云控制台,进入域名解析,添加CNAME记录。

5.把blog的A记录类型改为CNAME,并将记录值的源站ip改为又拍云分配的CNAME记录值复制到记录值中点击保存即可。

6.:电脑打开cmd命令,ping你的网站域名,如果ping到的地址指向到的不是你原来的源站ip以及原域名,及算解析成功!

7.解析成功后回到又拍云控制台里前往设置CDN,点击刚才添加域名的配置

8.源站资源迁移比较适合图片多的网站,又拍云会缓存你设置缓存的目录的图片,当有网友查看相关图片,这个图片将会备缓存到又拍云中,下次用户再次访问该图片就会直接从又拍云获取,图片加载速度飙升!

9.路径填写前先先添加 云存储服务,用于存放缓存的文件

10.自行输入英文服务名称应用场景自行根据情况而定,我选择网页图片 全球加速选择自己账号为操作员权限,然后点击创建!

11.图片路径需要前往服务器管理面板查看

12.一般网站都有一个地方存放图片的目录,本人wordpress博客网站图片是在wp-content根目录的文件夹中,其它网站一般也有images文件夹自行查找。

地址需要加斜杠开头噢!,然后末尾加入 “*”号,代表所有的意思,缓存该目录所有文件!

13.添加完成后当有网友点击你的网站文章时,那篇文章的图片将会被缓存在云存储中,下次再访问那篇文章加载速度会变快很多,那是因为图片相当于复制了一份在又拍云 云存储中,网友访问的就是云存储的图片,这里也会记录存了多大的空间文了。

14.缓存控制自行根据下图开启相关功能。

15.缓存配置自行根据情况添加,可参考本人配置。

16.如果你用QQ和微信登录或者微博登录别开这两个插件

17.然后在设置https,自行上传ssl证书,把下面的配置都开启。

18.访问控制只需要开启CC防护以及IP限制即可。

18.成本控制推荐前两个可开启。

19.配置到这儿就结束了,然后回去刷新即可。

后面的图片处理和边缘规则自己研究下

[wm_notice]大家学会了吗?如果学会给西瓜君点个赞,感谢大家的支持[/wm_notice]

【wordpress教程】删除wlwmanifest链接与RSD链接和短链接标记

[wm_kuang title="摘要"]合理的优化一些不必要的加载内容,可以在一定程度上加快网站的响应以节省一些没必要的资源开销,所以打算长期更新关于WordPress优化的相关问题。[/wm_kuang]

[wm_blue]删除短链接标记[/wm_blue]
短链接标记也是存在每个页面上。包含有指向pageID文章的链接,你要使用的自定义URL这个就可以删除了。

add_filter('after_setup_theme', 'remove_redundant_shortlink');
function remove_redundant_shortlink() {
  // remove HTML meta tag
  // 
  remove_action('wp_head', 'wp_shortlink_wp_head', 10);
 
  // remove HTTP header
  // Link: <https://example.com/?p=25>; rel=shortlink
  remove_action( 'template_redirect', 'wp_shortlink_header', 11);
}

[wm_blue]删除RSD链接标记[/wm_blue]

<?php remove_action('wp_head', 'rsd_link'); ?>

[wm_blue]删除wlwmanifest链接[/wm_blue]
wlwmanifest链接是一个过时的工具了,用于直接发布到wordpress,可以直接删除。

remove_action('wp_head', 'wlwmanifest_link');

【WordPress教程】禁止纯英文和日文的评论


将一下代码复制到functions.php中即可。提示:只要是全局调用文件就可以啦

代码

// 屏蔽纯英文评论和纯日文
function refused_english_comments($incoming_comment) {
$pattern = '/[一-龥]/u';
// 禁止全英文评论
if(!preg_match($pattern, $incoming_comment['comment_content'])) {
wp_die( "您的评论中必须包含汉字!" );
}
$pattern = '/[あ-んア-ン]/u';
// 禁止日文评论
if(preg_match($pattern, $incoming_comment['comment_content'])) {
wp_die( "评论禁止包含日文!" );
}
return( $incoming_comment );
}
add_filter('preprocess_comment', 'refused_english_comments');

评论提交时,通过正则表达式匹配评论内容,如果评论是纯英文或者包含了日文,则跳转到提示页面。

【wordpress教程】萌萌哒404动态页面


今天西瓜君给大家分享一个萌萌哒404动态页面,下面看我的纤细教程

效果图

使用方法

1.前往下载地址下载文件
2.下载好后解压到自己在主题跟目录里然后创建个404.php页面,把以下代码复制粘贴进去即可

404代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>亲,你走失啦!</title>
        <style type="text/css" abt="234"></style>
        <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/style.css">
        <style type="text/css">
        object, embed {
            -webkit-animation-duration:.001s;
            -webkit-animation-name:playerInserted;
            -ms-animation-duration:.001s;
            -ms-animation-name:playerInserted;
            -o-animation-duration:.001s;
            -o-animation-name:playerInserted;
            animation-duration:.001s;
            animation-name:playerInserted;
        }
        @-webkit-keyframes playerInserted {
            from {
                opacity:0.99;
            }
            to {
                opacity:1;
            }
        }
        @-ms-keyframes playerInserted {
            from {
                opacity:0.99;
            }
            to {
                opacity:1;
            }
        }
        @-o-keyframes playerInserted {
            from {
                opacity:0.99;
            }
            to {
                opacity:1;
            }
        }
        @keyframes playerInserted {
            from {
                opacity:0.99;
            }
            to {
                opacity:1;
            }
        }
        </style>
    </head>
    <body>
        <div align="center">
            <img src="<?php bloginfo('template_url'); ?>/404/404.gif" border="0" height="">
            <br>找不到这个页面啦!是不是天然呆打错啦!
            <br>
            <br>
            <audio src="<?php bloginfo('template_url'); ?>/404/404.mp3" controls="controls"></audio>
            <br>
            <br>
            <div class="qq-qun" style="text-align:center;"><a class="button_green" href="<?php echo get_option('home'); ?>" target="_blank" rel="nofollow">返回首页</a></div>
            <br>&copy;2020 <?php echo get_option('name'); ?>独家博客-西瓜君</div>
        <div id="cli_dialog_div"></div>
    </body>
</html>

 

【wordpress教程】给主题增加显示来访次数和页面查询

今天在网上突然发现有这么一个小工具纯代码即可实现页面查询和访问次数,今天西瓜君就给大家分享出来,只要访客的cookies没有清理,这个功能会一直有效。

效果图

使用方法

进入WordPress后台以后,找到外观——小工具。

将文中西瓜君提供的代码粘贴到,增强文本当中,最后保存即可。

代码

<div style="text-align:center;"><script type="text/javascript""> if(localStorage.pagecount){localStorage.pagecount=Number(localStorage.pagecount)+1}else{localStorage.pagecount=1}document.write("你第"+localStorage.pagecount+"次来独家博客"); </script></div>
<div class="table-r">
<table width="100%">
    <tbody>
        <tr>
            <td style="text-align:center;" width="50%">页面加载<?php timer_stop(1); ?>秒</td>
            <td style="text-align:center;" width="50%">页面查询<?php echo get_num_queries(); ?>次</td>
        </tr>
</tbody>
</table>
</div>

 

【wordpress教程】纯代码实现QQ邮箱发送邮件

很多时候,我们自己博客的邮箱发送的邮件,回因为各种各样的原因,而导致发送出去的邮件直接被对方的邮箱加入黑屏名单,可是我们发送的邮件无非就是为了让访客看到,从而给自己带来流量的作用。对于已经加入垃圾箱的邮件被查看的几率我想几乎已经接近于零了,毕竟没在垃圾箱的时候,查看的可能性都不到百分之十,何况是已经掉进了垃圾箱。

今天西瓜君教大家利用代码利用QQ邮箱实现WordPress收发邮件

方法听蛮老套的,但是这个功能我觉得适合每一个WordPress用户,毕竟使用QQ邮箱发送邮件可以节省一点服务器的压力。然后配合WordPress邮件美化代码,就可以实现类似于我们平时收到的邮件那种有效果,并且不会直接丢进垃圾箱。

实现的方式很简单,只需要将以下代码复制以后,粘贴到你主题的functions文件当中即可

add_action('phpmailer_init', 'mail_smtp');
function mail_smtp( $phpmailer ) {
$phpmailer->FromName = '虫子君'; //发件人名称
$phpmailer->Host = 'smtp.qq.com'; //修改为你使用的邮箱SMTP服务器
$phpmailer->Port = 465; //SMTP端口
$phpmailer->Username = 'csccsr@qq.com'; //邮箱账户
$phpmailer->Password = '*********'; //邮箱密码(此处填写QQ邮箱生成的授权码)
$phpmailer->From = 'csccsr@qq.com'; //收件邮箱账户
$phpmailer->SMTPAuth = true;
$phpmailer->SMTPSecure = 'ssl'; //tls or ssl (port=25时->留空,465时->ssl)
$phpmailer->IsSMTP();
}

说明:这里需要说明的一点是,以上的中文标记的部分,记得替换成您自己的信息,其中邮箱密码,并非值得是独立密码,而是邮箱生成的验证密码。

【wordpress教程】给自己博客评论框添加背景图片,让评论框不再单调

vieu主题修改方法

首先由于主题不同,所以我的CSS和大家并不一样!因此,我们需要找到评论框所在CSS!我使用的是vieu主题版本,用这个版本的可以直接添加代码使用,其它主题可以参考这个方法。
最常见的就是审查元素功能,鼠标右键查看元素或者直接按快捷键f12即可。

然后打开你的CSS修改下就好啦,最后保存下或者直接替换图片就是最好的方法。

其它修改方法

方法很简单一学就会,是通过CSS修改添加的:因此,我们需要找到评论框所在CSS!用这个版本的可以直接添加自定义样式代码使用,其它主题可以参考这个方法。

然后打开您的主题style.css文件,找到#comment,插入如下代码:
background-image:url(images/commentbg.png);
background-repeat:no-repeat;
background-position:center center;

完整代码

/**评论框添加背景图片**/
#comment {
    background: #fff;
    width: 100%;
    margin: 0 10px 10px 0;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 20px;
    -webkit-appearance: none;
    background-image:url(wp-content/wp-content/themes/begin/images/commentbg.png);/*评论框背景图片*/
    background-repeat:no-repeat;
    background-position:center center;
}
/**结束**/

代码作用

其中background-image,表示背景图片的地址,可以是绝对地址,也可以是相对地址(相对于style.css文件来说的,以上代码是相对地址,也就是主题的images;绝对地址就要包含域名的完整路径)
background-repeat,该属性表示是否重复,no-repeat为不重复,默认不重复。重复样式如下图,满满的一大屏。


background-position,该属性用来控制图片在评论框中的位置,前一个参数表示左右位,后一个参数表示上下位。
最后保存,ftp上传style.css到主题文件夹覆盖就可以了!当然还有不要忘了上传背景图片哦!

背景图片


【WordPress 教程】JS实现网站运行X天X小时X分X秒和倒计时特效

网站运行时间统计

  • 第一种
  • 显示格式:博客已运行:0 年 0 天 0 小时 0 分钟 00 秒(秒为跑秒)
博客已运行:<span id="sitetime" style="color: #0196e3;"></span>
<script language=javascript>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份,为4位年份值
        month - 0-11之间的整数,做为date对象的月份
        day - 1-31之间的整数,做为date对象的天数
        hours - 0(午夜24点)-23之间的整数,做为date对象的小时数
        minutes - 0-59之间的整数,做为date对象的分钟数
        seconds - 0-59之间的整数,做为date对象的秒数
        microseconds - 0-999之间的整数,做为date对象的毫秒数 */
        var t1 = Date.UTC(2016,1,1,00,00,00); //北京时间2016-12-1 00:00:00
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        document.getElementById("sitetime").innerHTML=+diffYears+"年"+diffDays+"天"+diffHours+"时"+diffMinutes+"分钟"+diffSeconds+"秒";
    }
    siteTime();
</script>
  • 注意修改25行 //北京时间2016-12-1 00:00:00为你的时间

  • 第二种
  • 显示格式:本站勉强运行: 0 天 0 小时 0 分 00 秒(秒为跑秒)
<span id="runtime_span"></span>
<script type="text/javascript">
function show_runtime(){
window.setTimeout("show_runtime()",1000);
X=new Date("12/1/2016 00:00:00");//北京时间2016-12-1 00:00:00
Y=new Date();
T=(Y.getTime()-X.getTime());
M=24*60*60*1000;
a=T/M;
A=Math.floor(a);
b=(a-A)*24;
B=Math.floor(b);
c=(b-B)*60;
C=Math.floor((b-B)*60);
D=Math.floor((c-C)*60);
runtime_span.innerHTML="本站勉强运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
</script>
  • 注意修改5行 //北京时间2016-12-1 00:00:00为你的时间

  • 第三种
  • 显示格式:本站已安全运行: 0 天 0 小时 0 分 00 秒(秒为跑秒)
  • css只是变颜色的可有可无,js自己找地方丢或一起放主题页脚文件即可
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
var birthDay =NewDate("2016-5-6");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
setTimeout(momxc, 1000);
}momxc();
</script>  
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
  • 注意修改11行 ("2016-5-6")为你的时间

  • 第四种
  • 显示格式:本站已安全运行: 0 天 0 小时 0 分 00 秒(秒为跑秒)
  • css只是变颜色的可有可无,js自己找地方丢或一起放主题页脚文件即可
本站已安全运行:<span id="momk"></span>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05-06-2016 12:12:24");//建站日期
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(daysold-e_daysold)*-24;
hrsold=Math.floor(e_hrsold);
e_minsold=(hrsold-e_hrsold)*-60;
minsold=Math.floor((hrsold-e_hrsold)*-60);
seconds=Math.floor((minsold-e_minsold)*-60);
momk.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
}
show_date_time();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
  • 注意修改5行 ("05-06-2016 12:12:24")为你的时间

网站倒计时功能

  • 第一种jQuery.countdown插件实现,需要加载jQuery相关文件
  • 显示格式:倒计时:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)
  • 一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的
  • 尺寸都可以自定义。
<div id="getting-started"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
    $('#getting-started').countdown('2051/01/31 23:05', function(event) {
        $(this).html(event.strftime('倒计时:%w 周 %d 天 %H:%M:%S'));
    });
</script>
  • 注意修改5行 ("05-06-2016 12:12:24")为你的时间
  • 注意:如果需要一共还有多少天数用%D,参数说明:
Y: "years"
m: "months"
w: "weeks"
d: "days"
D: "totalDays"
H: "hours"
M: "minutes"
S: "seconds"
  • 第二种js实现倒计时功能
  • 显示格式:距离结束时间还有:00天05小时25分30秒(秒为跑秒)
  • 注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为8月,则参数应该是7。
<div id="time" class="time"></div>
<script language=javascript>
function show_date_time(){
  window.setTimeout("show_date_time()", 1000);
  target=new Date(2014,0,15,17,0,0); //注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为8月,则参数应该是7。
  today=new Date();
 
  timeold=(target.getTime()-today.getTime());
 
  sectimeold=timeold/1000
  secondsold=Math.floor(sectimeold);
  msPerDay=24*60*60*1000
  e_daysold=timeold/msPerDay
  daysold=Math.floor(e_daysold);
  e_hrsold=(e_daysold-daysold)*24;
  hrsold=Math.floor(e_hrsold);
  e_minsold=(e_hrsold-hrsold)*60;
  minsold=Math.floor((e_hrsold-hrsold)*60);
  seconds=Math.floor((e_minsold-minsold)*60);
 
    if (daysold<0) {
    document.getElementById("time").innerHTML="逾期,倒计时已经失效";
}
  else{
  if (daysold<10) {daysold="0"+daysold}
  if (hrsold<10) {hrsold="0"+hrsold}
  if (minsold<10) {minsold="0"+minsold}
  if (seconds<10) {seconds="0"+seconds}
  if (daysold>0) {
    document.getElementById("time").innerHTML="距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
  }
  else
    document.getElementById("time").innerHTML="<font color=red>距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</font>"; //结束时间小于1天,字体呈红色提醒
}
}
show_date_time();
</script>
  • 注意修改5行 为你的时间

感谢大家的支持