{"id":32555,"date":"2022-10-27T09:00:00","date_gmt":"2022-10-27T07:00:00","guid":{"rendered":"https:\/\/supporthost.com\/it\/?p=32555"},"modified":"2025-09-25T21:07:14","modified_gmt":"2025-09-25T19:07:14","slug":"attributo-rel","status":"publish","type":"post","link":"https:\/\/supporthost.com\/it\/attributo-rel\/","title":{"rendered":"Come aggiungere  un attributo rel a tutti i link in WordPress"},"content":{"rendered":"\n<p>L&#8217;attributo rel che andiamo a inserire nei <strong>link <\/strong>ci permette di indicare delle relazioni con la pagina di destinazione del link. In questo articolo andremo a vedere come creare una funzione che ci consenta di <strong>applicare in automatico<\/strong> l&#8217;attributo rel o pi\u00f9 attributi a tutti i link di WordPress. <\/p>\n\n\n\n<p>Attraverso questa funzione possiamo aggiungere automaticamente attributi rel a tutti i link oppure scegliere di impostare attributi diversi per<strong> link esterni <\/strong>ed <strong>interni<\/strong>. <\/p>\n\n\n\n<p>Per esempio potremmo voler utilizzare l&#8217;attributo <code>rel=\"nofollow\"<\/code> per tutti i link esterni. In questo caso, invece di aggiungere l&#8217;attributo a mano su ogni singolo link esterno, possiamo usare una funzione che <strong>automatizzi il processo<\/strong>.<\/p>\n\n\n\n<p>Lo stesso vale per altri attributi come <code>rel=\"sponsored\"<\/code>. Ecco tutti gli attributi che possiamo aggiungere usando questa funzione:<\/p>\n\n\n\n<ul id=\"block-d168ce9a-e9d7-414c-9e59-aededb7f6c4e\" class=\"wp-block-list\">\n<li>rel=&#8221;nofollow&#8221;<\/li>\n\n\n\n<li>rel=&#8221;sponsored&#8221;<\/li>\n\n\n\n<li>rel=&#8221;noopener&#8221;<\/li>\n\n\n\n<li><a href=\"https:\/\/supporthost.com\/it\/target-blank\/\" data-type=\"post\" data-id=\"54116\">target=&#8221;_blank&#8221;<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>Per farlo utilizzeremo una fantastica funzione di WordPress: i <strong>filtri<\/strong>.<\/p>\n\n\n\n<p>Partiamo subito dal vedere cosa sono.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Indice<\/h2><nav><ul><li><a href=\"#cose-un-filtro-in-word-press\">Cos&#8217;\u00e8 un filtro in WordPress<\/a><\/li><li><a href=\"#cose-un-attributo-rel\">Cos&#8217;\u00e8 un attributo rel<\/a><\/li><li><a href=\"#dove-aggiungere-la-funzione-per-modificare-lattributo-rel-in-automatico\">Dove aggiungere la funzione per modificare l&#8217;attributo rel in automatico<\/a><ul><li><a href=\"#aggiungere-la-funzione-nel-file-functions-php\">Aggiungere la funzione nel file functions.php<\/a><\/li><li><a href=\"#usare-il-plugin-code-snippet\">Usare il plugin code snippet<\/a><\/li><\/ul><\/li><li><a href=\"#il-filtro-the-content\">Il filtro the_content<\/a><\/li><li><a href=\"#aggiungere-lattributo-rel-a-tutti-i-link-di-word-press\">Aggiungere l&#8217;attributo rel a tutti i link di WordPress<\/a><\/li><li><a href=\"#conclusioni\">Conclusioni<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/aggiungere-attributo-rel-in-automatico-wordpress-1024x538.png\" alt=\"Aggiungere Attributo Rel In Automatico WordPress\" class=\"wp-image-32610\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/aggiungere-attributo-rel-in-automatico-wordpress-1024x538.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/aggiungere-attributo-rel-in-automatico-wordpress-300x158.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/aggiungere-attributo-rel-in-automatico-wordpress-768x403.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/aggiungere-attributo-rel-in-automatico-wordpress-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/aggiungere-attributo-rel-in-automatico-wordpress.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cose-un-filtro-in-word-press\">Cos&#8217;\u00e8 un filtro in WordPress<\/h2>\n\n\n\n<p>Nell&#8217;ecosistema di WordPress esistono diversi tipi di <strong>hook <\/strong>che ci permettono di eseguire azioni in risposta a un determinato evento. I due tipi di hook che troviamo sono le <strong>azioni <\/strong>(action hook) e i <strong>filtri <\/strong>(filter hook). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"348\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/wordpress-org-logo-1024x348.png\" alt=\"Wordpress Org Logo\" class=\"wp-image-24980\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/wordpress-org-logo-1024x348.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/wordpress-org-logo-300x102.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/wordpress-org-logo-768x261.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/wordpress-org-logo-120x41.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/05\/wordpress-org-logo.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>La differenza \u00e8 che:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>i filtri ci permettono di effettuare delle modifiche, essenzialmente di alterare l&#8217;output.<\/li>\n\n\n\n<li>le azioni ci permettono di effettuare una vera e propria azione, per esempio una funzionalit\u00e0 extra che viene eseguita dopo un evento (es. dopo la pubblicazione di un articolo).<\/li>\n<\/ul>\n\n\n\n<p>Per creare una funzione che aggiunga a tutti i link un <strong>attributo rel <\/strong>a nostra scelta andremo a utilizzare proprio i <strong>filtri <\/strong>di WordPress. <\/p>\n\n\n\n<p>I filtri ci permettono di modificare le funzionalit\u00e0 di WordPress. Nella pratica si tratta di codice PHP che possiamo utilizzare in modo da attivare una funzione dopo che si \u00e8 verificata una determinata condizione.<\/p>\n\n\n\n<p>Per una spiegazione pi\u00f9 dettagliata puoi leggere la nostra guida agli <a href=\"https:\/\/supporthost.com\/it\/hook-wordpress\/\">hook di WordPress<\/a> e consultare la <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\" rel=\"noopener\">documentazione<\/a> del codex di WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cose-un-attributo-rel\">Cos&#8217;\u00e8 un attributo rel<\/h2>\n\n\n\n<p>Gli attributi <code>rel<\/code> vengono utilizzati sempre insieme all&#8217;attributo <code>href<\/code> e ci permettono di definire i link. <\/p>\n\n\n\n<p>Ogni link viene indicato usando il tag &lt;a&gt; ed ha una struttura come questa: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"201\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/struttura-link-con-attributo-rel-1024x201.jpg\" alt=\"Struttura Link Con Attributo Rel\" class=\"wp-image-32593\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/struttura-link-con-attributo-rel-1024x201.jpg 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/struttura-link-con-attributo-rel-300x59.jpg 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/struttura-link-con-attributo-rel-768x151.jpg 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/struttura-link-con-attributo-rel-120x24.jpg 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/struttura-link-con-attributo-rel.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Qui viene schematizzata la struttura del tag &lt;a&gt; usato per i link. In questo esempio \u00e8 stato inserito un attributo rel nofollow.<\/figcaption><\/figure>\n\n\n\n<p>L&#8217;attributo <code>href<\/code> \u00e8 seguito dal collegamento, l&#8217;URL di destinazione.<\/p>\n\n\n\n<p>L&#8217;attributo <code>rel<\/code> \u00e8 opzionale e ci permette di indicare che relazione ci deve essere tra la pagina di origine (quella che contiene il link) e la pagina di destinazione (quella dell&#8217;URL). <\/p>\n\n\n\n<p>L&#8217;anchor text \u00e8 il testo di ancoraggio vale a dire il testo che verr\u00e0 mostrato e su cui si potr\u00e0 cliccare per raggiungere l&#8217;URL.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dove-aggiungere-la-funzione-per-modificare-lattributo-rel-in-automatico\">Dove aggiungere la funzione per modificare l&#8217;attributo rel in automatico<\/h2>\n\n\n\n<p>Abbiamo diversi metodi per aggiungere filtri e hook al nostro sito WordPress:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>possiamo aggiungere la funzione nel file <code>functions.php<\/code>;<\/li>\n\n\n\n<li>possiamo usare il plugin code snippets.<\/li>\n<\/ul>\n\n\n\n<p>Vediamo come.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aggiungere-la-funzione-nel-file-functions-php\">Aggiungere la funzione nel file functions.php<\/h3>\n\n\n\n<p>Possiamo aggiungere direttamente il filtro al file <em>functions.php<\/em> del tema, in questo modo: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"685\" height=\"146\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/file-functions-php-tema-child.png\" alt=\"File Functions Php Tema Child\" class=\"wp-image-32571\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/file-functions-php-tema-child.png 685w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/file-functions-php-tema-child-300x64.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/file-functions-php-tema-child-120x26.png 120w\" sizes=\"auto, (max-width: 685px) 100vw, 685px\" \/><\/figure>\n\n\n\n<p>\u00c8 importante assicurarsi di andare a modificare il file functions.php del <a href=\"https:\/\/supporthost.com\/it\/tema-child\/\" data-type=\"post\" data-id=\"23609\">tema child<\/a> e non fare mai modifiche direttamente ai file del tema parent. <\/p>\n\n\n\n<p>Se effettuassimo modifiche direttamente al <em>tema parent<\/em>, questi cambiamenti andrebbero persi quando andremo ad aggiornare il tema. <\/p>\n\n\n\n<p>Per modificare il file puoi utilizzare il <a href=\"https:\/\/supporthost.com\/it\/tutorial\/file-manager\/\" data-type=\"bwl_kb\" data-id=\"17616\">file manager<\/a> di cPanel o un client FTP come <a href=\"https:\/\/supporthost.com\/it\/filezilla\/\" data-type=\"post\" data-id=\"18692\">FileZilla<\/a> o <a href=\"https:\/\/supporthost.com\/it\/cyberduck\/\" data-type=\"post\" data-id=\"23374\">Cyberduck<\/a>.<\/p>\n\n\n\n<p>Nell&#8217;esempio qui sopra abbiamo aggiunto al file functions.php del tema child una funzione che trasforma tutto il contenuto del post in maiuscolo. Ci ritorneremo fra poco quando parleremo del filtro <code>the_content<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"usare-il-plugin-code-snippet\">Usare il plugin code snippet<\/h3>\n\n\n\n<p>Possiamo aggiungere la funzione senza andare a modificare direttamente il file functions.php, ma facendolo attraverso un <a href=\"https:\/\/supporthost.com\/it\/plugin-wordpress\/\" data-type=\"post\" data-id=\"16110\">plugin WordPress<\/a>.<\/p>\n\n\n\n<p>Il procedimento \u00e8 molto semplice.<\/p>\n\n\n\n<p>Installiamo e attiviamo il plugin <strong>Code Snippets<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"322\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/installare-plugin-code-snippets.png\" alt=\"Installare Plugin Code Snippets\" class=\"wp-image-32575\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/installare-plugin-code-snippets.png 833w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/installare-plugin-code-snippets-300x116.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/installare-plugin-code-snippets-768x297.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/installare-plugin-code-snippets-120x46.png 120w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/figure>\n\n\n\n<p>Andiamo su <em>Snippets &gt; Add New<\/em> per poter creare un nuovo filtro. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"406\" height=\"160\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/code-snippets-aggiungi-nuovo-snippet.png\" alt=\"Code Snippets Aggiungi Nuovo Snippet\" class=\"wp-image-32581\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/code-snippets-aggiungi-nuovo-snippet.png 406w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/code-snippets-aggiungi-nuovo-snippet-300x118.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/code-snippets-aggiungi-nuovo-snippet-120x47.png 120w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/figure>\n\n\n\n<p>A questo punto ci basta compilare i campi indicati: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>inseriamo un titolo per il nostro filtro; <\/li>\n\n\n\n<li>aggiungiamo il codice nel campo <em>functions php<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>Per finire clicchiamo sul pulsante <em>Save changes and activate<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"480\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/usare-code-snippet-per-creare-un-filtro-wordpress-1024x480.png\" alt=\"Usare Code Snippet Per Creare Un Filtro WordPress\" class=\"wp-image-32576\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/usare-code-snippet-per-creare-un-filtro-wordpress-1024x480.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/usare-code-snippet-per-creare-un-filtro-wordpress-300x141.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/usare-code-snippet-per-creare-un-filtro-wordpress-768x360.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/usare-code-snippet-per-creare-un-filtro-wordpress-120x56.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/usare-code-snippet-per-creare-un-filtro-wordpress.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In questo caso abbiamo usato lo stesso filtro d&#8217;esempio di prima, che adesso andiamo a vedere nel dettaglio e che ci permette di capire a che serve il filtro <code>the_content<\/code>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"il-filtro-the-content\">Il filtro the_content<\/h2>\n\n\n\n<p>Per prima cosa dobbiamo capire come funzionano i filtri di WordPress.<\/p>\n\n\n\n<p>Il filtro <code>the_content<\/code> di WordPress ci permette di apportare modifiche al<strong> contenuto <\/strong>di un post o di una pagina prima di mostrarlo nella schermata del browser e quindi prima che sia visibile all&#8217;utente che visita la pagina.<\/p>\n\n\n\n<p>Ecco un semplice esempio che ci aiuta a capire come possiamo utilizzare questo filtro: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_filter('the_content', 'supporthost_capitalize_content');\n\nfunction supporthost_capitalize_content($content) {\n    return strtoupper($content);\n}<\/pre>\n\n\n\n<p>Nel codice che vedi qui sopra: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>the_content<\/code> \u00e8 il nome del filtro<\/li>\n\n\n\n<li><code>supporthost_capitalize_content<\/code> \u00e8 la nostra funzione.<\/li>\n<\/ul>\n\n\n\n<p>Nella pratica abbiamo <em>agganciato<\/em> la nostra funzione al filtro <code>the_content<\/code> per applicare la funzione al contenuto degli articoli del blog.<\/p>\n\n\n\n<p>In questo esempio la funzione <code>supporthost_capitalize_content<\/code> trasforma il contenuto degli articoli in sole lettere maiuscole e ce lo restituisce a schermo. <\/p>\n\n\n\n<p>Ecco il nostro post prima di attivare la funzione:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"869\" height=\"870\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-minuscole-funzione-code-snippets.png\" alt=\"Post In Minuscole Funzione Code Snippets\" class=\"wp-image-32577\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-minuscole-funzione-code-snippets.png 869w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-minuscole-funzione-code-snippets-300x300.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-minuscole-funzione-code-snippets-150x150.png 150w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-minuscole-funzione-code-snippets-768x769.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-minuscole-funzione-code-snippets-63x63.png 63w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/figure>\n\n\n\n<p>Dopo aver usato questa funzione, lo stesso post diventa:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"826\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-maiuscole-funzione-code-snippets.png\" alt=\"Post In Maiuscole Funzione Code Snippets\" class=\"wp-image-32578\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-maiuscole-funzione-code-snippets.png 902w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-maiuscole-funzione-code-snippets-300x275.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-maiuscole-funzione-code-snippets-768x703.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2022\/10\/post-in-maiuscole-funzione-code-snippets-69x63.png 69w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure>\n\n\n\n<p>Puoi testare tu stesso la funzione <a href=\"https:\/\/supporthost.com\/it\/installare-wordpress-in-locale-local-by-flywheel\/\" data-type=\"post\" data-id=\"13271\">installando WordPress in locale<\/a> e seguendo i passi descritti fino a questo momento.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aggiungere-lattributo-rel-a-tutti-i-link-di-word-press\">Aggiungere l&#8217;attributo rel a tutti i link di WordPress<\/h2>\n\n\n\n<p>Per andare ad aggiungere automaticamente l&#8217;attributo rel ai nostri link, la prima cosa da fare \u00e8 <strong>creare due filtri<\/strong> che richiamano un&#8217;unica funzione: <code>supporthost_add_rel<\/code>.<\/p>\n\n\n\n<p>Il primo filtro ci serve ad applicare la funzione al contenuto degli articoli (<code>the_content<\/code>). Il secondo ci permette di applicare la funzione anche ai link che sono presenti negli excerpt (<code>the_excerpt<\/code>).<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_filter('the_content', 'supporthost_add_rel');\nadd_filter('the_excerpt', 'supporthost_add_rel');<\/pre>\n\n\n\n<p>Dobbiamo quindi definire la nostra funzione <code>supporthost_add_rel<\/code>. <\/p>\n\n\n\n<p>Per farlo utilizziamo la funzione PHP <code><a href=\"https:\/\/www.php.net\/manual\/en\/function.preg-replace-callback.php\" rel=\"noopener\">preg_replace_callback<\/a><\/code> che ci permette di effettuare una ricerca e una sostituzione. In pratica la funzione effettua una ricerca tramite un&#8217;espressione regolare e trova tutti i matches corrispondenti. Dopodich\u00e9 li sostituisce con la stringa che corrisponde al return di un&#8217;altra funzione, chiamata funzione di callback.<\/p>\n\n\n\n<p>Nel nostro caso passiamo alla funzione <code>preg_replace_callback<\/code> tre parametri. Il primo \u00e8 un&#8217;espressione regolare (regex) che ci permette di trovare tutti i link nell&#8217;articolo (tag &lt;a&gt;). Il secondo parametro \u00e8 la funzione di callback: <code>supporthost_add_rel_all_links<\/code>. Il terzo parametro ($content) fornisce il contenuto di post e pagine. In questo modo <code>preg_replace_callback<\/code> utilizzer\u00e0 il return della funzione <code>supporthost_add_rel_all_links<\/code> per aggiungere il tag rel all&#8217;interno dei link.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function supporthost_add_rel($content) {    \n    return preg_replace_callback('\/&lt;a[^&gt;]+\/', 'supporthost_add_rel_all_links', $content);    }<\/pre>\n\n\n\n<p>La funzione <code>supporthost_add_rel_all_links<\/code> \u00e8 proprio quella che ci permetter\u00e0 di aggiungere l&#8217;attributo rel ai link nelle nostre pagine\/post. Sar\u00e0 attraverso questa funzione che potremo effettuare la sostituzione e aggiungere l&#8217;attributo rel.  <\/p>\n\n\n\n<p>Per definirla, per prima cosa impostiamo due variabili:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>il link<\/li>\n\n\n\n<li>l&#8217;url del blog. <\/li>\n<\/ul>\n\n\n\n<p class=\"note\">Nota che al momento la nostra funzione non esegue nessuna azione e non effettua nessuna sostituzione. Stiamo solo dichiarando due variabili e chiedendo di ritornare una delle due.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function supporthost_add_rel_all_links($supporthostMatches) {\n    \n    $supporthostLink = $supporthostMatches[0];\n    $supporthostSiteLink = get_bloginfo('url');\n    \n    return $supporthostLink;\n \n}<\/pre>\n\n\n\n<p>A questo punto dobbiamo aggiungere una condizione che vada a verificare se il link ha gi\u00e0 un attributo rel. Per farlo utilizziamo un &#8220;if&#8221; che ci permette di fare un <code>replace<\/code> <strong>solo se<\/strong> l&#8217;attributo rel non \u00e8 presente. <\/p>\n\n\n\n<p>In questo caso vogliamo aggiungere l&#8217;attributo rel solo ai link esterni, per cui utilizziamo la funzione <code>preg_replace<\/code> utilizzando come parametro un&#8217;espressione regolare che ci permette di applicare la funzione <strong>solo ai link esterni<\/strong>. <\/p>\n\n\n\n<p>Possiamo decidere di aggiungere l&#8217;attributo rel che vogliamo, ci basta sostituire <code>'rel=\"nofollow\" $1'<\/code> con un altro attributo, cos\u00ec:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8216;rel=&#8221;noopener&#8221; $1&#8217;<\/li>\n\n\n\n<li>&#8216;rel=&#8221;sponsored&#8221; $1&#8217;<\/li>\n\n\n\n<li>&#8216;target=&#8221;_blank&#8221; $1&#8217;<\/li>\n<\/ul>\n\n\n\n<p>La nostra funzione sar\u00e0 questa:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function supporthost_add_rel_all_links($supporthostMatches) {\n    \n    $supporthostLink = $supporthostMatches[0];\n    $supporthostSiteLink = get_bloginfo('url');\n \n    if (strpos($supporthostLink, 'rel') === false) {\n        $supporthostLink = preg_replace(\"%(href=\\S(?!$supporthostSiteLink))%i\", 'rel=\"nofollow\" $1', $supporthostLink);\n    }\n    \n    return $supporthostLink;\n \n}<\/pre>\n\n\n\n<p>Abbiamo utilizzato la funzione di sopra solo per i link esterni. <\/p>\n\n\n\n<p>Come facciamo, invece, a modificare tutte le URL?<\/p>\n\n\n\n<p>Ci basta usare una regex diversa nella funzione <code>preg_replace<\/code>, come ti mostro qui:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$supporthostLink = preg_replace(\"%(href=\\S(.+))%i\", 'rel=\"nofollow\" $1', $supporthostLink);<\/pre>\n\n\n\n<p>Tieni presente che anche in questo caso possiamo usare l&#8217;attributo rel che vogliamo: ci basta sostituire nel codice sopra rel=&#8221;nofollow&#8221; con un attributo diverso.<\/p>\n\n\n\n<p>Puoi anche combinare le due funzioni <code>preg_replace<\/code>. Nella funzione che ti mostrer\u00f2 alla fine dell&#8217;articolo ho utilizzato proprio le due funzioni <code>preg_replace<\/code> una dietro l&#8217;altra. In questo modo posso aggiungere gli attributi <code>nofollow <\/code>e <code>sponsored <\/code>ai link esterni, e gli attributi <code>nofollow <\/code>e <code>noopener <\/code>ai <a href=\"https:\/\/supporthost.com\/it\/link-interni\/\">link interni<\/a>.<\/p>\n\n\n\n<p class=\"note\">Il nostro esempio finale con le due funzioni serve solo per farti capire cosa possiamo fare con PHP, potrebbe non avere molto senso a livello <a href=\"https:\/\/supporthost.com\/it\/seo-significato\/\" data-type=\"post\" data-id=\"21310\">SEO<\/a> e <a href=\"https:\/\/supporthost.com\/it\/link-building\/\" data-type=\"post\" data-id=\"23204\">link building<\/a> usare gli attributi in questo modo.<\/p>\n\n\n\n<p>La funzione che abbiamo appena visto ci ha permesso di aggiungere gli attributi rel a tutti i link. Tuttavia i link che <strong>avevano gi\u00e0 un attributo rel<\/strong>, non sono stati modificati perch\u00e9 abbiamo usato questa condizione:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (strpos($supporthostLink, 'rel') === false) { [...]<\/pre>\n\n\n\n<p>Per far s\u00ec che la nostra funzione vada a sostituire l&#8217;attributo rel impostando quello che vogliamo aggiungiamo un &#8220;elseif&#8221;. Per fare un esempio utilizziamo un&#8217;altra regex per controllare se il link \u00e8 esterno. Quindi se il link \u00e8 esterno ed ha gi\u00e0 un attributo rel, andiamo a modificare il rel con la funzione <code>preg_replace<\/code>.<\/p>\n\n\n\n<p>Nella pratica se il link ha un attributo rel diverso da: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>rel=&#8221;nofollow&#8221;<\/li>\n\n\n\n<li>rel=&#8221;nofollow, [altro attributo]&#8221;<\/li>\n<\/ul>\n\n\n\n<p>Lo sostituiamo andando a impostarlo come rel=&#8221;nofollow&#8221;. <\/p>\n\n\n\n<p>Questa \u00e8 la funzione che usiamo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">    if (strpos($supporthostLink, 'rel') === false) {\n        [...]\n    } elseif (preg_match(\"%href=\\S(?!$supporthostSiteLink)%i\", $supporthostLink)) {\n        $supporthostLink = preg_replace('\/rel=\\S(?!nofollow)\\S*\/i', 'rel=\"nofollow\"', $supporthostLink);\n    }<\/pre>\n\n\n\n<p>Tieni presente che questa funzione qui sopra non \u00e8 completa, ma serve a farti capire come utilizzare la condizione elseif.<\/p>\n\n\n\n<p>Il nostro<strong> codice completo<\/strong> sar\u00e0 questo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_filter('the_content', 'supporthost_add_rel');\nadd_filter('the_excerpt', 'supporthost_add_rel');\n\nfunction supporthost_add_rel($content) {    \n    return preg_replace_callback('\/&lt;a[^&gt;]+\/', 'supporthost_add_rel_all_links', $content);    \n}\n \nfunction supporthost_add_rel_all_links($supporthostMatches) {\n    \n    $supporthostLink = $supporthostMatches[0];\n    $supporthostSiteLink = get_bloginfo('url');\n \n    if (strpos($supporthostLink, 'rel') === false) {\n        $supporthostLink = preg_replace(\"%(href=\\S(?!$supporthostSiteLink))%i\", 'rel=\"nofollow, sponsored\" $1', $supporthostLink);\n\t\t$supporthostLink = preg_replace(\"%(href=\\S(.+))%i\", 'rel=\"nofollow, noopener\" $1', $supporthostLink);\n    } elseif (preg_match(\"%href=\\S(?!$supporthostSiteLink)%i\", $supporthostLink)) {\n        $supporthostLink = preg_replace('\/rel=\\S(?!nofollow)\\S*\/i', 'rel=\"nofollow\"', $supporthostLink);\n    }\n    \n    return $supporthostLink;\n \n}<\/pre>\n\n\n\n<p>Nell&#8217;esempio qui sopra abbiamo inserito due funzioni <code>preg_replace<\/code>: la prima ci permette di aggiungere gli attributi nofollow e sponsored ai link esterni. Con la seconda andiamo a inserire gli attributi rel nofollow e noopener ai link interni.<\/p>\n\n\n\n<p>Ora tocca a te modificare il codice per adattarlo a quello che vuoi fare. Per assicurarci che il codice funzioni come vogliamo, la cosa migliore da fare \u00e8 <strong>testarlo <\/strong>in <a href=\"https:\/\/supporthost.com\/it\/staging-sito\/\" data-type=\"post\" data-id=\"16710\">staging<\/a>. <\/p>\n\n\n\n<p>Per usare il codice ci basta solo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Modificare le regex per definire se applicare la funzione ai link interni o esterni<\/li>\n\n\n\n<li>Andare a modificare il valore della funzione <code>preg_replace<\/code> per scegliere che tipo di attributo rel andare a impostare (es. <code>'rel=\"nofollow, noopener\" $1'<\/code>)<\/li>\n<\/ul>\n\n\n\n<p>E il gioco \u00e8 fatto. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>Ci sono diversi casi in cui possiamo aver bisogno di aggiungere un attributo rel a <strong>tutti<\/strong> i link su WordPress. Possiamo usare questo sistema in tutti i casi in cui non possiamo o non vogliamo andare a gestire gli attributi manualmente, ma vogliamo effettuare una modifica<strong> in automatico<\/strong>.<\/p>\n\n\n\n<p>Tieni presente che non stiamo modificando il codice del nostro post nel database, ma stiamo filtrando il contenuto ed eseguendo una modifica ai link prima di mostrare la pagina al cliente. Se disattiviamo il filtro i link perdono gli attributi rel che abbiamo impostato.<\/p>\n\n\n\n<p>Come hai potuto vedere possiamo <strong>modificare <\/strong>il codice per adattarlo alle nostre esigenze. Per esempio \u00e8 possibile aggiungere gli attributi rel nofollow e sponsored a tutti i link esterni. <\/p>\n\n\n\n<p>Ti sei mai trovato in condizione di voler aggiungere gli attributi rel a tutti i link? Facci sapere se questo tutorial ti \u00e8 stato utile o hai dubbi al riguardo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&#8217;attributo rel che andiamo a inserire nei link ci permette di indicare delle relazioni con la pagina di destinazione del link. In questo articolo andremo a vedere come creare una funzione che ci consenta di applicare in automatico l&#8217;attributo rel o pi\u00f9 attributi a tutti i link di WordPress. Attraverso questa funzione possiamo aggiungere automaticamente [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":63795,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-32555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/32555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=32555"}],"version-history":[{"count":4,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/32555\/revisions"}],"predecessor-version":[{"id":132192,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/32555\/revisions\/132192"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/63795"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=32555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=32555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=32555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}