Begin 主题美化合集

[mark_b]本文适用于 Begin LTS 版本[/mark_b]

自定义指针

在网上挑选好自己喜欢的指针，保存为 .cur 指针文件

[url href=https://wrsblog.cn/normal.cur]normal.cur 指针文件下载[/url]

[url href=https://wrsblog.cn/link.cur]link.cur 指针文件下载[/url]

将文件保存到网站根目录，在 /wp-content/themes/begin/style.css 文件的最后添加上以下代码：

/** 鼠标样式 开始**/ 
/** 普通指针样式**/ 
body {
cursor: url(https://你的域名/normal.cur), default;
}
 
/** 链接指针样式**/ 
a:hover{cursor:url(https://你的域名/link.cur), pointer;}
 
/** 鼠标样式 结束**/

如果没有显示的话请尝试刷新一下 WordPress 或者浏览器的缓存。

略缩图圆角

在后台>外观>自定义>自定义 CSS 里添加以下代码：

.thumbnail {
border-radius: 6px;
/* 因为我觉得不好看，所以我注释了阴影的代码。有需要的请取消注释。
box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
*/
}

@ 某人时的彩色背景

在后台>外观>自定义>自定义 CSS 里添加以下代码：

.at, .at a {
    color: #fff;
    font-size: 13px;
    margin-right: 5px;
    padding: 1px 5px;
    background: #1abc9c;
    border-radius: 3px;
}

回复邮箱美化

评论区：

邮箱：

将 wp-content/themes/begin/inc/email-notify.php 替换为：

<?php
//评论回复邮件
function all_mail_notify($all_id) {
    $all = get_all($all_id);
    $parent_id = $all->all_parent ? $all->all_parent : '';
    $spam_confirmed = $all->all_approved;
    if (($parent_id != '') && ($spam_confirmed != 'spam')) {
    $wp_email = 'no-reply@' . preg_replace('#^www\.#', '', strtolower($_SERVER['SERVER_NAME']));//发件人e-mail地址，no-reply可改为可用的e-mail
    $to = trim(get_all($parent_id)->all_author_email);
    $subject = '您在 [' . get_option("blogname") . '] 的留言有了回应';
    $message = '<div style="border-right:#666666 1px solid;border-radius:8px;color:#111;font-size:12px;width:95%;border-bottom:#666666 1px solid;font-family:微软雅黑,arial;margin:10px auto 0px;border-top:#666666 1px solid;border-left:#666666 1px solid"><div class="adM">
    </div><div style="width:100%;background:#666666;min-height:60px;color:white;border-radius:6px 6px 0 0"><span style="line-height:60px;min-height:60px;margin-left:30px;font-size:12px">您在<a style="color:#00bbff;font-weight:600;text-decoration:none" href="' . get_option('home') . '" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank">' . get_option('blogname') . '</a> 上的留言有回复啦！</span> </div>
    <div style="margin:0px auto;width:90%">
    <p><span style="font-weight:bold;">' . trim(get_all($parent_id)->all_author) . '</span>, 您好!</p>
    <p>您于' . trim(get_all($parent_id)->all_date) . ' 在文章《' . get_the_title($all->all_post_ID) . '》上发表评论: </p>
    <p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">' . nl2br(get_all($parent_id)->all_content) . '</p>
    <p><span style="font-weight:bold;">' . trim($all->all_author) . '</span> 于' . trim($all->all_date) . ' 给您的回复如下: </p>
    <p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">' . nl2br($all->all_content) . '</p>
    <p>您可以点击 <a style="color:#00bbff;text-decoration:none" href="' . htmlspecialchars(get_all_link($parent_id)) . '" target="_blank" rel="external nofollow"  target="_blank">查看回复的完整内容</a></p>
    <p>感谢你对 <a style="color:#00bbff;text-decoration:none" href="' . get_option('home') . '" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank">' . get_option('blogname') . '</a> 的关注，如您有任何疑问，欢迎在博客留言，我会一一解答</p><p style="color:#A8979A;">(此邮件由系统自动发出，请勿回复。)</p></div></div>';
    $from = "From: \"" . get_option('blogname') . "\" <$wp_email>";
    $headers = "$from\nContent-Type: text/html; charset=" . get_option('blog_charset') . "\n";
    wp_mail( $to, $subject, $message, $headers );
    //echo 'mail to ', $to, '<br/> ' , $subject, $message; // for testing
    }
}
add_action('all_post', 'all_mail_notify');

正文标题居中

将下面代码添加到自定义CSS中，电脑正常浏览时居中，手机居左。

@media screen and (min-width: 600px) {
	.entry-header h1, .begin-single-meta {
		text-align: center;
	}
}

编辑器添加表情

将下列代码添加至 functions.php

//添加表情
function fa_get_wpsmiliestrans(){
global $wpsmiliestrans;
$wpsmilies = array_unique($wpsmiliestrans);
foreach($wpsmilies as $alt => $src_path){
$output .= '<a class="add-smily" data-smilies="'.$alt.'"><img class="wp-smiley" src="'.get_bloginfo('template_directory').'/img/smilies/'.rtrim($src_path, "gif").'gif" /></a>';
}
return $output;
}
add_action('media_buttons_context', 'fa_smilies_custom_button');
function fa_smilies_custom_button($context) {
$context .= '<style>.smilies-wrap{background:#fff;border: 1px solid #ccc;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.24);padding: 10px;position: absolute;top: 60px;width: 380px;display:none}.smilies-wrap img{height:24px;width:24px;cursor:pointer;margin-bottom:5px} .is-active.smilies-wrap{display:block}</style><a id="insert-media-button" style="position:relative" class="button insert-smilies add_smilies" title="添加表情" data-editor="content" href="javascript:;">
添加表情
</a><div class="smilies-wrap">'. fa_get_wpsmiliestrans() .'</div><script>jQuery(document).ready(function(){jQuery(document).on("click", ".insert-smilies",function() { if(jQuery(".smilies-wrap").hasClass("is-active")){jQuery(".smilies-wrap").removeClass("is-active");}else{jQuery(".smilies-wrap").addClass("is-active");}});jQuery(document).on("click", ".add-smily",function() { send_to_editor(" " + jQuery(this).data("smilies") + " ");jQuery(".smilies-wrap").removeClass("is-active");return false;});});</script>';
return $context;
}

添加留言者相关信息（国家、浏览器、操作系统、所在区域）

点击下面的按钮下载 show-useragent.zip 文件，解压到 /wp-content/themes/begin/show-useragent 目录下

[url href=https://dl.wrsblog.cn/Files/show-useragent.zip]文件下载[/url]

目录结构:

在 functions.php 添加:

require get_template_directory() . '/show-useragent/show-useragent.php';

打开 /wp-content/themes/begin/inc/all-template.php 文件，在下列代码

<?php get_author_admin($all->all_author_email, $all->user_id); ?>

的后面添加

<span class="flags">
<?php
    CID_print_all_flag();// 国家
    echo ' ';
    CID_print_all_browser();// 浏览器和操作系统
    echo convertip(get_all_author_ip());// 运营商
?>
</span>

将下列代码添加到 style.css

.WB-OS img {
    width: 14px;
    height: auto;
    vertical-align: -6%;
}
.flags {
    display: none;
}
@media screen and (min-width: 900px) {
    .all-body:hover .flags {
        display: inline;
        animation: fade-in;
        animation-duration: 0.3s;
        -webkit-animation: fade-in 0.3s;
    }
}

添加样式后鼠标悬停在留言上才会显示留言者相关信息，小屏手机上不显示，因为留言者所在区域信息内容较长，不好看，而且可能会造成错位。

修改点赞分享按钮颜色

将以下代码添加到自定义CSS:

.social-main a {
    color: #fff;
}
.like a {
    background: #f40000;
    border: 1px solid #f40000;
}
.share-s a {
    background: #dd9933;
    border: 1px solid #dd9933;
}
.social-main i {
    color: #fff;
}
.shang-p a {
    background: #7ab951;
    border: 1px solid #7ab951;
}
.social-main a:hover {
    color: #fff;
    background: #666;
}
.like a:hover, .share-s a:hover, .shang-p a:hover {
    border: 1px solid #666;
}

自定义滚动显示问候语代码

为了避免 gif 图像文件太大，影响本文章的打开速度，就不放动图了。效果见侧边栏。

后台→外观→小工具→（你想显示的位置：比如侧边栏）杂志布局侧边栏→添加“增强文本”小工具，复制下面的代码粘贴进去OK

<style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1 div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1 div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}.flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style><div id="container-box-1"><div class="container-box-1-1">坚持每天来逛逛，会让你</div><div id="flip-box-1"><div><div class="flip-box-1-1">工作也轻松了！</div></div><div><div class="flip-box-1-2">生活也美好了！</div></div><div><div class="flip-box-1-3">心情也舒畅了！</div></div><div><div class="flip-box-1-4">走路也有劲了！</div></div><div><div class="flip-box-1-5">腿也不痛了！</div></div><div><div class="flip-box-1-6">腰也不酸了！</div></div><div><div class="flip-box-1-1">工作也轻松了！</div></div></div><div class="container-box-1-2">你好我也好，不要忘记哦！</div></div>

右下角滚屏按钮美化

修改前：

修改后：

打开 style.css，查找以下两段代码

#scroll li a {
    background: #fff;
    font-size: 16px;
    color: #777;
    width: 32px;
    height: 32px;
    line-height: 28px;
    text-align: center;
    vertical-align: middle;
    margin-top: 4px;
    display: block;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #ddd;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

@media screen and (min-width: 900px) {
    #scroll li a:hover {
    background: #3690cf;
    color: #fff;
    border: 1px solid #3690cf;
    transition: all 0.2s ease-in 0s;
}

将其修改为

#scroll li a {
    font-size: 16px;
    color: #f8f8f8;
    width: 32px;
    height: 32px;
    line-height: 28px;
    text-align: center;
    vertical-align: middle;
    margin-top: 4px;
    display: block;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.scroll-home {
    background-color: #ff9531;
}
.scroll-h {
    background-color: #ff5e5c;
}
.scroll-c {
    background-color: #24a5db;
}
.scroll-b {
    background-color: #ff9531;
}
.qq-mobile {
    background-color: #fffffb;
}
.phone-mobile {
    background-color: #7fb80e;
    border-radius: 20px;
}
.log-button {
    background-color: #f47920;
}
#gb2big5 {
    background-color: #aec534;
}
.qr {
    background-color: #4a4a4a;
}
@media screen and (min-width: 900px) {
    #scroll li a:hover {
    background: #2f889a;
    color: #fff;
    border: 1px solid #2f889a;
    transition: all 0.2s ease-in 0s;
}

鼠标点击显示社会主义核心价值观

在 footer.php 最后</body>前添加以下代码：

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span />").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

Begin 主题美化合集

自定义指针

略缩图圆角

@ 某人时的彩色背景

回复邮箱美化

正文标题居中

编辑器添加表情

添加留言者相关信息（国家、浏览器、操作系统、所在区域）

修改点赞分享按钮颜色

自定义滚动显示问候语代码

右下角滚屏按钮美化

鼠标点击显示社会主义核心价值观

未完待续...

发表评论取消回复

自定义指针

略缩图圆角

@ 某人时的彩色背景

回复邮箱美化

正文标题居中

编辑器添加表情

添加留言者相关信息（国家、浏览器、操作系统、所在区域）

修改点赞分享按钮颜色

自定义滚动显示问候语代码

右下角滚屏按钮美化

鼠标点击显示社会主义核心价值观

未完待续...

发表评论 取消回复

发表评论取消回复