哔哔一二

分类： 主题美化

此分类下的主题美化教程，大部分都以B2主题为基础美化，包括JS功能等。代码基本都是通用的，个别地方可能需要你自己修改，不会的可以在文章下方留言。

  • 给后台添加自定义按钮

    给后台添加自定义按钮

    代码效果

    为WordPress的文本编辑器添加一些自定义按钮。这些按钮可以插入特定的短代码或HTML标签，从而方便用户在编辑器中快速插入常用的内容格式。

    视频介绍

    代码放置位置

    子主题或父主题的functions.php中

    代码查看

    [content_hide]

    add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
 
function bolo_after_wp_tiny_mce($mce_settings) {
    ?>
<script type="text/javascript">
    QTags.addButton('custom_tag_1', '按钮 1【按钮名称】', '<div class="custom">', '</div>');
    QTags.addButton('custom_tag_2', '按钮 2【按钮名称】', '<span class="highlight">', '</span>');
    QTags.addButton('custom_tag_3', '按钮 3【按钮名称】', '<p class="note">', '</p>');
</script>
<?php
 }

    [/content_hide]

  • 写文章自动选择上次勾选的分类

    写文章自动选择上次勾选的分类

    代码效果

    当你在后台编辑或新建文章时，页面会自动选择之前保存的分类，可以快速继续编辑而不需要重新选择分类。

    这段代码有效地增强了用户体验，确保在编辑文章时能够保留和自动选择用户上次选择的分类。

    视频介绍

    代码放置位置

    子主题或父主题的functions.php中

    2025-11-24 更新两个功能：新版自动勾选，新版强制自动勾选

    [content_hide]

    📦 资源下载
    🔐 提取码：
    grE3C


    ⬇
    立即下载

    [/content_hide]

  • 在functions中全局输出js和css文件

    在functions中全局输出js和css文件

    代码效果

    在你的 WordPress 上，通过 wp_enqueue_scripts 钩子自动全局加载指定路径的 CSS 和 JavaScript 文件

    视频介绍

    代码放置位置

    子主题或父主题的functions.php中

    代码查看

    function bber_css_js() {
    // 输出其他路径的 CSS 文件
    wp_enqueue_style( '唯一标识符', get_stylesheet_directory_uri() . '文件路径', array(), '1.0' );

    // 输出其他路径的 JS 文件
    wp_enqueue_script( '唯一标识符', get_stylesheet_directory_uri() . '文件路径', array(), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'bber_css_js' );

     

  • 替换文章小图标

    【B2美化】替换文章小图标

    代码效果

    替换B2文章的小图标，让文章列表看起来更加美观。每个人审美不同，你可以替换自己想要的任何图标，包括套svg图标以及一些其他的。

    代码修改位置

    /Modules/Templates/Modules/Posts.php 104行左右

functions.php引用代码：

require_once get_stylesheet_directory() . '/Modules/Templates/Modules/Posts.php';

    代码修改说明

    下方视频中只展示了网格文章的修改办法，列表文章也同理，列表文章的样式看起来是post-3，你可以自己跟着视频进行尝试。

    视频介绍

  • 本站使用的字体文件

    本站使用的字体文件

    字体介绍

    OPPO Sans 是 OPPO 专属品牌字体，采用了全新骨架，中宫自然舒适，结构稳定，字形舒展，强化了屏幕显示的易读性和外观性，简洁真实，体现了科技美感。

    全新 OPPO Sans 更加简洁、干净。在提高屏幕显示的阅读体验的同时，也体现了 OPPO 现代化科技美感。OPPO Sans 将继续免费授权给全社会使用（含商用），欢迎大家下载体验。

    字体官网下载地址

    https://www.coloros.com/article/A00000050/

    本站字体引用代码

    /* 全站字体 - 放在style.css内 */

@font-face {
    font-family: 'diyziti';
    src: url('https://dsfs.oppo.com/store/public/font/OPPOSans-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'diyziti', sans-serif;

}

  • 缩略图hover时放大和浮动

    缩略图hover时放大和浮动

    代码效果

    这个代码是用来在网页中实现一些鼠标悬停（hover）效果的，当鼠标移动到文章缩略图区域时，缩略图放大。

    当鼠标移动到文章区域时，文章向上移动位置，并在底部添加一点阴影。

    代码展示

    # 放到style.css文件中即可 #

# 全站thumb-link生效 - 缩略图 hover 放大效果 #

.thumb-link {
    transition: all .4s ease-out;
}

.thumb-link:hover {
    transform: scale(1.1);
}

代码解读：

.thumb-link：这是一个用于缩略图链接的类。transition: all .4s ease-out; 使用指定的过渡效果。

.thumb-link:hover：当鼠标悬停在带有 thumb-link 类的元素上时，元素会进行 transform: scale(1.1); 变换，使其放大到原始大小的 1.1 倍。

# 网格文章文章 hover 向上微动效果 #

.item-post-style-1&gt;.item-in {
    transition: all .4s ease-out;
}

.item-post-style-1&gt;.item-in:hover {
    transform: translateY(-3px);
    box-shadow: 0 2rem 1rem -1rem #ddd3fb4d;
    transition: all .4s ease-out;
}

代码解读：

transform: translateY(-3px);  使元素在垂直方向上向上移动 3 像素。

box-shadow: 0 2rem 1rem -1rem #ddd3fb4d;  添加一个阴影效果，使元素在悬停时看起来有浮动的感觉。

transition: all .4s ease-out;：指定了过渡效果，确保悬停和移开时效果有平滑的过渡。

.item-post-style-1指定给了网格文章使用此样式，其他文章类型不影响,删除item-post-style-1会使所有文章类型都受到此影响

  • 菜单导航底部线条动态效果

    菜单导航底部线条动态效果

    代码效果

    这段代码用于为菜单项添加下划线效果，当鼠标悬停在菜单项上时，下划线的宽度会发生变化。

    底部线条的具体宽度可自己定义。

    代码展示

    [content_hide]

    # 放到style.css文件中即可 #

/* 为其他菜单添加下划线 */
    .ym-menu>ul>li>a::after {
    content: '';
    display: block;
    /* 将伪元素设置为块级元素，确保它可以设置宽度和高度 */
    width: 0px;
    /* 初始宽度为0，不可见 */
    height: 2px;
    /* 下划线的高度为2像素 */
    border-radius: 5px;
    /* 圆角半径为5像素，使线条两端圆滑 */
    background-color: #0066ff;
    /* 下划线的背景颜色为蓝色 */
    position: absolute;
    /* 使用绝对定位 */
    bottom: 12px;
    /* 距离父元素底部12像素 */
    margin-left: auto;
    margin-right: auto;
    /* 左右自动边距，使下划线居中 */
    left: 0;
    right: 0;
    /* 设置左右边界为0 */
    text-align: center;
    /* 文本居中对齐（对伪元素内容无影响，但保持一致性） */
    transition: width 0.4s ease-in-out;
    /* 添加宽度变化的过渡效果，持续0.4秒，采用ease-in-out过渡函数 */

    transition: all .4s ease-out;
    /* 添加所有属性变化的过渡效果，持续0.4秒，采用ease-out过渡函数 */
}

/* 鼠标悬停时的样式 */
.ym-menu>ul>li>a:hover::after {
    width: 50%;
    /* 鼠标悬停时，下划线的宽度变为50% */

    transition: all .4s ease-out;
    /* 添加所有属性变化的过渡效果，持续0.4秒，采用ease-out过渡函数 */
}

    [/content_hide]

  • 网站顶部动态跑马灯特效

    网站顶部动态跑马灯特效

    资源介绍给网站顶部添加一个动态的跑马灯效果，也是N年前的老特效了，不过还是蛮好看的。

    WordPress&B2主题使用方法

    方法一：将代码放入functions.php中：

    function horseracelamp() {
    echo '<style>#top-grrk{background:url(https://i.ibb.co/ZWNJRZq/image.gif);height:2px;position:fixed;width:100%;Z-index:10000}</style><div id="top-grrk"></div>';
    }
add_action( 'wp_head', 'horseracelamp', 100 );

    方法二：将代码入header.php中，不要放到head标签内，放在它下面即可。

    <style>
#header-pmd{
    background:url(https://i.ibb.co/ZWNJRZq/image.gif);
    height:2px;//跑马灯高度
    position:fixed;
    width:100%;
    Z-index:9999;
}
</style>    
<div id="header-pmd"></div>

    [content_hide]

    📦 资源下载
    🔐 提取码：
    w2RRT


    ⬇
    立即下载

    [/content_hide]

  • 鼠标点击特效Canvas点击烟花效果

    鼠标点击特效Canvas点击烟花效果

    资源介绍一个JS烟花效果，很久之前的代码了，可以拿去研究一下。圆点大小自己研究代码调整，已经做了详细的注释。

    代码说明（任选一种方法）

    方法一：放在主题/子主题的header.php中，注意代码的上下位置，js引入文件应该在下面。

    鼠标点击特效Canvas点击烟花效果

    方法二：放在主题/子主题的footer.php中(最下面)，注意代码的上下位置，js引入文件应该在下面。

    鼠标点击特效Canvas点击烟花效果

    注意修改JS引用路径，要和自己的js文件位置对应，如果你对代码较为熟悉，可以随意放置代码。

    相关代码

    <?php if(!wp_is_mobile()): ?>
<div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div>
<?php endif; ?>

<script src="/wp-content/themes/b2child/diy/js/yanhua.js"></script>

    如果想让手机端也显示，删除php标签代码

    <div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div> 

<script src="/wp-content/themes/b2child/diy/js/yanhua.js"></script>

     

     
    [content_hide]

    📦 资源下载
    🔐 提取码：
    i43lH


    ⬇
    立即下载

    [/content_hide]

  • 一行CSS代码让整站变灰

    一行CSS代码让整站变灰

    代码介绍将以下代码添加到网站的CSS文件中并保存，然后刷新页面，整站网页，将会变成灰色。

    html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /* 仅保留对 Safari 的支持 */
    /* 兼容旧版 IE */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; /* IE 8 及更早版本 */
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* IE 8 及更早版本 */
    pointer-events: auto; /* 确保鼠标事件正常 */
}