首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

要在自定义posts类型循环之前和之后插入的HTML代码

要在WordPress的自定义帖子类型循环之前和之后插入HTML代码,可以通过以下几种方法实现:

方法一:使用 pre_get_posts 钩子

pre_get_posts 钩子允许你在查询执行之前修改主查询。你可以使用这个钩子来检查当前查询是否是你想要修改的自定义帖子类型,并相应地插入HTML代码。

代码语言:txt
复制
function insert_custom_html_before_after_loop( $query ) {
    // 只在前端和主WordPress查询中运行此调整
    if ( ! is_admin() && $query->is_main_query() ) {
        // 检查当前查询是否是自定义帖子类型
        if ( is_post_type_archive( 'your_custom_post_type' ) || is_singular( 'your_custom_post_type' ) ) {
            // 在循环之前插入HTML
            echo '<div class="before-loop">这是循环之前的内容</div>';

            // 在循环之后插入HTML
            add_action( 'loop_end', function() {
                echo '<div class="after-loop">这是循环之后的内容</div>';
            });
        }
    }
}
add_action( 'pre_get_posts', 'insert_custom_html_before_after_loop' );

方法二:使用 the_postrewind_posts 钩子

另一种方法是在每个帖子循环开始之前和结束之后插入HTML代码。这可以通过 the_postrewind_posts 钩子来实现。

代码语言:txt
复制
function insert_html_before_after_each_post() {
    // 检查是否在自定义帖子类型的循环中
    if ( is_singular( 'your_custom_post_type' ) || is_post_type_archive( 'your_custom_post_type' ) ) {
        // 在每个帖子之前插入HTML
        add_action( 'the_post', function() {
            echo '<div class="before-post">这是每个帖子之前的内容</div>';
        });

        // 在每个帖子之后插入HTML
        add_action( 'rewind_posts', function() {
            echo '<div class="after-post">这是每个帖子之后的内容</div>';
        });
    }
}
add_action( 'pre_get_posts', 'insert_html_before_after_each_post' );

方法三:直接修改模板文件

如果你更喜欢直接编辑模板文件,可以在自定义帖子类型的归档模板(如 archive-your_custom_post_type.php)或单帖子模板(如 single-your_custom_post_type.php)中直接插入HTML代码。

代码语言:txt
复制
// 在 archive-your_custom_post_type.php 或 single-your_custom_post_type.php 文件中
<div class="before-loop">这是循环之前的内容</div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- 帖子内容 -->
<?php endwhile; ?>
<div class="after-loop">这是循环之后的内容</div>
<?php endif; ?>

优势和应用场景

  • 灵活性:使用钩子方法可以在不修改核心WordPress文件的情况下插入HTML代码,便于维护和升级。
  • 可重用性:通过函数封装,可以在多个地方重用相同的逻辑。
  • 适用性:适用于需要在特定帖子类型循环前后添加额外内容的各种场景,如广告、页眉页脚、通知等。

注意事项

  • 确保在插入HTML代码时考虑到页面布局和样式的影响。
  • 使用钩子时要小心不要干扰其他插件或主题的功能。

通过上述方法,你可以有效地在自定义帖子类型的循环之前和之后插入所需的HTML代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

第 12 篇:解锁博客侧栏,GoGoGo!

然后在这个文件夹下创建一个 __init__.py 文件,使这个文件夹成为一个 Python 包,之后在 templatetags\ 目录下创建一个 blog_extras.py 文件,这个文件存放自定义的模板标签代码...接下来就是编写各个模板标签的代码了,自定义模板标签代码写在 blog_extras.py 文件中。...装饰为 register.inclusion_tag,这样就告诉 django,这个函数是我们自定义的一个类型为 inclusion_tag 的模板标签。...{% endfor %} 很简单,循环由 show_recent_posts 传递的模板变量 recent_post_list 即可,和 index.html 中循环显示文章列表是一样的...{% endfor %} 使用自定义的模板标签 打开 base.html,为了使用刚才定义的模板标签,我们首先需要在模板中导入存放这些模板标签的模块,这里是 blog_extras.py

39310

页面侧边栏:使用自定义模板标签

然后在这个文件夹下创建一个 __init__.py 文件,使这个文件夹成为一个 Python 包,之后在 templatetags\ 目录下创建一个 blog_tags.py 文件,这个文件存放自定义的模板标签代码...接下来就是编写各个模板标签的代码了,自定义模板标签代码写在 blog_tags.py 文件中。...使用自定义的模板标签 打开 base.html,为了使用模板标签,我们首先需要在模板中导入存放这些模板标签的模块,这里是 blog_tags.py 模块。...recent_post_list 模板变量中,之后就可以通过 for 循环来循环显示文章列表数据了,这和我们在写首页视图时是一样的。...注意要在使用任何 blog_tags 下的模板标签以前导入它。 确保模板标签的语法使用正确,即 {% load blog_tags %},注意 { 和 % 以及 % 和 } 之间没有任何空格。

1.5K60
  • WordPress 自定义文章类型(Post Type)终极指南

    这样 WordPress 在初始化的时候,就会执行这个函数注册一个自定义 Post Type,因为调用 register_post_type() 的时候,必须要在 admin_menu action 之前...但是这样与文章类型基本相同,我们需要更多的自定义来完善我们的 Movie 类型。...把这些代码添加进 functions.php 文件之后,你的 Meta Box 就可以正常工作了。如果你需要更多表单,按照这个模式自定义表单结构,然后添加保存函数即可。...自定义的 Post Type 的内容不会自动混入主循环里面。那如何让自定义 Post Type 的内容显示出来?...post_type 数组就是要在主循环里面展示的内容,将你的自定义 Post Type 填写进去就可以在首页中显示出来了。

    3K20

    Next.js + TypeScript 搭建一个简易的博客系统

    不会请求重复的 HTML、CSS、JS。 自动在页面插入新内容,删除旧内容。 因为省了一些请求和解析过程,所以速度极快。 同构代码 什么是同构?...优点 减少代码开发量, 提高代码复用量。 一份代码能同时跑在浏览器和服务器,因此代码量减少了。 业务逻辑也不需要在浏览器和服务端同时维护,减小了程序出错的可能。...所以,我们在根目录新建 /assets 来放置静态资源,并且需要在 next.js 中配置 webpack。 根据官网,在根目录创建 next.config.js,自定义 webpack 配置。...next-images 很贴心地准备了图像模块的定义文件。 所以,我们只需要在 next-env.d.ts 文件中添加 next-images 类型的引用就好啦。...yarn build yarn start 打包之后,我们得到三种类型的文件: λ (Server) SSR 不能自动创建 HTML(等会再说) ○ (Static) 自动创建 HTML (发现你没用到

    3.9K20

    Next.js静态页面渲染技术(静态生成和服务端渲染):BSRSSRSSG

    自定义head:使用组件可自定义标签和内容组件导入。...同构代码:一份代码两端运行,在一处使用console.log调试,可在服务端和客户端页面都显示出log,这样更方便调试。...不同之处在于他们为页面生成HTML代码的时间客户端渲染(BSR)客户端渲染,顾名思义就是只在浏览器上执行的渲染,指用浏览器JS创建的HTML代码。...客户端渲染的缺点:白屏:在ajax得到响应之前,页面中之后Loading。...可以获取数据静态内容+数据(本地获取) 就得到了完整的页面代替了之前的 静态内容+动态内容(AJAX 获取)三种文件类型build 完成后,我们查看.next 文件里面,发现 posts.html、posts.js

    3.8K20

    WordPress自定义查询:WP_Query的使用

    wordpress默认会根据网址调用数据,不能满足我们所有建站要求,而WP_Query可以用于查询任何你想要的内容,相当于自定义数据调用。 wordpress的主循环 两段代码是等效的,为了保持代码的简洁性,WordPress 隐藏了全局的主循环变量 $wp_query。 WP_Query最基础用法 的字段) 和附件 ( 插入 / 上传媒体相册对话框中的数字), 但是不能对文章类型 'menu_order' 使用数字值 (默认都为 0)....//'meta_value_num' - 根据数字meta值排序 (2.8和以后的版本中可用). 同时需要注意'meta_key=keyname' 也要在查询中声明。...// 3.判断查询的结果,有内容则循环 if($query->have_posts()):while($query->have_posts()):$query->the_post(); ?

    1.4K20

    hexo-butterfly-首页改造

    afterbegin’:插入元素内部的第一个子节点之前。’beforeend’:插入元素内部的最后一个子节点之后。’afterend’:插入元素自身的后面。...default_descr text 【可选】默认文章描述 swiper_css url 【可选】自定义的swiper依赖项css链接 swiper_js url 【可选】自定义的swiper依赖项加js...,自定义创建插件 ​ 参数配置完成则选择“生成代码”选项,代码示例参考如下。...中的代码段写入自定义的hf_weather.js,随后在主题配置文件中inject配置注入自定义的hf_weather.js和官方提供的he-simple-common.js inject: bottom...,还可通过其他模块查看数据访问情况 5.hexo-magnet插件引入 ​ 最近正在把之前的一些碎碎念文章清理一波,顺便对文章进行一个比较清晰的分类,本篇参考小冰博客的hexo-magnet教程作说明

    1.4K20

    带你认识 flask 的模板

    循环 登录后的用户可能想要在主页上查看其他用户的最新动态,针对这个需求,我现在要做的是丰富这个应用来满足它。...我可以轻松地用HTML标记语言将导航栏添加到index.html模板上,但随着应用程序的增长,我将需要在其他页面重复同样的工作。...从本质上来讲,就是将所有模板中相同的部分转移到一个基础模板中,然后再从它继承过来。 所以我现在要做的是定义一个名为base.html的基本模板,其中包含一个简单的导航栏,以及我之前实现的标题逻辑。...您需要在模板文件app/templates/base.html中编写代码如下: html> {% if title %} {{ title...> 在这个模板中,我使用block控制语句来定义派生模板可以插入代码的位置。

    1K10

    Display Posts : 按条件显示WordPress文章的最强插件

    打个比方,内容就是你的菜品,有了很多菜品之后可以组合出各种套餐的菜单。Display Posts 就是这样一个可以帮助你灵活组合套餐的插件。 ?...WP 3.0+Requires 插件简介 介绍Display Posts插件之前,有必要先来看一下WordPress中比较重要的一个概念: WP_Query是定义于 wp-includes...使用的方法主要有两种: 可以通过在WordPress编辑器中插入短码的形式。...显示相对日期 显示效果如下: ---- WordPress 和 Vue.js 的学习资源推荐 1 month ago ---- 显示文章中的图片 如果你想把文章的特色图片实现出来,只需要在短码中增加一个参数...还可以综合使用目录和tag两种分类发和其他的操作符来进行复杂的查询,详见这里 自定义显示形式 这也属于高级用法之一了,默认是使用Html中的无序列表ul,你可以通过参数 wrapper="ol" 来改成有序列表

    3.6K10

    WordPress主题开发,从入门到精通。

    html5:HTML5支持。 custom-logo:自定义网站Logo图标。 custom-header-uploads:顶部图像上传。 custom-header:自定义网站顶部内容。...、脚本 wp_deregister_style(style) wp_dequeue_script(script) 6.文章相关函数 这些函数需要在循环中工作,因为它们需要全局 post 对象,WordPress...ID meta_key,代表需要更新的key meta_value,更新之后的值 prev_value,更新前的值,用户区分具有相对用户ID和key的数据,不指定时将更新所有数据 21.站点URL plugins_url...;(声明可以修改的选项) do_settings_sections( $page ),打印添加到特定设置页面的所有设置部分(HTML代码) submit_button( string text = null...获取指定状态类型文章的总数量; $count_posts = wp_count_posts(); if ( $count_posts ) { $draft_posts = $count_posts

    10.7K40

    编写自己的 WordPress 模板

    也许 你之前已经使用过它,但不知道如何从头开始制作主题。或者,也许你是一个完整的新手。无论如何,这篇文章是给你的。 先决条件:在我们开始之前, 你需要满足以下一组要求。...从技术上讲, 你自己创建了一个自定义主题。当然,它除了有一个空白的屏幕之外什么都不做。这是 index.php 开始行动的地方。 在文本编辑器中打开 index.php 并写入以下代码。 <!...; 为 HTML 定义内部的所有元和链接标签。...你的自定义 WordPress 主题的第一个外观已准备就绪。 循环 这是整个 WordPress 主题开发中最令人兴奋的部分, 你可以控制所有帖子。...循环本身是不言自明的。 posts() ) : while ( have_posts() ) : the_post(); ?> <!

    1.4K30

    用Publish创建博客(二)——主题开发

    html> 有些时候,感觉上Plot只是将每个函数直接映射到一个等效的HTML元素上——至少上面的代码看起来如此,但其实Plot还会自动插入许多非常有价值的元数据...Plot大量使用了Swift的高级泛型能力,不仅使采用原生代码编写HTML和XML成为可能,并在这一过程中实现了完全的类型安全。...这种高度的类型安全既带来了非常愉快的开发体验,也使利用Plot创建的HTML和XML文档在语义上正确的几率大大增加--尤其是与使用原始字符串编写文档和标记相比。...,可以使你以类型安全的方式构建真正灵活的主题,创建所需的文档和HTML页面。...和CSS的配合 主题代码定义了对应页面的基本布局和逻辑,更具体的布局、尺寸、色彩、效果等都要在CSS文件中进行设定。CSS文件在定义主题时指定(可以有多个)。

    1.2K20

    纵览全局垂直打击的组织模式(下)

    代码实现 hexo.extend.helper.register 文档说明,借助该函数,可以在Hexo渲染生成页面文件之前,完成用户的自定义JavaScript代码。...其实,在Hexo的框架内,ejs(或其他类型的)模板中的代码就是渲染生成html的代码,在这些页面中,借助Hexo内建的对象,比如.post对象和.achieves对象,可以访问到其中保存的全部文章信息及关联信息...(在渲染前构造、借助.post对象) 关于位置,在ejs模板中放置构造代码当然可以,但是不优雅,Hexo中建议的插入方式是: 在专门放置自定义JavaScript处理逻辑的文件中(plugin.js)放入代码...{"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1} ] } 即,需要在可视化页面被渲染出来之前就得到上述格式的数据,这便是要借助...Hexo的辅助函数来完成,将构造数据的代码封装成一个函数,然后在适当的ejs模板中调用一下,即可在 hexo generate 之后,从Console中拿到构造好的数据。

    93110

    Hexo主题(EJS模板)自定义页面扩展

    现在有时间刚好总结一下我对于 Hexo 做的一些自定义扩展,虽然之前可能在别的文章中或多或少的涉及了,但并没有统一整理过。 本人主题:Indigo,以下内容均基于此主题所写。...在构造时,这些模板文件每次都会重新生成对应文件,例如文章页面,就是对应的模板文件将编译后的 markdown 格式的文本填入 HTML 页面,同时也会插入进去其他东西(比如题目,尾注等等)。...找合适的文件插入实现上述功能的新函数,一般在主题的 plugin.js,之后以注册函数的形式完成代码实现 hexo.extend.helper.register('getTagsList', (archive...将上述新模板内容插入到原主题的对应位置内** ```html 和 Hexo 分离,加快每次的上传更新速度 其实这个问题适用于博客中所涉及的全部资源文件,包括头像、文章中插入的照片等等。

    2.3K30

    React 必学SSR框架——next.js

    通常同构渲染主要是为了: 利于 SEO 搜索引擎收录 加快首屏呈现时间 同时拥有单页(SPA)和多页路由的用户体验 前端同构就是:让一套javascript代码同时跑在服务端和客户端 为什么需要现代的前端同构框架...再之后的客户端渲染能够尽可能利用服务端带下来的数据。 便利的SSG(Static Site Generation)支持。...您也可以自定义此文件。 创建 next-env.d.ts 文件,以确保 TypeScript 编译器选择正确 Next.js 类型(types)。...** 越多引入,上线访问后加载的js就越多,特别是下面钩子函数要注意,不要引入多余代码 API API类型的路由约定在....getServerSideProps方法主要是升级了9.3之前的getInitialProps方法 9.3之前的getInitialProps方法有一个很大的缺陷是在浏览器中req和res对象会是undefined

    7.7K20

    Golang 持久化

    需要读取数据的时候,再载入文件,把数据读取到内存中。所写入的数据和创建的文件可以自定义,例如一个存文本,格式化文本,甚至是二进制文件都可以。无非就是编码写入,读取解码的两个过程。...(posts[0].Author) } 创建了文件句柄之后,使用csv的函数NewWriter创建一个可写对象,然后依次遍历数据,写入数据。...这样的设计还是很好,写代码逻辑的时候,不用考虑后端的具体数据库,即使迁移数据库类型的时候,也只需要迁移相应的驱动即可,而不用修改代码。更多关于数据库的用法,我们在后面再讨论。...执行sql后会返回一个result对象,后者有两个方法LastInsertId返回插入后记录的id值,RowsAffected返回影响的行数。 删 删除和插入类似,同样执行Exec方法即可。...() return } 迭代rows的过程中,如果因为循环内的代码执行问题导致循环退出,此时数据库连接池并不知道连接的情况,不会自动回收,因此需要手动指定rows.Close方法。

    2.6K90

    如何在 Django 中使用 MVT 创建一个基本项目?

    因此,让我们潜入并探索 Django 的 MVT 架构的世界! 先决条件 在使用 MVT 创建 Django 项目之前,请确保您具有以下先决条件: 蟒:确保在您的计算机上设置了 Python。...', {'posts': posts}) 步骤 7:创建模板 模板在定义 Django 中网页的结构和布局方面起着至关重要的作用。...在循环中,我们使用双花括号表示法 ({{ }}) 访问每篇博客文章的属性(标题、内容和created_at)。...随意自定义 HTML 结构并添加其他 CSS 类、格式或任何其他所需的元素来设置博客文章的外观样式。 通过创建此模板,您已经定义了博客文章在网页上的呈现方式。...相应的 Django 视图将使用这个模板,根据从数据库中检索的数据动态生成最终的 HTML 输出。 请记住在进行任何修改后保存“blog_posts.html”文件。

    30420

    结合 Bootstrap + Vue 组件实现 Laravel 异步分页功能

    在日常开发中,对数据库查询结果进行分页也是一个非常常见的需求,我们可以基于之前介绍的查询方法和前端 HTML 视图实现分页功能,不过从 Laravel 5.3 开始,Laravel 框架就已经为我们提供了非常完整的分页解决方案...SEO,如果你想要实现伪静态的分页链接,可以参考这篇教程:通过自定义分页器实现伪静态分页链接以利于 SEO。...定义后端 API 接口 由于我们要实现的是基于 Vue 的异步分页组件,所以我们需要在后端定义好分页数据获取 API 接口。...目前,我们在视图文件中没有编写任何可视化的代码,所有文章渲染和分页链接功能都将集成到 Vue 组件中完成,接下来,就让我们来编写这个 Vue 组件。...通过列表渲染显示分页数据和链接 在设置好 paginator 和 elements 属性值之后,就可以在模板中通过列表渲染和动态绑定显示文章信息和分页信息了,具体可以查看 template 标签中的代码

    7.4K20
    领券