如何将每个“the_content”元素绑定到一个自定义变量

时间:2019-10-03 作者:Art4k

我正在wordpress中实现bootstrap主题,我需要您的帮助。在Wordpress中,我创建了一个包含段落和3个项目列表的简单页面。

产品列表一

在bootstrap的帮助下,我正在尝试集成accordion (collapsible content) 进入Wordpress页面。但我不明白如何从the_content(); 进入特定div. 我想我需要将apply\\u filters与foreach一起使用,为每个段落/列表创建一个新的div?

示例我试图实现的目标-https://jsfiddle.net/ufr49jg2/

1 个回复
最合适的回答,由SO网友:Antti Koskinen 整理而成

正如majick在评论中建议的那样,您可以使用一个短代码来创建手风琴标记。

如果要手动定义选项卡标题和内容,可以向函数中添加类似的内容。php。

add_shortcode( \'accordion\', \'accordion_callback\' );
function accordion_callback( $args, $content ) {

  $defaults = array(
    \'id\' => \'exampleAccordion\'
  );
  $args = shortcode_atts( $defaults, $args, \'accordion\' );

  return sprintf(
    \'<div id="%s" class="accordion">%s</div>\',
    $args[\'id\'],
    do_shortcode($content)
  );  
}

add_shortcode( \'accordion_tab\', \'accordion_tab_callback\' );
function accordion_tab_callback( $args, $content ) {

  $defaults = array(
    \'title\' => \'Default tab title\',
  );
  $args = shortcode_atts( $defaults, $args, \'accordion_tab\' );

  $tab_heading = \'<div class="card-header">\' . $args[\'title\'] . \'</div>\';
  $tab_content = \'<div class="collapse">\' . $content . \'</div>\';

  return \'<div class="card">\' . $tab_heading . $tab_content . \'</div>\';
}
然后在帖子内容中使用这些,

[accordion id="my-accordion"]
[accordtion_tab title="Tab 1"]Tab 1 content[/accordtion_tab]
[accordtion_tab title="Tab 2"]Tab 2 content[/accordtion_tab]
[/accordion]
或者,如果选项卡内容由单独的帖子组成,则可以将帖子ID作为shortocde参数传递,并基于找到的帖子数据构建手风琴标记。例如

add_shortcode( \'accordion_products\', \'accordion_products_callback\' );
function accordion_products_callback( $args ) {

  $defaults = array(
    \'products\' => \'\'
  );
  $args = shortcode_atts( $defaults, $args, \'accordion_products\' );

  $products = explode( \',\', $args[\'products\'] );
  $products = array_map(\'absint\',$products);

  $accordion = \'\';
  foreach ( $products as $product_id ) {
    // get product data, e.g get_post(), or wc_get_product() if working with WooCommerce
    // create tab html
    // concat html to $accordion
  }

  return $accordion; 
}
然后使用这样的短代码,

[accordion_products products="1,2,3,4,5"]
此选项的一个变体是使用(自定义)分类术语对帖子进行分组,其中每个术语代表一个手风琴。然后将其中一个术语的ID作为快捷码参数传递,并根据术语ID查询帖子。

N.B. 以上示例已简化,您应该仅将其用作起点,并对其进行修改以满足您的确切需要。但是,如果您在开发解决方案时遇到任何问题,请随时向WPSE发布新问题。