Wordpress Portfolio：带有标题和元数据的特色图片

Question

首先，我相当缺乏经验——尤其是 PHP。任何指导将不胜感激。

我正在尝试自定义 Wordpress 投资组合帖子页面。我希望帖子标题和元数据显示在特色图片的内联和右侧。

我尝试使用纯 CSS 来完成此操作，添加“display:inline-block”并浮动图像和标题。这不起作用，所以我假设我需要编辑 php 模板 (content-portfolio.php)，但不知道该怎么做。

再次，我们将不胜感激任何指导。非常感谢！

现在存在的 content-portfolio.php 文件是：

<?php

// =============================================================================
// VIEWS/INTEGRITY/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Integrity.
// =============================================================================

$archive_share = x_get_option( 'x_integrity_portfolio_archive_post_sharing_enable' );

?>



<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-featured">
    <?php x_portfolio_item_featured_content(); ?>
  </div>
  <div class="entry-wrap cf">

    <?php if ( x_is_portfolio_item() ) : ?>

      <div class="entry-info">
        <header class="entry-header">
          <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
          <?php x_integrity_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
        <?php x_portfolio_item_tags(); ?>
        <?php x_portfolio_item_project_link(); ?>
        <?php x_portfolio_item_social(); ?>
      </div>


     <?php else : ?>

      <header class="entry-header">
        <h2 class="entry-title entry-title-portfolio">
          <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
        </h2>
      </header>
        <?php x_get_view( 'global', '_content' ); ?>

    <?php endif; ?>

  </div>
</article>

Answer 1

我不知道你的意思是在 h1 行中同时包含两者：

<h1 class="entry-title entry-title-portfolio"><?php the_title(); x_integrity_entry_meta();?></h1>

您也可以尝试将 entry-header 样式更改为.entry-header{display:flex}

Answer 2

你可以用纯 css 做到这一点。

您需要为标题“.entry-header”分配特定宽度。

还将“display:inline”分配给“.entry-title-portfolio”和包装您的元内容的标签。

header.entry-header { width: 100%; }
h1.entry-title-portfolio { display: inline; }
[your meta class] { display: inline; }