Как выровнять заголовок и текущую дату в одной строке в wordpress / php?

Question

У меня есть html / php код, как показано ниже:

Код A:

<header class="entry-header container">
    <?php the_title('<h1 class="entry-title" id="page-entry-title">', '</h1>'); ?>
</header><!-- .entry-header -->

CSS для вышеуказанного html / php код:

.entry-header {
    font-size: 18px;
    font-size: 1.8rem;
    background: #3c3f47;
    display: block;
}

.entry-title {
    font-size: 1.8rem;
    color: #FFF;
    margin: 0;
    padding: 1.2rem 0;
}

код B:

Эту функцию я буду использовать для получения текущей даты:

echo date('y-m-d')

Постановка задачи:

Мне интересно, есть ли способ интеграции Код A и Код B , так title и date отображаются в одной строке.

Answer 1

Просто добавьте echo рядом с функцией the_title () и сделайте так, чтобы тег h1 отображал встроенный блок, чтобы он не занимал всю ширину заголовка. (Добавлены теги вокруг даты для семантики, но не обязательно).

PHP:

<header class="entry-header container">
    <?php the_title('<h1 class="entry-title" id="page-entry-title">', '</h1>'); echo '<span class="entry-date">' . date('y-m-d') . '</span>'; ?>
</header><!-- .entry-header -->

CSS:

.entry-header {
    font-size: 18px;
    font-size: 1.8rem;
    background: #3c3f47;
    display: block;
}

.entry-title {
    font-size: 1.8rem;
    color: #FFF;
    margin: 0;
    padding: 1.2rem 0;
    display: inline-block;
}

Answer 2

Ваш css:

entry-header {
        font-size: 18px;
        font-size: 1.8rem;
        background: #3c3f47;
    }
    

entry-title {
    font-size: 1.8rem;
    color: #FFF;
    margin: 0;
    padding: 1.2rem 0;
    display: inline;
}

<span class="entry-header">header</span> 
<span class="entry-title">date here</span>

<--Date in your header-->

<header class="entry-header container">
<span class="entry-title">date here </span>
<span class="entry-title"><?php the_title('<h1>', '</h1>'); ?></span>
</header><!-- .entry-header -->

см. Здесь, например: https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1

Answer 3

перенос по диапазонам или, если вы хотите использовать теги h1, установите отображение в inline-block

<header class="entry-header container">
    <span>Senate Portal</span>
    <span>July 6 ,1966</span>
</header><!-- .entry-header -->