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

4DEM nel footer

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>

Estensioni Designbest del tema

I file che estendono il tema sono stati messi nella cartella del tema figlio sotto il folder Designbest Vengono chiamati in causa tramite il file functions.php

// DESIGNBEST EXTENSIONS
require_once('Designbest/DesignbestAutoload.php');
// END DESIGNBEST EXTENSIONSS

Lead Manager

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).
• show_ambients_dropdown - Se impostato a "true" mostra la tendina di scelta dell'ambiente, comanda su ambient_id
• show_budget_box - Se impostato a "true" mostra un box testuale che verrà concatenato al messaggio della request

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.

Nella nostra estensione abbiamo specificato i register_meta() all'interno del costruttore di DesignbestMagazineExtensions (tutto centralizzato)

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

Tema Sway - Theme Forest

Il nostro tema a pagamento è Sway preso da ThemeForest che collaborano con questi che si chiamano Envato.
Le credenziali di accesso sono:

mail: s.bracco@webmobili.it
user: cidrolino
psw:  C1drolino_2022

Con lo stesso login si può entrare su Envato API per creare un token in modo da fornire al plugin la possibilità di aggiornare i temi ThemeForest.
Il token attuale è

yaMStxmOvyqmpqCrtePopEmNNSUbo4R6

Una volta creato il token utilizzare la voce Envato Market nell'admin di Wordpress per avere l'aggiornamento dei temi ThemeForest.
Per aggiungere un tema bisogna procurarsi l'ID del tema ti ThemeForest.
Nel caso di Sway il suo ID si recupera dall'url

https://themeforest.net/item/sway-multipurpose-wordpress-theme-with-page-builder/30082633

è 30082633

Ecco la Guida Ufficiale