Tabla de contenidos
这里有一些有用的代码片断。它们是我使用的函数、过滤器和CSS，或者在某个时间点上需要的模板。
创作新闻我使用的和 我建议.他们中的一些人已经从你的 支持论坛他是一个取之不尽的解决方案的来源，从他的 文件以及其他来自支持查询和搜索的信息。
在发布日期旁边的帖子中显示更新日期和时间
该过滤器显示GeneratePress条目中的更新日期和时间。这取决于你在设置/通用/日期格式/自定义中如何配置日期。
在这里使用的情况下，它看起来像这样：d/m/Y : H:i
/* Fecha y Hora de PUBLICADO Y ACTUALIZADO EN META POST */
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
if ( get_the_date() !== get_the_modified_date() ) {
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Publicado: %2$s</time> | <time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Actualizado: %4$s | </time>';
}
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);
return sprintf( '<span class="posted-on">%s</span> ',
$time_string
);
}, 10, 2 );只显示档案小部件中的年份。
这个函数将使档案小部件下拉菜单只显示年份而不是月份。它适用于任何模板，因为它作用于一个原生的WordPress小工具。如果你的博客非常老，而且下拉的月份已经太长，那就很有用。在这个例子中，它显示的是已发表文章的数量。
function my_limit_archives( $args ) {
$args['type'] = 'yearly';
return $args;
}
add_filter( 'widget_archives_args', 'my_limit_archives' );
add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' );
简单读取进度条，无需插件
有几个插件可以在WordPress中添加阅读进度条，也有Elementor的插件，但只要用一点代码和来自GeneratePress的Elements的过滤器，就可以很容易地使它变得更加轻巧。这段代码来自 索姆纳特-萨胡.
*在这个例子中，你需要使用GeneratePress高级 版。
首先我们创建一个 用元素过滤用这个代码。
<div class="progress-container">
<div class="progress-bar" id="myProgressBar"></div>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myProgressBar").style.width = scrolled + "%";
}
</script>我们用wp_head位置设置它，并让它显示在Post/All Posts中。
/* Barra de progreso de lectura */
.progress-container {
width: 100%;
height: 8px; /* Ancho del contenedor de la barra de progreso */
background: #ccc; /* Color del contenedor sobre el que se mueve la barra de progreso */
}
.progress-bar {
height: 8px; /* Ancho de la barra de progreso */
background: #a70404; /* Color de la barra de progreso */
width: 0%;
position:fixed;
z-index:999;
}而这是将颜色改为绿色后，这段代码的显示方式。
进度条将出现在顶部，它将在阅读过程中陪伴我们，当我们向下滚动时，它将增加，如果我们向上滚动，它将减少。
只在一个特定的页面上改变标志
我有一次需要这个，当时我在《中国日报》的页面上发现了它。 大卫-拉瑙.这个过滤器只在你指定的页面上显示不同的标志，我用它在一个将特定主题的内容分组的分类页面上显示不同的标志。
add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
// Si por ejemplo estamos en la página servicios, vamos a poner nuestro logo personalizado para esta página
if ( is_page( 'servicios' ) )
return 'PON LA URL DEL LOGO AQUÍ';
// Y SI NO, PON EL LOGO GENERAL
return $logo;
}在移动版中隐藏手扶栏
如果你是那些仍然使用侧边栏的人，并且已经免除了 AMP页面如果你使用GeneratePress的原生移动版的侧边栏，通过这个CSS，你可以只在移动版隐藏它。
在这种情况下，你可以把它添加到你的子主题的样式表中，或从自定义/附加CSS中。
隐藏右边的侧边栏
@media(max-width: 768px) {
#right-sidebar {
display: none;
}
}
隐藏左边的侧边栏
@media(max-width: 768px) {
#left-sidebar {
display: none;
}
}隐藏两者
@media(max-width: 768px) {
#right-sidebar, #left-sidebar {
display: none;
}
}
在循环的左右两边显示特色图片
如果你使用一个 模板 传统的GeneratePress如Marketer或类似的，用这个代码可以在循环中左右交替显示特色图片。
.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
margin-left: 2em;
float: right;
text-align: right;
}我在以下网站找到了这个代码 aquigeneratepress.com在那里你可以找到其他有用的技巧。而这就是结果。
定制 "阅读更多 "按钮
如上所述，这个CSS是用于 "阅读更多 "按钮。这是我在这里使用的，并把它放在首页摘录下面的右边。
a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}条目分页的风格设计
一个过滤器和一点CSS，就可以在首页的文章分页中获得这种外观。从这里，你可以尽情地调整它。
我们需要做的第一件事是用<<和>>符号替换上一页和下一页，你可以在你的子主题的function.php中添加这个过滤器，或者用Code Snippet。
add_filter( 'generate_next_link_text', function() {
return '>>';
} );
add_filter( 'generate_previous_link_text', function() {
return '<<';
} );然后是CSS，添加方式与前面的情况相同
#nav-below {
text-align: center;
.paging-navigation .nav-links>* {
font-size: 20px;
padding: 7px 10px;
background-color: #b50707;
color: white;
border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
background: red;
color: #ffffff;
}
a.next.page-numbers > span {
display: none;
}浏览器框的中心化
原生的GeneratePress搜索框有点蹩脚，这里有一点CSS来适应设备并将其置于中心。
/* Centrar caja de búsqueda en menú principal */
form.search-form.navigation-search.nav-search-active {
width:50%;
left:50%;
transform:translateX(-50%)
}
/* Responsive caja de búsqueda en móvil - tablet y PC */
@media (max-width: 768px) {
/* CSS para móvil */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS para tablet */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
.inside-navigation {
align-items: flex-end !important;
flex-direction:column-reverse;
}
}
@media (min-width: 1025px) {
/* CSS para PC */
form.search-form.navigation-search.nav-search-active {
width:40%;
left:50%;
transform:translateX(-50%)
}
}
类别和标签文本大小
如果你在文章下面显示分类和标签，通过添加这个CSS，你可以改变大小，并不断添加CSS，使其成为你想要的样式。所有修改它们的类都可以在文档或CSS本身中找到，但如果你不想把事情复杂化，就在这里。
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 20px;
}
.entry-meta .tags-links a {
padding: 3px 1px;
font-size: 20px;
}动画的下划线链接
CSS可以为你的文本链接创建一个动画效果，就像你在下面的GIF中看到的那样。
/* Subrayado de enlace animado con color de fondo */
p a{
font-weight: bold;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fdede7), to(#fdede7));
background-image: linear-gradient(to bottom, #fdede7 0%, #fdede7 100%);
background-repeat: no-repeat;
background-size: 100% 00%;
background-position: 0 111%;
-webkit-transition: background-size .25s ease-in;
transition: background-size .25s ease-in;
padding-left: 2px;
padding-right: 2px;
border-bottom: 2px solid #ec4911;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
p a:hover{
background-size: 100% 100%;
}在background-image和border-bottom中，你可以改变颜色。
你必须观察段落、按钮和其他包含链接的元素中的行为，以便调整它，使之没有任何不妥之处。
该代码为 Kyle Van Deusen 除了 The Admin Bar, 有一个有趣的博客，名为 Generatetweaks 在那里，他发布了一些奇怪的代码和GeneratePress和GenerateBloks的模板，比如说这个模板 黑暗模式 为GP和GB。
