Я пытаюсь изменить single.php в теме WordPress, добавив кнопки социальных сетей до и после содержимого публикации, как показано ниже:

          <div class="socialsharebuttons">
            <strong>SHARE NOW:</strong><?php echo do_shortcode('[DISPLAY_ULTIMATE_SOCIAL_ICONS]'); ?>  
          </div>
          <div class="entry">           
            <?php the_content(''); ?>
          </div>
          <div class="socialsharebuttons">
            <strong>SHARE NOW:</strong><?php echo do_shortcode('[DISPLAY_ULTIMATE_SOCIAL_ICONS]'); ?>  
          </div>

В коде текст «ПОДЕЛИТЬСЯ СЕЙЧАС» появляется прямо перед кодом PHP, который генерирует шорткод. Однако после отображения сообщения, такого как http://www.sybase-recovery.com/blogs/datanumen-archive-repair-3-8-is-released-on-may-16-2021/, я нахожу «ПОДЕЛИТЬСЯ» отображается ПОСЛЕ кнопок социальных сетей, как показано ниже:

enter image description here

Затем я использую Chrome DevTools для диагностики проблемы и нахожу следующие коды:

<div class="socialsharebuttons">
            <strong>SHARE NOW:</strong><div class="sfsi_widget sfsi_shortcode_container">...</div>  
          </div>

«ПОДЕЛИТЬСЯ» также находится перед <div class="sfsi_widget sfsi_shortcode_container">.

Затем я проверяю CSS и обнаруживаю, что у него есть свойство float: left. Поэтому я следую инструкциям в https://stackoverflow.com/a/2417150/2704265 и изменяю CSS, как показано ниже:

div.socialsharebuttons {
    display: inline-block;
    width: 100%;
    float: left;
}

Но это все еще не работает, почему?

0
alancc 9 Окт 2021 в 06:48

2 ответа

Лучший ответ

Вы хотите, чтобы кнопка «поделиться» была впереди или над кнопками социальных сетей?

Для выше это:

.sfsi_shortcode_container {
    float: none;
}

Спереди:

.sfsi_shortcode_container {
    float: right;
    margin-left:10px;
}
.socialsharebuttons > strong {
    position: relative;
    top: 15px;
}
1
st'sahib 9 Окт 2021 в 04:21

Это происходит потому, что strong - это встроенный элемент, поэтому он не будет учитывать предыдущий floats. Чтобы все было рядом, просто установите

div.socialsharebuttons strong{
    float: left;
    margin-top: 13px;
}

После установки это будет выглядеть так введите описание изображения здесь

Если вы хотите, чтобы список шел после текста, используйте

div.socialsharebuttons strong{
        display: block;
        margin-bottom: 13px;
    }

enter image description here

1
Viira 9 Окт 2021 в 05:06