Categories

Ausgewählte Vorlagen

WordPress. Wie erstellt man das Child-Theme auf der Basis von Cherry Framework 3.x

Rating: 5.0. From 5 votes.
Please wait...

  1. Allgemeine Information

    Vor allem sollen Sie Cherry Framework und den Entwurf des Child-Themes auf Ihren Computer herunterladen:

    1. CherryFramework
    2. cherry-theme

    Dann sollen Sie Cherry Framework und den Entwurf des Child-Themes installieren, danach sollen Sie noch den Entwurf des Child-Themes aktivieren. Mit ihm werden wir weiter arbeiten.

    scr_001_install_theme

    Nachdem Sie das Child-Theme aktiviert haben, sehen Sie die Mitteilung, die Ihnen anbietet, notwendige Plugins zu installieren (Contact Form 7 und Motopress Content Editor). Sie können entweder die Installation anfangen oder diese Mitteilung schließen (wählen Sie eine Variante für Sie).

    scr_002_install_plugins

    Dann können Sie das Thema nutzen und in der Zukunft bearbeiten.

    Versuchen wir so zu tun, damit unser Entwurf so aussehen kann:

    must_do

    Bevor wir anfangen, unser Thema zu bearbeiten, machen wir klar, was es eigentlich ist. Also, am Anfang hat Child-Theme die folgende Struktur der Dateien und Ordner:

    In CherryFramework und Child-Theme wurde der Präprozessor less benutzt, damit man mit CSS-Stilen bequem arbeiten kann. Deswegen ist es besser, die Stile bei der Bearbeitung in .less Dateien zu ändern. Framework wird dann selbst sie in CSS kompilieren. Wenn Sie less nicht nutzen, und die Änderungen in CSS vornehmen möchten, dann machen Sie dies in der Datei style.css, weil die restlichen CSS-Dateien im Child-Theme automatisch aus .less Dateien erzeugt und beim Speichern der Option aktualisiert werden, deswegen werden Ihre Änderungen verloren.

    • CherryTheme
    • bootstrap
    • less – enthält alle .less Dateien, die mit den Stilen bootstrap des Frameworks verbunden sind.
    • css – enthält automatisch erzeugte CSS für bootstrap.
    • images – enthält die Bilder und Icons.
    • includes
    • plugins – enthält erforderliche und empfohlene Plugins fürs Thema.
    • custom-function.php – Datei, wo Sie benutzerdefinierte Funktionen für dieses Child-Theme hinzufügen können.
    • custom-js.php – Datei, wo man die notwendigen für das Child-Theme чайлд-темы js-Dateien verbinden kann. In dieser Datei kann man auch die notwendigen für Sie js-Dateien verbinden, indem man sie in die Funktion cherry_child_custom_scripts() mittels wp_enqueue_script hinzufügt.
    • register-plugins.php – Datei, wo Sie alle erforderlichen und empfohlenen Plugins für das Thema finden können.
    • sidebar-init.php – Datei, wo die Seitenleisten für dieses Child-Theme registriert werden. Sie können Ihre Seitenleisten in dieser Datei registrieren, indem Sie sie innerhalb der Funktion cherry_widgets_init() mittels der Funktion register_sidebar() wählen.
    • theme-init.php – Datei, wo die Grundeinstellungen des Child-Themes festgelegt werden. Die Größen der Miniaturen standardmäßig und die Größen der zusätzlichen Bilder werden festgelegt und Lokalisierungen für benutzerdefinierte Menüs, benutzerdefinierte Typen der Posts und Taxonomie registriert.
    • js – enthält notwendige JS-Dateien.
    • languages – enthält Lokalisierungsdateien.
    • favicon.ico – Icon des Browser-Tabs wird standardmäßig benutzt.
    • main-style.css – CSS-Datei mit den Stilen des Themas. Sie wird automatisch aus style.less erzeugt, deshalb dürfen Sie keine Änderungen in ihr nicht vornehmen.
    • options.php – Datei, die den Wert für die Optionen des Themas standardmäßig enthält. Außerdem kann man in ihr die neuen Optionen hinzufügen.
    • rtl.css – Datei mit den Stilen für die Sprachen (Schreiben von rechts nach links).
    • style.css – CSS-Hauptdatei. Man benötigt sie, damit das ganze Thema korrekt arbeiten kann. Man kann auch zur diesen Datei die benutzerdefinierten CSS-Stile hinzufügen.
    • style.less – .less Datei mit den CSS-Stilen des Themas.
  2. Sammlung des Themas

    1. Vorbereitung
      1. Vor allem lassen Sie uns statische Hauptseite und die Seite für den Blog erstellen – Pages->Add new (Seiten->Neue hinzufügen). Für die Hauptseite als Vorlage wählen wir Home Page.

      2. Dann im Menü Settings->Reading (Einstellungen->Lesen) die Option Front page displays (Hauptseite stellt das) sollen Sie in Static page (Statische Seite) und als Front Page (Hauptseite) und Posts Page (Posts Seite) auch installieren, indem Sie jetzt erstellte Seiten wählen.

      3. Öffnen Sie Menü Settings->Permalinks (Einstellungen->Permalinks) und legen Sie die Einstellungen für Permalinks fest. Wählen Sie, zum Beispiel, “Post name” und speichern Sie die Änderungen.

      4. Öffnen Sie Menü Appearance->Menus (Aussehen->Menü) und erstellen Sie das neue Menü. In “Theme locations” für es wählen Sie Header Menu”, fügen Sie die notwendigen Seiten hinzu und speichern Sie die Änderungen.

        Nachdem Sie diese Schritte gemacht haben, erhalten Sie so etwas wie:

        scr_003_prepare_theme

    2. Einstellung des Sliders

      1. Zuerst müssen Sie sich entscheiden, welche Größe der Dias Sie brauchen, und sie in theme-init.php festlegen. In unserem Beispiel ist es 1170х720. Öffnen Sie die Datei theme-init.php, und finden Sie in ihr die folgende Zeile:

        add_image_size( 'slider-post-thumbnail', 940, 446, true ); // Slider Thumbnail

        und ersetzen Sie die entsprechenden Werte. In unserem Fall erhalten Sie:

        add_image_size( 'slider-post-thumbnail', 1170, 720, true ); // Slider Thumbnail
      2. Jetzt sollen Sie einige Parameter in der Initialisierung des Sliders ändern. Öffnen Sie dafür die Datei custom-function.php und fügen Sie am Ende der Datei, vor dem Schlusstag ?>, den folgenden Code hinzu:

        							add_filter( 'cherry_slider_params', 'my_rewrite_slider_params' );
        							function my_rewrite_slider_params( $params ) {
        									$params['height'] = "'61.5%'";
        									$params['minHeight'] = "'200px'";
        									return $params;
        							}	
        						

        Ziffer 61.5% erhalten wir, indem wir die Höhe unserer Dias durch ihre Breit dividiert und mit 100% multipliziert haben. Diesen Parameter benötigen wir, damit die Größen des Sliders bei unterschiedlichen Bildschirmauflösungen korrekt geändert werden. 200px – ist minimale Höhe des Sliders (Ihr Slider kann entsprechend verkleinert werden).

      3. Sie können anfangen mit dem Slider zu arbeiten, aber Sie sollen nur die Dias hinzufügen. Dies können Sie machen, indem Sie dieser Anleitung folgen. Im Ergebnis müssen Sie so etwas wie erhalten:

        scr_004_slider

        Wenn Sie die Bilder für den Slider hochgeaden und die Größe des Dias in der Datei nich festgelegt haben theme-init.php – werden Ihre Bilder die notwendige Größe nicht haben. Um dies zu beheben, können Sie den Plugin Regenerate Thumbnails nutzen oder die Bilder der Dias noch einmal hochladen.

    3. Insgesamt Stilisierung

      1. Lassen Sie uns zuerst eigenes Logo hochladen. Dafür öffnen Sie im Control Panel Cherry Options->Logo & Favicon (Optionen Cheryy->Logo und Favicon) und laden Sie entweder Ihr Bild mit dem Logo hoch oder wählen Sie die Option “Text Logo” und legen Sie die Stile mittels der entsprechenden Einstellungen fest.

      2. Öffnen Sie den Tab General und legen Sie die Hintergrundfarbe für body und header fest. In unserem Fall ist sie weiß. Sie können auch die Farbe der Links, Stile für die Titel im Thema festlegen.

        scr_006_general_options

    4. Stilisierung des Headers

      1. Legen Sie jetzt allgemeine Stile fest, entfernen Sie die untere Grenze, machen Sie die notwendigen Einrückungen, setzen Sie das Logo und den Slogan, wie es auf dem ersten Bild angezeigt ist. Wir haben schon früher gesagt, dass es besser ist, alle CSS-Stile in die Datei style.less hinzuzufügen, wo sie automatisch in die Hauptdatei der CSS-Stile (main-style.css) kompiliert werden. Je nach Bedarf können Sie die ausführliche Information über die Arbeit mit less hier finden.

      2. Schreiben Sie die notwendigen Vorlagen um. Standardmäßig befinden sich alle Dateien der Vorlagen im Framework, aber wenn Sie die Platzierung oder Reihenfolge der Elemente, HTML-Markup eines Teiles der Seite ändern möchten, dann sollen Sie einige Dateien der Vorlage bearbeiten. Dafür verschieben Sie die notwendige Datei aus dem Framework ins Child-Theme, indem Sie die Ordnerstruktur unveränderlich erhalten und ändern Sie sie in entsprechender Weise im Ordner mit dem Child-Theme (die Dateien dürfen Sie im Framework nicht bearbeitenя, weil alle vorgenommenen Änderungen bei der Aktualisierung des Frameworks verloren werden).

        Jetzt schauen wir alle ausführlich an: stellen wir vor, dass im Thema, das wir sammeln, möchten wir das Menü und das Logo in einer Zeile verschmelzen und das Suchfeld darüber platzieren. Dafür müssen wir die Datei der Vorlage wrapper-header.php, die sich im Ordner “wrapper” im Framework befindet, bearbeiten. Wir erstellen den gleichen Ordner “wrapper” im Ordner mit dem Child-Theme und kopieren in ihm die Datei wrapper-header.php. Alle Dateien im Child-Theme haben eine höhere Priorität und sie werden benutzt, um die Elemente auf der Seite anzuzeigen. Es bleibt nur, den Code zu ändern: verschmelzen Sie das Menü und das Logo in einer Zeile und platzieren Sie das Suchfeld darüber. Im Ergebnis muss der Code in dieser Datei so aussehen:

        							<?php /* Wrapper Name: Header */ ?>
        							<div class="row">
        								<div class="span6 hidden-phone pull-right" data-motopress-type="static" data-motopress-static-file="static/static-search.php">
        									<?php get_template_part("static/static-search"); ?>
        								</div>
        							</div>
        							<div class="row">
        								<div class="span5" data-motopress-type="static" data-motopress-static-file="static/static-logo.php">
        									<?php get_template_part("static/static-logo"); ?>
        								</div>
        								<div class="span7" data-motopress-type="static" data-motopress-static-file="static/static-nav.php">
        									<?php get_template_part("static/static-nav"); ?>
        								</div>
        							</div>
        						

        Speichern Sie die Änderungen und prüfen Sie das Ergebnis. Nachdem Sie alle Schritte gemacht haben, erhalten Sie so etwas wie:

        scr_005_header_1

      3. Stilisieren Sie die übrigen Elemente – Menü, Suchfeld usw. Wenn Sie unseren Empfehlungen gefolgt und zur Bearbeitung less Datei gewählt haben, dann erleichtern Sie sich an diesem Punkt die Arbeit und sparen die Zeit, weil es in less Variablen gibt, mit deren Hilfe Sie den Wert nur einer Variable in einer Stelle ändern müssem, damit die Stile in allen Elementen schnell geändert werden (wo dieser Variable benutzt wurde). Alle Variablen befinden sich in der Datei bootstrap/less/variables.less. Indem Sie diese Datei öffnen, sehen Sie, dass einige Variablen in ihr auskommentiert wurden. Diese Variablen können Sie nutzen, wenn Sie die Stile festlegen, aber ihre Werte werden nicht in der Datei variables.less, sondern in den Optionen des Themas im Control Panel definiert. Zum Beispiel, wenn Sie irgendwo die Variable @linkColor nutzen, wird ihr Wert aus der Option Link Color in den Optionen des Themas genommen. In unserem Fall ist es #e46568, genauso können Sie die Variablen nutzen:

        						@textColor,
        						@linkColorHover,
        						@bodyBackground,
        						@baseFontSize,
        						@baseFontFamily,
        						@baseLineHeight
        						

        Andere Variablen können in der Datein variables.less geändert (festgelegt) werden. Zum Beispiel, wir haben flat Design und wir benötigen abgerundete Ecken, deswegen ersetzen wir die Werte der Variablen @baseBorderRadius, @borderRadiusLarge, @borderRadiusSmal durch 0 usw.

        Nummerierung für Menüpunkte fügen wir hinzu, wie es in dem Artikel geschrieben wurde.

      4. Jetzt verstecken wir das Suchfeld in den Optionen. Sie können fragen, wofür haben Sie dann es stilisiert? Vielleicht wird es nötig, das Suchfeld in der Zukunft hinzuzufügen, dann sollen Sie nur es in den Optionen aktivieren. Sie müssen keine Zeit verlieren, um zu erinnern, wo sich die verbundenen mit ihm CSS-Stile befinden und wie kann man sie dann bearbeiten.

      5. In den Optionen des Themas (Cherry Options) auf dem Tab Navigation gibt es die Option Use stickUp menu – mittels dieser Option können Sie das feste Menü, das beim Scrollen der Seite nach unten immer oben auf dem Bildschirm bleibt, bearbeiten. Aber mit solchem Design ist es richtig oben auf dem Bildschirm nicht nur das Menü sondern auch den ganzen Header zu “kleben”. Nehmen wir die notwendigen Änderungen im Thema vor. Öffnen Sie die Datei custom-function.php und fügen Sie am Ende der Datei, vor dem Schlusstag ?> den folgenden Code:

        						add_filter( 'cherry_stickmenu_selector', 'my_change_selector' );
        						function my_change_selector($selector) {
        								$selector = '.header';
        								return $selector;
        						}
        						

        Dieser Code ändert das Element, für welches der Effekt “Anheften” zur Oberkante des Bildschirms funktionieren wird. Sie können ihn für jegliches Element einstellen, indem Sie .header durch den notwendigen CSS-Selektorа ersetzen. Danach fügen Sie zu CSS-Stilen des Themas den folgenden Code hinzu:

        						.header.isStuck {
        							right: 0;
        							left: 0;
        							box-shadow: 0 5px 10px rgba(0,0,0,.1);
        						}
        						

        Wir haben die Stilisierung des Headers durchgeführt. Sie müssen das folgende Ergebnis erhalen:

        scr_007_header_2

    5. Hinzufügen und Stilisierung des Inhalts

      1. Zuerst gehen wir zum Slider zurück, fügen wir die Text-Banner hinzu und stilisieren wir Navigationselemente.

      2. Jetzt füllen wir die Startseite mit dem Inhalt und stilisieren wir ihn. Den ganzen Inhalt der Seite werden wir im Editor mittels der Standardelemente und Shortcodes, die Framework hinzufügt, erstellen.

        Jetzt geht es um die Titel. Auf Ihrem ersten Bild haben sie spezifische Stile – große Einrückungen und Grenzen. Hier müssen wir uns entscheiden, ob wir solche Stile für alle Titel im Thema standardmäßig festlegen oder den Shortcode Title, der in CherryFramework verfügbar ist, nutzen sollen.

        Die erste Methode ist nicht bequem, weil mehrere Plugins und Elemente des Themas, die außerhalb des Inhalt platziert wurde, nutzen im HTML-Markup verschiedene Titel, die unsere Stile haben. In einigen Fällen kann es unerwartete Ergebnisse bringen. Im Ergebnis müssen wir dann noch Zeit verlieren, um die Stile der notwendigen Elemente zu korrigieren. Um es zu vermeiden, werden wir den Shortcode Title verwenden, damit nur die Titel innerhalb dieses Shortcodes in entsprechender Weise gestaltet werden. Die Inhaltsstruktur wird ungefähr so aussehen:

        							[row]
        							[span4]
        							[title_box title="Lingerie"]
        							<a href="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-1.jpeg">
        							<img class="alignnone wp-image-31 size-full" src="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-1.jpeg" alt="page-img-1" width="370" height="337" /></a>
        							[spacer]
        							[/span4]
        							[span4]
        							[title_box title="News"]
        							<a href="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-2.jpeg">
        							<img class="alignnone wp-image-34 size-full" src="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-2.jpeg" alt="page-img-2" width="370" height="337" /></a>
        							[spacer]
        							[/span4]
        							[span4]
        							[title_box title="Fashion Trends"]
        							<a href="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-3.jpeg">
        							<img class="alignnone wp-image-35 size-full" src="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-3.jpeg" alt="page-img-3" width="370" height="337" /></a>
        							[spacer]
        							[/span4]
        							[/row]
        							[row]
        							[span6]
        							[spacer]
        							[title_box title="welcome"]
        							Mauris fermeum dictum magna. Sed loreet aliquam leote llus dolor dapibus eget elementum vel curs eleifend elit. Aenean aucto. wisi et urna. Aliqat volutpat.
        							Duisac turpis. Integer rutrum ante eu lacuestibulum libero nisl porta vel scelerisque eget malesuada at nequeVivamus eget nibh. Etiamursus leo vel metus. 
        							Nulla facilisi. Aenean nec eros. Vestibulum ante ipsu. m primis in faucibus orci luctus et trices posuere cubilia Suspendisse sollici udin velit sed leo. 
        							Ut pharetra au.
        							[button text="read more" link="#" style="primary" size="normal" target="_self" display="inline" icon="no"]
        							[/span6]
        							[span6]
        							[spacer]
        							[title_box title="why us"]
        							Mauris fermeum dictum magna. Sed loreet aliquam leote llus dolor dapibus eget elementum vel curs eleifend elit. Aenean aucto. wisi et urna. Aliqat volutpat.
        							Duisac turpis. Integer rutrum ante eu lacuestibulum libero nisl porta vel scelerisque eget malesuada at nequeVivamus eget nibh. Etiamursus leo vel metus. 
        							Nulla facilisi. Aenean nec eros. Vestibulum ante ipsu. m primis in faucibus orci luctus et trices posuere cubilia Suspendisse sollici udin velit sed leo. 
        							Ut pharetra au.
        							[button text="read more" link="#" style="primary" size="normal" target="_self" display="inline" icon="no"]
        							[/span6]
        							[/row]
        							

        Die ausführliche Information über Shortcodes, die in Cherry Framework verfügbar sind, können Sie in folgendem Tutorial finden: WordPress. Wie nutzt man Shortcodes (auf der Basis von Cherry).

        Nachdem wir die Stilisierung der notwendigen Elemente durchgeführt haben, wird unser Thema so aussehen:

        scr_008_content

    6. Stilisierung des Footers

      1. Jetzt bearbeiten wird allgemeine Stile des Footers – Grenzen, Einrückungen, Hintergrund usw.

      2. Lassen Sie uns Widgets stilisieren und bearbeiten. Standardmäßig in Cherry Framework sind 4 Widget-Bereiche für den Footer verfügbar. Sie werden in gleiche Spaltenbreite geteilt. In unserem Fall passt uns diese Struktur. Aber wenn wir sie ändern möchten, sollen wir dann 2 Dateien bearbeiten:

        • includes/sidebar-init.php in unserem Child-Theme. In dieser Datei werden alle Widget-Bereiche für unser Child-Theme registriert. In ihr mittels der Funktionen register_sidebar(), unregister_sidebar() können wir neue hinzufügen, existierende Widget-Bereiche löschen oder ändern.

        • wrapper/wrapper-footer.php Datei im Ordner CherryFramework, die Sie vor der Bearbeitung in den Ordner “wrapper” im Child-Theme kopieren müssen. In dieser Datei werden die Widget-Bereiche für den Footer festgelegt, und Sie können auch existierendes HTML-Markup, Platzierung der Widget-Bereiche ändern, eigenen Widget-Bereich mittels der Funktion dynamic_sidebardarstellen.

      3. In den Optionen des Themas (Cherry Options) auf dem Tab Footer (Footer) in der Option Footer copyright text (Copyright-Text im Footer ) legen wir den notwendigen Text für Copyright fest.

  3. Wir haben fast alles gemacht. Jetzt sollen Sie die Webseite anschauen und Stile korrigieren, mit denen Sie nicht zufrieden sind. Und dann ist das Thema fertig.

  4. Zusätzliche Information. Die ausführliche Information über Framework können Sie auf der offiziellen Webseite Cherry Frameworkfinden.

    Unten gibt es die Liste der .less Dateien Bootstrap des Frameworks, die Sie bei der Stilisierung Ihres Themas benötigen können:

    • variables.less – enthält alle .less Variablen. In dieser Datei können Sie erfahren, welche Variablen schon verwendet werden, ihre Werte ändern und sogar eigene Variablen hinzufügen.
    • buttons.less – Stilisierung der Buttons standardmäßig.
    • forms.less – Stilisierung aller Elemente standardmäßig.
    • mixins.less – Mixins (mixins), die standardmäßig benutzt werden.

Wordpress Theme Vorlage
Dieser Eintrag wurde um WordPress Tutorials geschrieben und based, Cherry, create, framework, from, scratch, theme, WordPress markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten