2021 Sommet sur les percées technologiques: entre obstacles et difficultés

Avez – vous déjà évité d’utiliser des blocs personnalisés parce que les sites WordPress semblent trop complexes? Ignorons cette voix. Dans cette leçon, vous apprendrez à utiliser des blocs personnalisés Genesis pour construire à partir de zéro des blocs dont l’apparence et le comportement correspondent exactement à vos besoins. Vidéo: entre les diapositives Block et hard session dans cette session, Rob Stinson, directeur marketing des produits de WP Engine, a discuté de la création de thèmes WordPress, de l’édition complète du site Web et de la vision avancée pour l’avenir des blockbusters personnalisés. Les blocs de codage personnalisés en temps réel de WordPress et un guide étape par étape sur la façon de commencer. Pendant deux ans et demi, vous pouvez utiliser l’éditeur de bloc pour créer des messages ou des pages, et tout le contenu dans cette zone de contenu est géré par l’éditeur de bloc. Vous pouvez quitter ces lignes en éditant le site complet. Il est maintenant l’éditeur de bloc et est maintenant responsable de l’ensemble du site.
Rob Stinson, Directeur du marketing des produits moteurs du WP transcription complète Rob Stinson: Buona giornata a tutti. Bienvenue au sommet des moteurs du WP 2021. J’espère que vous avez aimé l’événement jusqu’à présent. Merci beaucoup de vous joindre à moi. J’espère que vous obtiendrez beaucoup de choses de ce qu’on a fait aujourd’hui. Cette session est appelée entre un bloc et un emplacement dur. Il s’agit de maîtriser WordPress moderne, qui implique absolument l’éditeur de blocs et les blocs que nous y utilisons. Je m’appelle Rob Stinson et je suis l’un des directeurs du marketing de produits de WP engine. Je travaille en étroite collaboration avec l’équipe de produits pour construire du contenu pour l’éditeur de blocs.
Aujourd’hui, nous devons donc nous occuper de trois grandes questions. Nous procéderons à un examen de haut niveau de l’avenir des thèmes WordPress. Ensuite, nous allons jeter un coup d’oeil à la collection personnalisée, qui s’aligne très étroitement sur le modèle de bloc, qui est ce qui commence à apparaître
Au cœur de WordPress. Nous examinerons les blocs personnalisés. Et les blocs personnalisés, nous allons faire un peu de codage en temps réel, ce qui est toujours un peu effrayant. Je ne sais pas si tu savais que tu ne pouvais plus écrire quand quelqu’un t’a regardé taper. Eh bien, je vais participer à la programmation en direct, donc c’est le cas pour 10 personnes. Ça dépend, hein?
OK, mais d’en haut, regardons l’avenir des thèmes WordPress. D’où nous venons, si vous avez travaillé dans une agence ou freelance pendant au moins quelques années et avez déjà participé à des implémentations personnalisées sur WordPress, vous commencez généralement par une bibliothèque de thèmes. Vous pouvez avoir des traits d’union bas, puis modifier et construire le thème. Ou vous pouvez avoir un cadre parent comme le cadre Genesis, ou le thème woocommerce crew store. Tout peut être un thème parent. Tu commences par là. Ce sera une bonne base pour vous. Par conséquent, vous avez vos propres sous – thèmes dans lesquels vous pouvez mettre en œuvre certains modèles de conception globale uniques liés au projet. Tu vas arranger quelque chose. Vous pouvez ajouter plus de modèles pour différents modèles de page ou d’archive, ou ajouter d’autres modèles basés sur ce que votre projet couvre.
Bien sûr, vous avez votre propre plug – in WordPress qui vous offre des fonctionnalités, des intégrations et des choses comme ça. Assez simple, très familier. C’est de là qu’on vient. Mais on va ailleurs. Dans le contexte de WordPress, l’avenir semble un peu différent. Je sais que notre rédacteur en chef a été deux ans et demi et qu’il est devenu fou si vite. Mais il y a des changements en cours au sein de WordPress, et une phase de développement est en cours, avec l’introduction de l’édition complète du site et d’autres choses qui ont vraiment changé les choses et changé notre façon de faire à l’avenir. Où est st?
Le fichier change. Ensuite, les rôles et les types de code que nous écrivons dans le sujet changent.
Beaucoup d’entre nous connaissent ce grand diagramme, la hiérarchie des modèles. Je me souviens du projet où je l’ai trouvé, et c’était comme, Oh, c’était génial. C’est le plus gros atout de tous les temps. Ça m’a beaucoup aidé à comprendre. La hiérarchie des modèles reste pertinente, mais elle doit être modifiée et pourrait simplifier beaucoup de choses dans l’édition de l’ensemble du site, car l’endroit où nous modélisons nos pages est en fait largement déplacé vers l’expérience WordPress, pas seulement dans le Code. Modèles de bloc, dans une large mesure, j’ai mentionné comment ces modèles remplacent les modèles de page. Un schéma de bloc est un bloc de contenu prédéfini. Il peut s’agir d’un bloc de héros, d’une partie d’un formulaire de contact ou d’une partie d’une équipe, ou en fait d’une page entière. Vous pouvez emballer et enregistrer n’importe quel groupe de blocs qui appartient ensemble et qui est marqué pour travailler ensemble, puis distribuer comme modèle de bloc.
Ce qui est intéressant, c’est que j’aimerais suggérer, et je sais que d’autres le feront aussi, qu’il s’agit d’une nouvelle catégorie de produits dans l’écosystème WordPress. Depuis des années, nous avons tous des thèmes et des plugins. Et bien, le plus important, c’est que c’est notre sujet et notre plugin, mais maintenant nous avons un plan de blocage. Il y a un répertoire en mode bloc sur WordPress. L’org vient de commencer et j’aimerais voir comment il a grandi. Je ne serai pas surpris, mais l’année prochaine, ce sera rapide. Ensuite, nous avons des blocs personnalisés. Je ne pense pas que cette étagère fonctionne bien. Nous avons de grands blocs dans WordPress corp et de bons plug – ins qui peuvent nous fournir des blocs supplémentaires, comme le plug – in Genesis Block est bon. Je sais qu’il y en a d’autres sur le marché.
Mais vous pouvez
Paramètres Et le contenu initial a été inséré. Ainsi, les créateurs de contenu peuvent arriver, publier du contenu, certains modèles sur la page sont tout à fait conformes au style de la marque, ils ont juste besoin de vérifier et de modifier le contenu. Dans Genesis, une expérience de découverte améliorée est un moyen. Donc, fondamentalement, ce n’est pas seulement l’expérience des modèles de blocs natifs, nous les avons améliorés afin que vous puissiez mieux gérer les modèles de blocs, les découvrir, les sauvegarder et les ajouter aux favoris, etc. Enfin, découvrez et explorez tous les modèles de toutes ces collections, et trouvez – les facilement et placez – les sur la page afin que vous puissiez les éditer. Donc cette image sur ma droite est en fait une collection personnalisée que j’a i créée pour le tutoriel il y a environ un mois. Ça s’appelle Lux. C’est une petite collection. C’est juste une page, comme la page d’accueil. Je pense qu’il y a six modèles distincts dans toute la page d’accueil. Il y a une section sur les héros, une section sur l’information et une section sur nos services. Il y a une zone témoin. Au fait, très bien. Tout a été conçu à l’avance, comme des couleurs ciselées, et nous avons trouvé de grandes images et des choses. Mais cela signifie que je peux créer un verrouillage de page d’accueil standard sur cette très bonne marque. Ainsi, si vous avez besoin de créer une nouvelle page d’atterrissage ou un nouveau contenu, le personnel de l’activité Lux que j’ai inventée peut simplement utiliser ces modèles de bloc dans la collection Lux personnalisée que j’ai créée. Ils peuvent ajouter une section héros et changer le titre. Ils peuvent supprimer le bouton. S’ils n’ont pas besoin de boutons, ils peuvent changer l’image ou d’autres contenus. Imaginez donc pour votre client. Et moi
Les thèmes de contenu que vous activez peuvent être utilisés avec ces modèles de conception étonnants. Ils ne sont pas enfermés Comme dans le quartier. Désolé, c’est peut – être de vieux modèles de page, mais ce ne sont pas seulement des toiles vierges. Ces choses ont été créées, elles sont toutes sur cette marque, elles peuvent être insérées dans une page et modifiées à la page d’atterrissage dont elles ont besoin. Il est intéressant de penser à ce qu’est un modèle de bloc ou à ce qu’il remplace dans la grande valeur future. Je pense que le rôle des thèmes pour enfants va changer dans le monde de l’édition sur le site WordPress. Vous pouvez avoir un thème de magasin woocommerce. Il y a beaucoup de très bons thèmes pour enfants sur le marché. Ils diffèrent en termes de conception, de fonctionnalité, etc. Dans une large mesure, les modèles de blocs traitent de nombreux problèmes à cet égard. Il serait donc intéressant de savoir comment le schéma de bloc et Genesis (une collection qui l’entoure) peuvent vous fournir un ensemble complet de schémas de bloc différents. Au fur et à mesure qu’elle se présente, nous lui apportons, bien entendu, un soutien important. Comme je l’ai dit, nous sommes très excités par l’orientation qu’il prend et nous le voyons comme une nouvelle catégorie de produits que les gens vont commencer à construire et à distribuer dans l’écosystème WordPress. Comment construire une collection personnalisée? C’est une réunion de 30 minutes. Alors je vais revoir ma réplique. Mais si vous voulez approfondir, je vous suggère de vous référer au tutoriel que j’ai écrit. Donc, avant d’écrire n’importe quel Code, tout ce que vous avez à faire est de sauter dans l’éditeur de bloc et de construire votre propre page. Par exemple, j’ai créé une partie de héros, puis une partie de service, puis une partie de témoignage, peu importe ce qu’ils sont. J’utilise l’éditeur de bloc pour affiner le style et tout le contenu. En particulier sur Lux, je peux également utiliser des blocs dans le plug – in Genesis Block
Lux ion. Je vais cliquer dessus. Vous pouvez voir ces différentes parties de la page. Information, procès, témoignage ou quoi que ce soit. Ou c’est toute la page. En un seul clic, tout est traîné directement sur la page parce que tout le contenu est un bloc et tout est stylisé dans le contexte du bloc, donc je peux sauter très, très facilement et m’assurer que je fais ce que cette page veut. OK, numéro trois. Partie 3 de cette leçon: blocs personnalisés. Nous détaillerons comment créer des blocs personnalisés en utilisant un plug – in appelé blocs personnalisés Genesis. Il s’agit d’un plugin wordpress qui nous fournit une interface de gestion. Quand je dis admin, je veux dire dans WordPress admin. Il existe également un système de Templates très simple pour créer des blocs Gutenberg personnalisés. Comme je l’ai dit précédemment, les blocs personnalisés nous permettront de faire quelque chose qui semble et fonctionne exactement comme nous le voulons. Un produit standard ne résoudra donc pas ce problème. Il est important de noter ici que le plug – in de bloc personnalisé Genesis aime également le plug – in de bloc Genesis, qui est l’emplacement de la collection, et aucun des deux plug – ins ne dépend du cadre Genesis. Je pense qu’ils appartiennent au même ensemble de produits. Mais si le bloc personnalisé Genesis est le seul plug – in que vous avez installé, vous pouvez le faire. Tu peux encore faire tout ce que j’ai à faire ici aujourd’hui. Il se trouve dans le dépôt WordPress. Organisation. Ce n’est pas seulement un apéritif léger, vous pouvez aussi obtenir un plugin teaser. C’est très, très riche en fonctionnalités et nous y sommes, et c’est génial. En fait, tout ce que je vous ai montré aujourd’hui est en fait utilisé gratuitement. Vous pouvez obtenir une clause du plugin via l’abonnement Genesis pro qui vous offre de nombreuses fonctionnalités supplémentaires. Mais si vous voulez juste voir ceci en premier, vous pouvez voir gratuitement sur WordPress. Organisation. L’idée générale est d’ajouter des blocs à partir de WordPress admin
Personnalisation. Tu l’as mis en place avec quelque chose. Ajouter un champ à celui – ci peut être considéré comme ajoutant un champ au formulaire. Puis vous le Publiez, vous le sauvegardez. Puis vous commencez à écrire le Code. Notez le code très simple pour le mode bloc. Maintenant, si vous êtes satisfait de HTML et CSS, si vous insérez d’abord une ligne de code dans le fichier de fonction et le sujet, regardez, c’est ce dont vous avez besoin. C’est très, très simple. C’est tout l’objectif de ce plug – in de réduire les obstacles à l’entrée lors de la création de blocs personnalisés. Et c’est tout. C’est ainsi qu’une fois le modèle terminé, vous pouvez ajouter et utiliser des blocs personnalisés sur n’importe quelle page ou post dans WordPress, ce qui est bien. C’est pour qui? Développeurs WordPress. Je dis que ce plug – in est un outil de développement. Par exemple, si vous êtes un freelance qui travaille seul par l’intermédiaire d’une grande équipe Web d’entreprise, utilisez ce plug – in pour créer des blocs personnalisés. Tu peux être Junior. Comme je l’ai dit, vous pouvez commencer à écrire du Code dans WordPress et vous pouvez facilement utiliser ce plugin. Mais je connais aussi beaucoup de vrais ingénieurs seniors au sein d’équipes institutionnelles très intéressantes qui utilisent ce plugin uniquement pour améliorer leur efficacité. La valeur qu’il offre est qu’il simplifie le processus de perfectionnement des compétences. Au début de cette leçon, j’ai dit que le changement n’est pas toujours facile, alors rendons – le plus facile, et c’est ce que fait ce plugin. En général, il accélère la production de blocs. Il simplifie également les itérations. Une fois qu’un bloc est sauvage et en production, et que vous voulez éditer quelque chose, vous pouvez facilement l’itérer en utilisant le plug – in. Il simplifie également l’intégration avec des plug – ins tiers, des applications, etc. Une autre chose sur les blocs personnalisés que je vais vous montrer
C’est une question de choix contre la décision. Nous avons tous vu, et même reçu une page du destinataire, même WordPress, qui nous a peut – être été transmise par la création de page ou d’une manière similaire, il y a juste un sentiment d’« écrasement», submergé, et je pense que c’est le mot, avec tant d’options. Il existe une variété de contrôles de style, tels que les ombres extérieures et les rayons de bord, la largeur et les bords, et dans certains cas, vous pouvez également copier ce que vous pouvez faire dans CSS dans l’interface utilisateur. C’est une menace pour un utilisateur final, un créateur de contenu. Mais pour les développeurs responsables de la livraison, nous implémentons quelque chose basé sur une conception vraiment spécifique qui doit fonctionner d’une manière ou d’une autre et nous n’avons pas besoin de passer chaque option à l’utilisateur final. C’est une des choses intéressantes sur les blocs personnalisés. On peut en enlever. Nous pouvons décider ce qui ne devrait appartenir qu’au modèle et donc ce qui devrait être transmis à l’utilisateur final. Bref, écoute, ça suffit. Nous faisons un bloc personnalisé. Il est temps d’avoir une programmation en direct. OK, j’ai installé WordPress ici, je suis en cours d’exécution locale, et c’est un autre très bon développement que vous devriez voir. J’ai installé quelques plugins, mais je n’en ai que deux. J’ai Gutenberg. Je n’en ai pas besoin. Éteins ça. Le seul plug – in que j’ai activé était le bloc personnalisé Genesis. Il n’est pas accro. Le thème que je dirige est un sous – thème du magasin. Quand il a dit qu’il s’agissait d’un thème pour enfants, il était très léger et il n’y avait rien de fou. Je l’ai inventé moi – même, donc il n’y a rien à faire. Excusez – moi. C’est un sous – thème du thème woocommerce store. Le bloc personnalisé Genesis est installé et activé. Voici quelques – uns des jeux que j’ai déjà joués, mais nous allons créer le bloc pers
Une toute nouvelle nationalisation. On a travaillé avec une équipe de design, ils ont construit, et je ne peux pas, tu comprends? Je te l’ai dit. Vous commencez à taper devant les autres sans connaître l’orthographe. Je ne sais pas encore écrire. En collaboration avec les designers, ils ont créé cette merveilleuse page. C’est pour l’équipe. Ils ont conçu les composants de cette section ou de cette page pour chaque coéquipier. Il n’y a que quelques ombres intéressantes et des rayons limites. Les marges bénéficiaires se chevauchent. Les étagères standard ne coupent pas. Nous devons construire un bloc personnalisé. Par conséquent, nous allons définir des serrures personnalisées pour cela. Nous ajouterons un champ. Donc, comme je l’ai dit, c’est comme ajouter des champs au formulaire. D’abord, ce nom, le nom de cet homme. Il s’agit d’un texte de type champ, et nous avons beaucoup de types de champ différents. Je vais prendre ça comme texte. On n’a qu’une réduction de 50% si on peut. Cela n’aidera le module à démarrer avec succès que lorsque l’utilisateur final interagit avec le module. Nom, suivi du rôle. On commence à taper. Ce sera aussi le texte, et nous irons à 50%. Ensuite, il y a le bouton Twitter, et c’est bien. C’est n’importe quoi, même 50%. La dernière est leur meilleure photo du visage. Ceci, nous avons trois champs de texte, faisons quelque chose de différent. Apparemment, on a un champ d’images. Faisons – le. C’est pour ça qu’on l’a rendu public. OK, c’est ouvert. Nous obtenons ce petit conseil en haut qui nous dit que le plug – in est à la recherche du fichier de modèle de bloc associé. Il a dit, Hey, regarde, je sais que ton sujet actuel est un sujet actif, cette carte de magasin. Et trouvez ce dossier spécifique que vous pouvez bloquer. Nous sommes à la recherche d’un fichier spécial appelé Block teamed. Php. Donc ce que nous allons faire, c’est passer au Code vs, qui est un excellent éditeur de texte ou de code. C’est le thème de mes enfants. Maintenant, j’ai aggi.
Nous voulons qu’ils les suivent sur Twitter. Je pense que c’est censé être la direction, donc on ne va pas en parler. Donc, selon leurs noms, ça pourrait être des photos ou des noms. Pour leur personnage, ce sera le personnage, encore une fois, qui correspond à l’escargot du champ. C’est le bouton Twitter. Allons le sauver. Créons une nouvelle page. Ajoutez un nouveau carré, coéquipiers, voulez – vous le voir? Nos champs sont ici. Rob Stinson, gentil garçon, est Amiral. Amiral. Mon compte Twitter est Rob _ Stino et nous utilisons la médiathèque. Je suis là. Oui, j’ai cliqué. OK, vous pouvez voir que quand j’ai cliqué sur le bloc, j’ai eu le formulaire. Quand je clique sur quitter, je peux prévisualiser son apparence. Maintenant, on a le contenu ici. Il y a une photo. Je m’appelle H4. C’est un passage de mon personnage et \
Ça pourrait être mieux. Tout est dans l’éditeur de bloc. Vous pouvez voir ce que c’est. Si vous cliquez dessus, vous obtenez l’interface du module pour mettre à jour le contenu et le modifier, tout cela. Ensuite, retournez à l’avant, ça a l’air bien. C’est vrai. Je veux dire, je pense qu’on a vraiment fini en moins de 10 minutes. Je peux vous montrer comment créer notre fichier Template, comme huit lignes de HTML, qui contient une petite quantité de PHP. 13 lignes CSS, c’est le seul Code que nous devons écrire. Tout le reste est dans l’éditeur de bloc. Super simple, puis nous avons ce bloc personnalisé que nous pouvons utiliser sur n’importe quelle page ou post dans l’éditeur de bloc. Nous pouvons facilement changer les photos, les titres et tout le contenu. C’est simple. Honnêtement, tu peux faire quelque chose de vraiment intéressant. Vous verrez, Oh, laissez – moi revenir ici, j’ai trois autres plug – ins. Mais je dois dire que ceux – ci s’intègrent ou interagissent de façon intéressante avec woocommerce. Ils vérifient que l’utilisateur est connecté et a fait un achat précédent. Ces commentaires plug – in empêchent les utilisateurs de requêtes WP, ce qui est bien. WP Query est un outil super puissant pour écrire PHP et WordPress. Super, ça nous permet d’utiliser des requêtes WP ou quelque chose comme ça dans un modèle de bloc. Il s’agit donc d’un plug – in très intéressant et puissant qui peut construire des blocs personnalisés, comme vous pouvez le voir, très simple. C’est le bloc personnalisé Genesis. Genesis Custom Blocks n’est qu’un plug – in numérique dans la suite de produits Genesis. Si vous souhaitez en savoir plus sur Genesis, visitez cette URL, wpengine. Com \/ genesis. Merci beaucoup d’avoir pris le temps. Je traînais dans un salon de discussion. Si vous avez des questions, veuillez me contacter. Si vous avez des problèmes après e