Verschönern Sie die Schaltfläche für den Link zur Startseite der Website: Verwenden Sie die Methode get_pages()

Wenn Sie meinem vorherigen Tutorial gefolgt sind, verfügen Sie jetzt über ein Thema (oder Unterthema) auf Ihrer Website mit Links zu den Seiten der obersten Ebene im Header Ihrer Website.

Ich habe ein 26-Kinder-Theme erstellt und so sehen meine Links jetzt aus:

In diesem Tutorial zeige ich Ihnen, wie Sie Ihrem Theme etwas CSS hinzufügen, um diese Links ein wenig besser zu machen. Beginnen wir damit, Aufzählungszeichen zu entfernen und Floats hinzuzufügen.

Entfernen Sie Aufzählungszeichen und fügen Sie Floats hinzu

Öffnen Sie das Stylesheet des Themes. Wenn Sie ein untergeordnetes Thema erstellt haben, ist dieses leer. Wenn Sie jedoch Ihr eigenes Thema verwenden, empfehle ich, diesen Stil in den Abschnitt Ihres Stylesheets einzufügen, der den Kopfzeilenstil enthält.

Codeüberprüfung für den Link zur Ausgabeseite (falls eine Seite zum Verlinken vorhanden ist):

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

Das bedeutet, dass wir auf Elemente mit top-level-page-links 类的 ul 元素，并在其中 li 元素，其中 page-link 类后跟 a (d. h. Links) abzielen.

Entfernen wir zunächst die Kugel. Fügen Sie dies hinzu:

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

Als nächstes entfernen wir den Abstand bei jedem Listenelement und fügen eine margin-left-Anweisung hinzu:

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

Aktualisieren Sie nun den Bildschirm und Sie werden sehen, dass der Listenstil verschwunden ist:

Als nächstes lassen Sie diese Links nebeneinander schweben. Fügen Sie dies Ihrem Stylesheet hinzu:

.page-link {
    float: left;
}

Jetzt liegen Ihre Links nebeneinander:

Als nächstes wollen wir den Link eher wie eine Schaltfläche aussehen lassen.

Ränder, Abstand und Hintergrund hinzufügen

Damit unser Link wie eine Schaltfläche aussieht, fügen wir dem Link Ränder, Abstände und einen Hintergrund hinzu.

Fügen Sie dies zu Ihrem Stylesheet hinzu:

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

Bitte beachten Sie, dass ich nur den Rand auf der rechten Seite verwendet habe, weil ich wollte, dass die linke Schaltfläche an der linken Seite der Seite ausgerichtet ist.

Wenn Sie den Bildschirm aktualisieren, sehen Ihre Schaltflächen eher wie Schaltflächen aus:

Sie sehen viel besser aus, erfordern aber ein wenig Geschick. Lassen Sie uns die Farbe des Textes und des Hintergrunds bearbeiten, sodass sich die Farbe ändert, wenn jemand mit der Maus über die Schaltfläche fährt.

Hover-Effekt hinzufügen

Jetzt machen wir diese Schaltflächen attraktiver.

Fügen Sie Ihrem Stylesheet zwei weitere Deklarationsblöcke hinzu und achten Sie darauf, diese nach dem Deklarationsblock für den Link hinzuzufügen, den Sie gerade hinzugefügt haben:

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

Dadurch wird die Farbe des Links geändert, die Unterstreichung entfernt und die Farbe geändert, wenn jemand mit der Maus über den Link fährt oder wenn der Link aktiv ist.

Mal sehen, wie es auf der Seite aussieht:

Wenn ich mit der Maus über den Link fahre:

Viel besser!

Zusammenfassung

In diesem zweiteiligen Tutorial haben Sie gelernt, wie Sie Links zu automatisch generierten Top-Level-Seiten Ihrer Website erstellen und diese Links dann mithilfe von CSS so gestalten, dass sie wie Schaltflächen aussehen.

Dadurch haben Sie eine schöne und auffällige Möglichkeit, Ihre Besucher direkt auf diese Seiten zu leiten. Dies ist nützlich, wenn Sie sicherstellen möchten, dass eine große Anzahl von Besuchern auf Ihre Top-Seiten zugreifen kann.

Das obige ist der detaillierte Inhalt vonVerschönern Sie die Schaltfläche für den Link zur Startseite der Website: Verwenden Sie die Methode get_pages(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!