[网页]:创建文摘集(诗篇)专栏-DeepWiki

11次阅读
没有评论

1️⃣ 要改的文件

  • 文件路径:wp-content/themes/puock/pages/template-archives.php
  • 我们要把它复制一份,命名为 template-digest.php,然后修改里面的几行。

2️⃣ 复制文件

  • 用文件管理器/FTP/主机面板文件管理,进入 wp-content/themes/puock/pages/
  • 复制 template-archives.php,粘贴为 template-digest.php

3️⃣ 修改 template-digest.php(逐行对照)

打开 template-digest.php,按下面修改(只改这几处,其他别动):

行号 原内容 改为
3 Template Name: 文章归档 Template Name: 文摘集(诗篇)
5 $posts = get_posts('numberposts=-1&orderby=post_date&order=DESC'); $posts = get_posts(['numberposts'=>-1,'orderby'=>'post_date','order'=>'DESC','category__in'=>[get_cat_ID('文摘')]]);
26 <div id="page-archives"> <div id="page-digest" class="poetry-digest">
33–50 整体替换

完整替换块(33–50 行)

                        <div class="poems-list">  
                            <?php foreach ($posts as $post): setup_postdata($post) ?>  
                                <article class="poem-card">  
                                    <h3 class="poem-title"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>  
                                    <div class="poem-meta"><?php echo get_the_date(); ?> · <?php the_category(', ') ?></div>  
                                    <div class="poem-excerpt"><?php echo wp_trim_words(get_the_excerpt(), 30); ?></div>  
                                </article>  
                            <?php endforeach; wp_reset_postdata() ?>  
                        </div>

以上修改依据:原模板结构使用 id="page-archives" 和 timeline 列表 template-archives.php:26-27 ;我们改为独立 ID 与卡片列表,避免样式冲突。

4️⃣ 保存文件

  • 保存 template-digest.php 并上传到原位置(覆盖)。

5️⃣ 在后台粘贴 CSS(无需编译)

  • 进入 WordPress 后台 → 外观 → 自定义 → 附加 CSS。
  • 粘贴以下 CSS 并发布:
.poetry-digest {  
  padding: 2rem 1rem;  
  background: var(--pk-bg-body);  
  text-align: center;  
}  
.poems-list {  
  max-width: 680px;  
  margin: 0 auto;  
}  
.poem-card {  
  background: var(--pk-bg-box);  
  padding: 2rem 1.5rem;  
  margin-bottom: 2rem;  
  border-radius: 4px;  
  box-shadow: 0 2px 8px var(--pk-c-block-shadow);  
  transition: all 0.3s;  
  position: relative;  
  text-align: left;  
}  
.poem-card:hover {  
  transform: translateY(-3px);  
  box-shadow: 0 4px 12px var(--pk-c-block-shadow);  
}  
.poem-card:not(:last-child):after {  
  content: '❦';  
  display: block;  
  text-align: center;  
  color: var(--pk-c-sub);  
  margin-top: 2rem;  
  font-size: 1.2rem;  
}  
.poem-title {  
  font-size: 1.5rem;  
  font-family: Georgia, serif;  
  margin: 0 0 0.5rem;  
}  
.poem-title a {  
  color: var(--pk-c-font);  
  text-decoration: none;  
  transition: color 0.3s;  
}  
.poem-title a:hover {  
  color: var(--pk-c-primary);  
}  
.poem-meta {  
  font-size: 0.85rem;  
  color: var(--pk-c-sub);  
  margin-bottom: 1rem;  
}  
.poem-excerpt {  
  font-family: Georgia, serif;  
  line-height: 1.8;  
  color: var(--pk-c-font);  
}  
.poem-excerpt::first-letter {  
  font-size: 2.2em;  
  float: left;  
  line-height: 1;  
  margin-right: 0.1em;  
  color: var(--pk-c-primary);  
}

这些样式只作用于 .poetry-digest 内的元素,不会影响其他页面 。

6️⃣ 创建页面并选择模板

  • WordPress 后台 → 页面 → 新建页面,标题填“文摘集(诗篇)”。
  • 右侧“页面属性 → 模板”下拉,选择“文摘集(诗篇)”。
  • 发布页面,即可访问。
正文完
 0
评论(没有评论)