WordPress Twenty Twelve 3.7 主题修改记录

环境

  • WordPress 6.0.1
  • Twenty Twelve 3.7
  • PHP 8.1.9

修改 Twenty Twelve: 样式表 (style.css)

将以下CSS代码直接插入到 Twenty Twelve 主题样式文件(style.css)末尾即可生效。

  1. 去除导航栏项目以及站点标题点击后出现的虚线轮廓
/*去掉导航栏项目点击后的轮廓*/
.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">&rarr;</span>', 'twentytwelve' ) ); ?>
    <?php else : ?>
    <?php echo wp_trim_words(get_the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ) ,300," ..."); ?>

    <?php if(strlen(wp_strip_all_tags(get_the_content( __( 'Continue reading <span class="meta-nav">&rarr;</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,可能这个方法不是很完美,但已达到目的。

WordPress Twenty Twelve 3.7 主题修改记录》有2个想法

    1. CItext 文章作者

      抱歉,由于我没设置评论邮件提醒,现在才看到你的评论 😢
      主要是这个主题简单好上手,不想多折腾其他的。

      回复

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注