10个用于GeneratePress的有用代码

 
  • ES
  • JA
  • PT
  • RU
  • FR
  • EN
  • 这里有一些有用的代码片断。它们是我使用的函数、过滤器和CSS,或者在某个时间点上需要的模板。 创作新闻我使用的和 我建议.他们中的一些人已经从你的 支持论坛他是一个取之不尽的解决方案的来源,从他的 文件以及其他来自支持查询和搜索的信息。

    在发布日期旁边的帖子中显示更新日期和时间

    该过滤器显示GeneratePress条目中的更新日期和时间。这取决于你在设置/通用/日期格式/自定义中如何配置日期。在这里使用的情况下,它看起来像这样:d/m/Y : H:i

    add_filter( 'generate_post_date_output', function( $output, $time_string ) {
        $time_string = '' 。
    
        if ( get_the_date() !== get_the_modified_date() ) {
            $time_string = ' | ' 。
        }
    
        $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( '%s ' 。
            $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中。

    10个用于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;
    }

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

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

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

    10个用于GeneratePress的有用代码

    定制 “阅读更多 “按钮

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

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

    条目分页的风格设计

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

    10个用于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%)
        }
    }
    10个用于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;
    
    }


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