WordPress wird auf einem gro?en Teil der Websites im Web verwendet. Es erm?glicht es uns, eine Vielzahl verschiedener Arten von Websites zu erstellen, aber eine der wichtigsten Komponenten jeder Website ist immer die Startseite. Die perfekte Zielseite hilft Ihnen, die Sprungraten zu reduzieren, den Verkehr und Kunden zu steigern. In diesem Artikel behandeln wir, wie wir eine benutzerdefinierte Homepage (oder eine Zielseite) einer WordPress -Website erstellen k?nnen.

Es gibt viele M?glichkeiten, dieses Ziel zu erreichen. Dies ist nur ein Weg .

überblick über das, was wir in diesem Artikel berichten

Erstens werden wir diese grundlegenden Schritte ausführen:

1. Zeigen Sie einen Schieberegler auf der Indexseite von WordPress.
2. Zeigen Sie drei Panels zur Anzeige einer Beschreibung der Produkte.
3. Zeigen Sie zwei Zeilen an, die Details zu Ihren Produkten mit Bildern und Text nebeneinander enthalten.
4. Panels, die Ihre Teammitglieder zeigen.

Dann werden wir uns die folgenden erweiterten Themen ansehen:

1. abrufen den Inhalt von einer anderen Seite (zum Beispiel von einer Seite über uns).
2. Erstellen einer Seitenleiste nur für die Titelseite.
3. Der wichtigste Aspekt ist, dass wir die Bilder des Schiebereglers aus der Option "WordPress Customizer" ?ndern k?nnen. Wir brauchen keine Plugins, um einen Schieberegler hinzuzufügen oder eine Diashow von Bildern zu erstellen.

Dinge, die wir

brauchen

1. Kirki Toolkit zur Bereitstellung von Optionen für das Thema.
2. flexslider zur Bereitstellung der Slider -Option.

Maria Antonietta Perna hat Kirki in einem früheren Artikel behandelt, wenn Sie nach einer guten Einführung zu diesem Thema suchen.

Key Takeaways

• Optimieren Sie Ihre WordPress -Homepage, indem Sie den WordPress Customizer verwenden, um Elemente wie Schieberegler und Seitenleisten einfach zu ?ndern, ohne zus?tzliche Plugins zu ben?tigen.
• Verwenden Sie das Kirki -Toolkit, um die Funktionen des WordPress Customizer zu verbessern und erweiterte Anpassungen mit minimaler Codierung zu erm?glichen.
• Streamline -Designprozesse durch das Organisieren von Themendateien in einem "Bibliotheksordner" für eine bessere Verwaltung und Modularit?t.
• Erstellen Sie einen visuell ansprechenden Produktschieberegler mit FlexSlider, der direkt in Ihr Thema integriert ist
Verwenden Sie benutzerdefinierte Vorlagen für Ihre Homepage, um ein eindeutiges Layout beizubehalten, das von anderen Seiten unterscheidet, ohne die Hauptindexdatei zu ?ndern.
Nutzen Sie die Leistung von Kirki, UI -Komponenten wie Panels, Abschnitte und Felder im Customizer hinzuzufügen und zu verwalten, wodurch die Benutzerinteraktion und -erfahrung verbessert werden.
Stellen Sie sicher, dass Ihre Homepage sowohl informativ als auch ansprechend ist, indem dynamische Elemente wie Team -Showcases, detaillierte Produktbeschreibungen und interaktive Schieberegler einbezogen werden.

Hinweis

Aus Gründen der Modularit?t habe ich einen Ordner namens Bibliothek erstellt und alle Funktionsdateien hineingefügt, damit es einfach ist, nur die erforderliche Komponente zu bearbeiten. Fühlen Sie sich frei, mein Thema bei GitHub zu gib. In diesem Thema habe ich alle Dateien im Ordner der Bibliothek aus der Datei functions.php aufgerufen. Ich habe Foundation CSS -Framework für dieses Thema verwendet.

Sie finden eine Datei namens themen-options.php im Ordner Bibliothek, die wir in diesem Tutorial am meisten bearbeiten. ?ffnen Sie diese Datei in Ihrem bevorzugten Texteditor und bereiten Sie sich darauf vor, Ihre H?nde schmutzig zu machen!

kIRKI

Kirki ist kein Rahmen. Es ist ein Toolkit, das es WordPress -Entwicklern erm?glicht, den Customizer zu verwenden und seine erweiterten Funktionen und Flexibilit?t zu nutzen, indem er den Code abstrahiert und es jedem erleichtert, ein sch?nes und aussagekr?ftiges Benutzererlebnis zu schaffen.

Wir k?nnen mit Kirki Konfigurationen, Felder, Abschnitte und Panels zum Customizer hinzufügen. Dies ersetzt die WordPress Customizer -API nicht. Kirkis API ist einfach ein Wrapper für die Standard -WordPress -Methoden, vereinfacht die Syntax und erm?glicht es Ihnen, mehr mit weniger Code zu schreiben und einige der fortgeschrittensten Funktionen zu nutzen.

Kirki -Dateien von GitHub herunterladen und in einen Ordner mit dem Namen "Kirki" in Ihrem Themenordner legen.

Erstens müssen Sie eine neue Konfiguration erstellen. Konfigurationen haben eine eindeutige ID und alle Felder, die dieselbe config_id verwenden, erben die Eigenschaften dieser Konfiguration.

Sobald Sie Ihre Konfiguration hinzufügen, k?nnen Sie Panels, Abschnitte und Felder hinzufügen. Bitte beachten Sie, dass Sie über mindestens einen Abschnitt in Ihrem Annacher verfügen sollten, um Felder hinzuzufügen. Felder k?nnen nicht "Orphan" sein, sie müssen in einem Abschnitt gruppiert werden.

Konfiguration

Mit

mit Kirki k?nnen Sie Konfigurationen für Ihre Plugins oder Themen erstellen und nach einer ID gruppieren. Alle Felder, die dann mit dieser ID verknüpft sind, erben die Konfigurationseigenschaften.

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

• F?higkeit: Jede gültige WordPress -F?higkeit. Einzelheiten finden Sie im WordPress -Codex.
• option_type: Kann entweder Option oder themen_mod sein.
• Option_Name: Wenn Sie Optionen anstelle von Themenmods verwenden, k?nnen Sie diesen Optionspflichpunkt angeben. Alle Ihre Felder werden dann als Array unter dieser Option in der WordPress -Datenbank gespeichert.

Panels

Panels sind Wrapper für Abschnitte, eine M?glichkeit, mehrere Abschnitte zusammenzuarbeiten.

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Abschnitte

Abschnitte sind Wrapper für Felder, eine M?glichkeit, mehrere Felder zusammen zu gruppieren. Alle Felder müssen zu einem Abschnitt geh?ren, kein Feld kann ein Waisen sein.

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Felder

Felder sind die Optionen wie ein Textfeld und das Kontrollk?stchen, die bereitgestellt werden, damit die Benutzer benutzerdefinierten Text in sie eingeben k?nnen. Jedes Feld muss nur mit einem bestimmten Abschnitt zugeordnet werden.

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

genug der Einführung. Passen wir jetzt unser Thema an!

kirki in unser Thema integrieren

Das erste, was wir tun müssen, ist, Kirki in unser Thema zu integrieren. ?ffnen Sie dazu Ihre Datei themen-options.php, die Sie im Ordner der Bibliothek finden, und fügen Sie den folgenden Code hinzu:

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

Der obige Code verknüpft die Kirki -Dateien mit unserem Thema. Bitte beachten Sie, dass die Dateien, die wir aus der GitHub -Quelle heruntergeladen haben

Erstellen der Konfiguration

Wie bereits erw?hnt, müssen wir eine Konfiguration erstellen, die wir mit unseren Optionen verwenden k?nnen. Fügen Sie den folgenden Code zu Ihrer Datei themenoptionen.php hinzu.

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

Wir haben erfolgreich eine Konfiguration für unser Thema erstellt. Jetzt würden wir MC in unseren Optionen als option_name verwenden.

Design

Schauen wir uns nun das Design unserer Zielseite an. Unsere Startseite besteht aus Folgendes:

1. Produktschieber
Beschreibung Boxen (zum Anzeigen einiger Informationen über Ihr Unternehmen).
Produktdetails (zum Anzeigen einiger Details zu Ihren Produkten).
Team Showcase (zum Anzeigen von Details zu Ihren Teammitgliedern).

Wir werden abdecken, wie diese Punkte eins von eins für unsere Homepage durchführen.

Hinweis

Alle Optionen k?nnen über die Option WordPress Customizer anpassbar sind. Sie müssen das Aussehen> Anpassen der Option in Ihrem WordPress -Administrator -Bereich besuchen, um diese Optionen anzupassen.

Erstellen einer benutzerdefinierten Vorlage für die Titelseite

Wir m?chten unsere Index.php -Datei nicht ?ndern, da wir eine benutzerdefinierte Vorlage für unsere Startseite erstellen k?nnen. In dieser benutzerdefinierten Vorlage fügen wir unseren Code hinzu, damit er unsere angepasste Titelseite anzeigt. Wir erstellen also eine benutzerdefinierte Vorlage, die den Inhalt auf der Titelseite anzeigt.

Erstellen Sie eine neue Datei in Ihrem Themenordner namens homepage.php und fügen Sie Folgendes hinzu:

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

In dieser Datei fügen wir den Code hinzu, um den Schieberegler anzuzeigen.

Wir müssen dies auf unsere statische Titelseite setzen. Anf?nglich gibt es jedoch keine Seite, die diese Vorlage verwendet. Wir müssen eine neue Seite erstellen, die diese Vorlage verwendet. Befolgen Sie die folgenden Schritte:

1. Erstellen Sie eine neue Seite (** Seiten> Neue **).
2. Fügen Sie der Seite einen Titel hinzu (z. B. meine benutzerdefinierte Homepage **).
3. W?hlen Sie ** benutzerdefinierte Homepage ** Aus der ** Vorlage ** Dropdown unter ** Seitenattributen **.
4. Klicken Sie auf die Schaltfl?che ** ver?ffentlichen **.

Stellen Sie nun die Option der statischen Startseite in den WordPress Customizer auf eine statische Seite ein und w?hlen Sie meine benutzerdefinierte Homepage (oder wenn Sie einen anderen Namen für die Seite verwendet haben) aus der Dropdown darunter.

Vergessen Sie nicht, auf die Schaltfl?che Speichern und Ver?ffentlichung des Customizer zu klicken.

Sie werden noch keine sichtbaren ?nderungen im Customizer bemerken, da wir unserer Homepage.php -Datei keinen Code hinzugefügt haben. ?ffnen Sie die Homepage.php und fügen Sie ihm mit dem Hinzufügen von Code zu!

hinzu

Fügen wir den folgenden Code hinzu:

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Der obige Code enth?lt unsere Dateien mit Header.php und Fu?zeilen.php aus unserem aktuellen Themenverzeichnis. Wenn Sie jetzt Ihren Anpassungsmittel aktualisieren, sehen Sie wahrscheinlich nur die Navigation und die Fu?zeile.

Produkt -Slider

Ein Produkt-Schieberegler zeigt Ihre kreativsten oder meistverkauften Produkte. Dies sind die Produkte, die ein Besucher zuerst auf Ihrer Website sieht. Das Erstellen eines Produktschiebers umfasst die folgenden Schritte:

1. Erstellen einer Reihe von Sliders (im Allgemeinen 5).
2. dem Schieberegler ein Hintergrundbild hinzufügen.
3. Hinzufügen einer Bildunterschrift zum Schieberegler.

Erstellen einer Reihe von Sliders

Wie bereits erw?hnt, verwenden wir Flexslider, um einen Schieberegler in unserem Thema anzuzeigen. Erstens müssen wir Flexslider von GitHub herunterladen. Wir müssen nur die jQuery.flexslider.js, flexslider.css, die bg_play_pause.png und den Ordner der Schriftarten verwenden. Kopieren Sie diese Ressourcen in Ihren Themenordner.

Hinweis

Wenn Sie zusammen mit dem von mir angegebenen Thema zusammenarbeiten, k?nnen Sie jQuery.flexslider.js im Ordner des Anbieters kopieren und im Ordner JS, der Datei flexslider.css im Ordner CSS, in der Datei bg_play_pause.png in Inside vorhanden Der Bilderordner und den Inhalt des Ordners der Schriftarten (aus der GitHub -Quelle von FlexSlider) im Ordner der Schriftarten, der sich bereits im Ordner des Themas befindet.

Jetzt müssen wir diese Dateien mit unserem Thema befassen. Wir werden den folgenden Enqueue-Code zum in der Bibliotheksordner vorhandenen Enqueue-scripts.php-Datei hinzufügen:

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

Als n?chstes befassen wir die CSS-Datei in unserem enqueue-style.php im gesamten Bibliotheksordner mit dem folgenden Code:

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Herzlichen Glückwunsch! Sie haben die Flexslider -Dateien mit Ihrem Thema erfolgreich aufgenommen. Sie k?nnen überprüfen, ob das Enqueue erfolgreich war, indem Sie die Quelle Ihrer Seite überprüfen. Sie k?nnen die Quelle Ihrer Seite überprüfen, indem Sie mit der rechten Maustaste auf Ihre Seite klicken und auf die Seitenquelle anzeigen klicken. Suchen Sie nach Flexslider und Sie werden feststellen, dass die JS- und CSS -Dateien erfolgreich aufgenommen wurden.

Hinweis

Wenn Sie das von mir bereitgestellte Thema nicht verwenden, müssen Sie m?glicherweise die folgenden Teile: /js/vendor/jquery.flexslider.js und /css/flexslider.css bearbeiten und durch den Pfad zu Ihrem JS ersetzen und CSS -Dateien.

Erstellen wir zuerst ein Panel in unserem WordPress -Customizer, der die Bilder, Links und Bildunterschriften für unseren Schieberegler anzeigen.

?ffnen Sie themen-optionen.php erneut und fügen Sie den folgenden Code hinzu:

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Der obige Code fügt unserem Customizer ein Produkt -Schieberegler hinzu, aber er ist nicht sichtbar, da keine Abschnitte über dieses Panel verfügen und keine Felder Abschnitte enthalten, die sich auf dieses Panel beziehen. Verwirrend? Machen wir fort und es wird klarer.

Als n?chstes müssen wir einen Abschnitt namens Product Slider für die Homepage hinzufügen. Dies kann durch Hinzufügen des folgenden Codes zur themenoptionen.php-Datei:

hinzugefügt werden:

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

Der obige Code fügt den Produktschieberegler für den Abschnitt Homepage im Produktschieberfeld hinzu.

Als n?chstes fügen wir ein Feld zum Anzeigen von Bildern hinzu. Wir k?nnen ein Bildfeld mit dem folgenden Code erstellen:

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

Wenn wir jetzt unseren Anpassung aktualisieren, werden wir sehen, dass das Produkt -Schieberegler angegeben ist.

Durch das Bildfeld k?nnen wir Bilder hinzufügen, die im Schieberegler angezeigt werden. Wir werden vier weitere ?hnliche Felder erstellen, damit wir mindestens fünf Bilder für den Schieberegler haben k?nnen. Der folgende Code fügt vier weitere Bildfelder hinzu:

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

Wir k?nnen Bilder über diese Felder hochladen und sie dann auf der Zielseite anzeigen.

Hinzufügen eines Hintergrundbildes zum Schieberegler

Jetzt werden wir Code für den Produktschieberegler hinzufügen. Fügen Sie den folgenden Code neben Php get_header () hinzu; ?> In einem Php -Tag:

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

Diese Zeilen holt die Bilder für jede Folie ab, die wir in unserem Customizer gespeichert hatten. In unserem n?chsten Schritt werden wir überprüfen, ob eines dieser Bilder existiert oder nicht. Wenn einer von ihnen existiert, werden wir unseren Schieberegler nennen.

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Diese Zeile überprüft, ob ein Bild in einer Folie vorhanden ist oder nicht. Wenn die Bild (en) existieren, wird Flexslider aufgerufen. Jetzt werden wir die Bilder für jede Folie mit dem folgenden Code ausstellen:

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Als n?chstes müssen wir das JavaScript nur hinzufügen, damit der FlexSlider funktioniert.

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

Hinzufügen einer Bildunterschrift zum Schieberegler

Wir k?nnen unseren Folien auch eine Bildunterschrift hinzufügen. Wir müssen nur ein neues Feld in unserem Customizer hinzufügen, das die Bildunterschrift (Text) für jede Folie akzeptiert und sie herausgibt.

Fügen wir zuerst das Feld hinzu.

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

Wir k?nnen etwas ?hnliches für vier andere Folien tun.

In der Frontend, in unserer benutzerdefinierten Homepage -Vorlage müssen wir unseren Code ein wenig bearbeiten, um diese Bildunterschriften anzuzeigen.

Erstens müssen wir die Bildunterschriften in den Variablen speichern:

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

ersetzen Sie dann den folgenden Code:

<span>/**
</span><span>Template Name: Custom Homepage
</span><span>**/</span>

mit dem folgenden Code:

<span>// Add the header
</span><span>get_header();
</span>
<span>// Add the footer
</span><span>get_footer();</span>

Beschreibung Boxen

Beschreibung Boxen k?nnen nützliche Beschreibungen über unsere Produkte liefern. Diese Boxen befinden sich direkt unter dem Schieberegler, damit sie die Aufmerksamkeit unserer Besucher auf sich ziehen. Diese Boxen sind hilfreich, wenn Sie Details zu Ihren Produkten anzeigen m?chten. Normalerweise k?nnen es drei bis vier Kisten (oder Panels) geben, aber Sie k?nnen mehr haben, wenn Sie m?chten.

In diesem Tutorial erstellen wir drei Boxen und verwenden die Daten-Equalizer-Eigenschaft des Foundation CSS-Frameworks, um für jedes Panel eine gleichm??ige H?he zu bieten.

Kommen wir zur Arbeit!

Erstellen des Panels

Zuerst würden wir ein separates Panel zum Anzeigen der Beschreibungsfelder erstellen. Wir k?nnen auch alle Optionen unter demselben Panel bereitstellen (im ersten Feld, das wir erstellt haben), aber es ist eine gute Angewohnheit, die Dinge für die sp?tere Verwendung getrennt zu halten.

Wir müssen den folgenden Code in unsere themenoptionen.php-Datei hinzufügen:

<span>// adding flexslider scripts file in the footer
</span><span>wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true );
</span>
<span>wp_enqueue_script( 'flexslider-js' );</span>

Erstellen des Abschnitts

Wir erstellen nun zwei Abschnitte für die Produktbeschreibung. Wir werden die Bilder in einem Abschnitt hochladen und die Beschreibung in einem anderen Abschnitt hinzufügen.

Erstellen Sie zun?chst einen Abschnitt für die Bilder mit dem folgenden Code:

<span>// flexslider stylesheet
</span><span>wp_register_style( 'magnificient-flexslider-stylesheet', get_stylesheet_directory_uri() . '/css/flexslider.css', array(), '' );
</span>
<span>wp_enqueue_style( 'magnificient-flexslider-stylesheet' );</span>

Wir erstellen dann einen Abschnitt für die Beschreibung:

<span>// Adding the Product Slider panel
</span><span>Kirki<span>::</span>add_panel( 'product_slider', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'Product Slider', 'magnificient' ),
</span>    <span>'description' => __( 'A slider to show the products', 'magnificient' ),
</span><span>) );</span>

Erstellen der Felder

Als n?chstes müssen wir drei Felder erstellen (da es drei Boxen und damit drei Bilder gibt) für die Bildeingabe und danach erstellen wir drei Felder für die Produktbeschreibungen. Der Code sieht wie folgt aus:

<span>// Adding the Product Slider for Homepage section
</span><span>Kirki<span>::</span>add_section( 'product_slider_for_homepage', array(
</span>    <span>'title'          => __( 'Product Slider for Homepage', 'magnificient' ),
</span>    <span>'description'    => __( 'This slider will be shown on the front page of your website', 'magnificient' ),
</span>    <span>'panel'          => 'product_slider', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Zeigen Sie die Ausgabe

an

Jetzt müssen wir die Ausgabe in unserer benutzerdefinierten Vorlage mit dem folgenden Code anzeigen.

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

Dies zeigt die Ausgabe für das erste Feld an. Ebenso tun wir dasselbe für die beiden anderen K?stchen.

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Gehen Sie nun zu Ihrem Customizer und fügen Sie die Bilder und die Beschreibung hinzu, und Sie sehen die Seite, auf der Ihre Eingabe angezeigt wird!

Produktdetails

Dieser Teil enth?lt zwei Zeilen, in denen sich ein Bild auf der einen Seite und eine Beschreibung auf der anderen Seite befindet. Dieser Teil oder Abschnitt dieser Seite kann als visuell für die wichtigsten Aspekte der Produkte für die Besucher verwendet werden.

Erstellen des Panels

Erstellen wir zuerst ein Panel. Wir nennen es Produktdetails.

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Erstellen des Abschnitts

Wir erstellen einen Abschnitt für die Felder mit dem folgenden Code:

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

Erstellen der Felder

?hnlich wie bei den zuvor abgedeckten Konzepten erstellen wir zwei Bildfelder und zwei Textbereichsfelder mit dem folgenden Code.

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

zeigt die Ausgabe

Wir müssen die Ausgabe auf der benutzerdefinierten Homepage -Vorlage anzeigen. ?ffnen Sie Ihre Homepage.php -Datei und fügen Sie den folgenden Code hinzu:

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

Machen Sie das gleiche auch für die andere Zeile. Gehen Sie dann zu Ihrem Customizer und aktualisieren Sie ihn.

Team Showcase

Dieser Abschnitt der Seite wird verwendet, um einige Informationen über Ihr Team bereitzustellen. Dieser Abschnitt sollte nützlich, da unsere Besucher erfahren k?nnen, mit wem sie arbeiten werden.

Typischerweise kann dieser Abschnitt aus vielen Teammitgliedern bestehen. In diesem Beispiel werden wir nur Optionen für drei Mitglieder bereitstellen, aber Sie k?nnen es nach Bedarf erweitern.

Erstellen des Panels

Wir erstellen ein neues Panel und nennen es Team Showcase.

<span>/**
</span><span>Template Name: Custom Homepage
</span><span>**/</span>

Erstellen des Abschnitts

Als n?chstes erstellen wir einen Abschnitt, der Optionen für das Team -Showcase enth?lt.

<span>// Add the header
</span><span>get_header();
</span>
<span>// Add the footer
</span><span>get_footer();</span>

Erstellen der Felder

Es wird insgesamt sechs Felder geben, die aus drei Bildfeldern für die Avatare und drei Textfelder für die Namen der Mitglieder bestehen.

<span>// adding flexslider scripts file in the footer
</span><span>wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true );
</span>
<span>wp_enqueue_script( 'flexslider-js' );</span>

zeigt die Ausgabe

Wir werden jetzt die Bilder und Namen der drei Mitglieder des Teams in unserer benutzerdefinierten Homepage -Vorlage anzeigen. ?ffnen Sie die Homepage.php und fügen Sie Folgendes ein:

speichern wir zun?chst die Werte der Bilder und den Text in den Variablen.

<span>// flexslider stylesheet
</span><span>wp_register_style( 'magnificient-flexslider-stylesheet', get_stylesheet_directory_uri() . '/css/flexslider.css', array(), '' );
</span>
<span>wp_enqueue_style( 'magnificient-flexslider-stylesheet' );</span>

Dann k?nnen wir jedes Mitglied mit dem folgenden Code anzeigen:

<span>Kirki<span>::</span>add_config( 'my_theme', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'my_theme',
</span><span>) );</span>

erweiterte Themen

abrufen den Inhalt von einer anderen Seite

Wir k?nnen auch den Inhalt einer anderen Seite in unsere Startseite einholen. Dies ist besonders nützlich, wenn Sie einige Informationen über Ihr Unternehmen anzeigen m?chten und bereits eine Seite über uns haben. Sie müssen nicht den gleichen Inhalt noch einmal schreiben. Sie k?nnen diesen Inhalt einfach mit Kirki abrufen.

Wir k?nnen ein separates Panel erstellen, um diese Option bereitzustellen. Lassen Sie uns dies!

tun

Hier ist der Code für das Panel:

<span>Kirki<span>::</span>add_panel( 'panel_id', array(
</span>    <span>'priority'    => 10,
</span>    <span>'title'       => __( 'My Title', 'textdomain' ),
</span>    <span>'description' => __( 'My Description', 'textdomain' ),
</span><span>) );</span>

Und hier ist der Code für den Abschnitt:

<span>Kirki<span>::</span>add_section( 'section_id', array(
</span>    <span>'title'          => __( 'My Title', 'textdomain' ),
</span>    <span>'description'    => __( 'My Description', 'textdomain' ),
</span>    <span>'panel'          => '', // Not typically needed.
</span>    <span>'priority'       => 160,
</span>    <span>'capability'     => 'edit_theme_options',
</span>    <span>'theme_supports' => '', // Rarely needed.
</span><span>) );</span>

Als n?chstes zeigen wir einen Dropdown, von dem der Administrator auf der Startseite ausw?hlen kann, welche Seite angezeigt werden soll. Wir k?nnen die Dropdown-Pages-Option von Kirki verwenden.

Wir k?nnen das Feld mit Folgendem hinzufügen:

<span>function my_custom_text_settings( $fields ) {
</span>
    <span>// Add the controls
</span>    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 10,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>$fields[] = array(
</span>        <span>'label'       => __( 'My custom control 2', 'translation_domain' ),
</span>        <span>'section'     => 'my_section',
</span>        <span>'settings'    => 'my_setting_2',
</span>        <span>'type'        => 'text',
</span>        <span>'priority'    => 20,
</span>        <span>'option_type' => 'theme_mod',
</span>        <span>'capability'  => 'edit_theme_options',
</span>    <span>);
</span>
    <span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>

Dies erm?glicht die Option im WordPress Customizer. Wir k?nnen jetzt unsere Homepage.php -Datei bearbeiten, um den Inhalt anzuzeigen. ?ffnen Sie diese Datei und kopieren Sie den folgenden Code, in dem dieser Inhalt angezeigt werden soll:

<span>// Integrating Kirki with our theme
</span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>

Erstellen einer Seitenleiste für die Frontpage nur

Eine Seitenleiste für Ihr Thema erstellen ist einfach, wenn Sie dem WordPress -Codex folgen. Anstatt hier zu viel Details zu gehen, würde ich dieses Thema einfach die Seitenleiste hinzufügen, indem ich den folgenden Code in der Datei Bibliothek/widget-areas.php verwendete.

?ffnen Sie Widget-areas.php und fügen Sie Folgendes hinzu:

<span>// Adding the configuration
</span><span>Kirki<span>::</span>add_config( 'mc', array(
</span>    <span>'capability'    => 'edit_theme_options',
</span>    <span>'option_type'   => 'option',
</span>    <span>'option_name'   => 'mc',
</span><span>) );</span>

Hinweis

Die Datei widget-areas.php im Ordner der Bibliothek enth?lt alle Widget-Bereiche für dieses Thema. Daher habe ich den Sidebar-Code dort hinzugefügt.

Dann müssen wir nur unsere Homepage.php -Datei bearbeiten, um diesen Widget -Bereich auf dieser Seite anzuzeigen. ?ffnen Sie Ihre Homepage.php und fügen Sie den folgenden Code hinzu:

<span>/**
</span><span>Template Name: Custom Homepage
</span><span>**/</span>

Wenn Sie nun ein Widget in dieser Seitenleiste hinzufügen, wird es nur auf der Frontpage angezeigt.

wickeln Sie es

ein

In diesem Tutorial habe ich erkl?rt, wie Sie mit dem Kirki Toolkit eine Zielseite für Ihre WordPress -Website erstellen. Sie k?nnen dies mit einigen CSS dekorieren und genau so anpassen, wie Sie es m?chten. Es w?re gro?artig, coole Ideen zur Implementierung dieses Toolkits zu haben und mich im Kommentarbereich unten zu informieren. Wenn Sie auf Probleme sto?en oder Fragen haben, lassen Sie es mich einfach wissen und ich werde gerne helfen.

h?ufig gestellte Fragen zum Entwerfen einer benutzerdefinierten Homepage für Ihre WordPress -Website

Wie kann ich eine statische Titelseite in WordPress erstellen? Zun?chst müssen Sie sich bei Ihrem WordPress -Dashboard anmelden. Gehen Sie dann zu "Seiten" und klicken Sie auf "Neu hinzufügen". Nennen Sie diese neue Seite "Home" oder einen anderen Namen, den Sie bevorzugen. Erstellen Sie danach eine andere neue Seite und nennen Sie es "Blog" oder "Beitr?ge". Sobald Sie diese beiden Seiten erstellt haben, gehen Sie zu "Einstellungen" und "Lesen". W?hlen Sie unter "Ihre Homepage -Anzeige" eine "statische Seite" aus. Setzen Sie in den Dropdown -Menüs "Homepage" auf die Seite, die Sie für Ihr Zuhause erstellt haben, und auf die Seite, die Sie für Ihr Blog oder Ihre Beitr?ge erstellt haben. Klicken Sie auf "?nderungen speichern", um Ihre Einstellungen abzuschlie?en.

Wie kann ich meine WordPress -Homepage anpassen? Sie k?nnen den WordPress Customizer verwenden, mit dem Sie ?nderungen in Echtzeit anzeigen k?nnen. Um darauf zuzugreifen, gehen Sie zu "Aussehen" und "Anpassen". Hier k?nnen Sie die Identit?t, die Farben, die Hintergrundbild, die Menüs, die Widgets und vieles mehr ?ndern. Alternativ k?nnen Sie ein Page Builder -Plugin wie Elementor oder Beaver Builder verwenden. Diese Plugins bieten eine Drag-and-Drop-Oberfl?che, mit der Sie Ihre Startseite genau so entwerfen k?nnen, wie Sie es m?chten. WordPress -Homepage, es ist wichtig, Ihr Publikum und Ihren Zweck im Auge zu behalten. Stellen Sie sicher, dass Ihre Homepage eindeutig mitteilt, wer Sie sind und was Sie tun. Verwenden Sie hochwertige Bilder und überzeugende Schlagzeilen, um die Aufmerksamkeit der Besucher zu erregen. Halten Sie Ihr Design sauber und einfach, um es den Besuchern leicht zu machen, auf Ihrer Website zu navigieren. Stellen Sie au?erdem sicher, dass Ihre Website mobilfreundlich ist, da ein gro?er Prozentsatz des Webverkehrs von mobilen Ger?ten stammt. Benutzerdefinierte Header auf Ihrer WordPress -Homepage, gehen Sie zu "Aussehen" und "Anpassung". Klicken Sie je nach Thema auf "Header" oder "Header Image". Von hier aus k?nnen Sie ein neues Bild hochladen, es auf die gewünschte Gr??e beschneiden und alle gewünschten Text oder Links hinzufügen. Klicken Sie auf 'Speichern und ver?ffentlichen', wenn Sie fertig sind. Kopfball. Gehen Sie zu "Aussehen" und "Anpassen". Klicken Sie je nach Ihrem Thema auf "Fu?zeile" oder "Fu?zeile". Hier k?nnen Sie Ihren Fu?zeilentext anpassen, Widgets hinzufügen und das Layout ?ndern. Klicken Sie auf "Speichern und ver?ffentlichen", wenn Sie fertig sind.

Wie kann ich meiner WordPress -Homepage einen Schieberegler hinzufügen? Aktiviert Ihr ausgew?hltes Plugin, Sie k?nnen einen neuen Schieberegler erstellen, Bilder hinzufügen und die Einstellungen anpassen. Dann k?nnen Sie den Schieberegler mit einem Shortcode-, Widget- oder Vorlagen -Tag zu Ihrer Homepage hinzufügen, abh?ngig vom Plugin. Fügen Sie Ihrer WordPress -Homepage einen Blog -Abschnitt hinzu. Stellen Sie zun?chst sicher, dass Sie eine separate Seite für Ihre Blog -Beitr?ge erstellt haben. Gehen Sie dann zu "Aussehen" und "Anpassen". Klicken Sie auf "Homepage -Einstellungen" und w?hlen Sie "Ihre neuesten Beitr?ge" unter "Ihre Homepage -Anzeigen" aus. Dadurch werden Ihre neuesten Blog -Beitr?ge auf Ihrer Homepage angezeigt. Social -Media -Plugin wie Social -Media -Widget oder einfache soziale Ikonen. Sobald Sie Ihr ausgew?hltes Plugin installiert und aktiviert haben, k?nnen Sie Ihre Social -Media -Links hinzufügen und Ihren bevorzugten Symbolstil und Ihre Gr??e des bevorzugten Symbols ausw?hlen. Dann k?nnen Sie die Social-Media-Symbole mit einem Widget zu Ihrer Homepage hinzufügen. Auswahl eines sauberen, reaktionsschnellen Themas. Verwenden Sie ein SEO -Plugin wie Yoast SEO, um Ihr Titel -Tag und Ihre Meta -Beschreibung zu optimieren. Fügen Sie relevante Keywords in Ihren Inhalt auf, vermeiden Sie jedoch die Keyword -Füllung. Verwenden Sie Header -Tags, um Ihren Inhalt zu strukturieren und das Lesen zu erleichtern. Stellen Sie au?erdem sicher, dass Ihre Website schnell l?dt, da die Seitengeschwindigkeit ein Ranking -Faktor ist.

Wie kann ich meiner WordPress -Homepage ein Kontaktformular hinzufügen? Sie ben?tigen ein Kontaktformular -Plugin wie Kontaktformular 7 oder WPForms. Sobald Sie Ihr ausgew?hltes Plugin installiert und aktiviert haben, k?nnen Sie ein neues Kontaktformular erstellen und die Felder nach Bedarf anpassen. Dann k?nnen Sie das Kontaktformular mit einem Shortcode zu Ihrer Homepage hinzufügen.

Das obige ist der detaillierte Inhalt vonEntwerfen einer benutzerdefinierten Startseite für Ihre WordPress -Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!