Die Aufgabe bestand darin, eine Plattform für Leiterplattenentwickler mit folgenden Funktionen zu erstellen:
- Taschenrechner, die die Durchführung bestimmter Berechnungen vereinfachen;
- Wissensbasis für die Entwicklung von Leiterplatten;
- kollektiver Blog;
- Private Nachrichten.
Ich war anfangs skeptisch, dass dies in WP möglich ist, ohne benutzerdefinierte Module zu schreiben. Einseitige Websites, Blogs und Online-Shops sind einfach - ja, aber technische Berechnungen? Aber alles hat geklappt - für einen Proof-of-Concept ist es sehr gut und dann - darüber. Ich werde es in Form von Einzelfällen präsentieren, um es zu strukturieren.
Ich bin wieder ein Druckentwickler. Als ich durch Ändern des PHP-Codes eines Plugins das erreichen konnte, was ich von einem Plugin wollte, war ich sehr glücklich. Das heißt, ich werde über diejenigen sprechen, die eine Site erstellen möchten, aber die Feinheiten von WP, CSS und PHP nicht verstehen, obwohl sie im Allgemeinen die Programmierung verstehen und keine Angst vor Code haben.
1. Entwicklungswerkzeuge
Ich habe keine lange vergleichende Analyse der Programme durchgeführt, es hat mir gereicht, dass die notwendige Aufgabe gelöst wurde. Folgendes habe ich verwendet:
- Visual Studio Code ist ein netter kostenloser Editor zum Anzeigen und Bearbeiten von Plugin-Code.
- Firefox Developer Edition - zum Anzeigen, Bearbeiten und Analysieren von Seiten;
- FileZilla - zum Teilen von Plugin- / Themendateien mit dem Server;
- Total Commander - zum Suchen nach Dateien anhand des angegebenen Textes.
Hier werde ich auch ein WP-Plugin einfügen - Loco Translate , einfach ein unersetzliches Tool zum Erstellen oder Anpassen der Übersetzung von Plugins.
Was WP selbst betrifft, wird im englischsprachigen YouTube-Segment wahrscheinlich alles erzählt (ich erinnere mich nicht, dass ich die Antwort auf die gestellte Frage nicht gefunden habe). Es gibt viele gute Kanäle. Ich würde die Kanäle WPBeginner und WordPress Tutorials erwähnen.
2. Taschenrechner
WP hat eine große Anzahl von Plugins, aber das Durchführen von Berechnungen ist überhaupt keine typische Aufgabe, es sei denn, es berechnet die Kosten für Waren oder Versicherungen. Für diese Aufgabe gibt es jedoch ein Plugin. Als ich es fand, wurde mir klar, dass die Idee realisierbar war. Formular für berechnete Felder - und selbst in der kostenlosen Version können Sie Formulare für Berechnungen erstellen. Im Allgemeinen ist es großartig. Die Benutzeroberfläche und der Formeleditor müssen herausgefunden werden, aber sie sind logisch und gut dokumentiert. So sieht das Bearbeitungsmenü am Beispiel eines der Taschenrechner aus.
Es gibt verschiedene Arten von Feldern, einschließlich solcher, mit denen Sie den Inhalt eines Formulars visuell anordnen können. Die wichtigsten sind jedoch Eingabefelder (Auswahl oder direkte Eingabe eines Werts) und Ausgabefelder (berechnete Werte).
Jedes Feld hat eine eigene Kennung mit einer Seriennummer wie "Feldname% n". Tatsächlich ist es der Name einer Variablen, die bei Berechnungen in berechneten Feldern verwendet wird. In diesem Fall können die vom Service berechneten Felder ausgeblendet werden.
Unter den vorgefertigten Funktionen finden Sie alles, was Sie auch für komplexe Berechnungen benötigen, einschließlich trigonometrischer und inverser trigonometrischer Funktionen. Mit der berechneten Feldsyntax können Sie if-else-Verzweigungen, js-Funktionen und Aufrufe von Drittanbietern verwenden ( hier ein Beispiel aus der Dokumentation). Beispiel für eine Funktionssyntax:
( function() {
if( fieldname3 > 100 ) return fieldname1+fieldname2;
if( fieldname3 <= 100 ) return fieldname1*fieldname2;
} ) ();
Eine äußerst nützliche Funktion ist die Erstellung von Anzeigeabhängigkeiten von den Werten ausgewählter Felder. Hier ist der relevante Abschnitt aus der Dokumentation, und so sieht es in einem Beispiel aus:
Um ehrlich zu sein, hat mich das Plugin gerade gerettet. Natürlich erwiesen sich die Seiten als umständlich, da in einigen Berechnungen mehrere Dutzend berechnete Felder und komplexe Formeln vorhanden sind. Ich möchte, dass es fliegt, daher habe ich vor, mich mit dem Aufruf von Funktionen von Drittanbietern zu befassen, die die Schnittstelle erleichtern würden, obwohl ich noch keine Ahnung habe, wie das geht. Nun, hier ist eine Schritt-für-Schritt-Anleitung, ich werde es herausfinden.
Mehr aus Erfahrung, was würde ich empfehlen:
- Excel ( , : «», «POW»), , .
- , , . , .
- (, ) ' '.
- – «Div», . , . «» , «».
3.
Einige Plugins bieten grundlegende Funktionen in der kostenlosen Version, beschränken jedoch die Optionen zum Anpassen des Erscheinungsbilds, obwohl das Anpassen der Anzeige recht einfach ist. Hierfür gibt es zwei Tools - CSS und den PHP-Code selbst. Ich werde es als Amateur für einen Amateur erklären.
3.1. Styling mit CSS
Für jedes Element der HTML-Seite können Sie den Anzeigestil mithilfe von CSS definieren:
CSS- {
_1: ;
_2: ;
}
Sie müssen nur über Selektoren und Eigenschaften googeln, die Webentwicklung ist im Allgemeinen sehr gut dokumentiert, auch auf Russisch, also kein Problem. Ich werde nur einige Kommentare geben.
Um herauszufinden, welcher Stil auf ein Element angewendet wird und wie seine Kennung lautet, benötigen Sie Firefox Developer Edition oder eine gleichwertige Version. Wenn Sie mit der rechten Maustaste auf ein Element klicken und "Element untersuchen" auswählen, wird ein Charm angezeigt.
Schauen wir uns in diesem Beispiel die Selektoren an. Das interessierende Element ist das Eingabefeld für den Benutzernamen. Der HTML-Code enthält eine Klasse und eine ID, sodass Sie ihn als Selektor verwenden können:
.input-text input // ._ _ (. 1)
input.input-text // _._ (. 2)
#fep-message-top input // #id _ (. 1)
input#fep-message-top // _#id (. 2)
#fep-message .input-text // #id _
Der ID-Selektor ist "stärker", da auf derselben Seite keine Elemente mit derselben ID vorhanden sein können. Wenn also ein bestimmtes Plugin-Formular nur auf einer Seite verwendet wird oder der Anzeigestil für alle Fälle geeignet ist, benötigen Sie einen ID-Selektor. Was aber, wenn für das Element keine ID festgelegt ist, was häufig der Fall ist? Dann lohnt es sich, das Vorhandensein von id in übergeordneten Blöcken zu untersuchen. In diesem Fall hat der Container beispielsweise die ID = "user_box". Dann kann auf das Element folgendermaßen zugegriffen werden:
div#user_box input // _#id _
Verschachtelung kann mehr sein. Als Beispiel:
div.fep-field div.field-with-icon input //
Da in diesem Fall der Zugriff nicht id ist, gilt der für diesen Selektor beschriebene Stil sowohl für das Eingabefeld für den Benutzernamen als auch für das Eingabefeld für den Nachrichtensubjekt (beide in Containern der Klasse "Feld mit Symbol").
Eine weitere nützliche Option ist die Auswahl von Eigenschaftswerten. Für dieses Beispiel:
input[type="text"] // «type»
Ich denke, die Essenz ist ungefähr klar, Versuch und Irrtum funktionieren hier großartig. Das Schöne ist, dass Sie mit Firefox DE Seitencode, Selektoren und Eigenschaften im laufenden Betrieb bearbeiten können. Wir erzielen das gewünschte Ergebnis - und übertragen die daraus resultierenden Änderungen auf den Server. Hierfür gibt es drei Methoden:
- Im Plugin können die Einstellungen ein Feld wie "Benutzerdefiniertes CSS", "Zusätzliche Stile" usw. enthalten.
- das gleiche in den Darstellungseinstellungen des Themas;
- Nehmen Sie Änderungen an der Quelldatei mit CSS vor (siehe Abbildung oben). Mit dieser Methode ist mir die allgemeine Stildatei des Themas style.css nicht gelungen. Es gibt etwas Schwieriges zu tun.
Zwischen den Werten derselben Eigenschaft in verschiedenen Selektoren wird immer der mit der höchsten Priorität ausgewählt. Die Logik ist, dass die lokale Definition eine höhere Priorität hat als die globale. In dem Fall, in dem es unmöglich ist, eine Eigenschaft mit einem Selektor zu überschreiben, dh mit dem Modifikator "! Important", der die Priorität des Werts erhöht:
input[type="text"] {
padding-left: 40px !important; //
}
Das Letzte, was Sie über Selektoren sagen können, ist das Konstrukt „@media“ für reaktionsfähige Stile, das den Selektor unter bestimmten Bedingungen aktiviert: minimale oder maximale Anzeigebreite usw. Hier ist ein Anwendungsbeispiel:
@media(max-width:650px) { //
.comment-body .avatar {
width: 50px !important; //
}
}
Es gibt viele Eigenschaften, und Sie müssen sich die Dokumentation für eine bestimmte Aufgabe ansehen. Am einfachsten ist es, die Farbe und Position zu ändern und den fertigen Stil zu kopieren. Die Farbauswahl ist in Firefox DE praktisch. In Bezug auf die Positionierung müssen Sie die verschiedenen Werte der Eigenschaft "display" verstehen und beispielsweise diesen Artikel lesen .
3.2. Anpassen der Anzeige mit PHP
Die beiden Hauptgründe für die Bearbeitung des PHP-Plugin-Codes sind das Ersetzen von Text und das Bearbeiten des Seitenlayouts.
3.2.1. Text ersetzen
Das erste Problem sollte auf gütliche Weise über das Einstellungsmenü des Plugins selbst oder über das Loco Translate-Plugin gelöst werden. Wie funktioniert die Plugin-Lokalisierung im Allgemeinen? Die Sprache der Site wird in den allgemeinen Einstellungen in der WP-Konsole ausgewählt und bestimmt, welche Übersetzungsdatei verwendet wird. Die Übersetzungsdatei (Erweiterung .po) hat folgende Struktur:
#: utilities.php:1910 utilities.php:2095 //
msgid "Lost your password?" //
msgstr " ?" //
In der entsprechenden Zeile der Datei utilities.php (z. B. 1910) finden wir:
$str .= '<div class="impu-form-links-pass"><a href="'.$lost_pass_page.'">'.__('Lost your password?', 'ihc').'</a></div>';
Hier sehen Sie die ursprüngliche Zeichenfolge und die ID der Textdomäne des Plugins 'ihc'. Die übersetzte Zeichenfolge wird dadurch ersetzt. Loco Translate bietet eine einfache und bequeme Oberfläche für die Arbeit mit Übersetzungsdateien.
Manchmal enthalten diese Zeilen Zeichen, die die Ausgabeformate definieren -% s,% d usw. - In der Übersetzung müssen sie natürlich erhalten bleiben. Bei ihnen gibt es übrigens Probleme mit dem Plural und unterschiedlichen Endungen für unterschiedliche Zahlen ("3 Kommentare", "5 Kommentare"), man muss raus.
Wenn die Entwickler den Eintrag in der Übersetzungsdatei manchmal nicht angeben, kann er mit der oben beschriebenen Methode nicht erreicht werden. Du musst anders handeln. Alle Plugin-Dateien werden aus dem Verzeichnis / wp-content / plugins / plugin_name heruntergeladen und suchen mithilfe einer Zeile oder eines Teils einer Zeile (Total Commander oder ein gleichwertiges Hilfsmittel) nach der PHP-Datei, die sie enthält (es ist gut, wenn sie eindeutig ist, nicht " Anmeldung "). Sie können entweder die Zeichenfolge direkt im Code ersetzen oder einen Eintrag in die Übersetzungsdatei einfügen und die gewünschte Übersetzung vornehmen.
3.2.2. Layout bearbeiten
Eine Situation kann auftreten, wenn Sie etwas ändern möchten, das sich in den Plugin- oder Designeinstellungen nicht ändert. Ich werde hier ein Beispiel durchgehen. Wenn dieser Abschnitt Interesse und Fragen weckt, werde ich ihn ergänzen. Vor allem habe ich das Front-End-PM- Plugin für die persönliche Korrespondenz fertiggestellt . Unbeliebte Funktionalität, daher ist dies wahrscheinlich das einzige Plugin, das es implementiert, und dementsprechend ist die Ausarbeitung im Anzeigeteil gering. Ich habe die Originaldatei, die den oberen Block der Seite bildete, zurückgesetzt, um zu zeigen, wie es nacheinander gemacht wurde.
Wir finden über das "Inspect Element" den Block, den wir ändern möchten, und suchen nach eindeutigen Bezeichnern für die Suche - dies sind zunächst Plugin-spezifische Klassennamen oder IDs. Hier wird id = "fep-header" für den gemeinsamen Container gesetzt. Die Suche nach dem Auftreten einer Zeile führt zu einer Datei mit dem selbsterklärenden Namen header.php. Öffnen Sie mit VS Code und beachten Sie den folgenden Code:
<div id="fep-header" class="fep-table">
<div>
<div>
<?php echo get_avatar( $user_ID, 64, '', fep_user_name( $user_ID ) ); ?>
</div>
<div>
<div>
<strong><?php esc_html_e( 'Welcome', 'front-end-pm' );?>: <?php echo fep_user_name( $user_ID ); ?></strong>
</div>
<div>
<?php echo strip_tags( sprintf( __('You have %1$s and %2$s unread', 'front-end-pm'), '<span class="fep_unread_message_count_text">' . sprintf( _n( '%s message', '%s messages', $unread_count, 'front-end-pm' ), number_format_i18n( $unread_count ) ) . '</span>', '<span class="fep_unread_announcement_count_text">' . sprintf( _n( '%s announcement', '%s announcements', $unread_ann_count, 'front-end-pm' ), number_format_i18n( $unread_ann_count ) ) . '</span>' ), '<span>' ); ?>
</div>
<div class="<?php echo $box_class; ?>">
<?php echo strip_tags( sprintf( __( 'Message box size: %1$s of %2$s', 'front-end-pm' ), '<span class="fep_total_message_count">' . number_format_i18n( $total_count ) . '</span>', $max_text ), '<span>' ); ?>
</div>
</div>
<?php do_action( 'fep_header_note', $user_ID ); ?>
</div>
</div>
Für diejenigen, die nicht mit PHP vertraut sind (wie ich), sieht es aus wie HTML, aber mit <? Php ... code ...?> Inserts. Diese Einfügungen werden verwendet, um eine HTML-Seite in Abhängigkeit von verschiedenen Parametern, z. B. Benutzerdaten, zu erstellen. Das heißt, PHP ist ein solcher statischer Seitenkonstruktor, und JavaScript wird zur Behandlung komplexer Ereignisse verwendet.
Ich habe den Stil des oberen Bedienfelds von einem ausführlicheren Plugin kopiert, unnötige Informationen über die Größe des Postfachs entfernt und die Art der Anzeige von Informationen über neue Nachrichten geändert. Dies ist im Code und im Display geschehen.
<div class="fep-header">
<div class="fep-header-left-side">
<div class="fep-user-page-avatar">
<?php echo get_avatar( $user_ID, 96, '', fep_user_name( $user_ID ) ); ?>
</div>
</div>
<div class="fep-header-right-side">
<div class="fep-header-username">
<?php echo fep_user_name( $user_ID );?>
</div>
<div class="fep-header-top-info">
<?php
if( $unread_count == 0 && $unread_ann_count == 0 )
{
echo sprintf( __(' .', 'front-end-pm'));
}else{
if( $unread_count != 0 )
echo sprintf( __(' : %d<br>', 'front-end-pm'), $unread_count);
if( $unread_ann_count != 0 )
echo sprintf( __(' : %d', 'front-end-pm'), $unread_ann_count);
}
?>
</div>
</div>
<?php do_action( 'fep_header_note', $user_ID ); ?>
<div class="fep-top-background"></div>
</div>
Natürlich ist der Prozess iterativ und nicht sehr bequem, aber ich habe mich zurückgezogen. Vielleicht gibt es bequemere Wege. Speichern Sie die Datei (VS-Code), ersetzen Sie die Datei auf dem Server (FileZilla) und aktualisieren Sie die Seite (Firefox DE). Dies ist nicht der schwierigste Fall, aber es zeigt die Essenz des Prozesses. Dies gilt auch für komplexere Aufgaben - mit Änderungen an Funktionen, Klassen und Datenfeldern sowie für einfachere -, wenn Sie nur Blöcke austauschen oder unnötige löschen müssen.
Dieser Ansatz erschwert jedoch den Aktualisierungsprozess erheblich. Nach dem Update müssen Sie die Änderungen wahrscheinlich erneut vornehmen (ich habe es nicht getan, solange es nach dem Prinzip "Es funktioniert und es ist gut" funktioniert). Dies ist wahrscheinlich der Hauptnachteil.
4. Leistung
Bei WP geht es nicht um Geschwindigkeit. Versuche, die Download-Geschwindigkeit zu verbessern, führten ehrlich gesagt nicht zu einer signifikanten Erhöhung, sondern zu einer Fehlfunktion. Ich habe das Asset CleanUp- Plugin verwendet , um unnötiges CSS / JS-Laden zu entfernen, habe jedoch keinen merklichen Anstieg der Ladegeschwindigkeit festgestellt (ich habe mir GTmetrix angesehen ), aber ich habe festgestellt, dass einige Plugins auf allen Seiten aufsteigen, unabhängig davon, ob sie dort verwendet werden oder nicht. Infolgedessen habe ich es vorerst ausgeschaltet. Dann habe ich W3 Total Cache ausprobiertzum Zwischenspeichern von Seiten auf dem Server - wenn die Seite nicht mit PHP generiert wird, sondern eine fertige Kopie geladen wird (die regelmäßig aktualisiert wird). Aber damit stürzte meine Site ab, und dann sah ich auch, dass die empfohlene Einstellung nicht darin besteht, Seiten für angemeldete Benutzer zwischenzuspeichern. Es wurde klar, dass das Zwischenspeichern von Seiten in meinem Fall ziemlich schwierig ist. Ich habe nur teilweise Code-Teile zwischengespeichert, ich werde es genauer herausfinden (manchmal müssen Sie jetzt den Cache zurücksetzen, damit Änderungen an den Plugin-Einstellungen wirksam werden).
Im Allgemeinen denke ich, dass es in einigen Fällen großartig funktioniert, aber es hat mir nicht sofort geholfen. Soweit ich weiß, hat die kostenpflichtige WP Rocket eine Caching-Option für jeden Benutzer. Vielleicht werde ich es später versuchen.
5. Sicherheit
Einmal am Institut studierte er das Fachgebiet "Informationssicherheit". Obwohl er nach seinem Abschluss anfing, sich mit Elektronik zu beschäftigen, blieb die berufliche Verformung bestehen. Dass das Internet in Bezug auf Sicherheit undicht ist. Ich kann mir vorstellen, wie viele Schwachstellen in WP mit seiner gestapelten Struktur vorhanden sind. Nicht jeder kann gepatcht werden, aber ich habe die einfachsten Dinge in den Fußstapfen dieser Anweisung getan und Wordfence installiert - mal sehen, ob die Leistung nicht viel leidet, können Sie es lassen.
6. Plugins
6.1. Benutzer- und Zugriffsverwaltung
Um das Problem zu lösen, habe ich das Plugin Indeed Ultimate Membership Pro (41 US-Dollar) gewählt. Es gibt separate Video-Tutorials - hier. Ich musste viele Einstellungen basteln, aber ich werde nicht über alles im Detail schreiben, wenn ich irgendwelche Fragen habe, werde ich in den Kommentaren oder in privaten Nachrichten antworten. Ich werde Ihnen nur die Methoden der Zugangskontrolle erläutern.
Grundsätzlich gibt es mehrere Rollen im System (das ursprünglich für Blogs zugeschnitten war), und viele Plugins arbeiten mit ihnen und steuern die Funktionen abhängig von der Rolle. Die Standardrolle wird unter "Einstellungen> Allgemein" festgelegt.
Das Abonnementverwaltungs-Plugin fügt eine weitere Ebene hinzu - die Abonnementstufe, mit der Sie den Zugriff auf Inhalte und deren Anzeige für jede Seite einschließlich der Anzeige von Menüelementen steuern können. Außerdem werden Benutzer in registrierte und nicht registrierte Benutzer unterteilt. Dies ist eine weitere Möglichkeit, die Anzeige von Inhalten zu trennen.
Das Plugin ist nicht fehlerfrei, aber es macht seinen Job. Es gibt viele Einstellungen, aber es gibt Schulungsvideos, Sie können es herausfinden, der technische Support wird Sie, wenn überhaupt, unterstützen und Ihnen mitteilen.
6.2. Wissensbasis
Zuerst habe ich das Buch mit dem PDF-Viewer-Plugin auf der Plattform veröffentlicht, aber es gibt keine Möglichkeit, Links zum Material zu erstellen, und PDF ist nicht die flexibelste Option zum Anzeigen. Weigerte sich und beschloss, zur Wissensbasis zu gehen. Ich rufe einfach das Plugin Echo Knowledge Base an , es ist wirklich gut. Aber was das Anzeigen von PDF angeht - ich kann nicht anders, als das Flowpaper- Plugin zu erwähnen . Es ist sehr schön, vielleicht ist es für jemanden nützlich.
6.3. Wählen
Ich mochte das Yop Poll Plugin - wieder gibt es alles was du brauchst, alle Einstellungen, sogar das Aussehen ist in der kostenlosen Version ziemlich gut.
7. Was hat nicht funktioniert
Ein kollektives Blog benötigt die Fähigkeit der Benutzer, Beiträge zu erstellen. Die Auswahl ist nicht großartig - das User Submitter Posts Plugin (es gibt auch ein solches kostenpflichtiges). Ich habe sogar die kostenpflichtige Version gekauft, aber mein Autorisierungsformular wurde gelöscht, ein Konflikt mit dem Abonnementverwaltungs-Plugin. Ich habe das Geld zurückgegeben, der Entwickler hat das Problem nicht gelöst und alles anderen Plugins angelastet. Aber darum geht es nicht. Das Veröffentlichungsformular für Veröffentlichungen bietet keine Möglichkeit, Bilder hochzuladen und in die Veröffentlichung einzufügen.
Begann sich mit den Rechten zu befassen, war es nützlich, ein nützliches Plugin User Role Editor zu installieren . Es stellte sich also heraus, dass das Bild nur geladen wurde, wenn dem Benutzer die Berechtigung zum Bearbeiten aller Seiten erteilt wurde. Zinn voll natürlich deaktiviert, während Sie nur einen URL-Link zu Bildern setzen können. Das Problem hierbei ist, dass der Beitrag noch nicht vorhanden ist und WP das Hinzufügen eines Bildes als Bearbeitung der Seite betrachtet, die das Formular zum Erstellen des Beitrags enthält. Vielleicht sagt dir jemand, wie man diesen Stecker löst?
8. Fazit
WP ermöglichte es, mit minimalen Kosten ein Pilotprojekt einer Plattform mit nicht der einfachsten Funktionalität zu erstellen. Er löste sein Problem, indem er einen Ausgangspunkt für die weitere Entwicklung schuf. Wenn Sie weitere Fragen zum Inhalt des Beitrags haben, teile ich gerne meine Erfahrungen mit. Ich bin auch dankbar für die Kommentare und Empfehlungen von Spezialisten (um die Leistung zu verbessern - wird ein CDN wie CloudFlare oder eine kostenpflichtige WP Rocket, ein spezialisiertes Hosting wie WP Engine oder Wordfence tatsächlich benötigt).
Allen viel Glück!