环境
- WordPress 6.0.1
- Twenty Twelve 3.7
- PHP 8.1.9
修改 Twenty Twelve: 样式表 (style.css)
将以下CSS代码直接插入到 Twenty Twelve 主题样式文件(style.css)末尾即可生效。
- 去除导航栏项目以及站点标题点击后出现的虚线轮廓
/*去掉导航栏项目点击后的轮廓*/
.main-navigation a {
outline: none;
}
.wp-block-search__input {
padding: 5px 6px;
font-size: 13px;
}
input[type="text"],input[type="search"],textarea {
outline: none;
border: 1px solid #d8d9dc;
background:#fff;
}
input[type="text"]:focus,input[type="search"]:focus,textarea:focus {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
border-right-width: 1px;
}
/*去掉站点标题被点击后的轮廓*/
.site-header h1 a,
.site-header h2 a {
outline:none;
}
2. 美化网站上所有的输入框
/*修改搜索框*/
.wp-block-search__input {
padding: 5px 6px;
font-size: 13px;
}
input[type="text"],input[type="search"],textarea {
outline: none;
border: 1px solid #d8d9dc;
background:#fff;
}
input[type="text"]:focus,input[type="search"]:focus,textarea:focus {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
border-right-width: 1px;
}
input[type="text"]:hover,input[type="search"]:hover,textarea:hover {
border-color: #40a9ff;
border-right-width: 1px;
}
3. 美化Wordpress编辑器中的代码块显示方式
/*美化代码块*/
.entry-content pre code,
.comment-content pre code {
/*改变下代码块的背景颜色跟padding*/
background: rgb(247, 246, 243);
padding: 10px;
border: 1px solid #ededed;
font-size: 13px;
}
4. 美化主边栏
/*主边栏搜索*/
.wp-block-search .wp-block-search__label{
background-color: rgb(247,247,247);
padding: 4px 0px 4px 10px;
margin: 5px 0;
position: relative;
font-size: 14px;
width: auto;
}
.wp-block-search .wp-block-search__label:before{
content: "";
height: 100%;
width: 8px;
position: absolute;
left: -8px;
top: 0;
background-color: #999;
display: inline-block;
}
/*主边栏其他*/
.wp-block-group__inner-container h2{
background-color: rgb(247,247,247);
padding: 10px;
margin: 5px 0;
position: relative;
font-size: 14px;
}
.wp-block-group__inner-container h2:before{
content: "";
height: 100%;
width: 8px;
position: absolute;
left: -8px;
top: 0;
background-color: #999;
display: inline-block;
}
4. 美化搜索文章按钮显示效果
.wp-block-search__button{
font-size: 0.9rem;
font-weight: normal;
color: #7c7c7c;
padding: 6px;
background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 2px rgb(64 64 64 / 10%);
min-width: 5.5rem;
}
修改 Twenty Twelve: content.php 文件,增加文章摘要显示
将 content.php 中的 entry-content 块替换为下面代码即可,默认摘要的是300字,如有需要可自行修改。
<div class="entry-content">
<?php if ( is_single() && 'post' == get_post_type() ) : ?>
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
<?php else : ?>
<?php echo wp_trim_words(get_the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ) ,300," ..."); ?>
<?php if(strlen(wp_strip_all_tags(get_the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ))) >=300 ) :?>
<a href="<?php the_permalink(); ?>" rel="bookmark">阅读更多</a>
<?php endif; ?>
<?php endif; ?>
<?php
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ),
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
笔者并不是很懂PHP,可能这个方法不是很完美,但已达到目的。
这真的是一个很老的主题了。
抱歉,由于我没设置评论邮件提醒,现在才看到你的评论 😢
主要是这个主题简单好上手,不想多折腾其他的。