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:

NB
il file php.ini si trova in /usr/local/php/php.ini

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

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

• Copiato il logo in img/logo/logo.png e img/logo/logo-sm.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 obbligatoriamente 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