Прибити футер до низу сторінки / Wordpress / WordPress форум - Українська спільнота підтримки

Від Orville 06-06-2023 20:39:29

Учасник · 14 повідомлень

Вітаю вас!

Хочу зафіксувати підвал на одному місці внизу сторінки, щоб на сторінках, де мало контенту він не піднімався наверх, некрасиво.

Як я зрозумів, є 5 способів це зробити. HTML-код всіх них має таку структуру:

<div class="wrapper">

<div class="content"></div>

<div class="footer"></div>

</div>

</body>
</html>

А в CSS-коді треба прописати:

* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
}

Допоможіть, будь ласка, розібратися, в яких саме файлах треба це прописати? footer.php та style.css?

Від AzzePis 06-06-2023 20:56:13

Administrator · 1,001 повідомлень

Доброго дня.
footer.php відповідає зазвичай тільки за нижню частину сторінки, тож ви не зможете через один цей файл організувати потрібну структуру сторінки.
А ось стилі можна в style.css прописати

В найпростішому варіанті у вас у header.php має бути ця частина структури:

<html> <body>

<div class="wrapper">

В index.php ця:
<div class="content"></div>

І у footer.php ця:

<div class="footer"></div>

</div>

</body> </html>

_{Український хостинг для WordPress | Шаблони та плагіни для WordPress українською
Тут можна купити домен за найкращою ціною}

Від Orville 06-06-2023 22:39:06

Учасник · 14 повідомлень

Дякую вам за відповідь!

Перепробував стільки способів. Нічого не допомогало. А потім знайшов відео, де хлопець-індус показав за 3 хвилини, як це зробити. Може комусь тут також допоможе.

Просто у файлі functions.php у самому низу пишемо цей код і все запрацювало:

add_action( 'wp_footer', 'astra_footer_align_bottom' );
function astra_footer_align_bottom () {
?>
<script type="text/javascript">
document.addEventListener(
"DOMContentLoaded",
function() {
fullHeight();
},
false
);
function fullHeight() {
var headerHeight = document.querySelector("header").clientHeight;
var footerHeight = document.querySelector("footer").clientHeight;
var headerFooter = headerHeight + footerHeight;
var content = document.querySelector("#content");
content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
}
</script>
<?php
}

UPD. Коли вийшов з адмінки футер знов піднявся (((

UPD2. Дивно, але всі ці глюки через плагін WP Fastest Cache. Видалив його і все запрацювало!

В останнє редагував Orville (06-06-2023 23:07:25)

Від AzzePis 06-06-2023 23:24:11

Administrator · 1,001 повідомлень

Плагін рекомендую повернути. Просто після змін в коді необхідно очищати кеш (окрема кнопка у верхній панелі адміністратора)

_{Український хостинг для WordPress | Шаблони та плагіни для WordPress українською
Тут можна купити домен за найкращою ціною}

Від Orville 07-06-2023 11:51:20

Учасник · 14 повідомлень

Ще раз дякую вам!