WP主题美化教程WP美化集合

美化教程(集合)

↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓

(最新版)CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式

(最新版)JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码

(最新版)没有特殊说明的小工具,自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去,保存即可。

↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑

其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我可能不重复告知了,请注意看上面的方法。

有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。

前言

想在博客里面嵌入一个页面不想跳转,这边给大家带一个教程

ps:如果你的博客开了SSL,下面的链接也需要开SSL,要不然跳转不了。

教程

代码+教程

  • 把下面背景图代码放到主题下的css里面,我是子比主题就放到后台的css里面就可以了,把下面代码的图片链接改成你需要的背景图就行了。
  • 如果不想用背景图,改背景色也可以,下面的背景色代码放入css里面颜色代码我就不多说了。
/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://图片链接/) top fixed;}
/*背景色*/body {background: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-color: #FFDEE9;}

CSS代码:

/*导航栏字体加粗*/
ul.nav {font-weight: 700;}

子比主题设置—>自定义代码—>自定义javascript代码:,添加以下代码:

//透明复制提示
// by:忧心笔记 www.uxr.cc
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【忧心笔记 www.uxr.cc 】<br>复制成功,若要转载请务必保留原文链接!</p>', function(){});};

子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码:

<!--透明复制提示开始--> 
<!--by:忧心笔记 www.uxr.cc-->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束--> 

效果图

图片[1]-WP主题美化教程WP美化集合-忧心笔记

前言

对于许多资源站,在下载时或多或少会设置提取码,由于子比并未设置单独填写提取码的位置,且因为用户需求不同,子比主题需要用户手动复制或输入提取码。

故此写了这段小代码,代码无需修改主题文件,均存放于自定义代码块,无需担心主题更新。

效果

图片[3]-WP主题美化教程-美化笔记[更新5.6]-傲天博客

代码

CS请本CSS代码放置子比主题设置->全局&功能->自定义CSS样式中即可

/* 
 *作者:消音
 *请本CSS代码放置子比主题设置->全局&功能->自定义CSS样式中即可
 */
.but-download .badg {
  position: relative;
  cursor:pointer;
}

.but-download .badg::after {
  position: absolute;
  content: " ";
  width: 0;
  height: 0;
  top: -11px;
  left: 50%;
  -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
       -o-transform: translateX(-50%);
          transform: translateX(-50%);
  border-top: 10px solid rgb(236, 235, 235);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
  opacity: 0;
}

.but-download .badg::before {
  content: attr(data-before);
  position: absolute;
  width: 100px;
  height: 31px;
  top: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
       -o-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 14px;
  line-height: 31px;
  border-radius: 4px;
  color: #6c6a6a;
  background-color: rgb(236, 235, 235);
  text-align: center;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
  opacity: 0;
}

.but-download .badg:hover::after,
.but-download .badg:hover::before {
  opacity: 1;
}

请本JavaScript代码放置子比主题设置->全局&功能->自定义javascript代码中即可

/* 
 *作者:消音
 *请本JavaScript代码放置子比主题设置->全局&功能->自定义javascript代码中即可
 */
if(document.querySelectorAll(".but-download .badg")!=undefined){
     const reg = /[a-zA-z0-9]/ig;
    const copy1 = document.querySelectorAll(".but-download .badg");
    for (let i = 0; i < copy1.length; i++) {
      copy1[i].index = i;
      copy1[i].setAttribute("data-before", "点击复制");
      copy1[i].addEventListener("click", copyOperation);
      copy1[i].addEventListener("mouseout", copyOk);
    }

    function copyOperation() {
      var oInput = document.createElement("input");
      let text = this.innerText;
      text = text.match(reg).join("");
      oInput.value = text;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.setAttribute("data-before", "已复制");
    }
    function copyOk() {
      setTimeout(() => {
        this.setAttribute("data-before", "点击复制");
      }, 300)
    }
}
  • 把下面背景图代码放到主题下的css里面,我是子比主题就放到后台的css里面就可以了,把下面代码的图片链接改成你需要的背景图就行了。
  • 如果不想用背景图,改背景色也可以,下面的背景色代码放入css里面颜色代码我就不多说了。
/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://图片链接/) top fixed;}
/*背景色*/body {background: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-color: #FFDEE9;}

前言

用户评论的时候老是乱评论没有文采,分享一段代码随机语录,这样让你们博客评论都非常有内涵

<script>
$.getJSON("https://www.uxr.cc/api/yan/index.php?encode=json",function(data){
$("#comment").text(data.text);
});
$(function(){
$("#comment").click(function() {
$(this).select();
})
})
</script>

教程

目前适配好的是社长在用的子比主题,如果你也是子比主题的话,直接将上面的代码放置到:

后台–>子比主题设置—>自定义代码—>自定义底部 HTML 代码:,添加以上代码:

如果你的评论框 id 不是 comment,则需要修改,首先右键评论框-审查元素-查看 id 或者 class,选其一即可,之后把获取的 id 或者 class 替换到上述代码中的#conment。该 js 需要引入 jquery 库,如果未能正常显示请注意是否成功引入 jquery 库或者是否成功匹配评论框 id 或者 class 值。

如果你和我一样是子比主题的话可以把代码放到:后台–>主题设置–>自定义代码–>自定义头部HTML代码或者自定义底部HTML代码里面即可

如果你有语录api接口,你可以给代码中的https://www.atbkw.cn/aotian/html/yan.php?format=json替换成你的api

如果想对接别人的的其他语录接口,也是一样的,直接放进接口地址里面接口,需要注意的就是,需要 json 输入格式

当然需要源码一言源码可以看看以下内容

说明

修改了下载页面,添加手机自适应,如果更新主题时下载页面(/wp-content/themes/zibll/pages/download.php)没改动代码的话,更新主题后【复制粘贴代码】进去就能用!(更新前记得备份!记得备份!记得备份!不然就被刷新代码了)

代码

在主题设置—》自定义CSS样式添加下面的CSS代码:

/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.uxr.cc/img/pinglu.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}

------ 本页内容已结束,喜欢请分享------

© 版权声明
THE END
喜欢就支持一下吧
点赞7赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片