今天,给各位分享一些我在魔改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; }
以上代码用于隐藏自定义首页中的卡片式列表的标题,以及解决纯文字列表的日期与文章标题对齐问题。
持续更新中,更多自定义修改需求,请下方评论
© 版权声明
THE END
暂无评论内容