Question

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

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

我尝试用纯CSS完成此操作，添加＆＃34; display：inline-block＆＃34;并浮动图像和标题。这不起作用，所以我假设我需要编辑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{display:flex}

Answer 2

你可以使用纯css。

您需要为标题＆＃34; .entry-header＆＃34;指定特定的宽度。

并指定＆＃34;显示：内联＆＃34;两者都是＆＃34; .entry-title-portfolio＆＃34;以及包装元内容的标记。

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

Wordpress Portfolio：精选图片内联标题和元素

2 个答案: