《二十一世纪》主题：自定义页面标题下的左侧部分

时间：2017-06-22 作者：user1566515

我正在使用“2017年”主题，希望在页面标题下的左侧部分添加一幅图像和一些链接。我在网上到处搜索，但找不到好的解决方案。有没有办法在不创建自定义静态页面的情况下实现这一点？

3 个回复

最合适的回答,由SO网友:Andrii Shekhirev 整理而成

似乎没有任何特定的函数可供挂钩，因此后端解决方案需要更改“/模板部件/page/content-page.php”模板文件（通过child theme, 最好是），即在结束之前添加所需的元素</header> 标记，例如：

<header class="entry-header">
    <?php the_title( \'<h1 class="entry-title">\', \'</h1>\' ); ?>
    <?php twentyseventeen_edit_link( get_the_ID() ); ?>
    <!-- START new code -->
    <img src="http://image-source.jpg">
    <span class="left-text">Insert your text here</span>
    <!-- END new code -->
</header><!-- .entry-header -->

如果希望在特定页面上显示新内容，也可以添加条件语句，例如，对于首页：

<!-- START new code -->
<?php if ( is_front_page() ) { ?>
    <img src="http://image-source.jpg">
    <span class="left-text">Insert your text here</span>
<?php } ?>
<!-- END new code -->

对于特定的页面ID：

<!-- START new code -->
<?php if ( 25 == get_the_ID() ) { ?>
    <img src="http://image-source.jpg">
    <span class="left-text">Insert your text here</span>
<?php } ?>
<!-- END new code -->

SO网友:Jevuska

如果与the_title, 您可以使用过滤器the_title, 但基于页面模板的217个主题代码，您的自定义代码将在其中进行标记h1 要素the_title( \'<h1 class="entry-title">\', \'</h1>\' );

例如代码，只需说我们只需要在post id=2的页面中添加

add_filter( \'the_title\', function( $title, $id ) {
    static $i;

    //add conditional page and in loop, i.e post id = 2
    if ( is_page( 2 ) && in_the_loop() ) {
        $i++;

        //add conditional for filter position
        if ( 1 === $i ) {

            //add your code here
            $title .= \'<p><img src="image.jpg"></p>\';
            $title .= \'<p>\' . __( \'Text\', \'textdomain\' ) . \'</p>\';
            $title .= \'<p><a href="#link">\' . __( \'Link\' ) . \'</a></p>\';
        }
    }

    return $title;
}, 10, 2 );

只需更改条件语句，即可在其他帖子或页面中使用。

SO网友:Paul Burilichev

我认为最明显的方式是javascript，它将在页面加载后使用。顺便说一下，WP包含了jQuery，因此您可以：

创建样式以实现清晰的两列设计（或者使用现有的样式表，如果您使用的是类似引导的样式表，我假设您的WP使用它）

找到要左移的html块并分配.column 类到it.row.

使用jQuery创建一个新元素，其中包含应显示的图像和其他内容.row 从第2点开始

就是这样。请随时询问有关此主题的详细信息。

结束

标签： theme-twenty-seventeen 小码农

《二十一世纪》主题：自定义页面标题下的左侧部分

时间：2017-06-22 作者：user1566515

3 个回复

最合适的回答,由SO网友:Andrii Shekhirev 整理而成

<header class="entry-header">
    <?php the_title( \'<h1 class="entry-title">\', \'</h1>\' ); ?>
    <?php twentyseventeen_edit_link( get_the_ID() ); ?>
    <!-- START new code -->
    <img src="http://image-source.jpg">
    <span class="left-text">Insert your text here</span>
    <!-- END new code -->
</header><!-- .entry-header -->

如果希望在特定页面上显示新内容，也可以添加条件语句，例如，对于首页：

<!-- START new code -->
<?php if ( is_front_page() ) { ?>
    <img src="http://image-source.jpg">
    <span class="left-text">Insert your text here</span>
<?php } ?>
<!-- END new code -->

对于特定的页面ID：

<!-- START new code -->
<?php if ( 25 == get_the_ID() ) { ?>
    <img src="http://image-source.jpg">
    <span class="left-text">Insert your text here</span>
<?php } ?>
<!-- END new code -->

SO网友:Jevuska

例如代码，只需说我们只需要在post id=2的页面中添加

add_filter( \'the_title\', function( $title, $id ) {
    static $i;

    //add conditional page and in loop, i.e post id = 2
    if ( is_page( 2 ) && in_the_loop() ) {
        $i++;

        //add conditional for filter position
        if ( 1 === $i ) {

            //add your code here
            $title .= \'<p><img src="image.jpg"></p>\';
            $title .= \'<p>\' . __( \'Text\', \'textdomain\' ) . \'</p>\';
            $title .= \'<p><a href="#link">\' . __( \'Link\' ) . \'</a></p>\';
        }
    }

    return $title;
}, 10, 2 );

只需更改条件语句，即可在其他帖子或页面中使用。

SO网友:Paul Burilichev

我认为最明显的方式是javascript，它将在页面加载后使用。顺便说一下，WP包含了jQuery，因此您可以：

创建样式以实现清晰的两列设计（或者使用现有的样式表，如果您使用的是类似引导的样式表，我假设您的WP使用它）

找到要左移的html块并分配.column 类到it.row.

使用jQuery创建一个新元素，其中包含应显示的图像和其他内容.row 从第2点开始

就是这样。请随时询问有关此主题的详细信息。

标签： theme-twenty-seventeen 小码农

小码农CODE

《二十一世纪》主题：自定义页面标题下的左侧部分

相关推荐

小码农CODE

《二十一世纪》主题：自定义页面标题下的左侧部分

相关推荐