Astra Pro模組教學指南-Footer補充設定

當頁面內容較少時,如何將Footer固定在底部?

有時你的網路行銷網站上可能只有幾行很少的文字或內容很少的頁面。

在這種情況下,頁尾顯示在內容與頁面下方某處。
這不會給頁面帶來漂亮的網站設計外觀。

你可以將頁尾固定在底部,這樣無論你的內容長度是多少,頁尾都將固定在頁面的尾端。

Astra主題的選項

將以下filter新增到子主題的functions.php文件中。

<?php // don't copy this line in your code.
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
}

Astra Pro Addon外掛的選項

Sticky Footer固定頁尾選項可用於Astra Pro的 Custom Layouts 自訂排版 模組。

  • 首先,你需要啟用Code Editor代碼編輯器在Custom Layouts中插入代碼
  • 接下來,我們需要設計一個網頁設計Footer,並使用以下代碼將其設定為sticky固定。
    選擇Layout作為 Hooks,選擇 Action as wp_footer
  • 使用 Display On 設定,你可以將其設定為顯示在特定頁面或整個WordPress網站上。 

以下是可以貼上在 Custom Code Editor 下的上述代碼。

<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>

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security