今天,给各位分享一些我在魔改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://iymark.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://iymark.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://iymark.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;
}
以上代码用于隐藏自定义首页中的卡片式列表的标题,以及解决纯文字列表的日期与文章标题对齐问题。
持续更新中,更多自定义修改需求,请下方评论。
文章年久失修,但代码依然可用,不过我一些新的魔改,没有再添加到文章中。
CSS样式更新-2022年9月3日
更新一下首页友链图标的CSS代码
.list-links img {
width:20px;
margin-right:5px;
}
.list-links .links {
float:left;
padding:8px 0 3px 5px;
text-align:justify;
width:10%;
border:2px solid #fff;
background:#f1f1f1;
}
@media (max-width:1240px) {
.list-links .links {
width:33.3%;
}
}@media (max-width:991px) {
.list-links .links {
width:50%;
}
}.list-links {
display:inline-block;
margin:0!important;
}
.list-links a {
width:70%;
white-space:nowrap;
word-wrap:normal;
text-overflow:ellipsis;
overflow:hidden;
line-height:inherit;
margin:0;
}
相关文章参考:《JustNews主题显示友链图标教程来啦》
有关主题自定义CSS选项,魔改主题的需求,可以联系古哥。联系前,请下方赞助按钮适度赞助。
原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/articles/349.html
评论列表(13条)
很全面的教程
@智能AI:多谢支持哈
关于本站隐私条款用户协议网站优化打赏赞助友情链接
Copyright © 2020-2021冰沫记 • 粤ICP备2020085709号 Theme byjustnews • Admin by古哥
云存储合作又拍云 • 服务器提供阿里云
18 次查询0.173 秒加载 • 14.26 MB内存占用
207天 • 50用户 • 244文章 • 215评论
这坨代码怎么写的
@至死不渝:一两句话说不清楚,你自己F12,看源码吧
@古哥:谢谢博主,已经搞定了,代码放错位置了
文章没有图片的时候随机一张图作为特色图片
这个需求你有做吗?
@wwh:抱歉,我没搞过这个。我的文章都是有图的。
16 次查询0.193 秒加载 • 11.07 MB内存占用
222天 • 55用户 • 261文章 • 232评论
大佬请问这段代码怎么写呀
@至死不渝:几句话说不清楚,反正就是改footer.php
Access Denied – GoDaddy Website Firewall
古哥 主题伪原创您认为有没有必要 避免同质化影响seo嘛 求更新几段
@小生我怕怕:没必要
古哥