Accentsconagua

So erstellen Sie ein Wordpress-Theme von Grund auf Teil 2

Code
Share

Es ist jetzt Zeit für das Gute. Wir werden das Kommentarsystem, eine Seitenleiste mit Widgets und ein Archiv für alle alten Beiträge hinzufügen. Hier finden Sie alles, was Sie für ein einfaches, aber gut funktionierendes WordPress-Theme benötigen. Hoffentlich können Sie es auf alle möglichen Theming-Projekte anwenden.

Überblick über die Extras

Im Anschluss an den vorherigen Artikel "So erstellen Sie ein WordPress-Theme aus Scratch" werden wir nun die ach so fehlende Seitenleiste, das Kommentarsystem und schließlich eine Archivseite hinzufügen. Dies sollte Sie gut in das WordPress-Theming einführen, Sie könnten sich jedoch immer verbessern, daher gebe ich Ihnen auch ein paar empfohlene Lektüre.

Ich hoffe, Ihnen zu zeigen, wie Sie eine Widget-bereite Seitenleiste einrichten, die Ihnen auch eine Vorstellung davon gibt, wie Sie Widgets zu anderen Bereichen einer Vorlage hinzufügen. Das Kommentarsystem ist ziemlich einfach, aber es gefällt uns immer, dass unsere Website gut aussieht, so dass etwas Styling erforderlich ist. Das Archiv ist eine der Standard-Vorlagendateien von WordPress. Benutzerdefinierte Seiten sind jedoch sehr ähnlich und töten zwei Fliegen mit einer Klappe…

Schritt 1 - Die Seitenleiste

Immer am besten, um die harten Teile zuerst zu bewältigen, richtig? Na dann lass uns anfangen. Erstellen Sie eine neue Datei im Verzeichnis Ihres Themes Functions.php und öffnen Sie es für die Bearbeitung. Fügen Sie Folgendes ein:

 ", 'after_widget' =>", 'before_title' => '
',' after_title '=>'
',)); ?>

Was dies bedeutet, sagen Sie WordPress, dass sich in unserem Design eine Widget-Seitenleiste befindet. Dieser Code kann erweitert werden, um Themes mit mehreren bereiten bereiten Bereichen einzuschließen. Wir weisen auch darauf hin, dass die Seitenleiste unseres Themas ein anderes HTML als das, was WordPress normalerweise ausgibt, benötigt. Dadurch wird verhindert, dass sich die Seitenleisten-Widgets einwickeln

  • Tags, die für uns nicht so gut aussehen würden.

    Lassen Sie uns nun diese Seitenleiste entwerfen und erstellen Sie eine weitere Datei namens sidebar.php und fügen Sie im Folgenden ein.

     
      
    Über
     
    Dies ist die dumme Seitenleiste. Fügen Sie einige Widgets hinzu, um sie zu ändern.

    Was dies tut, ist WordPress einfach zu sagen, wo die Seitenleiste sein soll. Es gibt einen kleinen Standardtext, falls Sie keine Widgets in der Seitenleiste haben.

    Schließlich müssen wir die Sidebar-Datei in einbinden index.php, so öffnen Sie das und fügen Sie kurz vor dem

    Tag, stellen Sie sicher, dass sich das Header-Include-Tag immer noch oben in der Datei befindet.

    Glückwunsch, Sie haben gerade eine dynamische Seitenleiste zum Design hinzugefügt.

    Schritt 2 - Kommentare

    Das WordPress-Kommentarsystem kann so einfach oder so kompliziert sein, wie Sie es wünschen. Da dies jedoch ein einfaches Tutorial ist, das ein einfaches Thema erstellt, verwenden wir die einfache Methode, Kommentare zu unseren Posts hinzuzufügen.

    WordPress macht es einfach, indem es ein Standardsystem für Kommentarsysteme enthält, das mit jeder WordPress-Kopie geliefert wird. Dieses Design kann von jedem Design verwendet werden. Also machen wir es. Aufmachen index.php und setze folgendes nach Zeile 13 (ich spreche gleich nach der Zeile mit allen Postdetails wie die Zeit(), usw.)

    Wie Sie sehen, umfasst dies eine Datei, die wir nicht in unserem Designordner haben, sondern von irgendwo in den verwirrenden Tiefen von WordPress. Spaß beiseite, das macht unser Leben viel einfacher.

    Testen Sie Ihr Thema jetzt. Sie werden feststellen, dass es intelligent genug ist, das Formular und alle Kommentare auf der Startseite nicht anzuzeigen. Wenn Sie jedoch auf einen Beitrag klicken, wird alles nach Belieben dargestellt. Nun… außer der Tatsache, dass der Textbereich zu groß ist. Um dies zu beheben, möchten wir nicht den Kern von WordPress bearbeiten, sondern lediglich eine Zeile CSS hinzufügen und das Lesen etwas einfacher machen. Fügen Sie also am unteren Rand Folgendes hinzu style.css.

     Textbereich # Kommentar Breite: 400px; Polsterung: 5px;  .commentmetadata Schriftgröße: 10px;

    Die erste Zeile begrenzt die Textbereiche auf eine sinnvolle Größe und fügt ein wenig Abstand hinzu, um das Lesen zu erleichtern. Sie haben jetzt ein einfaches, aber sehr funktionelles Kommentarsystem in Ihrem Thema.

    Die Metadaten waren auch etwas klein, so dass die zweite Zeile deckt.

    Schritt 3 - Das Archiv

    Die meisten WordPress-Websites verfügen über ein "Archiv", um nach alten Beiträgen zu suchen. In der Regel werden zwei Listen angezeigt, eine mit Links zu allen Posts in den Site-Kategorien und eine mit allen Posts nach Monat. Dadurch kann das Archiv schnell durchsucht werden und das Benutzererlebnis wird verbessert.

    archives.php wird von WordPress als eine ihrer Standarddateien angesehen, Sie müssen keine speziellen Header hinzufügen, um sie sichtbar zu machen. Wenn Sie jedoch eine andere Seitenvorlage erstellen möchten, die nicht standardmäßig ist, lesen Sie hier.

    Erstellen Sie also die neue Datei und geben Sie Folgendes ein. Alle werden erklärt.

       
     
      
       
    •  
      Archiv nach Kategorie
       
          
       
      •  
    •  
      Archiv für Monat
       
          
       
      •

    Dies kann ziemlich ähnlich aussehen index.php Sie stellen jedoch möglicherweise fest, dass es keine WordPress-Schleife gibt. Dies liegt daran, dass wir eine Seite mit nur einem Element erstellen. Wir können noch Funktionen wie verwenden der Titel() um Informationen über die Seite abzurufen und anzuzeigen.

    Es gibt auch die der Inhalt() Funktion, so dass, wenn Sie einen kleinen Text auf diese Seite gesetzt haben, dieser immer noch angezeigt wird. Nun ist das nächste Zeug ziemlich einfach, es ist eine Standardliste (eigentlich zwei…) mit zwei Funktionen, wp_list_categories () und wp_get_archives (). Beide Funktionen geben eine Standardliste aus, die erste listet alle Website-Kategorien auf und gibt jeder einen Link, über den alle Beiträge in dieser Kategorie angezeigt werden. Die zweite Funktion ist genauso, außer es werden Monate und keine Kategorien angezeigt.

    Durch die Parameter in den Funktionen wird die Kategorie / Monat mit einer Nachzählung für den dynamischen Standortfaktor angezeigt, hehe. Um diese coole Archivseite zu Ihrer Site hinzuzufügen, müssen Sie eine neue Seite erstellen und die Option "Seitenvorlage" in die neue "Archivseite" ändern. Schauen Sie sich das an, eine coole Archivseite für alle, um zu sehen, wie viel Sie geschrieben haben.

    Review - Funktioniert es??

    Ja, die Sidebar macht ihre Arbeit. Gleiches gilt für das Kommentarsystem und die Archivseite. Ich hoffe, das hat Ihnen die Grundlagen gezeigt, wie man ein WordPress-Theme erstellt, auch wenn es in einfachsten Formen vorliegt. Schauen Sie sich die folgenden Links an, um mit den fortgeschrittenen Themen für WordPress zu beginnen.

    Lesen Sie weiter

    • Der WordPress-Codex

      Theme-Entwicklung, der Kodex ist eine klare und gut geschriebene Dokumentation. Wenn Sie von den Erstellern von WordPress stammen, können Sie den Anweisungen nicht folgen.

      Besuch

    • CSS Tricks Screencast

      Es wurde viel über CSS Tricks 3-teilige Anleitung zum Thema WordPress-Themeing gesprochen, also dachte ich, ich hätte es in dieses Thema aufgenommen. Es geht darum, wie man eine schöne Site baut, ein bisschen komplizierter als diese, sollte aber diese Themenkompetenz verbessern.

      Besuch

    Code
    • ×