Question

当我将其设置在标题下方时，我无法理解为什么我的字幕出现在内容的顶部

$output .= '<article class="' . esc_attr( $columns ) . '" data-categories="' . trim( $data_categories ) . '" >';    
if( $post_thumbnail_img ) { 
    $output .= '<a href="' . $permalink . '" title="' . get_the_title() . '"' . $lightbox_class . '>';
    $output .= '<img src="' . $post_thumbnail_img[0] . '" alt="' . $post_thumbnail_data['alt'] . '" class="entry-image ' . $post_thumbnail_data['class'] . '">';        
    $output .= '</a>';  
}

$output .= '<a href="' . get_permalink() . '" class="project-meta">';
$output .= '<h5 class="title">' . get_the_title()  . '</h5>';
$output .= '<h5 class="subtitle">'. get_the_subtitle() . '</h5>';
$output .= '<span class="categories">' . substr( trim( $category_names ), 0, -2 ) . '</span>';
$output .= '</a>';

我似乎无法找到出错的地方。这是CSS的一部分。这是正确的地方吗？

/* -------------------------------------------------- */
/*  Projects Carousel
/* -------------------------------------------------- */

.no-js .projects-carousel, .no-js .post-carousel {
  border-top: 1px solid #efefef;
  margin: 15px -20px 60px 0;
  padding: 25px 0 0;
}

.projects-carousel > li, .post-carousel > li, #portfolio-items > article {
  float: left;
  list-style: none;
  margin: 0 20px 0 0;
  overflow: hidden;
  position: relative;
}

.projects-carousel > li, .post-carousel > li { width: 220px; }

.no-js .post-carousel > li {
  display: inline-block;
  float: none;
}

.no-js .projects-carousel > li, .no-js #portfolio-items > article { margin-bottom: 40px; }

.projects-carousel a, #portfolio-items article .project-meta {
  border-bottom: 1px solid #efefef;
  display: block;
  text-align: center;
}

.projects-carousel a { padding: 20px 0 0; }

#portfolio-items article a, #portfolio-items article .audio-player, #portfolio-items article .video-player { margin: 0 auto; }

.projects-carousel img, #portfolio-items article img {
  background-color: #fff;
  margin: 0 auto;
  filter: alpha(opacity=70); /* Fallback for old IE */
  opacity: 0.7;
}

.no-js .projects-carousel img, .no-js #portfolio-items article img { margin-bottom: 0; }

.projects-carousel img { margin: -25px auto 20px; }

.projects-carousel .title, #portfolio-items > article .title, .projects-carousel .subtitle, #portfolio-items > article .subtitle {
  font-weight: 400;
  margin: -1px 0 0;
}

.projects-carousel > li .categories, #portfolio-items > article .categories, #portfolio-items > article a + .project-meta .categories{
  color: #aeaeae;
  display: block;
  font-style: italic;
  margin: -1px 0 20px;
}
#portfolio-items > article .categories { margin-bottom: 19px; }

.projects-carousel a:hover, #portfolio-items > article:hover {
  background: #f8f8f8;
  border-bottom: 1px solid #f15a23;
}

.not-ie .projects-carousel a:hover:after, .not-ie #portfolio-items > article:hover:after {
  background: #f15a23;
  bottom: -2.5px;
  content: '';
  left: 50%;
  display: block;
  height: 5px;
  margin: 0 0 0 -2.5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  width: 5px;
}

.projects-carousel a:hover img, #portfolio-items > article:hover img {
  filter: alpha(opacity=100); /* Fallback for old IE */
  opacity: 1;
}

.projects-carousel a:hover .title, #portfolio-items > article:hover .title, .projects-carousel a:hover .subtitle, #portfolio-items > article:hover .subtitle { color: #f15a23; }

Answer 1

我是基于这两个假设（基于您提供的代码）写的：

您正在使用WordPress
您正在使用WP Subtitle插件

如果我错了，请纠正我。

get_the_subtitle函数here的文档接受第4个布尔参数$echo。如果为true，则实际上将输出回显到模板而不是返回它，这就是为什么文本出现在块I上面，我假设它是由您的函数呈现的。默认情况下，这是真的。

而不是：

$output .= '<h5 class="subtitle">'. get_the_subtitle() . '</h5>';

尝试使用the_subtitle

$output .= the_subtitle('<h5 class="subtitle">', '</h5>', false);

这将使用h5标记包装字幕，并返回值，而不是回显它，然后将其与$output连接。

好奇的详情

那么，get_the_subtitle为什么get_the_title无法按预期工作？ WP本机提供的功能通常有两种形式：x和get_x。主要区别是x将回显输出，get_x将返回输出。通常，x用于在循环运行时将输出直接注入模板。 get_x在PHP函数中使用，需要对返回的值进行操作。

在这方面，get_the_subtitle和the_subtitle的行为似乎对WP不合标准。

字幕输出错误的位置

1 个答案:

好奇的详情