苏醒 Grace8.3.1主题模板修改记录

  • A+
所属分类:前端开发

1、首页以句号截止摘要文字长度的修改

打开主题目录下的 functions_suxingme.php 文件,在第989行修改  function print_excerpt()函数

2、修改首页小工具之间的间距

style.css 第2392行 margin-bottom: 20px; 修改为 8px;

3、修改首页文章之间的间距

style.css 986 margin-bottom: 20px; 修改为 8px;

4、修改文章底部版权声明栏加入底色和边框(类似文章摘要)

打开 functions_suxingme.php 文件找到 function cc_notice()按以下模板修改:
<div class="post-content">
<p class="post-abstract">

5、文章页加入阅读时间和字数提示:

打开 functions_suxingme.php 文件在底部加入以下函数:
function count_words_read_time () {
global $post;
$text_num = mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');
$read_time = ceil($text_num/400);
$output .= '本文共计' . $text_num . '个文字,预计阅读时长需要' . $read_time . '分钟,请调低您使用的屏幕亮度,保护眼睛健康。';
return $output;
}
打开 single.php文件,找到 <div class="post-content">,加入
<p class="post-abstract"><?php if(function_exists('show_quotes')) show_quotes(); ?><br/><?php echo count_words_read_time(); ?></p>

WPCOM主题修改位置如下:

找到 single.php 文件中的 <?php do_action('wpcom_echo_ad', 'ad_single_1');?>,在下面加入以下代码:

<div class="entry-excerpt">
<?php echo count_words_read_time(); ?>
</div>

6、修改头部“投稿”按钮为矩形

打开 style.css文件,找到 #header .toggle-tougao,修改 border-radius: 10px;

7、修改专题小工具按钮为矩形

打开 style.css文件,找到 .widget_suxingme_topic li .title .meta span,修改 border-radius: 10px;

8、修改iPhonex首页标题字体大小

打开 style.css 文件,大致在 7656 行,找到 posts-gallery-content h2 ,修改即可

wpcom主题在 12040行,加入 font-size: 17px;

9、iPhonex响应式代码为:

@media screen and (max-width:767px) ,在7077行后面加入以下代码实现文章内容页响应式字体大小
.post-content p {
margin-bottom: 25px;
line-height: 1.8;
font-size: 17px;
word-wrap: break-word;
}

10、修改iPhonex文章页面摘要的字体大小

打开 style.css 文件,大致在 7946 行,找到 .post-content p.post-abstract ,修改即可

11、修改首页幻灯片2的图片宽度按

打开 Style.css文件,大致在 4663 行,找到 .top-slide-two .item .slider-content {

修改 height 的值即可。然后再 4813 行,找到 .top-singles .single-item .image {

修改 height 的值即可(右侧2张图片的高度)

12、WPCOM主题微博分享加入摘要

打开 single.php 文件,查找关键字 class="meta-item weibo" ,将整行代码修改如下:

<?php echo urlencode(mb_substr(get_the_excerpt(),0,28,'utf-8'))

13、WPCOM主题修改移动端文章内容字体为18px

打开style.css文件,在大约11997行找到 @media (max-width:767px) {,添加以下代码:

.entry .entry-content p {
	font-size: 18.5px;
	margin-bottom: 20px;
	margin-bottom: .2rem;
	line-height: 1.7
}