Migrazione Magazine su Wordpress: differenze tra le versioni

Da Webmobili Wiki.
← Differenza precedente
 
(22 versioni intermedie di uno stesso utente non sono mostrate)
Riga 1: Riga 1:
Progetto '''concluso''' il giorno '''17 ottobre 2022'''.<br/><br/>
Il progetto ha l'obiettivo di spostare tutti gli articoli di '''Magazine''' (Episerver) su una nuova istanza aggiornata di '''Wordpress'''.
Il progetto ha l'obiettivo di spostare tutti gli articoli di '''Magazine''' (Episerver) su una nuova istanza aggiornata di '''Wordpress'''.


Riga 22: Riga 24:
       WORDPRESS_DB_PASSWORD: w3bm0b1l1
       WORDPRESS_DB_PASSWORD: w3bm0b1l1
       WORDPRESS_DB_NAME: webmobili
       WORDPRESS_DB_NAME: webmobili
      WORDPRESS_DEBUG: 1
      TZ: "Europe/Rome"
     volumes:
     volumes:
       - wordpress:/var/www/html
       - wordpress:/var/www/html
Riga 47: Riga 51:
Creare ad esempio un file uploads.ini con la direttiva -> <code>upload_max_filesize=10M;</code>
Creare ad esempio un file uploads.ini con la direttiva -> <code>upload_max_filesize=10M;</code>


== Abilitare le API ==
== Release in produzione ==
Le API di Wordpress sono attive di default.<br/>
Il giorno in cui saliremo in produzione dovremo:
Le chiamate pubbliche non richiedono nessuna autenticazione, le chiamate che modificano dati vogliono la '''basic athentication'''.<br/>
 
Dal menu <code>Impostazioni -> Permalink</code> abilitare gli URL BELLI per avere le API sotto l'endpoint <code>/wp-json/wp/v2/</code>
 
Scaricare il plugin Basic Authentication da qui: <code>https://github.com/WP-API/Basic-Auth</code>
 
== Wordpress ==
=== Dipendenze e configurazione dell'host ===
Inserire il dominio del dns pubblico nel file host<br/>
<code>sudo nano /etc/hosts</code><br/>
Metterci il loopback
<syntaxhighlight lang="bash">
127.0.0.1  designbestmagazine.dbdemo47.com
</syntaxhighlight>
E installare i pacchett <code>intl</code> e <code>imagick</code>
<syntaxhighlight lang="bash">
sudo apt install php8.0-intl php8.0-imagick
</syntaxhighlight>
 
=== Ambiente di Test ===
<code>http://designbestmagazine.dbdemo47.com/</code>
<pre>
Admin    -> admin
Password -> W3bm0b1l!
</pre>
 
=== Creazione del tema child ===
 
 
==== Tema Default (Twenty Twenty-Two) ====
Creare il tema figlio.<br/>
 
Scaricare il plugin '''Child Theme Configurator'''<br/>
<code>Strumenti => Child themes</code>
e crearlo spuntando ''Separate Stylesheet'' e flaggare la casella per ''la copia dei menu''.<br/>
 
Dal gestore dei temi selezionare e attivare il tema figlio appena creato.
 
 
==== Tema bootScore ====
https://bootscore.me/documentation/<br/>
Tema basato totalmente su '''bootstrap 5''' e '''jQuery''' che permette di modificare i CSS utilizzando sintassi SCSS.<br/>
 
https://bootscore.me/#download<br/>
* Scaricare '''bootScore''' e '''bootScore Child'''. Aggiungerli entrambi e attivare il tema figlio.
* Aggiunti i font nella cartella <code>/fonts</code> seguendo la guida https://bootscore.me/documentation/google-fonts/
* Creato <code>/css/scss/_bscore_custom_fonts.scss</code> con le chiamate prese dalla guida sopra
* Aggiornato <code>/css/scss/bootstrap.min.scss</code> aggiungendo la chiamata
<syntaxhighlight lang="css">@import "bscore_custom_fonts";</syntaxhighlight>
* Copiato il file <code>header.php</code> dal tema padre per modificare il nome dell'immagine logo in <code>logo.png</code>
<syntaxhighlight lang="php">
<!-- Navbar Brand -->
<a class="navbar-brand xs d-md-none" href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/img/logo/logo-sm.png" alt="logo" class="logo xs"></a>
<a class="navbar-brand md d-none d-md-block" href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/img/logo/logo.png" alt="logo" class="logo md"></a>
</syntaxhighlight>
* Copiato il logo in <code>img/logo/logo.png</code> e <code>img/logo/logo-sm.png</code>
<br/>
 
=== Altri plugin base ===
* Installare '''Polylang PRO''' versione a pagamento per le funzionalità ''multi-lingua''.<br/>
Andare su <code>Lingua => impostazioni => Media => Impostazioni</code> e spuntare ''Duplica automaticamente i media in tutte le lingue'' per fare in modo che i media vengano uploadati già con un record di lingua.
* Installare '''Yoast SEO''' per la gestione del ''SEO''
 
Creare le '''categories''' prima.
 
=== 4DEM nel footer ===
All'interno di un Widget con contenuto html è stato messo il seguente codice che iscrive l'utente al form di 4DEM:
<syntaxhighlight lang="html">
<p style="margin-bottom:2rem">
Rimani aggiornato su tutte le novità, le offerte e le curiosità sul mondo dell'arredo, del design e della casa!</p>
<form action="https://mailchef.4dem.it/subscribe.php" method="post" target="_blank" class="search-form" style="cursor:auto!important">
<div style="display:flex;padding-right:50px">
<input name="FormValue_Fields[EmailAddress]" type="text" placeholder="Inserisci la tua mail" required="required" class="search-field" style="cursor:auto!important">
<input name="FormValue_ListID" type="hidden" value="70904">
<input name="FormValue_Command" type="hidden" value="Subscriber.Add">
<input type="hidden" name="FormValue_Fields[CustomField52041]" value="magazine" id="FormValue_CustomField52041">
<input type="hidden" name="FormValue_Fields[CustomField52093]" value="IT" id="FormValue_CustomField52093">
<button type="submit" class="dashicons dashicons-arrow-right-alt2" style="background-color:gray;height:55px;border:none;color:white;cursor:pointer!important;width:30px">
</button>   
</div>
</form>
</syntaxhighlight>
 
=== Estensioni Designbest del tema ===
Oltre a <code>style.css</code>, i file che estendono il tema sono stati messi nella cartella del tema figlio e sono
* <code>/wp-content/themes/sway-child/DesignbestRest.php</code>
* <code>/wp-content/themes/sway-child/DesignbestMagazineExtensions.php</code>
* <code>/wp-content/themes/sway-child/assets/js/DesignbestLeadManagerForm.js</code> (chiamato internamente da DesignbestMagazineExtensions.php)
Vengono chiamati in causa tramite il file <code>functions.php</code>
<syntaxhighlight lang="php">
// DESIGNBEST EXTENSIONS
require_once('DesignbestRest.php');
require_once('DesignbestMagazineExtensions.php');
Designbest\DesignbestMagazineExtensions::init();
// END DESIGNBEST EXTENSIONS
</syntaxhighlight>
 
==== Lead Manager ====
Per poter aggiungere il '''form di Lead Manager''' è stata fatta un'estensione del tema che aggiunge un '''shortcode''' al sistema Wordpress.<br/><br/>
 
Per utilizzarlo basta scrivere
<syntaxhighlight>[leadmanagerform]</syntaxhighlight>
all'interno di un post con l'editor di testo.<br/>
I suoi argomenti, da specificare come ''attributo="valore"'', sono i seguenti:
 
* ''shop_id'' - Se specificato sarà un lead privato
* ''product_id''  - ID di un prodotto, ambient e manufacturer verranno ignorati
* ''manufacturer_id'' - ID di un manu
* ''ambient_id'' - ID ambiente
* ''image_url'' - URL completa di immagine
* ''page_title'' - Titolo della pagina (opzionale, per ora non viene utilizzato).<br/><br/>
 
==== API Wordpress ====
Attivare i campi meta.<br/>
Di base i '''custom fields''' sono bloccati dalle API Wordpress.<br/>
Per abilitarli è necessario aggiungere al file<br/>
<code>/wp-content/themes/<nome-del-tema-child>/functions.php</code><br/>
del tema corrente la chiamata a '''register_meta()''' specificando nome e tipologia dei campi in questione.
<syntaxhighlight lang="php">
// REST API - Registered Meta Fields
// https://developer.wordpress.org/rest-api/extending-the-rest-api/modifying-responses/#working-with-registered-meta-in-the-rest-api
register_meta( 'post', 'meta_title', array( 'type'=>'string', 'description' => 'SEO meta title per il post.', 'single' => true,  'show_in_rest' => true) );
register_meta( 'post', 'meta_description', array( 'type'=>'string', 'description' => 'SEO meta description per il post.', 'single' => true,  'show_in_rest' => true) );
register_meta( 'post', 'manufacturer_id', array( 'type'=>'integer', 'description' => 'Se presente in articolo, contiene ID del manufacturer.', 'single' => true,  'show_in_rest' => true) );
// END REST API - Registered Meta Fields
</syntaxhighlight>
Forse prima di effettuare un inserimento di post è necessario '''abilitare i campi personalizzati''' dall'interfaccia admin di editing di un post (tre puntini, preferenze, pannelli, campi personalizzati) ma non ne siamo certi.<br/><br/>
 
Nella nostra estensione abbiamo specificato i <code>register_meta()</code> all'interno del costruttore di <code>DesignbestMagazineExtensions</code> (tutto centralizzato)
 
==== Categorie e sottocategorie ====
 
Chiamata Json
<code>POST http://designbestmagazine.dbdemo47.com/wp-json/wp/v2/categories</code>
<syntaxhighlight lang='json'>
{
    "name": "Bagni",
    "slug": "bagni",
    "parent": 2,
    "description": "Descrizione bagni"
}
</syntaxhighlight>
 
==== Articoli ====
Chiamata Json
<code>POST http://designbestmagazine.dbdemo47.com/wp-json/wp/v2/posts</code>
<syntaxhighlight lang='json'>
{
    "title": "Titolo articolo",
    "content": "Descrizione articolo.",
    "categories": 1,
    "status": "publish",
    "slug": "titolo-articolo",
    "featured_media": IDmedia,
    "comment_status": "closed",
    "meta": {
      "meta_title": "SEO meta title del post",
      "meta_description": "SEO meta description del post",
      "manufacturer_id": 313
    }
}
</syntaxhighlight>
 
==== Immagini e media ====
Chiamata Json
<code>POST http://designbestmagazine.dbdemo47.com/wp-json/wp/v2/media?lang=it</code><br/>
Inserire obbligatoriamente il parametro <code>lang</code> per attivare ''la duplicazione media per lingua'' di Polylang PRO.
 
* '''Sezione Authorization'''<br/>
Settare Basic Auth -> nome utente e password admin di wordpress<br/><br/>
 
* '''Sezione Header'''<br/>
Importanti gli header
<syntaxhighlight lang="bash">
Content-Type        image/jpeg
Content-Disposition  form-data; filename="rotto.jpg"
</syntaxhighlight>
[[File:POSTMAN WP-uploads-image.png]]<br/><br/>
 
* '''Sezione Body'''<br/>
Indicare il file fisico in modo che venga fatta la copia byte per byte<br/>
[[File:POSTMAN WP-uploads-image-01.png]]
 
==== Tema Sway - Theme Forest ====
Il nostro tema a pagamento è '''Sway''' preso da [https://themeforest.net/ ThemeForest] che collaborano con questi che si chiamano '''Envato'''.<br/>
Le credenziali di accesso sono:<br/>
<pre>
mail: s.bracco@webmobili.it
user: cidrolino
psw: C1drolino_2022
</pre>
 
Con lo stesso login si può entrare su [https://build.envato.com/ Envato API] per creare un '''token''' in modo da fornire al plugin la possibilità di aggiornare i temi ThemeForest.<br/>
Il token attuale è
<pre>yaMStxmOvyqmpqCrtePopEmNNSUbo4R6</pre>


Una volta creato il token utilizzare la voce '''Envato market''' nell'admin di Wordpress per avere l'aggiornamento dei temi ThemeForest.<br/>
* Togliere la password da <code>designbestmagazine.com</code>
Per aggiungere un tema bisogna procurarsi l'ID del tema ti thememonster.<br/>
* Attivare sito ''OldMagazineRedirect''
Nel caso di Sway il suo ID si recupera dall'url<br/><br/>
* Inserire binding <code>old.magazine.dbdemo47.com</code> in sito ''DesignbestMagazine'' e togliere <code><del>magazine.designbest.com</del></code> (sia certificato che senza) e attivare la Basic Auth
https://themeforest.net/item/sway-multipurpose-wordpress-theme-with-page-builder/30082633<br/><br/>
* Inserire binding <code>magazine.designbest.com</code> a ''OldMagazineRedirect'' (con certificato SSL e senza)
è <code>30082633</code>
* Rel di Designbest senza Magazine
* Testare i redirect
* Sul "vecchio" Magazine ricordarsi di cambiare il dominio dall'admin Episerver: <code>old.magazine.dbdemo47.com/episerver</code>
* Vecchio magazine sotto password

Versione attuale delle 09:44, 28 ott 2022

Progetto concluso il giorno 17 ottobre 2022.

Il progetto ha l'obiettivo di spostare tutti gli articoli di Magazine (Episerver) su una nuova istanza aggiornata di Wordpress.

Partendo dall'estrazione per i post del magazine
https://magazine.designbest.com/api/GetAllArticlesForWordpress
e utilizzando le API di Wordpress è possibile trasferire tutti gli articoli sul database di Wordpress.

Wordpress su docker

[modifica]

Utilizzando questo docker-compose.yml
impostiamo l'ambiente di sviluppo. 

version: '3.1'

services:

  wordpress:
    image: wordpress    
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: webmobili
      WORDPRESS_DB_PASSWORD: w3bm0b1l1
      WORDPRESS_DB_NAME: webmobili
      WORDPRESS_DEBUG: 1
      TZ: "Europe/Rome"
    volumes:
      - wordpress:/var/www/html

  db:
    image: mysql:5.7    
    ports:
      - 3306:3306
    environment:
      MYSQL_DATABASE: webmobili
      MYSQL_USER: webmobili
      MYSQL_PASSWORD: w3bm0b1l1
      MYSQL_ROOT_PASSWORD: w3bm0b1l1
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

php.ini
Per conoscere il folder del file di configurazione di PHP -> cd $PHP_INI_DIR/
Andare in /usr/local/etc/php/conf.d
Creare ad esempio un file uploads.ini con la direttiva -> upload_max_filesize=10M;

Release in produzione

[modifica]

Il giorno in cui saliremo in produzione dovremo:

  • Togliere la password da designbestmagazine.com
  • Attivare sito OldMagazineRedirect
  • Inserire binding old.magazine.dbdemo47.com in sito DesignbestMagazine e togliere magazine.designbest.com (sia certificato che senza) e attivare la Basic Auth
  • Inserire binding magazine.designbest.com a OldMagazineRedirect (con certificato SSL e senza)
  • Rel di Designbest senza Magazine
  • Testare i redirect
  • Sul "vecchio" Magazine ricordarsi di cambiare il dominio dall'admin Episerver: old.magazine.dbdemo47.com/episerver
  • Vecchio magazine sotto password
Estratto da "https://wiki.wmdemo.it/index.php?title=Migrazione_Magazine_su_Wordpress&oldid=2765"