Как вывести текст перед рейтингом на WordPress?

Ссылка скопирована
PHP WordPress
1 ответ

Мне надо вывести рейтинг, использую плагин wp-postratings,
хочу вывести так:
Рейтинг (и сам рейтинг, звездочки для оценки которые )
, но мне выводит почему-то на след строке, почему?
Вот так выглядит
Рейтинг
(сами звезды для оценки эти)
ЧТо я не правильно сделал? 

<?php if (function_exists('the_ratings')) : ?>                                 <p class="style-up-game-about">Рейтинг <?php the_ratings(); ?></p>                             <?php endif; ?>

<?php if (function_exists('the_ratings')) : ?> <p class="style-up-game-about">Рейтинг <?php the_ratings(); ?></p> <?php endif; ?>

.style-up-game-about{   font-size: 26px;   display: inline ;  }

.style-up-game-about{ font-size: 26px; display: inline ; }

Дополнительно:

Как вывести текст перед рейтингом на Wordpress?

<?php the_ratings('span'); ?>, там по умолчанию используется <div>

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Юрий Linux Ответ

У wp-postratings функция the_ratings() по умолчанию может выводить обёртку блочного типа, из-за чего звёзды уходят на следующую строку. Ваш display: inline на родительском p не исправит внутренний div, если сам плагин выводит блочный элемент.

Попробуйте передать тип обёртки:

&lt;?php if (function_exists('the_ratings')) : ?&gt;
    &lt;p class="style-up-game-about"&gt;
        Рейтинг &lt;?php the_ratings('span'); ?&gt;
    &lt;/p&gt;
&lt;?php endif; ?&gt;

&lt;?php if (function_exists('the_ratings')) : ?&gt; &lt;p class="style-up-game-about"&gt; Рейтинг &lt;?php the_ratings('span'); ?&gt; &lt;/p&gt; &lt;?php endif; ?&gt;

И CSS:

.style-up-game-about {
    font-size: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
}
 
.style-up-game-about .post-ratings {
    display: inline-flex;
    align-items: center;
}

.style-up-game-about { font-size: 26px; display: flex; align-items: center; gap: 8px; } .style-up-game-about .post-ratings { display: inline-flex; align-items: center; }

Если плагин всё равно выводит div, посмотрите HTML через Inspect и задайте CSS конкретному классу, который выводит wp-postratings. Чаще всего это .post-ratings.

Не помещайте сложные блочные элементы внутрь p, если плагин выводит div. HTML будет невалидным, браузер может автоматически закрыть абзац и перенести блок на новую строку. Более надёжно сделать так:

&lt;div class="rating-line"&gt;
    &lt;span&gt;Рейтинг&lt;/span&gt;
    &lt;?php the_ratings('span'); ?&gt;
&lt;/div&gt;

&lt;div class="rating-line"&gt; &lt;span&gt;Рейтинг&lt;/span&gt; &lt;?php the_ratings('span'); ?&gt; &lt;/div&gt;

Итог: причина в обёртке рейтинга. Используйте the_ratings('span') или flex-контейнер с правильными селекторами, а не только display:inline на родителе.

Если в шаблоне рядом с рейтингом есть другой текст, лучше делать не абзац, а отдельный компонент: подпись, блок рейтинга и служебный текст. Так проще контролировать мобильную версию. На узком экране можно оставить элементы в одну строку, если хватает места, или аккуратно перенести звёзды ниже через media query, не ломая HTML.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Почему не работает связка 3X-UI на своем VPS и Necobox на Windows 10 и где искать причину? 1 ответ