美化網站頂級頁面連結按鈕：使用get_pages()方法-html教學-PHP中文網

美化網站頂級頁面連結按鈕：使用get_pages()方法

PHPz

發布： 2023-09-09 22:45:03

原創

1598 人瀏覽過

美化網站頂級頁面連結按鈕：使用get_pages()方法

如果您按照我之前的教學進行操作，現在您的網站上將會有一個主題（或子主題），其中包含指向網站標題中的頂級頁面的連結。

我創建了一個 26 的子主題，這就是我的連結現在的樣子：

美化網站頂級頁面連結按鈕：使用get_pages()方法

在本教學中，我將向您展示如何為您的主題添加一些 CSS，以使這些連結更好。讓我們從刪除項目符號並添加浮動開始。

刪除項目符號並新增浮動

開啟主題的樣式表。如果您建立了子主題，它將是空的，但如果您使用自己的主題，我建議您在樣式表中保留標題樣式的部分中添加此樣式。

輸出頁面連結的程式碼回顧（如果有要連結的頁面）：

<ul class="top-level-page-links">

<?php // using a foreach loop, output the title and permalink for each page
foreach ( $pages as $page ) { ?>

    <li class="page-link">
	
		<a href="<?php echo get_page_link( $page->ID ); ?>">
			<?php echo $page->post_title; ?>
		</a>
	
	</li>

<? } ?>

</ul>

登入後複製

這意味著我們的目標是帶有top-level-page-links 類別的ul 元素，並在其中 li 元素，其中page-link 類別後面跟著a 元素（即連結）。

首先，讓我們移除子彈。添加此：

ul.top-level-page-links  {
    list-style: none;
}

登入後複製

接下來，讓我們去掉每個清單項目上的填入並新增 margin-left 宣告：

ul.top-level-page-links  {
    list-style-type: none;
	margin-left: 0;
}

登入後複製

現在刷新螢幕，您將看到列表樣式消失了：

美化網站頂級頁面連結按鈕：使用get_pages()方法

接下來讓這些連結彼此相鄰浮動。將其新增至您的樣式表：

.page-link {
    float: left;
}

登入後複製

現在您的連結將彼此相鄰：

美化網站頂級頁面連結按鈕：使用get_pages()方法

接下來，讓我們繼續讓連結看起來更像按鈕。

新增邊距、內邊距和背景

為了讓我們的連結看起來像按鈕，我們將為連結添加邊距、內邊距和背景。

將其新增至您的樣式表：

.page-link a {
    margin-right: 10px;
	padding: 0.5em 10px;
	background-color: #454545;
}

登入後複製

請注意，我只在右側使用了邊距，因為我希望左側按鈕與頁面左側對齊。

當您刷新螢幕時，您的按鈕將看起來更像按鈕：

美化網站頂級頁面連結按鈕：使用get_pages()方法

它們看起來好多了，但需要一點技巧。讓我們編輯文字和背景的顏色，以便當有人將滑鼠懸停在按鈕上時，它會改變顏色。

新增懸停效果

現在讓我們讓這些按鈕更具吸引力。

在樣式表中再新增兩個宣告區塊，確保將它們新增到剛剛新增的連結的宣告區塊之後：

.page-link a:link,
.page-link a:visited {
    color: #fff;
	text-decoration: none;
}
.page-link a:hover,
.page-link a:active {
	background-color: #dddddd;
	color: #454545;
	text-decoration: none;
}

登入後複製

這會更改連結的顏色，刪除下劃線，並在有人將滑鼠懸停在連結上或連結處於活動狀態時更改顏色。

讓我們看看它在頁面上的樣子：

美化網站頂級頁面連結按鈕：使用get_pages()方法