11个用于GeneratePress的有用代码

 
 

这里有一些有用的代码片断。它们是我使用的函数、过滤器和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' );
10个用于GeneratePress的有用代码

简单读取进度条,无需插件

有几个插件可以在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中。

11个用于GeneratePress的有用代码
要显示它,只需在下面添加这个CSS 你的子主题或在 “自定义/附加CSS “中,并根据你的博客进行调整。
/* 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;
}

而这是将颜色改为绿色后,这段代码的显示方式。

进度条将出现在顶部,它将在阅读过程中陪伴我们,当我们向下滚动时,它将增加,如果我们向上滚动,它将减少。

11个用于GeneratePress的有用代码

只在一个特定的页面上改变标志

我有一次需要这个,当时我在《中国日报》的页面上发现了它。 大卫-拉瑙.这个过滤器只在你指定的页面上显示不同的标志,我用它在一个将特定主题的内容分组的分类页面上显示不同的标志。

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在那里你可以找到其他有用的技巧。而这就是结果。

11个用于GeneratePress的有用代码

定制 “阅读更多 “按钮

如上所述,这个CSS是用于 “阅读更多 “按钮。这是我在这里使用的,并把它放在首页摘录下面的右边。

a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}

条目分页的风格设计

一个过滤器和一点CSS,就可以在首页的文章分页中获得这种外观。从这里,你可以尽情地调整它。

11个用于GeneratePress的有用代码

我们需要做的第一件事是用<<>>符号替换上一页和下一页,你可以在你的子主题的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%)
    }
}
11个用于GeneratePress的有用代码

类别和标签文本大小

如果你在文章下面显示分类和标签,通过添加这个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中看到的那样。

11个用于GeneratePress的有用代码

/* 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。


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados