So organisieren Sie die Entwicklung und Unterstützung eines Blogs in WordPress in 2Q19 und beheben es nicht

Denken Sie im Voraus über Skalierung nach, nutzen Sie Standard-Wordpress-Lösungen optimal, erstellen Sie ein WP-Thema mit Ihren eigenen Händen, kümmern Sie sich um die Bequemlichkeit eines Layout-Designers, konzentrieren Sie sich auf Mobilität - und aktualisieren Sie den Blog des Unternehmens, damit Leser, Redakteure und Führungskräfte ihn lieben. Wir haben es geschafft.

Promopults Blog ist 9 Jahre alt. Während dieser Zeit durchlief er mehrere Transformationen. Sergey Glazov , der Technologe unseres Blogs und anderer wichtiger Dinge im Promopult-System, spricht über Letzteres.

Dies wird nicht mehr diskutiert, da es zur Norm geworden ist: ein schneller und einfacher Standard für das Blog eines Unternehmens, eine Person, ein persönliches, ja, was auch immer, WordPress. Sie können argumentieren, aber die Tatsache bleibt.

Ich möchte darüber sprechen, was ich in Bezug auf die Organisation des Codes, die Arbeit mit dem WordPress-Blog und dessen Unterstützung erreicht habe. Diese Geschichte handelt von dem Prozess, da der aktuelle Status der letzte Punkt in diesem Prozess ist und es den Anschein hat, dass der aktuelle Status im Vergleich zu allen früheren Iterationen in den Ansätzen zur Organisation am erfolgreichsten ist.

Was ist bei (meinem) Start passiert - im Jahr 2016

Es ist selten, wenn ein Entwickler alles von Grund auf neu erstellt und durchdacht. Häufiger stellt sich heraus, dass bereits ( oft sogar vor langer Zeit, mit einer separaten Historie ) ein Projekt unterstützt werden muss. Neugestaltung, Änderungen, große TK und Anforderungen. Und unter den Bedingungen des Bestehenden ist es notwendig, irgendwie schnell zu navigieren und Probleme zu lösen.

Ich habe den Blog 2016 angenommen, als er bereits eine lange Geschichte hatte und nicht alles so schön ist, wie ich wollte.

1. Altes Blog-Design mit einer neunjährigen Geschichte.
2. Das Fehlen einer Handy- / Tablet-Version in irgendeiner Form.
3. Mehr als 600 Beiträge.
4. Strukturelle Probleme mit Inhalten und ihrer Organisation: mehr als 20 Kategorien und mehr als neunhundert Tags (jetzt mehr, aber wir haben bereits aufgehört).
5. Die Pläne haben bereits ein Rebranding und den Umzug in eine neue Domain. Dies gilt auch für den Blog.
6. Eine lange Kette von Aktionen bei der Arbeit mit Code.
7. Arbeiten Sie ohne Versionskontrolle (.git).

Erste Aufgaben: Mobilisierung und Design

Die Hauptaufgabe bestand darin, das bestehende Thema des Blogs anpassungsfähig zu machen: Mobile Benutzer können Beiträge lesen und die Website angemessen nutzen. Sie sprachen und schrieben immer mehr über Mobile First , und Statistiken zeigten, dass sie das Blog von Mobilgeräten aus lesen.

Parallel zu diesen Arbeiten wurde ein neues Design gezeichnet.

Als Entwickler habe ich mit dem Designer zusammengearbeitet, ohne eine unnötige Kette von Mediatoren in der Diskussion, sodass der Kommunikationsprozess schneller und lebendiger war. Die offensichtliche Tatsache natürlich, aber aus irgendeinem Grund wird sie in vielen Prozessen vernachlässigt. Und es stellt sich heraus, dass der Designer etwas tut, das sehr von der Realität getrennt ist. Sprechen Sie mit Ihrem Mund und besprechen Sie alle Punkte. Jeder Teilnehmer am Prozess ist daran interessiert, Gutes und Cooles zu tun. Aber nicht jeder versteht, dass der Prozess eine zusammenhängende Kette ist. Wenn ein einzelner Darsteller an seinem Arbeitsplatz etwas verpasst oder nicht tut, wird es für die Menschen im nächsten Prozess schwierig.

Während der Arbeit an der mobilen Version habe ich die Nachteile und Schwächen der Organisation des Entwicklungsprozesses gesehen. Ich wollte alles beschleunigen und vereinfachen.

Wie bei der Arbeit am Code im Blog

Es gab eine DEV-Version des Blogs mit einer separaten Testdatenbank. Die Arbeit mit Dateien fand auf einem Remote-Server statt, die Tests fanden an einer separaten Adresse statt, auf die in der Außenwelt nicht zugegriffen werden konnte. Nach der Arbeit, dem Testen und der Geburt einer bestimmten Bedeutungseinheit wurde sie durch einen Aufruf an den Administrator auf dem Battle-Blog veröffentlicht. Was er tat, war eine separate Magie.

Für einen Blog, in dem sich einmal im Jahr etwas ändert, ein großartiger Prozess. Aber mit der neuen Ausgabe und ihren Bedürfnissen wäre ein solcher Prozess ein großer Schmerz.

Was ich bekommen wollte, wie sie sagen, "in einer idealen Welt"

Der gesamte Code liegt in. Git- Repositories. Die Kampfversion des Blogs ist der master dieses Repositorys. Alle Arbeiten mit dem Code erfolgen durch dev an einen dev oder andere Zweige, die mit einzelnen großen Aufgaben verbunden sind.

Nach Abschluss der Aufgabe wird eine Pull-Anforderung (PR) und / oder eine Zusammenführungsanforderung (MR) mit einer Reihe von Änderungen erstellt. Die Bedeutung in MR und PR ist gleich, aber in verschiedenen Diensten - ein anderer Name. Wir haben GitLab , also Merge Request.

Beim Erstellen von MR wird eine temporäre Adresse des Formulars-git-branch-test.dev.blog.promopult.ru verfügbar, auf die nur über IP für die Live-Überprüfung in der Testumgebung -git--test.dev.blog.promopult.ru werden kann.

Der Code im erstellten MR wird automatisch überprüft und überprüft (Code-Linter, bei dem ich die Syntax nach vordefinierten Regeln überprüfe) und im manuellen Modus (die vertikale Leistung im Team, der Timlid betrachtet ihn sorgfältig mit seinem konvexen, aufmerksamen Auge). Nach bestandener Überprüfung - über die Browser-Oberfläche des .git-Repositorys wird die Schaltfläche "Zusammenführen" gedrückt und alle Änderungen werden nach einer kurzen offensichtlichen Zeitspanne im Kampfblog angezeigt.

Neugestaltung, erster Ansatz

Arbeitsplan für die Neugestaltung des Blogs:

1. Layout eines statischen Prototyps für die Designlayouts aller Seiten;
2. Das Layout in ein WordPress-Theme verwandeln ("Stretching").

Layout - eine separate Arbeitsstufe. Für die bequeme Arbeit mit Stilen (CSS), Markup und JS verwendete das Projekt eine Reihe von Plugins und Modulen, die über die im Builder SPT (Start Project Template) beschriebenen Gulp-Aufgaben zusammengestellt werden.

Die Schlüsselwörter, die im Sammler eines statischen Blog-Themas verwendet werden, sind: HTML, CSS, JS, Babel, Gulp, PostCSS, SCSS, Nunjucks.

Nach Abschluss des Layouts war die Struktur wie folgt (es werden nur Verzeichnisse der ersten Ebene angezeigt ):

  ├── Design # Design, Layouts und alles
 ├── app / # Projektquellen: separate Module
 ├── dist / # Die zusammengestellte Version des Projekts (HTML-Dateien) und die gesamte Statik
 ├── gulpfile.js / # Config Gulp.js
 └── package.json # Collector-Konfigurationsdatei: Pakete, Skripte 

Jedes einzelne visuelle semantische Element auf der Seite, beispielsweise eine Postkarte ( /components/article_card/ ), war ein Ordner, in dem es sich befand:

- Markup-Datei ( article_card.html ),

- article_card.scss ( article_card.scss ),

- JS-Datei ( article_card.js ).

Und jede Seite wurde aus solchen separaten Komponentenblöcken zusammengesetzt. Blöcke sind bequem zu bearbeiten, und Änderungen wirken sich nicht auf benachbarte Elemente aus.

Bei der Ausgabe erstellte der Collector den Ordner dist , der vorgefertigte HTML-Dateien mit Seiten zur visuellen Anzeige im Browser während der Bearbeitung und Koordination sowie eine Stildatei, alle Themen und zwei JS-Dateien app.js : Eine Datei ( app.js ) beschrieb die Logik und das Verhalten Die zweite vendor.js ( vendor.js ) enthielt alle für die Site verwendeten Bibliotheken (jQuery, fotorama, Magnific-Popup und andere).

Als nächstes müssen Sie all dies in ein WordPress-Thema verwandeln und über die Dateistruktur nachdenken. Damit Sie bequem mit einem statischen Layout arbeiten und daneben ein WP-Thema legen können.

Liste der vom Designer erstellten Layouts. Sie sind die gleichen wie die WordPress-Blog-Themendateien:

• Homepage ( home.php Datei).
• single.php Post / Post-Seite ( single.php ).
• Ansicht einer einzelnen Textseite ( page.php ).
• Die Newsletter-Abonnementseite ( subscribe.php ).
• Fehler 404 ( 404.php ).
• Separate Tag-Seite ( tag.php ).
• Separate Kategorieseite ( category.php ).
• Suche und Suchergebnisse ( search.php ).

Ein Workflow mit diesem Ansatz und der Trennung der statischen Version und der WordPress-Version des Themas lautet wie folgt: Wenn Sie etwas im visuellen Teil korrigieren müssen, werden die Änderungen in der statischen Version vorgenommen und nach dem Test auf das Thema übertragen. Wenn in einem nicht visuellen Teil Änderungen erforderlich sind, werden nur WP-Themendateien geändert.

Der Blog- bsp ist bsp . Es befindet sich entlang des Pfads im Ordner mit den Themen des Blogs selbst:

  ├── wp-content / # Benutzerdefinierte WordPress-Site-Dateien
 │ ├ Themen / # Site-Themen
 / │ ├ App / # Quellen eines statischen Themas
 Ul │ │ ├ gulpfile.js / # Gulp-Aufgaben für die Montage
 │ │ ├ dist / # Erstellen Sie ein statisches Thema
 / │ │ ├ Assets / # Ressourcen: JS, CSS und Grafiken 
 │ │ ├ bsp / # WP-PromoPult-Blog-Thema
 Assets │ │ ├ Assets / # Ressourcen: JS, CSS und Grafiken, Kopieren von `/ dist /`
 │ │ │ ├ home.php # Die Hauptseite des Blogs und andere Dateien im Stammverzeichnis des Themas 

Der Ort des WordPress-Themas ist offensichtlich und durch die Dateistruktur von WordPress selbst vorgegeben.

Es gibt keine anderen Themen im Themenverzeichnis - alles, was Standard ist, wurde gelöscht. Es gibt einen Mythos über die Steigerung der Produktivität auf diese Weise, aber wir haben dies nicht bemerkt. Dies geschieht mehr für die Bestellung im Code. Sie müssen nicht speichern, was nicht verwendet wird und wird definitiv nicht verwendet.

Ebenfalls in .git sind alle verwendeten WP-Plugins enthalten. Auf unserer Website sind dies Google XML-Sitemaps, RSS für Yandex Turbo, RusToLat und WP-PostViews.

Der statische, kompilierte Prototyp der Blogseiten und Quelldateien wurde in das Blog-Themenverzeichnis verschoben, um bequem mit dem logischen Teil der Vorlage und mit allem zu interagieren, was für das Erscheinungsbild und Verhalten der Elemente auf der Seite verantwortlich ist.

Eine statische Version der Projektassembly - mit der Quelle und allen Abhängigkeiten beim ersten Versuch, die Struktur zu organisieren - wurde im Themenverzeichnis abgelegt.

Das heißt, neben dem Haupt- bsp Thema wurde das Verzeichnis /app hinzugefügt, in dem sich der Quellcode für das Themenlayout und den Gulp-Collector befinden. In dieser Version gab es jedoch einen schwierigen Moment: Statische Dateien wurden in einem separaten Verzeichnis generiert, und damit die Änderungen im WP-Theme vorgenommen werden konnten, mussten die statischen Stildateien und Skripte in den assets Ordner innerhalb des Themas kopiert werden.

Zweiter Ansatz: eine neue Version der Struktur

In den ersten Wochen wurde dies durch ein einfaches Konsolenskript entschieden, das die gesammelten Dateien von einem statischen Thema in ein WP-Thema kopierte. Übermäßiges Handeln führt zu Fehlern. Daher bestand die Möglichkeit nur darin, die Struktur zu korrigieren.

Wir haben drei wichtige Verzeichnisse (von der Wurzel):

1. WP-Thema: /wp-content/themes/bsp
2. Quellen eines statischen Themas: /app
3. Gesammeltes statisches Thema: /dist

Und darin befinden sich assets mit Stildateien, Grafiken und JS

Sie müssen alles so anordnen, dass die Dateien mit statischen Stilen und Skripten im gewünschten Ordner ( /wp-content/themes/bsp/assets ) /wp-content/themes/bsp/assets .

Die neue Version der Struktur war wie folgt:

  ├── gulpfile.js / # Gulp-Aufgaben für die Montage
 ├── wp-content / # Benutzerdefinierte WordPress-Site-Dateien
 │ ├ Plugins / # WP-Plugins
 │ ├ Themen / # Site-Themen
 Sp │ ├ bsp / # PromoPult-Blog-Thema
 / │ │ ├ app / # Quellen eines statischen Themas
 Assets │ │ ├ Assets / # Ressourcen: JS, CSS und Grafiken (automatische Generierung)
 │ │ │ ├ home.php # Die Hauptseite des Blogs und andere Dateien im Stammverzeichnis des Themas
 ├── wp-admin / # WP-Dateien für das Admin-Panel
 ├── wp-enthält / # WP-Dateien des Systems 

Die Wurzel des gesamten Projekts sind Schluckaufgaben - und werden von der Wurzel aus ausgeführt. Die Konfiguration von gulp-task beschreibt die Struktur, in der statische Dateien aus dem Verzeichnis wp-content/themes/bsp/assets wp-content/themes/bsp/app in wp-content/themes/bsp/assets ohne zusätzliche Aktionen wie Kopieren usw. wp-content/themes/bsp/assets werden.

WP-Themendateien bleiben unverändert und die Arbeit wird gemäß dem alten Szenario fortgesetzt: Änderungen in der Statik → Übertragung in WP-Dateien. CSS- und JS-Statiken werden sofort im Themenordner generiert und alles funktioniert einfach.

Bei all dem ging es um den Arbeitsprozess. Nun dazu, wie der Blog aufgebaut ist.

PromoPult Blog: Wie es funktioniert

Die Hauptmacht des Blogs ist das Team. Herausgeber, Autoren, Layouter.

Die große Aufgabe besteht darin, die Arbeit mit Blog-Inhalten im Admin-Bereich bequemer zu gestalten. Unter Berücksichtigung der Tatsache, dass das Thema unseres Blogs speziell für Inhaltsaufgaben und redaktionelle Anfragen erstellt wurde, wurde das Admin-Panel entsprechend geändert.

Checkliste vor Veröffentlichung

Jede Arbeit ist wichtig zu kontrollieren. Das Layout des Artikels ist ein standardisierter, formalisierter Prozess, der einfach in Form einer Checkliste dargestellt werden kann.

Die Jungs haben die Idee von EmailSoldiers gesehen . Wir haben beschlossen, es zu Hause anzuwenden.

Wenn ein Element nicht aktiviert ist, werden Sie vom System vor der Veröffentlichung gewarnt.

Durch Klicken auf die Links, unterstrichene Links im Listenelement - markieren Sie ein bestimmtes Element.

Die Checkliste wird in derselben Reihenfolge wie die zusätzlichen Post-Einstellungen im Admin-Bereich erstellt.

Blogpost-Einstellungen

Eng verwoben mit der oben beschriebenen Publikations-Checkliste.

Bei der Entwicklung des Themas habe ich versucht, keine Plugins zu verwenden, sondern eine einfache Lösung für die Aufgaben des Themas zu finden. Highlights:

• Beschreibungen für SEO-Meta-Tags.
• Beschreibungen für OpenGraph-Tags, die soziale Netzwerke verwenden, um Material auszutauschen und schöne Artikelkarten zu bilden.
• Bequeme Arbeit mit Titelbildern für Beiträge. Ein Bild ist erforderlich - es wird der Postkarte in der Publikationskachel hinzugefügt, die auf der Hauptseite und auf der Überschriften- oder Tag-Seite angezeigt wird.
• Zusätzliche Themeneinstellungen: Ein Beitrag kann mit oder ohne Cover sein, es gibt einen kurzen Ankündigungstext, den wir in der Kopfzeile mit einem Cover anzeigen, und er wird auch in der Beschreibung des Artikels in der Digest-Mailingliste verwendet.

Der Abschnitt mit den Post-Einstellungen wird über Meta-Boxen und benutzerdefinierte Felder in WordPress implementiert.

Über das Meta-Feld wurde auch die Publikations-Checkliste hinzugefügt.

In Vorlagen ist das Arbeiten mit Feldern einfach: Wenn das Feld nicht leer und gefüllt ist, erhalten wir den Wert und zeigen ihn an. So wird beispielsweise die Blockreaktion auf den Beitrag angezeigt:

 <?php if (get_post_meta($post->ID, 'postreaction', true)) { ?> <div class="article_reaction"> <div class="label-reaction"><span><?php echo get_post_meta($post->ID, 'postreaction', true); ?></span></div> </div><!-- /.article_reaction --> <?php } ?> 

Ein Beispiel für eine Reaktionsausgabe auf einer Postkarte:

Schöne kleine Dinge

Es gibt einige nette kleine Dinge, die vielleicht niemand sieht. Aber wenn jemand es bemerkt hat - gut.

Zum Beispiel die Veröffentlichungsdaten eines Beitrags in Karten und in einem separaten Beitrag in unserem kyrillischen Alphabet und wissen, wie man sich verbeugt. Aus irgendeinem Grund ist dies nicht in der WordPress-Box. Wenn das Veröffentlichungsdatum im aktuellen Jahr liegt, wird das Jahr bei uns nicht angezeigt. Wenn das Jahr vom aktuellen Jahr abweicht, wird das Datum zusammen mit dem Veröffentlichungsjahr angezeigt.

Kommentarzähler posten. Sie argumentierten lange Zeit, dass "0 Kommentare" oder "keine Kommentare" sehr verwirrend sind. Die Lösung ist sehr einfach: Zeigen Sie den Kommentarzähler überhaupt nicht an, wenn weniger als ein Kommentar vorhanden ist.

Im Allgemeinen arbeiten wir separat an einem Kommentarsystem und möchten darüber in einem separaten großen Beitrag sprechen. Wir erstellen ein einfaches und bequemes Kommentarsystem mit einfacher Autorisierung über soziale Netzwerke.

Eigene Likes: Das Kommentieren oder Teilen von Links in sozialen Netzwerken hängt von der Geschwindigkeit des Inhaltsverbrauchs ab. Klicken Sie jedoch auf „ Gefällt mir“ und machen Sie deutlich, dass der Artikel cool ist - einfach und schnell. Wir machten unsere einfachen Likes und legten den Zähler auf die Postkarte. Und die Likes kommen ziemlich schnell an. Und da sie sich am Ende des Artikels befinden, ist dies auch ein Signal dafür, dass der Text gelesen wurde.

Sie haben ein dunkles Thema für ihren Blog erstellt - jetzt ist es in Mode. Unter Berücksichtigung des modularen Aufbaus (tatsächlich besteht die Site aus einer Reihe von Blöcken, die irgendwie untereinander kombiniert sind) und der Organisation der Stile stellte sich heraus, dass dies ziemlich schnell erledigt wurde.

Über eine interessante technische

Markup- Code , CSS und JS werden im Thema minimiert . CSS und JS werden durch Gulp-Tasks im Statics Collector komprimiert, die Minimierung des WP_HTML_Compression erfolgt jedoch über den WordPress-Hook WP_HTML_Compression .

Und in den Kommentaren im Markup haben wir einen Werbecode für diejenigen hinzugefügt, die daran interessiert sind, wie die Site von innen angeordnet ist, und die sich zunächst den Quellcode ansehen:

CSS- und JS-Caching. Um Stile und Skriptdateien zwischenzuspeichern, aber immer relevant zu sein, verwenden wir filemtime (), wenn wir etwas überarbeitet haben. Viele verwenden in diesem Fall ?<?php echo time(); ?> ?<?php echo time(); ?> . Diese Option lädt jedoch die Datei herunter und stellt bei jedem Aufruf eine Anfrage.

Besser einen solchen Trick anwenden:

 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/styles/style.css?t=<?php echo filemtime(get_theme_file_path().'/assets/styles/style.css'); ?>" /> 

In diesem Fall werden die Dateien heruntergeladen, wenn sie geändert wurden, und das Datum, an dem die Datei geändert wurde, wird dem Anforderungsparameter hinzugefügt.

Welche Plugins verwenden wir?

Trotz der Möglichkeit und des Wunsches, in einigen Fällen mit Ihrer Entscheidung auszukommen, verwenden wir weiterhin Plugins. Unsere Liste lautet wie folgt:

• Google XML-Sitemaps - zum Generieren einer XML-Sitemap für Roboter;
• RSS für Yandex Turbo - Turboseiten für Yandex;
• RusToLat - Transliteration der URL russischer Zeichen ins Englische;
• WP-PostViews - zählt Ansichten von Materialien;
• Klassischer Editor - Enthält den klassischen WordPress-Editor anstelle des neuen Blocks Gutenberg.
• Die Einschränkung von Autorisierungsversuchen dient der Sicherheit: Bei mehreren fehlerhaften Anmeldeversuchen sperren wir einen eingehenden für einen benutzerdefinierten Zeitraum.
• AMP - AMP-Seiten für Google.

Schlussfolgerungstipps für diejenigen, die am Blog eines Unternehmens arbeiten

• Ich rate Ihnen zu Beginn der Projektarbeit, sofort über eine Skalierung nachzudenken.
• Verwenden Sie bei Ihrer Arbeit .git . Für 2019 natürlich seltsame Ratschläge, aber dieser Rat kann jemanden vor grauen Haaren bewahren und zurechtweisen, wenn etwas schief geht.
• Es ist besser, die Entwicklung und Arbeit an einem WordPress-Thema in zwei Phasen zu unterteilen: erstens etwas Statisches erstellen und bereits etwas wie ein WordPress-Thema „ziehen“.
• Wenn es eine Gelegenheit gibt - Zeit, Team und Verständnis dafür, warum Sie all dies brauchen - tun Sie es selbst, ohne vorgefertigte Optionen zu verwenden. Gewinnen Sie in Ordnung und verstehen Sie, wie alles funktioniert. Sie werden keine Krücken produzieren.
• Verwenden Sie Standard-WordPress-Hooks und -Funktionen, wenn Ihr Blog darauf basiert. Das Anpassen und Erstellen einer bequemen Lösung ist schnell und einfach.
• Machen Sie es dem Benutzer und den Redakteuren bequem.
• Vergessen Sie nicht die sozialen Netzwerke und das Mikro-Layout.
• Vergessen Sie nicht die mobilen Versionen.
• Vergessen Sie nicht die regelmäßigen Updates von Plugins und Systemen.
• Wählen Sie nur bewährte Plugins aus.

Die Arbeit am Blog geht weiter - bleiben Sie bei uns.