WordPress és el sistema de gestió de continguts (CMS) més popular del món, amb una quota de mercat de més de 60%.
Una gran comunitat de suport i una sèrie de connectors gratuïts disponibles fan que la creació d’un lloc web amb WordPress (WP) sigui assequible, i juga un paper clau en el fet que la seva quota de mercat sigui tan gran.
Tanmateix, com sabeu, instal·lar connectors té un cost.
Sovint et poden degradar Core Web Vitals puntuacions; Per exemple, poden carregar fitxers CSS o JS innecessaris a totes les pàgines on no siguin necessaris.
Per solucionar-ho, heu de contractar un programador que ho faci per vosaltres, comprar un connector premium o potser seguir un petit camí d’aprenentatge i fer-ho vosaltres mateixos.
També podeu anar híbrids i resoldre algunes parts dels vostres problemes mitjançant la codificació personalitzada i altres parts mitjançant connectors.
Aquest article pretén ajudar-vos en el vostre camí d’aprenentatge, i tractarem els ganxos de WordPress més necessaris per ajudar-vos a millorar el SEO tècnic del vostre lloc web.
Què és un ganxo de WordPress?
Els ganxos de WordPress són funcions clau de WP que permeten als desenvolupadors ampliar la funcionalitat del CMS sense necessitat de modificar els fitxers WP bàsics, cosa que facilita l’actualització de temes o complements sense trencar les modificacions personalitzades.
Proporcionen una manera potent perquè els desenvolupadors ampliïn la funcionalitat de WordPress i facin canvis personalitzats als seus llocs.
Què és un ganxo de filtre?
La funció de filtre de ganxo s’utilitza per modificar la sortida de la funció abans que es torni. Per exemple, podeu sufixar els títols de les pàgines amb el nom del vostre bloc utilitzant el wp_title ganxo de filtre.
Què és un ganxo d’acció?
Els ganxos d’acció permeten als programadors realitzar determinades accions en un punt específic de l’execució de WP Core, complements o temes, com ara quan es publica una publicació o es carreguen fitxers JS i CSS.
Aprenent uns quants filtres o ganxos d’acció bàsics, podeu realitzar una àmplia gamma de tasques sense necessitat de contractar desenvolupadors.
Passarem pels següents ganxos:
- wp_enqueue_scripts
- wp_head
- script_loader_tag
- template_redirect
- wp_headers
wp_enqueue_scripts
Aquest és exactament el ganxo d’acció que utilitzaríeu per excloure fitxers CSS o JS redundants de la càrrega a pàgines on no siguin necessaris.
Per exemple, el popular gratuït Formulari de contacte 7 el connector, que té més de 5 milions d’instal·lacions, carrega fitxers CSS i JS a totes les pàgines, mentre que només el necessita per carregar on hi ha el formulari de contacte.
Per excloure els fitxers CF7 CSS i JS en pàgines diferents de la pàgina de contacte, podeu utilitzar el fragment de codi següent.
function my_dequeue_script(){
//check if page slug isn't our contact page, alternatively, you can use is_page(25) with page ID, or if it is a post page is_single('my-post')
if ( !is_page('contact') ) {
wp_dequeue_script('google-recaptcha');
wp_dequeue_script('wpcf7-recaptcha');
wp_dequeue_script('contact-form-7');
wp_dequeue_style('contact-form-7');
}
}
add_action('wp_enqueue_scripts', 'my_dequeue_script', 99 );Hi ha uns quants punts clau; la prioritat del ganxo d’acció s’estableix en 99 per garantir que la nostra modificació s’executi l’última a la cua.
Si el poseu a, per exemple, 10, no funcionarà perquè la funció de cua CF7 utilitza la prioritat 20. Així que per assegurar-vos que el vostre s’executi l’últim i tingui efecte, establiu una prioritat prou gran.
També, al codi, hem utilitzat com a identificador d’argument de funció “contact-form-7”; potser us preguntareu com ho vaig trobar.
És bastant senzill i intuïtiu. Només cal que utilitzeu l’eina d’inspecció d’elements del vostre navegador i comproveu l’atribut id de les etiquetes d’enllaç o script.
Captura de pantalla de l’autor, febrer de 2023
Podeu comprovar el codi font del vostre lloc web mitjançant l’element d’inspecció i començar a retirar qualsevol fitxer JS o CSS on no sigui necessari.
wp_head
Aquest ganxo d’acció s’utilitza per afegir qualsevol recurs JS, fitxers CSS o metaetiquetes a la secció
de la pàgina web.Amb aquest ganxo, podeu carregar recursos de precàrrega per sobre del plec a la secció de capçalera, cosa que us pot millorar LCP puntuacions.
Per exemple, precàrrega de tipus de lletraque és una de les recomanacions de Google, o el logotip i les imatges destacades a les pàgines d’articles, es carreguen sempre per sobre del plec, i cal que les precarregueu per millorar l’LCP.
Per fer-ho, utilitzeu el fragment de codi següent.
function my_preload() {
?>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,200..900;1,200..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap"/>
<link rel="preload" as="image" href="https://www.yoursite.com/path-to-logo/image.jpg"/>
<?php if( has_post_thumbnail() ): // check if article has featured image?>
<!-- Featured Image -->
<?php // $featured_image = str_ireplace(array( '.png', '.jpg', '.jpeg'), '.webp', $featured_image ); // enable this if you have webp images. ?>
<?php $featured_image = get_the_post_thumbnail_url( get_the_ID(), 'full' ); ?>
<link rel="preload" as="image" href="<?php echo $featured_image;?>"/>
<?php endif;
}
add_action('wp_head', 'my_preload', 3 );Les dues primeres línies són per carregar prèviament els tipus de lletra de Google, després precarreguem el logotip i comprovem si l’article té una imatge destacada, i després precarreguem la imatge destacada.
Com a nota addicional, és possible que el vostre tema o lloc tingui imatges web activades; en aquest cas, hauríeu de carregar prèviament la versió webp.
script_loader_tag
Heu escoltat molt sobre els recursos de bloqueig de renderització que es poden solucionar mitjançant etiquetes JavaScript de càrrega ajornada o asíncrona. És fonamental per millorar FCP i LCP.
Aquesta acció de filtre s’utilitza per filtrar la sortida HTML de les etiquetes de l’script, i necessiteu exactament aquest filtre per sincronitzar o ajornar la càrrega dels fitxers JS/CSS del vostre tema o complement.
function my_defer_async_load( $tag, $handle ) {
// async loading scripts handles go here as an array
$async_handles = array('wpcf7-recaptcha', 'another-plugin-script');
// defer loading scripts handles go here as an array
$defer_handles = array('contact-form-7', 'any-theme-script');
if( in_array( $handle, $async_handles) ){
return str_replace( ' src', ' async src', $tag );
}
if( in_array( $handle, $defer_handles ) ){
return str_replace( ' src', ' defer="defer" src', $tag );
}
return $tag;
}
add_filter('script_loader_tag', 'my_defer_async_load', 10, 2);Aquest filtre accepta dos arguments: l’etiqueta HTML i el maneig de l’script, que he esmentat anteriorment en examinar mitjançant l’element d’inspecció.
Podeu utilitzar el mànec per decidir quin script carregar aixínc o ajornar.
Després d’ajornar o sincronitzar la càrrega, comproveu sempre a través de la consola del navegador si teniu errors JS. Si veieu errors JS, és possible que necessiteu un desenvolupador que us ajudi, ja que pot ser que solucionar-los no sigui senzill.
template_redirect
Aquest ganxo d’acció es crida abans de determinar quina plantilla s’ha de carregar. Podeu utilitzar-lo per canviar el codi d’estat HTTP de la resposta.
Per exemple, és possible que tingueu enllaços d’entrada de correu brossa a les vostres pàgines de consulta de cerca interna que contenen caràcters estranys i/o patrons habituals.
A Search Engine Journal, estem acostumats a tenir enllaços d’entrada de correu brossa que apunten a les nostres pàgines de cerca internes que estan en coreà, i hem après dels registres del nostre servidor que Googlebot els rastrejava intensament.
Captura de pantalla de l’autor, febrer de 2023
El codi de resposta predeterminat de WordPress no es troba 404, però és millor introduir-lo 410 per dir-li a Google que han desaparegut per sempre, així que deixa de rastrejar-los.
function my_410_function(){
if( is_search() ) {
$kw = $_GET['s'];
// check if the string contains Korean characters
if (preg_match('/[x{AC00}-x{D7AF}]+/u', $kw)) {
status_header(410, 'Not Found');
}
}// end of is_search
}
add_action( 'template_redirect', 'my_410_function', 10 );En el nostre cas, sabem que no tenim contingut coreà, i per això hem compost la nostra condició així.
Però és possible que tingueu contingut internacional en coreà i les condicions poden ser diferents.
En general, per als no programadors, ChatGPT és una gran eina per generar condicions mitjançant una expressió regular, que podeu utilitzar per crear una condició if/else basada en el vostre patró de correu brossa de GSC.
wp_headers
Aquest ganxo d’acció s’utilitza per modificar les capçaleres HTTP de WordPress.
Podeu utilitzar aquest ganxo per afegir capçaleres de seguretat a les capçaleres HTTP de resposta del vostre lloc web.
function my_headers(){
$headers['content-security-policy'] = 'upgrade-insecure-requests';
$headers['strict-transport-security'] = 'max-age=31536000; preload';
$headers['X-Content-Type-Options'] = 'nosniff';
$headers['X-XSS-Protection'] = '1; mode=block';
$headers['x-frame-options'] = 'SAMEORIGIN';
$headers['Referrer-Policy'] = 'strict-origin-when-cross-origin';
$headers['Link'] = '<https://www.yoursite.com/wp-content/uploads/themes/yourtheme/images/logo.jpg>; rel=preload; as=image';
$headers['Link'] = '<https://fonts.gstatic.com>; rel=preconnect; crossorigin';
$headers['Link'] = '</wp-content/uploads/themes/yourtheme/images/logo.webp>; rel=preload; as=image';
return $headers;
}
add_filter( 'wp_headers', 'my_headers', 100 );A més de les capçaleres de seguretat, podeu afegir etiquetes “Enllaç” (tantes com vulgueu) per connectar prèviament o carregar prèviament qualsevol recurs.
Bàsicament, és un mètode alternatiu de precàrrega, que es va tractar anteriorment.
També podeu afegir “X-Robots-Tag” (tants com vulgueu) a les vostres capçaleres HTTP en funció de les vostres necessitats.
Conclusió
Els connectors solen estar dirigits a resoldre una gran varietat de tasques i sovint no estan dissenyats específicament per satisfer les vostres necessitats específiques.
La facilitat amb què podeu modificar el nucli de WordPress és un dels seus aspectes més bonics, i podeu modificar-lo amb unes poques línies de codi.
Hem parlat dels ganxos d’acció que podeu utilitzar per millorar el SEO tècnic, però WordPress té un gran nombre de ganxos d’acció podeu explorar i utilitzar per fer bàsicament tot el que vulgueu amb un ús mínim de connectors.
Més recursos:
Imatge destacada: Grafico moze/Shutterstock
