Maison > interface Web > tutoriel CSS > Dés-mystifiant Indieweb sur un site WordPress

Dés-mystifiant Indieweb sur un site WordPress

Lisa Kudrow
Libérer: 2025-03-13 11:09:09
original
375 Les gens l'ont consulté

Dés-mystifiant Indieweb sur un site WordPress

Mon récent article sur Indieweb a déclenché une conversation utile avec David Shanske, qui a généreusement offert une assistance pour comprendre ce concept souvent qui soutient. Ce message résume notre discussion et clarifie les composantes clés de l'implémentation d'Indieweb sur WordPress.

Comprendre le jargon indieweb

Le terme "Indieweb" lui-même est une source de confusion. Est-ce un cadre, une philosophie ou un ensemble de normes? Il s'avère que la réponse est toutes les trois. Cependant, une compréhension plus claire émerge lors de la considération comme une collection de protocoles, similaires aux données structurées ou au balisage OpenGraph. Il n'y a pas de logiciel unique à installer; Il s'agit plutôt d'adhérer à des normes spécifiques d'intégration.

Votre identité en ligne est centrale à Indieweb. Votre site Web devient votre centre d'identité, permettant des fonctionnalités telles que:

  • Notification d'autres sites Indieweb lorsque vous êtes mentionné.
  • Recevoir des notifications lorsque vous êtes mentionné ailleurs.
  • Récupérer et afficher des informations à partir des mentions.
  • Authentification de votre identité via votre site Web (similaire à une connexion Google, mais auto-hébergé).

Il s'agit d'une version améliorée de Pingbacks, offrant une plus grande robustesse et maintenabilité.

Implémentation d'Indieweb sur WordPress: une approche plus simple

WordPress simplifie l'intégration Indieweb significativement par rapport aux sites statiques. Comme l'explique David, WordPress propose des «blocs de construction» - des plugins - qui implémentent les protocoles Indieweb. Cela contraste avec l'approche plus pratique requise pour les sites statiques.

Le plugin de base établit votre identité en ligne. Il fournit principalement un modèle et un widget de carte H. La carte H est un balisage pour les informations personnelles ou de localisation, souvent incluses sur des sites Web de toute façon. Bien que l'ajout manuellement de cette majoration à votre thème soit possible, le plugin offre une solution pré-construite pratique.

Voici un exemple de balisage H-Card (à partir de la documentation MicroRormats2):

<code><div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183535434329.jpg" class="lazy" alt="Photo de Mitchell"> <a href="https://www.php.cn/link/dbe1a0a2c9bd9241b3499318bf96f756">Mitchell Baker</a>
 ( <a href="https://www.php.cn/link/ebbb5ccb88b2cd2e2224917a325f903b">@MitchellBaker</a> )
  Fondation Mozilla
  <p>
    Mitchell est responsable de la mise en place de la direction et de la portée de la Fondation Mozilla et de ses activités.
  </p>
  Stratégie
  Direction
</div></code>
Copier après la connexion

Remarquez les classes comme .h-card , u-photo , p-name , etc., qui fournissent une signification contextuelle analysée comme JSON:

 <code>{ "items": [{ "type": ["h-card"], "properties": { "photo": ["https://img.php.cn/upload/article/000/000/000/174183535434329.jpg"], "name": ["Mitchell Baker"], "url": [ "https://www.php.cn/link/dbe1a0a2c9bd9241b3499318bf96f756", "https://www.php.cn/link/ebbb5ccb88b2cd2e2224917a325f903b" ], "org": ["Mozilla Foundation"], "note": ["Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities."], "category": [ "Strategy", "Leadership" ] } }] }</code>
Copier après la connexion

Le plugin ne gère pas l'envoi, la réception ou l'analyse; Il fournit uniquement un balisage de vérification d'identité.

Microformats et compatibilité des thème

Les «microformats» sont une méthode pour marquer le HTML pour identifier les éléments. Le problème est que de nombreux thèmes WordPress manquent de prise en charge des microformats, c'est là que le plugin Microformats2 aide. Cependant, ce plugin a des limites et le balisage du thème manuel est souvent recommandé. Les futures mises à jour du plugin Webmetion visent à améliorer cela en tirant parti de l'OpenGraph et de l'API WordPress REST.

Webmentions, liens sémantiques et brid.gy

Le plugin Webmetion gère les notifications d'envoi et de réception (WebMetions). Semantic Linkbacks, un plugin séparé (potentiellement intégré dans les futures mises à jour de Webmention), récupère, formats et affiche des données de Webstion à l'aide de microformats. Brid.gy offre une alternative plus simple, fournissant des intégrations d'API pré-construites pour des services comme Twitter et Facebook, rationalisant le processus de réception et d'affichage des interactions.

Plugins clés supplémentaires

  • IndeAuth: fournit une authentification auto-hébergée, créant votre propre version d'un bouton de connexion Google.
  • Micropub: permet de publier du contenu via des éditeurs alternatifs utilisant Microformats2.
  • Emplacement simple: (développé par David) intègre les données de localisation dans les publications, permettant des fonctionnalités telles que les affichages météorologiques et les archives basées sur la localisation.

Le flux de travail révisé

(Une représentation visuelle du flux de travail serait bénéfique ici, mais ne peut pas être fournie par ce modèle basé sur le texte.)

Cette explication clarifie, espérons-le, les composants et les processus impliqués dans l'implémentation d'Indieweb sur WordPress. D'autres questions ou discussions sont les bienvenues!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal