Migrazione Magazine su Wordpress

Da Webmobili Wiki.

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

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:

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;

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.

All'interno di un Widget con contenuto html è stato messo il seguente codice che iscrive l'utente al form di 4DEM: 

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

Lead Manager nei post

Per poter aggiungere il form di Lead Manager è stata fatta un'estensione del tema che aggiunge un shortcode al sistema Wordpress.

Per utilizzarlo basta scrivere [leadmanagerform] all'interno di un post con l'editor di testo.
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).

I file che estendono il tema sono stati messi nella cartella del tema figlio e sono

  • /wp-content/themes/sway-child/DesignbestRest.php
  • /wp-content/themes/sway-child/DesignbestMagazineExtensions.php
  • /wp-content/themes/sway-child/assets/js/DesignbestLeadManagerForm.js

Vengono chiamati in causa tramite il file functions.php 

// DESIGNBEST EXTENSIONS
require_once('DesignbestRest.php');
require_once('DesignbestMagazineExtensions.php');
Designbest\DesignbestMagazineExtensions::init();
// END DESIGNBEST EXTENSIONS

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,
    "comment_status": "closed",
    "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

Estratto da "https://wiki.wmdemo.it/index.php?title=Migrazione_Magazine_su_Wordpress&oldid=2488"