WordPress Justnews主题魔改教程

4.5
(22)

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

Wordpress Justnews主题魔改教程

当然,有些功能需要通过一些插件配合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选项,魔改主题的需求,可以联系古哥。联系前,请下方赞助按钮适度赞助。

共计22人评分,平均4.5

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

文章目录

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/articles/349.html

(13)
微信公众号
古哥的头像古哥管理团队
上一篇 2020年10月08日 21:06
下一篇 2020年10月09日 21:29

你可能感兴趣的文章

发表回复

登录后才能评论

评论列表(13条)

  • 一座城的头像
    智能AI 2020年10月08日 23:59

    很全面的教程

  • 至死不渝的头像
    至死不渝 2021年04月09日 18:25

    关于本站隐私条款用户协议网站优化打赏赞助友情链接
    Copyright © 2020-2021冰沫记 • 粤ICP备2020085709号 Theme byjustnews • Admin by古哥
    云存储合作又拍云 • 服务器提供阿里云

    18 次查询0.173 秒加载 • 14.26 MB内存占用

    207天 • 50用户 • 244文章 • 215评论

    这坨代码怎么写的

  • wwh的头像
    wwh 2021年04月15日 16:04

    文章没有图片的时候随机一张图作为特色图片
    这个需求你有做吗?

    • 古哥的头像
      古哥 2021年04月15日 16:14

      @wwh抱歉,我没搞过这个。我的文章都是有图的。

  • 至死不渝的头像
    至死不渝 2021年04月24日 18:04

    16 次查询0.193 秒加载 • 11.07 MB内存占用

    222天 • 55用户 • 261文章 • 232评论

    大佬请问这段代码怎么写呀

  • Babbage的头像
    Babbage 2021年06月17日 17:24

    Access Denied – GoDaddy Website Firewall

  • 小生我怕怕的头像
    小生我怕怕 2021年11月23日 21:00

    古哥 主题伪原创您认为有没有必要 避免同质化影响seo嘛 求更新几段偷笑

  • 123的头像
    123 2021年12月24日 17:35

    古哥

    微信小程序
    微信公众号