Migrazione Magazine su 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
https://magazine.designbest.com/api/GetAllArticles
e utilizzando le API di Wordpress è possibile trasferire tutti gli articoli sul database di Wordpress.

Wordpress su docker

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
    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:

Abilitare le API

Le API di Wordpress sono attive di default.
Le chiamate pubbliche non richiedono nessuna autenticazione, le chiamate che modificano dati vogliono la basic athentication.

Dal menu Impostazioni -> Permalink abilitare gli URL BELLI per avere le API sotto l'endpoint /wp-json/wp/v2/

Scaricare il plugin Basic Authentication da qui: https://github.com/WP-API/Basic-Auth

Wordpress

Dipendenze e configurazione dell'host

Inserire il dominio del dns pubblico nel file host
sudo nano /etc/hosts
Metterci il loopback

127.0.0.1  designbestmagazine.dbdemo47.com

E installare i pacchett intl e imagick

sudo apt install php8.0-intl php8.0-imagick

Ambiente di Test

http://designbestmagazine.dbdemo47.com/

Admin    -> admin
Password -> W3bm0b1l!

Creazione del tema child

Tema Default (Twenty Twenty-Two)

Creare il tema figlio.

Scaricare il plugin Child Theme Configurator
Strumenti => Child themes e crearlo spuntando Separate Stylesheet e flaggare la casella per la copia dei menu.

Dal gestore dei temi selezionare e attivare il tema figlio appena creato.

Tema bootScore

https://bootscore.me/documentation/
Tema basato totalmente su bootstrap 5 e jQuery che permette di modificare i CSS utilizzando sintassi SCSS.

https://bootscore.me/#download

• Scaricare bootScore e bootScore Child. Aggiungerli entrambi e attivare il tema figlio.
• Aggiunti i font nella cartella /fonts seguendo la guida https://bootscore.me/documentation/google-fonts/
• Creato /css/scss/_bscore_custom_fonts.scss con le chiamate prese dalla guida sopra
• Aggiornato /css/scss/bootstrap.min.scss aggiungendo la chiamata

@import "bscore_custom_fonts";

• Copiato il file header.php dal tema padre per modificare il nome dell'immagine logo in logo.png
• Copiato il logo in img/logo/logo.png

Altri plugin base

• Installare Polylang PRO versione a pagamento per le funzionalità multi-lingua.
  

Andare su Lingua => impostazioni => Media => Impostazioni 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.
Per abilitarli è necessario aggiungere al file
/wp-content/themes/<nome-del-tema-child>/functions.php
del tema corrente la chiamata a register_meta() specificando nome e tipologia dei campi in questione.

// 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

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 POST http://designbestmagazine.dbdemo47.com/wp-json/wp/v2/categories

{
    "name": "Bagni", 
    "slug": "bagni",
    "parent": 2,
    "description": "Descrizione bagni"
}

Articoli

Chiamata Json POST http://designbestmagazine.dbdemo47.com/wp-json/wp/v2/posts

{
    "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
    }
}

Immagini e media

Chiamata Json POST http://designbestmagazine.dbdemo47.com/wp-json/wp/v2/media?lang=it
Inserire il parametro lang per attivare la duplicazione media per lingua di Polylang PRO.

• Sezione Authorization
  

Settare Basic Auth -> nome utente e password admin di wordpress

• Sezione Header
  

Importanti gli header

Content-Type         image/jpeg
Content-Disposition  form-data; filename="rotto.jpg"

• Sezione Body
  

Indicare il file fisico in modo che venga fatta la copia byte per byte