Cum să adăugați Schema Markup la WordPress în mod programatic

Publicat: 2022-04-21

Doriți să adăugați un marcaj de schemă la WordPress în mod programatic ? Dacă da, puteți utiliza o serie de fragmente de cod în diferite moduri pentru site-ul dvs. WordPress.

Dar înainte de a arunca o privire la cum să le adăugăm, să ne uităm la ce înțelegeți prin markup schema pe scurt.

Ce este Schema Markup?

Schema de marcare este o structură de date standardizată furnizată de schema.org. Practic, va oferi motoarele de căutare informații despre pagina curentă . Astfel, robotii lor crawler pot înțelege despre ce este conținutul și pot crea fragmente îmbogățite pe rezultatele căutării.

Datele conținute în schemă sunt prezentate pe o pereche cheie-valoare precum [„telefon”: „152234029”]. De asemenea, poate avea mai multe niveluri de moștenire. Sunt foarte importante pentru a crește rata de clic (CTR) pentru site-ul dvs. și sunt considerate, de asemenea, una dintre cele mai bune practici SEO.

Există multe tipuri de proprietăți cheie care pot fi utilizate cu schema. Acestea variază de la date și tipuri de date bazate pe ierarhii deschise și închise. Vizitați site- ul web shcema.org pentru a afla toate tipurile disponibile care pot fi utilizate în prezent.

Cum să adăugați schema de markup la WordPress în mod programatic?

Am vorbit despre cum să adăugați schema la WordPress folosind un plugin într-o postare anterioară. În mod similar, am discutat deja câteva modalități suplimentare de a adăuga schema de markup la WordPress prin intermediul tabloului de bord și al temelor.

Dar acum, vom învăța cum să obținem același rezultat programatic. Făcând acest lucru, site-ul dvs. nu va trebui să încarce tot codul suplimentar pe care îl oferă un plugin. Și vei adăuga doar codul de care are nevoie site-ul tău.

Pentru a include schema într-o bucată de conținut, trebuie să adăugăm etichetele schemei la rezultatul HTML al site-ului nostru. Putem edita HTML-ul site-urilor noastre web în mai multe moduri. Cea mai bună modalitate este de a suprascrie fișierele șablon de temă pe tema copil.

Veți avea nevoie de o temă secundară pentru a include marcajele schemei în mod programatic. Deci, dacă nu aveți încă una instalată, continuați și creați și instalați o temă copil. Puteți chiar să utilizați unul dintre pluginurile de teme pentru copii pentru a-l crea.

Puteți adăuga un marcaj de schemă la WordPress în mod programatic în două moduri majore :

  1. Adăugați un fișier JSON-LD pe cap
  2. Adăugați marcaj de microdate la ieșirea HTML

Ambele sunt metode valabile și o poți folosi liber pe cea care se adaptează mai bine nevoilor tale.

1. Adăugați fișierul JSON-LD

Un fișier JSON-LD este un tip specific de format, bazat pe JSON și utilizat pentru codificarea datelor legate. Așa cum se întâmplă în fișierele JSON, acesta conține o listă de perechi cheie-valoare:

 {
    "telefon": "152234029",
    "name": "Numele",
    „adresă”: „Strada Johann N 433”,
    "url": "https://QuadLayers.com",
    "priceRange": "19 - 90",
    "legalName": "QuadLayers",
    "@context": "http://schema.org",
    "@type": "Afaceri locale"
}

După cum puteți vedea, chiar și sintaxia este foarte asemănătoare cu un fișier JSON.

Există mai multe generatoare JSON-LD pe care le puteți folosi pentru a obține fișierul care se adaptează mai bine nevoilor dumneavoastră.

Deci, următorul pas este să tipăriți acest cod în secțiunea HTML <head> a site-ului web.

Putem folosi următoarea funcție pe fișierul functions.php al temei copil pentru a realiza acest lucru.

Notă: înainte de a continua, asigurați-vă că faceți și o copie de rezervă a site-ului dvs. Vom modifica fișierele de bază ale site-ului dvs. și orice modificări nedorite ale acestuia pot aduce probleme suplimentare acestuia.

 add_action('wp_head','QuadLayers_add_schema');
funcția QuadLayers_add_schema(){
echo '<script type="application/ld+json">
{
"telefon": "152234029",
"name": "Numele",
„adresă”: „Strada Johann N 433”,
"url": "https://QuadLayers.com",
"priceRange": "19 - 90",
"legalName": "QuadLayers",
"@context": "http://schema.org",
"@type": "Afaceri locale"
}';
}

Puteți vedea cum fișierul JSON-LD este inclus în etichetele <script> . Doar nu uitați să actualizați fișierul .

Pentru a înțelege cum funcționează schema, rețineți că exemplul de cod anterior va adăuga JSON la toate paginile unui site web. Deci, atunci când un motor de căutare sau orice alt tip de bot îl citește, acesta va fi setat ca o schemă validă pentru toate paginile în care este prezent scriptul. În acest caz, este întregul site.

Putem aplica codul JSON la anumite pagini aplicând o logică condiționată funcției noastre PHP. Dar markupul de schemă poate fi inclus și în HTML-ul interior al conținutului nostru, permițându-ne să includem markupuri complexe la un conținut foarte specific.

2. Adăugați marcaj de microdate în HTML

Urmând tendințele moderne, metoda anterioară este cea recomandată. Dar folosirea de marcare a microdatelor ne va permite să încorporam marcajul de schemă chiar în fișierele șablon .

Lipirea scripturilor noastre în fișierul functions.php al temei copil funcționează bine. Pentru a aplica schema potrivită fiecărei piese de conținut, am ajunge să avem o bucată mare și complexă de cod.

Deci, pentru a adăuga marcaj de microdate în HTML, trebuie să suprascriem fișierele șablon ale site-ului dvs. WordPress.

2.1. Adăugați un marcaj de schemă la postările WP

În acest exemplu, tema noastră copil moștenește tema Twenty Twenty-One, așa că fișierul pe care trebuie să-l suprascriem este content-single.php . Acesta este fișierul în care putem adăuga schema noastră chiar în rezultatul HTML.

Acest fișier poate fi găsit sub un alt nume sau folder pe unele teme.

Creați folderele necesare pe tema copilului dvs. (părți șablon și conținut) și un nou fișier content-single.php în dosarul de conținut.

 Tema copilului
/__template-parts
__/__conţinut
__/__/__conținut-single.php

Copiați/lipiți tot codul content-single.php temei părinte.

Suprascrie fișierul șablon de postare

Codul pe care îl vom edita este următorul:

 <articol <?php post_class(); ?>>

Adăugarea domeniului de aplicare a schemei și tastați ca următorul fragment.

 <article itemscope itemtype ="http://schema.org/Article" <?php post_class(); ?>>

Acest lucru le spune motoarelor de căutare că conținutul din eticheta HTML <article> este un tip de articol.
După declararea tipului și domeniului de aplicare, putem folosi unele proprietăți standard. De exemplu, declararea titlului postării ca nume al articolului:

Cod sursa:

 <?php the_title( '<h1 class="entry-title">', '</h1>'); ?>

Adăugați proprietatea numelui:

 <?php the_title( '<h1 itemprop="name" class="entry-title">', '</h1>'); ?>

De asemenea, putem folosi proprietatea cheie articleBody pentru a marca conținutul postărilor noastre.

Cod sursa:

 <div class="entry-content">
<?php 

continutul();

Adăugarea proprietății articleBody:

 <div itemprop="articleBody” class="entry-content">
<?php
continutul();

2.2. Adăugarea de markup de schemă la produsele WooCommerce

Într-un mod similar, putem suprascrie fișierul șablon al produselor WooCommerce pentru a include schema noastră.

Fișierul pe care trebuie să-l suprascriem este fișierul content-single-product.php . Acest fișier trebuie să fie într-un folder WooCommerce din tema copil. Dacă întâmpinați dificultăți în a-l găsi, vă rugăm să vă asigurați că ați configurat WooCommerce corect.

 Tema copilului
__/woocommerce
__/__conținut-produs-unic.php

Finalizați același proces ca mai sus, creând un fișier nou în locul său.

Definiți domeniul și tipul de schemă pe wrapper-ul principal div:

 <div itemscope itemtype ="http://schema.org/Product" <?php wc_product_class( '', $product ); ?>>

De asemenea, putem folosi proprietatea „descriere” pe acest fișier:

 <div itemprop="description" class="summary entry-summary">

Cu toate acestea, pentru a adăuga mai multe markup-uri la produsele noastre, va trebui să suprascriem diferite fișiere.

De exemplu, pentru a adăuga prețul produselor la schemă, creați o nouă cale pe fișierele cu tema copil:

woocommerce/templates/single-product/price.php

 Tema copilului
__/woocommerce
__/__/produs unic
__/__/__/preț.php

suprascrie fișierele șablon woocommerce

După ce ați copiat fișierul price.php în locul său, editați după cum urmează:

Cod sursa:

 <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

Adăugarea de markup:

 <p itemscope itemtype="https://schema.org/Offer" itemprop="price" class=" <?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $produs->get_price_html(); ?></p>

Rețineți că am creat un articol nou cu tipul „Ofertă” pentru a defini prețul. Este un indiciu pentru înțelegerea modului în care putem imbrica diferite tipuri de articole unul în celălalt, urmând structura HTML originală.

Există și alte fișiere pe care le puteți suprascrie pentru a include mai mult markup.

  • title.php
  • stock.php
  • review.php
  • rating.php
  • product-image.php

Concluzie

Acest lucru ne duce la sfârșitul tutorialului nostru despre cum să adăugați programatic markup schema la WordPress. Pentru a face acest lucru, aveți nevoie de o înțelegere de bază a modului în care funcționează o schemă, împreună cu unele cunoștințe de programare.

De asemenea, este foarte important să înțelegeți că toate proprietățile și tipurile trebuie să se potrivească cu cele definite pe site-ul web schema.org. Aceasta include și proprietăți cu mai multe niveluri de moștenire.

Pentru a rezuma, puteți adăuga schema pe site-ul dvs. folosind două moduri majore:

  • Adăugați un fișier JSON-LD pe cap
  • Adăugați marcaj de microdate la ieșirea HTML

Adăugarea fișierului JSON-LD este o abordare foarte ușoară și este luată în considerare de majoritatea utilizatorilor. Tot ce trebuie să faceți este să imprimați codul JSON-LD în secțiunea <head> a site-ului dvs. web.

Cu toate acestea, utilizarea abordării de marcare a microdatelor pentru a încorpora marcarea schemei direct în fișierele șablon poate fi, de asemenea, foarte utilă pentru dvs. Suprascrierea fișierelor șablon vă poate ajuta să personalizați site-ul web cu și mai multă flexibilitate dacă aveți resursele necesare pentru acesta. Puteți chiar să adăugați marcajul schemei la anumite elemente ale site-ului dvs., cum ar fi postările și produsele WooCommerce.

Așadar, puteți adăuga markup de schemă pe site-ul dvs. folosind aceste fragmente de cod acum? Vă rugăm să ne spuneți dacă acest tutorial a fost util sau nu în comentarii.

Între timp, iată mai multe dintre postările noastre care v-ar putea interesa și vă pot ajuta să vă îmbunătățiți site-ul WordPress:

  • Cum se creează un plugin WordPress personalizat
  • Adăugați Telegram la WordPress (Ghid complet)
  • Cum se editează HTML în WordPress