Migrazione Magazine su Wordpress: differenze tra le versioni

Da Webmobili Wiki.
← Differenza precedente
 
(42 versioni intermedie di 3 utenti non 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'''.


Partendo dall'estrazione per i post del magazine <br/>
Partendo dall'estrazione per i post del magazine <br/>
<code>https://magazine.designbest.com/api/GetAllArticles</code><br/>
<code>https://magazine.designbest.com/api/GetAllArticlesForWordpress</code><br/>
e utilizzando le '''API di Wordpress''' è possibile trasferire tutti gli articoli sul database di Wordpress.
e utilizzando le '''API di Wordpress''' è possibile trasferire tutti gli articoli sul database 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 42: Riga 46:
</syntaxhighlight>
</syntaxhighlight>


== Abilitare le API ==
<b>php.ini</b><br/>
Le API di Wordpress sono attive di default.<br/>
Per conoscere il folder del file di configurazione di PHP -> <code>cd $PHP_INI_DIR/</code><br/>
Le chiamate pubbliche non richiedono nessuna autenticazione, le chiamate che modificano dati vogliono la '''basic athentication'''.<br/>
Andare in <code>/usr/local/etc/php/conf.d</code><br/>
 
Creare ad esempio un file uploads.ini con la direttiva -> <code>upload_max_filesize=10M;</code>
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 ===
== Release in produzione ==
 
Il giorno in cui saliremo in produzione dovremo:
 
==== 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/><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.
 
=== API Wordpress ===
 
==== Attivare i campi meta ====
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.
 
==== 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,
    "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 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/>
* Togliere la password da <code>designbestmagazine.com</code>
Indicare il file fisico in modo che venga fatta la copia byte per byte<br/>
* Attivare sito ''OldMagazineRedirect''
[[File:POSTMAN WP-uploads-image-01.png]]
* 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
* Inserire binding <code>magazine.designbest.com</code> 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: <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"