如果您按照我之前的教程進行操作，現在您的網站上將會有一個主題（或子主題），其中包含指向網站標題中的頂級頁面的鏈接。
我創建了一個 26 的子主題，這就是我的鏈接現在的樣子：
在本教程中，我將向您展示如何向您的主題添加一些 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;
}
登錄后復制
現在刷新屏幕，您將看到列表樣式消失了：
接下來讓這些鏈接彼此相鄰浮動。將其添加到您的樣式表中：
.page-link {
float: left;
}
登錄后復制
現在您的鏈接將彼此相鄰：
接下來，讓我們繼續讓鏈接看起來更像按鈕。
添加邊距、內邊距和背景
為了使我們的鏈接看起來像按鈕，我們將為鏈接添加邊距、內邊距和背景。
將其添加到您的樣式表中：
.page-link a {
margin-right: 10px;
padding: 0.5em 10px;
background-color: #454545;
}
登錄后復制
請注意，我只在右側使用了邊距，因為我希望左側按鈕與頁面左側對齊。
當您刷新屏幕時，您的按鈕將看起來更像按鈕：
它們看起來好多了，但需要一點技巧。讓我們編輯文本和背景的顏色，以便當有人將鼠標懸停在按鈕上時，它會改變顏色。
添加懸停效果
現在讓我們讓這些按鈕更具吸引力。
在樣式表中再添加兩個聲明塊，確保將它們添加到剛剛添加的鏈接的聲明塊之后：
.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;
}
登錄后復制
這會更改鏈接的顏色，刪除下劃線，并在有人將鼠標懸停在鏈接上或鏈接處于活動狀態時更改顏色。
讓我們看看它在頁面上的樣子：
當我將鼠標懸停在鏈接上時：
好多了！
摘要
在這個由兩部分組成的教程中，您學習了如何創建指向自動生成的網站頂級頁面的鏈接，然后使用 CSS 設置這些鏈接的樣式，使它們看起來像按鈕。
這為您提供了一種很好的、??突出的方式來讓您的訪問者直接進入這些頁面，如果您希望確保大量訪問者可以訪問頂級頁面，這將非常有用。
以上就是美化網站頂級頁面鏈接按鈕：使用get_pages()方法的詳細內容，更多請關注www.92cms.cn其它相關文章！
