在WordPress文章中添加小工具

虽然目前WordPress区块编辑器,可以在正文中添加任意区块,包括区块小工具,但想在所有文章中添加一个固定的内容,每次还是需要手动添加区块,文本分享一段代码,可实现在WordPress文章中添加一个固定的,与正常侧边栏一样的小工具,方便使用。文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html

效果演示文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html

将下面代码添加到当前主题函数模板functions.php中:文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html

展开收缩
文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html
// 添加小工具
if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name'          => '正文小工具',
		'id'            => 'inline-content',
		'description'   => '用于在正文中添加小工具',
		'before_widget' => '<aside id="%1$s" class="widget inline-content %2$s">',
		'after_widget'  => '<div class="clear"></div></aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	));
}

// 添加到正文第二个段落下面,修改数字2可调整位置
add_filter( 'the_content', 'insert_content_filter' );
function insert_content_filter( $content ) {
	ob_start();
	$sidebar = dynamic_sidebar('inline-content');
	$new_content = ob_get_clean();
	if ( is_single() && ! is_admin() ) {
		return insert_content( $new_content, 2, $content );
	}
	return $content;
}

// 添加到正文段落中
function insert_content( $new_content, $paragraph_id, $content ) {
	$closing_p = '</p>';
	$paragraphs = explode( $closing_p, $content );
	foreach ($paragraphs as $index => $paragraph) {
		if ( trim( $paragraph ) ) {
			$paragraphs[$index] .= $closing_p;
		}
		if ( $paragraph_id == $index + 1 ) {
			$paragraphs[$index] .= $new_content;
		}
	}
	return implode( '', $paragraphs );
}

文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html

之后进入小工具设置页面会发现新增“正文小工具”,与正常侧边栏操作一样添加小工具。文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html

最后可以针对自己的主题适当给这个小工具添加样式:文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html

.inline-content {
	border: 1px solid #666;
}

默认是添加到正文第二个段落下面,可以根据情况调整小工具插入位置,修改数字2,代码有注释。文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html

文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html

在WordPress文章中添加小工具文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html

在WordPress文章中添加小工具

文章源自知更鸟-https://zmingcx.com/add-widgets-to-wordpress-posts.html
文章源自知更鸟 | 崇尚专注 追求极致 分享交流WordPress经验与技巧,关注前端设计与网站制作,打造自己专属的WordPress主题,让你的博客与众不同!
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
让 WordPress 页面支持添加分类及标签 WordPress

让 WordPress 页面支持添加分类及标签

默认WordPress页面不支持选择分类和添加标签,可以通过下面的方法为页面添加分类及标签。 将下面代码添加到当前主题函数模板functions.php中: function san_add_taxo...
自定义 WordPress 文章显示数量 WordPress

自定义 WordPress 文章显示数量

一般我们都在设置 → 阅读 → 博客页面至多显示中,统一设置每个页面的文章显示数量,如果想某些页面自定义显示数量,不受这个控制,可以通过下面的代码实现。 自定义 WordPress 文章显示数量 将下...
WordPress 在文章页以标签云形式显示文章标签 WordPress

WordPress 在文章页以标签云形式显示文章标签

大家都看过WordPress 标签小工具的标签云,标签按文章数显示不同的大小,看上去很生动,那么在文章页面是否也可以用标签云的形式调用该文章标签呢?当然是可以的。 WordPress 在文章页以标签云...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定

评论:1   其中:访客  1   博主  0
    • WordPress新手学园
      WordPress新手学园 2

      这个需求很特殊啊,如果文章内部引用小工具,它的CSS样式有点不合适了