La tâche était de créer une plate-forme pour les développeurs de PCB avec les fonctionnalités suivantes:
- des calculatrices qui simplifient l'exécution de calculs spécifiques;
- base de connaissances pour le développement de cartes de circuits imprimés;
- blog collectif;
- Messages privés.
J'étais initialement sceptique que cela puisse être fait dans WP sans écrire de modules personnalisés. Les sites d'une page, les blogs, les boutiques en ligne sont simples - oui, mais des calculs d'ingénierie? Mais tout a fonctionné - c'est très bon pour la preuve de concept, et plus encore. Je vais le présenter sous forme de cas séparés afin d'être structuré.
Encore une fois, je suis un développeur d'impression, donc quand j'ai pu réaliser ce que je voulais en changeant le code PHP du plugin, j'étais très heureux. Autrement dit, ce dont je vais parler est pour ceux qui veulent créer un site, mais ils ne comprennent pas les subtilités de WP, CSS et PHP, bien qu'en général ils comprennent la programmation et n'aient pas peur du code.
1. Outils de développement
Je n'ai pas fait une longue analyse comparative des programmes, il me suffisait que la tâche nécessaire soit en train d'être résolue. Voici ce que j'ai utilisé:
- Visual Studio Code est un bon éditeur gratuit pour visualiser et éditer le code du plugin;
- Firefox Developer Edition - pour afficher, modifier et analyser les pages;
- FileZilla - pour partager des fichiers de plugin / thème avec le serveur;
- Total Commander - pour rechercher des fichiers par texte spécifié.
Ici, je vais également inclure un plugin WP - Loco Translate , simplement un outil irremplaçable pour créer ou ajuster la traduction des plugins.
Quant à WP lui-même, dans le segment YouTube en anglais, probablement tout est dit (je ne me souviens pas de ne pas avoir trouvé de réponse à la question qui s'est posée), il y a beaucoup de bons canaux, je mentionnerais les canaux WPBeginner et WordPress Tutorials.
2. Calculatrices
WP a un grand nombre de plugins, mais effectuer des calculs n'est pas du tout une tâche typique, à moins qu'il ne calcule le coût des marchandises ou de l'assurance. Mais il existe un plugin pour cette tâche. Quand je l'ai trouvé, j'ai réalisé que l'idée était réalisable. Formulaire de champs calculés - et même dans la version gratuite, il vous permet de créer des formulaires pour les calculs, en général, c'est génial. L'interface et l'éditeur de formule devront être compris, mais ils sont logiques et bien documentés. Voici à quoi ressemble le menu d'édition en utilisant l'une des calculatrices comme exemple.
Il existe plusieurs types de champs, y compris ceux qui vous permettent d'organiser visuellement le contenu d'un formulaire, mais les principaux sont les champs d'entrée (sélection ou entrée directe d'une valeur) et de sortie (valeurs calculées).
Chaque champ a son propre identifiant avec un numéro de série comme "fieldname% n", en fait c'est le nom d'une variable qui est utilisée dans les calculs des champs calculés. Dans ce cas, les champs calculés du service peuvent être masqués.
Parmi les fonctions prêtes à l'emploi, vous trouverez tout ce dont vous avez besoin, même pour des calculs complexes, y compris la trigonométrie et la trigonométrie inverse. La syntaxe du champ calculé vous permet d'utiliser le branchement if-else, les fonctions js et les appels tiers ( voici un exemple de la documentation). Exemple de syntaxe de fonction:
( function() {
if( fieldname3 > 100 ) return fieldname1+fieldname2;
if( fieldname3 <= 100 ) return fieldname1*fieldname2;
} ) ();
Une fonctionnalité extrêmement utile est la création de dépendances d'affichage sur les valeurs des champs sélectionnés. Voici la section pertinente de la documentation, et voici à quoi elle ressemble dans un exemple:
Pour être honnête, le plugin vient de me sauver. Bien sûr, les pages se sont avérées encombrantes, car dans certains calculs, il y a plusieurs dizaines de champs calculés et des formules complexes. Je veux qu'il vole, donc mes plans sont de traiter l'appel de fonctions tierces qui faciliteraient l'interface, même si je n'ai toujours aucune idée de comment faire cela. Eh bien, voici une étape par étape, je vais le comprendre.
Plus d'expérience, que recommanderais-je:
- Excel ( , : «», «POW»), , .
- , , . , .
- (, ) ' '.
- – «Div», . , . «» , «».
3.
Certains plugins fournissent des fonctionnalités de base dans la version gratuite, mais limitent les options de personnalisation de l'apparence, bien que la personnalisation de l'affichage soit assez simple. Il existe deux outils pour cela: CSS et le code PHP lui-même. Je vais l'expliquer en amateur pour un amateur.
3.1. Styliser avec CSS
Pour chaque élément de la page html, vous pouvez définir le style d'affichage en utilisant CSS:
CSS- {
_1: ;
_2: ;
}
Vous avez juste besoin de google sur les sélecteurs et les propriétés, le développement Web est généralement très bien documenté, même en russe, donc pas de problème. Je ne ferai que quelques commentaires.
Pour savoir quel style est appliqué à un élément et quel est son identifiant, vous avez besoin de Firefox Developer Edition ou équivalent. Un clic droit sur un élément et en sélectionnant «Inspecter l'élément» affiche un charme.
Regardons les sélecteurs dans cet exemple. L'élément d'intérêt est le champ de saisie du nom d'utilisateur. Le code html contient une classe et un identifiant, vous pouvez donc l'utiliser comme sélecteur:
.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 _
Le sélecteur d'identifiant est plus "fort", car il ne peut pas y avoir d'éléments avec le même identifiant sur la même page. Donc, si un formulaire de plug-in particulier n'est utilisé que sur une page ou si le style d'affichage convient à tous les cas, un sélecteur d'identifiant est ce dont vous avez besoin. Mais que faire si aucun identifiant n'est défini pour l'élément, ce qui est souvent le cas. Ensuite, il vaut la peine de regarder la présence de id dans les blocs parents. Par exemple, dans ce cas, le conteneur a id = "user_box". Ensuite, l'élément est accessible comme ceci:
div#user_box input // _#id _
La nidification peut être plus. Par exemple:
div.fep-field div.field-with-icon input //
Puisque dans ce cas l'accès n'est pas id, le style décrit pour ce sélecteur sera applicable à la fois au champ de saisie du nom d'utilisateur et au champ de saisie du sujet du message (tous deux dans des conteneurs de la classe "field-with-icon").
Une autre option qui peut être utile est un sélecteur de valeur de propriété. Pour cet exemple:
input[type="text"] // «type»
Je pense que l'essence est à peu près claire, les essais et erreurs fonctionnent très bien ici. La beauté est que Firefox DE vous permet de modifier le code de la page, les sélecteurs, les propriétés à la volée. Nous obtenons le résultat souhaité - et transférons les modifications résultantes sur le serveur. Il existe trois méthodes pour cela:
- dans le plugin, les paramètres peuvent contenir un champ comme "CSS personnalisé", "Styles supplémentaires", etc.;
- la même chose dans les paramètres d'apparence du thème;
- apporter des modifications au fichier source avec CSS (mis en évidence dans la figure ci-dessus) - avec cette méthode, je n'ai pas réussi avec le fichier de style général du thème style.css, il y a quelque chose de difficile à faire.
Entre les valeurs de la même propriété dans différents sélecteurs, celle avec la priorité la plus élevée sera toujours sélectionnée. La logique est que la définition locale a une priorité plus élevée que la définition globale. Dans le cas où il est impossible de redéfinir une propriété à l'aide d'un sélecteur, c'est-à-dire le modificateur "! Important", qui élève la priorité de la valeur:
input[type="text"] {
padding-left: 40px !important; //
}
La dernière chose à dire sur les sélecteurs est la construction «@media» pour les styles responsives, qui active le sélecteur sous certaines conditions: largeur d'affichage minimale ou maximale, etc. Voici un exemple d'utilisation:
@media(max-width:650px) { //
.comment-body .avatar {
width: 50px !important; //
}
}
En ce qui concerne les propriétés elles-mêmes, il y en a beaucoup et vous devez consulter la documentation pour une tâche spécifique. La chose la plus simple à faire est de changer la couleur, le positionnement et de copier le style fini. Il est pratique de sélectionner la couleur à la volée dans Firefox DE. Concernant le positionnement, vous devez comprendre les différentes valeurs de la propriété "display" et lire, par exemple, cet article.
3.2. Personnaliser l'affichage avec PHP
Les deux principales raisons de modifier le code du plugin PHP sont le remplacement de texte et l'édition de mise en page.
3.2.1. Remplacement du texte
Quant au premier, il doit être résolu à l'amiable en utilisant le menu des paramètres du plugin, ou en utilisant le plugin Loco Translate. Comment fonctionne la localisation des plugins en général? La langue du site est sélectionnée dans les paramètres généraux de la console WP et cela détermine quel fichier de traduction sera utilisé. Le fichier de traduction (extension .po) a la structure suivante:
#: utilities.php:1910 utilities.php:2095 //
msgid "Lost your password?" //
msgstr " ?" //
Dans la ligne correspondante du fichier utilities.php (1910th, par exemple), nous trouvons:
$str .= '<div class="impu-form-links-pass"><a href="'.$lost_pass_page.'">'.__('Lost your password?', 'ihc').'</a></div>';
Ici, vous pouvez voir la chaîne d'origine et l'identifiant du domaine de texte du plugin 'ihc', et la chaîne traduite sera remplacée en conséquence. Loco Translate fournit une interface simple et pratique pour travailler avec des fichiers de traduction.
Parfois, ces lignes contiennent des caractères qui définissent les formats de sortie -% s,% d, etc. - en traduction, ils doivent bien entendu être préservés. Avec eux, au fait, il y a des problèmes avec le pluriel et des fins différentes pour des nombres différents ("3 commentaires", "5 commentaires"), il faut sortir.
Ainsi, parfois, si les développeurs n'indiquent pas l'entrée dans le fichier de traduction, elle ne peut pas être atteinte par la méthode ci-dessus. Vous devez agir différemment. Tous les fichiers de plugin sont téléchargés à partir du répertoire / wp-content / plugins / plugin_name et en utilisant une recherche par ligne ou partie de ligne (Total Commander ou un équivalent pour aider) rechercher le fichier php qui le contient (c'est bien s'il est unique, pas " S'identifier "). Et vous pouvez soit remplacer la chaîne directement dans le code, soit entrer une entrée dans le fichier de traduction et effectuer la traduction souhaitée.
3.2.2. Modification de la mise en page
Une situation peut survenir lorsque vous souhaitez modifier quelque chose qui ne change pas dans les paramètres du plugin ou du thème. Je vais reprendre un exemple ici. Si cette section suscite de l'intérêt et des questions, je la compléterai. Surtout, j'ai terminé le plugin Front End PM pour la correspondance personnelle . Fonctionnalité impopulaire, c'est donc probablement le seul plugin qui l'implémente, donc l'élaboration dans la partie affichage est faible. J'ai remis le fichier original qui formait le bloc supérieur de la page pour montrer comment cela a été fait séquentiellement.
Nous trouvons à travers l '"élément Inspecter" le bloc que nous voulons changer et cherchons des identifiants uniques pour la recherche - ce sont tout d'abord des noms de classe ou des identifiants spécifiques au plugin. Ici id = «fep-header» est défini pour le conteneur commun. La recherche de l'occurrence d'une ligne conduit à un fichier avec le nom explicite header.php. Ouvrez avec VS Code et observez le code suivant:
<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>
Pour ceux qui ne sont pas familiers avec PHP (comme moi), cela ressemble à du HTML, mais avec des inserts <? Php ... code ...?>. Ces insertions sont utilisées pour former une page HTML en fonction de divers paramètres, par exemple des données utilisateur. Autrement dit, PHP est un tel constructeur de page statique et JavaScript est utilisé pour gérer des événements complexes.
J'ai copié le style du panneau supérieur à partir du plugin plus détaillé, supprimé les informations inutiles sur la taille de la boîte aux lettres, changé la façon dont les informations sur les nouveaux messages sont affichées. C'est ce qui s'est passé dans le code et dans l'affichage.
<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>
Naturellement, le processus est itératif et pas très pratique, mais je me suis résigné. Il existe peut-être des moyens plus pratiques. Enregistrez le fichier (VS Code), remplacez le fichier sur le serveur (FileZilla), actualisez la page (Firefox DE). Ce n'est pas le cas le plus difficile, mais cela montre l'essence du processus. Il en va de même pour les tâches plus complexes - avec des changements dans les fonctions, les classes et les tableaux de données, et dans les tâches plus simples - lorsque vous avez juste besoin d'échanger des blocs ou de supprimer les blocs inutiles.
Mais cette approche rend le processus de mise à jour beaucoup plus difficile. Après la mise à jour, probablement (je ne l’ai pas fait tant que cela fonctionne selon le principe «ça marche et c’est bien»), vous devrez refaire les modifications. C'est probablement le principal inconvénient.
4. Performance
WP n'est pas une question de vitesse. Les tentatives pour améliorer la vitesse de téléchargement, pour être honnête, n'ont pas conduit à une augmentation significative, mais ont conduit à un dysfonctionnement. J'ai utilisé le plugin Asset CleanUp pour supprimer le chargement CSS / JS inutile, mais je n'ai pas remarqué d'augmentation notable de la vitesse de chargement (j'ai regardé GTmetrix ), mais j'ai remarqué que certains plugins grimpent sur toutes les pages, qu'ils soient utilisés ou non. En fin de compte, je l'ai éteint. Ensuite, j'ai essayé W3 Total Cachepour la mise en cache des pages sur le serveur - lorsque la page n'est pas générée avec PHP, mais qu'une copie prête est chargée (qui est périodiquement mise à jour). Mais avec cela, mon site s'est écrasé, puis j'ai également vu que le paramètre recommandé n'était pas de mettre en cache les pages pour les utilisateurs connectés, il est devenu clair que la mise en cache des pages dans mon cas est assez difficile à configurer. Je n'ai laissé que la mise en cache partielle de morceaux de code, je vais le comprendre plus (parfois maintenant vous devez réinitialiser le cache pour que les modifications des paramètres du plugin prennent effet).
En général, je pense que dans certains cas, cela fonctionne très bien, mais cela ne m'a pas aidé immédiatement. Si je comprends bien, le WP Rocket payant a une option de mise en cache pour chaque utilisateur, je vais peut-être l'essayer plus tard.
5. Sécurité
À un moment donné à l'institut, il a étudié la spécialité "Sécurité de l'information". Bien qu'après l'obtention de son diplôme, il ait commencé à se lancer dans l'électronique, la déformation professionnelle est restée. Que l'Internet fuit en termes de sécurité. Je peux imaginer combien de vulnérabilités il y a dans WP avec sa structure empilée. Tout le monde ne peut pas être patché, mais j'ai fait les choses les plus simples sur les traces de cette instruction et installé Wordfence - voyons si les performances ne souffrent pas beaucoup, vous pouvez la laisser.
6. Plugins
6.1. Gestion des utilisateurs et des accès
Pour résoudre le problème, j'ai choisi le plugin Indeed Ultimate Membership Pro (41 $). Il existe des didacticiels vidéo distincts dessus - ici. J'ai dû bricoler, beaucoup de réglages, mais je n'écrirai pas sur tout en détail, si j'ai des questions, je répondrai dans les commentaires ou dans les messages privés. Je ne vous parlerai que des méthodes de contrôle d'accès.
Fondamentalement, il existe plusieurs rôles dans le système (qui était à l'origine conçu pour les blogs), et de nombreux plugins fonctionnent avec eux, contrôlant les capacités en fonction du rôle. Le rôle par défaut est défini dans "Paramètres> Général".
Le plugin de gestion des abonnements ajoute une autre couche - le niveau d'abonnement, selon lequel vous pouvez contrôler l'accès au contenu et son affichage pour chaque page, y compris l'affichage des éléments de menu. De plus, les utilisateurs sont divisés en utilisateurs enregistrés et non enregistrés - c'est une autre façon de séparer l'affichage du contenu.
Le plugin n'est pas sans défauts, mais il fait son travail. Il existe de nombreux paramètres, mais il existe des vidéos de formation, vous pouvez le comprendre, le support technique, le cas échéant, vous soutiendra et vous le dira.
6.2. Base de connaissances
Au début, j'ai placé le livre sur la plate-forme à l'aide du plugin de visualisation de pdf, mais il n'y a aucun moyen de créer des liens vers le matériel, et le pdf n'est pas l'option la plus flexible pour la visualisation. Refusé et a décidé d'aller à la base de connaissances. Je vais juste appeler le plugin Echo Knowledge Base , c'est vraiment bien. Mais en ce qui concerne la visualisation de pdf - je ne peux pas m'empêcher de mentionner le plugin Flowpaper , il est très beau, peut-être qu'il sera utile à quelqu'un.
6.3. Vote
J'ai aimé le plugin Yop Poll - encore une fois, il y a tout ce dont vous avez besoin, tous les paramètres, même l'apparence est assez bonne sur la version gratuite.
7. Ce qui n'a pas fonctionné
Un blog collectif a besoin de la possibilité pour les utilisateurs de créer des articles. Le choix n'est pas génial - le plugin User Submitter Posts (il y en a aussi un payant). J'ai même acheté sa version payante, mais cela a tué mon formulaire d'autorisation, un conflit avec le plugin de gestion des abonnements - j'ai rendu l'argent, le développeur n'a pas résolu le problème, a tout blâmé sur les autres plugins. Mais ce n'est pas le but. Le formulaire de création de publication ne permet pas de télécharger et d'insérer des images dans la publication.
A commencé à comprendre les droits, il était utile, installé un plugin utile User Role Editor . Il s'est donc avéré ne charger l'image que lorsque l'utilisateur avait le droit de modifier toutes les pages. Tin plein, bien sûr, désactivé, alors que vous ne pouvez mettre un lien URL vers les images. Le problème ici est que la publication n'existe pas encore et WP envisage d'ajouter l'image en modifiant la page contenant le formulaire de création de publication. Peut-être que quelqu'un vous dira comment résoudre ce problème?
8. Conclusion
WP a permis de créer à moindre coût un projet pilote d'une plate-forme sans la fonctionnalité la plus simple. Il a résolu son problème en créant un point de départ pour un développement ultérieur. Si vous avez des questions supplémentaires sur le contenu de l'article, je serai heureux de partager mon expérience. Je serai également reconnaissant pour les commentaires et recommandations des spécialistes (pour améliorer les performances - un CDN comme CloudFlare, ou un WP Rocket payant, un hébergement spécialisé comme WP Engine ou Wordfence aura-t-il réellement besoin).
Bonne chance à tous!