Wordpress Twenty Seventeen主题修改笔记

一、修改首页和归档页显示文章摘要而不是详细内容

主题文件“template-parts/post/content-excerpt.php”和“template-parts/post/pontent.php”分别为摘要和详细内容的模板

1.首页模板“index.php”中调用“content”修改为调用“content', 'excerpt”

/* Start the Loop */
while ( have_posts() ) :
the_post();

/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/post/content', 'excerpt', get_post_format() );

endwhile;

2.文章归档模板“archive.php”中调用“content”修改为调用“content', 'excerpt”

/* Start the Loop */
while ( have_posts() ) :
the_post();

/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/post/content','excerpt', get_post_format() );

endwhile;

二、修改摘要显示的字数

摘要默认的字数为55，修改“wp-includes/formatting.php”文件，将( 'excerpt_length', 55 )修改为( 'excerpt_length', 120 )

/**
* Filters the number of words in an excerpt.
*
* @since 2.7.0
*
* @param int $number The number of words. Default 55.
*/
$excerpt_length = apply_filters( 'excerpt_length', 120 );

三、修改底部“自豪地使用WordPress”为“Powered by WordPress”

1.“自豪地使用WordPress”源自“wp-content/languages/themes/wentyseventeen-zh_CN.mo”文件，而该mo文件编译自同目录下的“wentyseventeen-zh_CN.po”文件。因此修改po文件，然后重新编译mo文件即可实现，但此法比较麻烦。
摘录po文件有关页脚信息的内容

#: template-parts/footer/site-info.php:13
msgid "Proudly powered by %s"
msgstr "自豪地采用%s"

#. #-#-#-#-# twentyseventeen.pot (Twenty Seventeen 1.4) #-#-#-#-#
#. Author URI of the plugin/theme
#: template-parts/footer/site-info.php:13
msgid "https://wordpress.org/"
msgstr "https://cn.wordpress.org/"

2.编辑主题文件“template-parts/footer/site-info.php”，将超链接直接修改为“Powered by WordPress”更为方便。

<div class="site-info">
<?php
if ( function_exists( 'the_privacy_policy_link' ) ) {
the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
}
?>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyseventeen' ) ); ?>"><?php printf( 'Powered by WordPress' ); ?></a>
</div><!-- .site-info -->

四、增加额外的CSS

/* 站点标题 */
.site-branding-text {
margin-left: 16px;
}

/* 导航栏宽度 */
.navigation-top .wrap {
max-width: 1000px;
padding-left: 0;
padding-right: 0;
}
/* 主内容顶部缩进 */
.site-content {
padding: 1em 0 0 0;
}
/* 主内容取消左右margin， 显示更多 */
.wrap {
max-width: 1000px;
padding-left: 0;
padding-right: 0;
}
.page-header {
padding: 12px 20px;
margin-bottom: 10px;
}
/* 底部信息居中 */
.site-info {
width: 100%;
display: block;
text-align: center;
}

/* 整体背景色 */
#content {
background-color: #f3f3f3;
}
/* 侧边栏 */
.has-sidebar #secondary {
padding: 16px 0px 16px 20px;
margin-bottom: 10px;
}
.widget ul li,
.widget ol li{
border-bottom: 0px solid #ddd;
border-top: 0px solid #ddd;
color: #77839C;
padding: 0.5em 0;
}
#secondary a {
color: #175199;
}
#secondary a:hover {
-webkit-box-shadow: 0 2px 0 #77839C;
box-shadow: 0 2px 0 #77839C;
color: #77839C;
}

/* 文章本体，排除'页面'，否则页面显示不正常*/
#primary .site-main article:not(.type-page) {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
padding: 16px 20px 16px 20px;
margin-bottom: 10px;
}

/* 文章标题字体 */
h2, .home.blog .entry-title, .page .panel-content .recent-posts .entry-title {
font-size: 18px;
font-weight: 600;
}
/* 站点标题 */
.site-title {
font-size: 33px;
}
/* 禁止自动大写 */
h5 {
text-transform: none;
}

/* 列表右侧缩进 */
ul,ol {
margin: 0 0 1em 1.5em;
}
/* 底部增加距离 */
.has-sidebar:not(.error404) #primary {
margin-bottom: 3em;
}
/* 上下篇文章缩进 */
.nav-links {
margin-left: 1.5em;
margin-right: 1.5em;
}

/*修改文章与边栏的比例*/
.has-sidebar:not(.error404) #primary,
.page-two-column .panel-content .entry-content,
.page-two-column .panel-content .recent-posts,
.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content,
body.page-two-column #comments,
.navigation.pagination,
.site-footer .widget-column.footer-widget-2,
.site-info{
width: 70%;
}

.has-sidebar #secondary,
.page-two-column .panel-content .entry-header,
body:not(.has-sidebar):not(.page-one-column) .page-header,
body.has-sidebar.error404 #primary .page-header,
body.page-two-column:not(.archive) #primary .entry-header,
body.page-two-column.archive:not(.has-sidebar) #primary .page-header,
.blog:not(.has-sidebar) .entry-content blockquote.alignright,
.twentyseventeen-front-page.page-two-column .entry-content blockquote.alignright,
.archive:not(.has-sidebar) .entry-content blockquote.alignright,
.page-two-column .entry-content blockquote.alignright,
.site-footer .widget-column.footer-widget-1,
.social-navigation{
width: 23%;
}

/* 修改引用的样式 */
blockquote{
font-style:normal;
font-size: 90%;
color:grey;
margin: 0em .5em 1.5em .5em;
padding: .5em;
border: 1px #f33 dashed;
border-radius:10px;
-webkit-border-radius:10px;-moz-border-radius:10px;
background:url(https://www.knowwei.win/wp-content/uploads/blockquote-patt.png) repeat;
}
main blockquote p{
margin: 0;
}
main p{
margin: 0 0 1em;
}

五、修正撰写新文章的“可视化”与发布后的实际页面不一至

撰写新文章页面所引用的样式表为edit-style.css，然而额外的CSS对blockquote的样式修改比较大，因此blockquote的“可视化”效果与文章发布后的实际页面差别会很大。编辑主题文件“assets/css/edit-style.css”，将blockquote样式的内容修改为

blockquote{
font-style:normal;
font-size: 90%;
color:grey;
margin: 0em .5em 1.5em .5em;
padding: .5em;
border: 1px #f33 dashed;
border-radius:10px;
-webkit-border-radius:10px;-moz-border-radius:10px;
background:url(https://背景图片网址) repeat;
}