小编Cra*_*ray的帖子

通过Bootstrap4订购列

我有3列,我想在桌面和移动设备上以不同的方式订购.目前,我的网格看起来像这样:

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在移动视图中,我想要输出以下内容:

1-3-2
Run Code Online (Sandbox Code Playgroud)

不幸的是,我没有得到如何使用Bootstrap 4中的.col-md-push-*.col-md-pull-*类来解决这个问题.

css grid bootstrap-4

62
推荐指数
3
解决办法
8万
查看次数

使用推/拉和col-md-12在Bootstrap 4中进行色谱柱排序

col-md-12每个班级我都有两列.

在桌面视图中,它们应显示为:

Col **1** 
Col **2**
Run Code Online (Sandbox Code Playgroud)

在移动视图中,应显示如下:

Col **2**
Col **1**
Run Code Online (Sandbox Code Playgroud)

甚至可以通过Bootstrap的列排序来实现这一点吗?

我目前的代码:

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

14
推荐指数
2
解决办法
4万
查看次数

如何在WordPress的"wp_nav_menu"子菜单中将类和元素添加到<a> -tag?

我想在子菜单的a-tag和链接中的b-tag中添加一个类.

WordPress给了我这个代码:

<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page dropdown menu-item-72"><a href="#">Link</a><ul class="dropdown-menu">
Run Code Online (Sandbox Code Playgroud)

我想要这个:

<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page dropdown menu-item-72"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a><ul class="dropdown-menu">
Run Code Online (Sandbox Code Playgroud)

有人知道解决方案吗?

wordpress

6
推荐指数
2
解决办法
2万
查看次数

WordPress:使用meta_query排除帖子 - 并非每个帖子都有meta_field

我想排除每个具有自定义元字段特定值的帖子。问题是,并不是每个帖子都有这个元字段。

我的代码如下所示(工作循环摘录):

// WP_Query arguments
        $args = array (
            'post_parent'   => $parentid,
            'orderby'       => 'menu_order',
            'order'         => 'ASC',
            'post_type'     => array( 'page' ),
            'meta_query' => array(
                array(
                    'key' => 'hide',
                    'value' => 1,
                    'compare' => '!='
                )
            )
        );
Run Code Online (Sandbox Code Playgroud)

并非每个帖子都使用“隐藏”字段。有些帖子返回 NULL。所以我认为,循环因此不起作用?!

它是否正确?每个帖子都必须有该键的值吗?

php wordpress custom-fields

6
推荐指数
3
解决办法
4094
查看次数

删除 Bootstrap 4 Collapse 元素的过渡和延迟

我想删除 Bootstrap 4 Collapse 元素的过渡和延迟。我正在使用 CSS 来删除过渡本身:

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

#collapseExample {background: red;}
Run Code Online (Sandbox Code Playgroud)

那部分工作正常。但在折叠元素显示之前仍有一些延迟。有什么办法可以去除它吗?

这是 HTML:

导航栏

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
  <li class="nav-item"> …
Run Code Online (Sandbox Code Playgroud)

html javascript css bootstrap-4

6
推荐指数
1
解决办法
7582
查看次数

在 WooCommerce 档案中的产品行之间添加内容

我想在产品类别的第三个产品(也许是第六个、第九个......)之后显示一些内容。并非每个类别都有额外的内容或相同数量的内容。所以应该是灵活的。

我找到了一个使用以下代码的示例:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'template-parts/content' ); ?>    
        <?php if ( $wp_query->current_post == 1 ) { ?>
             <div>Put Ad Here</div>
        <?php } ?>    
<?php endwhile; endif; ?>
Run Code Online (Sandbox Code Playgroud)

我将该代码添加到我的代码中,archive-product.php如下所示:

if ( wc_get_loop_prop( 'total' ) ) {
    while ( have_posts() ) {
        the_post();

        /**
         * Hook: woocommerce_shop_loop.
         */
        do_action( 'woocommerce_shop_loop' );

        wc_get_template_part( 'content', 'product' );

        if ( $wp_query->current_post == 1 ) { 
            echo '<div>Put Ad Here</div>';
        } …
Run Code Online (Sandbox Code Playgroud)

php wordpress product categories woocommerce

6
推荐指数
1
解决办法
3773
查看次数

WordPress:将 do_action 的输出保存在变量中

我想将 do_action 的输出保存在一个变量中以供以后使用。我怎样才能保存这些输出?

wordpress hook action function

5
推荐指数
1
解决办法
3120
查看次数

WordPress:按自定义日期字段排序WP_Query,并在每个月后拆分循环

我正在使用WordPress自定义帖子类型来管理和显示我网站上的活动.要对事件进行排序我正在使用带有日期的自定义元字段(存储方式如下:YYYY-MM-DD).我检查当前日期的元字段.像这样:

$current_date_query = date ('Y-m-d');

$temp = $wp_query; $wp_query= null; $wp_query = new WP_Query();

$wp_query->query(
    array(
       'post_type' => 'event',
       'meta_key' => 'event_date',
       'meta_compare' => '>=',
       'meta_value' => $current_date_query,
       'post_status' => 'publish',
       'posts_per_page' => '99',
       'orderby' => 'meta_value',
       'order' => 'ASC',
       'paged' => $paged
    )
); ?>


... Loop stuff ...

<?php endif; $wp_query = null; $wp_query = $temp; wp_reset_query(); ?>
Run Code Online (Sandbox Code Playgroud)

我现在想在每个新月之前添加标题.像这样:

2018年1月

  • 活动1
  • 活动2
  • 活动3

2018年2月

  • 活动4
  • 活动5

2018年3月

  • 活动5

等等...

有没有办法在每个月之后拆分循环?我想我必须使用meta领域的月份,但我不知道如何.

我尝试了以下解决方案(感谢@FluffyKitten的评论):

<?php

/* declare an array to save …
Run Code Online (Sandbox Code Playgroud)

php wordpress wordpress-theming

5
推荐指数
1
解决办法
2880
查看次数

Bootstrap:使用单个选项卡导航控制多个选项卡面板

我想用一个标签导航控制两个不同的标签内容。

在 Bootstra 3 中,我有一个以逗号分隔的数据目标的解决方案(如本例中所示:https : //stackoverflow.com/a/19719859/1788961)。

但是在 Bootsrap 4 中,这种方式不再适用于选项卡。

折叠组件可以处理多个目标,但我不能将它用于选项卡:https : //getbootstrap.com/docs/4.0/components/collapse/#multiple-targets

有没有其他方法可以做到这一点?

这是我的代码:

<div class="B">
    <div class="container">

        <div class="tab-content" id="ueberTabA">
            <div class="tab-pane fade" id="panel_a_first" role="tabpanel" aria-labelledby="first-tab">
                A First 
            </div>
            <div class="tab-pane fade show active" id="panel_a_second" role="tabpanel" aria-labelledby="second-tab">
                A Second
            </div>
            <div class="tab-pane fade" id="panel_a_third" role="tabpanel" aria-labelledby="third-tab">
                A Third
            </div>
        </div>
    </div>
</div>

<div class="container">
    <ul class="nav nav-tabs" id="ueberTab" role="tablist">
        <li class="nav-item"><a class="nav-link" id="first-tab" data-target="#panel_b_first, #panel_a_first" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="false">first</a></li>
        <li class="nav-item"><a class="nav-link active" …
Run Code Online (Sandbox Code Playgroud)

css jquery twitter-bootstrap bootstrap-4 bootstrap-5

5
推荐指数
1
解决办法
1万
查看次数

在光滑的滑块中显示instagram风格的点

我正在使用光滑的滑块显示很多滑块项目。我还需要使用点来显示项目的位置。目前,有很多点,我想像instagram一样显示这些点。

这是我的意思:

在此处输入图片说明

始终应最多可见6个点。从左侧的第一个开始。

有没有办法解决中间的四个点?目前,我只能通过class来访问活动点slick-active。但是我需要活动点之前和之后的点。

这是我实际的滑块代码:https : //codepen.io/cray_code/pen/ZrKpWY

css jquery twitter-bootstrap slick.js bootstrap-4

5
推荐指数
1
解决办法
3888
查看次数