魔改justnews主题过程中的代码

今天，给各位分享一些我在魔改justnews主题过程中的一些代码，主要是CSS样式之类。大致上，边栏友情链接修改成双栏显示、网站底部样式修改、Wordpress高亮代码、文本对齐方式等。当然，也包括一些php代码的修改。

当然，有些功能需要通过一些插件配合CSS来实现，本文会长期更新，用于记录对justnews作的所有修改。

CSS样式

.enlighter::-webkit-scrollbar-track-piece {
    background: #444;
}
.enlighter-default {
    border-top-left-radius: 10px;
    border-bottom-right-radius: 20px;
    padding-top: 34px!important;
    margin-bottom: 20px!important;
    background: #444;
}
.enlighter-default .enlighter {
    max-height: 510px;
    overflow: auto;
    white-space: nowrap;
    display: block;
    background: #444;
}
.enlighter-default::after {
    content: " ";
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #c7c7c7;
    width: 12px;
    height: 12px;
    top: 0;
    left: 15px;
    margin-top: 11px;
    -webkit-box-shadow: 20px 0 #c7c7c7, 40px 0 #c7c7c7;
    box-shadow: 20px 0 #c7c7c7, 40px 0 #c7c7c7;
    transition-duration: .3s;
}
.enlighter-default:hover::after {
    background: #fc625d;
    -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
}
.enlighter-t-monokai.enlighter-linenumbers div.enlighter>div::before {
    color: #ccc;
    background: #555;
}
.enlighter-default.enlighter-hover div.enlighter>div:hover:before {
    color: #fff;
}
.entry .entry-content>p {
    text-align: justify;
}
.entry .entry-content ol, .entry .entry-content ul {
    margin-bottom: 0!important;
}
.entry .entry-content p:first-of-type {
    margin-top: 0!important;
}
.entry .entry-head {
    text-align: center;
}
.wrap {
    margin-bottom: 0;
}
.dropdown-menu>li>a {
    text-align: center;
}
.footer-sns .name, .copyright .name {
    padding: 4px;
    background: #fff;
    color: #000;
}
.footer .copyright p {
    line-height: 2.5;
}
.footer-sns .link, .copyright .link {
    padding: 4px;
    background: #08c;
    color: white;
}
.copyright .link a {
    color: white;
}
.footer-sns p {
    font-size: 14px;
    margin-top: 36px;
}
.footer-col-logo {
    margin-right: 10px;
}
ul.xoxo.blogroll {
    display: block;
    overflow: auto;
}
.xoxo.blogroll li {
    float: left;
    width: 135px;
}
.topic-list span {
    top: 85%;
}

• 上述代码中的第1-44行，搭配enlighter插件，并选择插件的monokai样式，可以适配justnews主题，实现高亮代码。
• 上述代码中的第45-62行，为文章内容标题导航的一些对齐方式修改。
• 上述代码中的第63-85行，为网站底部样式的修改。
• 上述代码中的第86-93行，为边栏实现友情链接双栏显示的代码。
• 上述代码中的第94-96行，为首页专题栏目文字位于图片正下方显示。

function.php代码

//评论回复通知

function comment_mail_notify($comment_id) { 
 $comment = get_comment($comment_id);
 $parent_id = $comment->comment_parent ? $comment->comment_parent : '';
 $spam_confirmed = $comment->comment_approved; 
 if (($parent_id != '') && ($spam_confirmed != 'spam')) { 
 $wp_email = 'no-reply@' . preg_replace('#^www.#', '', strtolower($_SERVER['SERVER_NAME'])); //改为你的邮箱 
 $to = trim(get_comment($parent_id)->comment_author_email); 
 $subject = '[' . get_option("blogname") . '] 您的留言有了新回复'; 
 $message = ' 
 <div style="width: 60%;margin: 0 auto"> 
 <div style="font-size: 28px;line-height: 28px;text-align: center;"><p>' . trim(get_comment($parent_id)->comment_author) . ', 您好!</p></div> 
 <div style="border-bottom: 1px solid #eee;padding-top: 10px;"> 
 <p style="color: #999;">您曾在《' . get_the_title($comment->comment_post_ID) . '》的留言:</p> 
 <p style="font-size: 18px;">' . trim(get_comment($parent_id)->comment_content) . '</p> 
 </div> 
 <div style="border-bottom: 1px solid #eee;padding-top: 10px;"> 
 <p style="color: #999;">' . trim($comment->comment_author) . ' 给您的回复:</p> 
 <p style="font-size: 18px;">' . trim($comment->comment_content) . '</p>
 <p style="text-align: center;font-size: 12px;padding-bottom: 20px;"><a style="border: 1px solid #3297fb;color: #3297fb;padding: 7px 14px;text-decoration: none;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius:4px;" href="' . esc_attr(get_comment_link($parent_id, array('type' => 'comment'))) . '">点击查看</a></p> 
 </div> <div style="font-size: 12px;color: #999;text-align: center;"> 
 <p>此邮件由系统自动发送，请勿回复</p> 
 <p>© <a href="https://xiaosiseo.com" style="color: #999;text-decoration: none;">' . get_option('blogname') . '</a></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 ); } } 
add_action('comment_post', 'comment_mail_notify');

//评论回复通知结束

上述代码为评论回复邮件通知功能，即有人回复了某条评论，会发送邮件到评论者邮箱。

footer.php代码

<p><span class="name"><?php $count = wp_count_posts(); $getCount = $count->publish; echo $getCount; ?></span><span class="link">Posts</span> <span class="name"><?php echo get_num_queries(); ?> queries</span><span class="link"><?php timer_stop(3); ?> seconds</span> <span class="name"><?php $usage=memory_get_peak_usage()/1024/1024; echo round($usage,2); ?>  MB</span><span class="link">Mem</span></p>

上述代码为显示网站总文章数、页面加载数据库查询次数、加载时间、内存占用情况，需要放在footer.php文件中第25行下方位置，即第26行的</div>前方。

页脚代码

<span class="name">Copyright © 2020</span><span class="link"><a href="https://xiaosiseo.com">冰沫记</a></span> <span class="name">粤ICP备</span><span class="link"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">2020085709号</a></span> <span class="name">Theme by</span><span class="link"><a href="https://www.wpcom.cn?ref=6502" target="_blank" rel="noopener">justnews</a></span> <span class="name">Admin by</span><a href="https://xiaosiseo.com/profile/gugechor" target="_blank" rel="noopener"><span class="link">古哥</span></a>

上述代码为主题设置中，页脚设置版权信息，代码模式添加的内容，主要是配合网站底部样式的修改。

CSS样式更新 – 2020.11.17

.wp-block-gallery {
    margin-bottom: 10px!important;
}
.entry .entry-content li {
    margin-bottom: 10px;
}
.blocks-gallery-grid li figure {
    margin-bottom: 0!important;
}

以上代码用于修复Wordpress古腾堡写文章插入画廊时，画廊末尾空白太多的样式问题。

.comments-list {
    margin: 0;
}
.comments-list li:last-of-type {
    margin: 0;
    padding: 0;
}

以上代码用于评论列表末尾空白过大的样式问题修复

CSS样式更新-2020.12.6

.post-loop-list .item .date {
top: 15px;
}
.modules-main-list .item-title, .feature-posts-wrap .item-title{
display:none;
}

以上代码用于隐藏自定义首页中的卡片式列表的标题，以及解决纯文字列表的日期与文章标题对齐问题。

持续更新中，更多自定义修改需求，请下方评论