Cantikkan butang pautan halaman teratas tapak web: gunakan kaedah get_pages().

Jika anda mengikuti tutorial saya sebelum ini, anda kini akan mempunyai tema (atau subtema) di tapak anda dengan pautan ke halaman peringkat teratas dalam pengepala tapak anda.

Saya mencipta tema 26 kanak-kanak dan inilah rupa pautan saya sekarang:

Dalam tutorial ini saya akan menunjukkan kepada anda cara menambahkan beberapa CSS pada tema anda untuk menjadikan pautan tersebut lebih baik sedikit. Mari kita mulakan dengan mengeluarkan peluru dan menambah terapung.

Alih keluar peluru dan tambah pelampung

Buka helaian gaya tema. Jika anda mencipta tema kanak-kanak ia akan menjadi kosong, tetapi jika anda menggunakan tema anda sendiri, saya syorkan menambah gaya ini dalam bahagian lembaran gaya anda yang memegang gaya pengepala.

Semakan kod untuk pautan halaman keluaran (jika ada halaman untuk dipautkan):

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

Ini bermakna kami menyasarkan elemen ul dengan kelas top-level-page-links dan di dalamnya < code class= elemen "inline"> li, di mana kelas page-link diikuti oleh elemen a (iaitu pautan ). top-level-page-links 类的 ul 元素，并在其中 li 元素，其中 page-link 类后跟 a 元素（即链接）。

首先，让我们移除子弹。添加此：

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

接下来，让我们去掉每个列表项上的填充并添加 margin-left

Pertama, mari kita keluarkan peluru. Tambah ini:

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

Seterusnya, mari keluarkan padding pada setiap item senarai dan tambahkan pernyataan margin-left:

.page-link {
    float: left;
}

Sekarang muat semula skrin dan anda akan melihat gaya senarai hilang:

Seterusnya biarkan pautan ini terapung di sebelah satu sama lain. Tambahkan ini pada lembaran gaya anda:

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

Sekarang pautan anda akan berada di sebelah satu sama lain:

Seterusnya, mari kita teruskan untuk menjadikan pautan kelihatan lebih seperti butang.

Tambah jidar, padding dan latar belakang

Untuk menjadikan pautan kami kelihatan seperti butang, kami akan menambah margin, padding dan latar belakang pada pautan.

Tambahkan ini pada lembaran gaya anda:

.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;
}

Sila ambil perhatian bahawa saya hanya menggunakan margin di sebelah kanan kerana saya mahu butang kiri sejajar dengan sebelah kiri halaman.

Apabila anda memuat semula skrin, butang anda akan kelihatan lebih seperti butang:

Mereka kelihatan jauh lebih baik tetapi memerlukan sedikit kemahiran. Mari edit warna teks dan latar belakang supaya apabila seseorang menuding pada butang, ia bertukar warna.

Tambahkan kesan hover

Sekarang mari jadikan butang ini lebih menarik.

Tambahkan dua lagi blok pengisytiharan pada helaian gaya anda, pastikan anda menambahnya selepas blok pengisytiharan untuk pautan yang baru anda tambahkan:

rrreee

Ini menukar warna pautan, mengalih keluar garis bawah dan menukar warna apabila seseorang menuding pada pautan atau apabila pautan aktif.

Jom lihat rupanya di halaman:

Apabila saya menuding pada pautan:

Lebih baik!

Ringkasan

Dalam tutorial dua bahagian ini, anda mempelajari cara membuat pautan ke halaman peringkat teratas yang dijana secara automatik di tapak web anda, dan kemudian menggunakan CSS untuk menggayakan pautan tersebut supaya ia kelihatan seperti butang. 🎜 🎜Ini memberi anda cara yang bagus dan menonjol untuk mendorong pelawat anda terus ke halaman ini, yang berguna jika anda ingin memastikan sejumlah besar pelawat boleh mengakses halaman teratas anda. 🎜

Atas ialah kandungan terperinci Cantikkan butang pautan halaman teratas tapak web: gunakan kaedah get_pages().. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!