Magazine WP

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

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

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

Tema bootScore

Ci sarebbe piaciuto molto, ma la redazione non ha apprezzato.

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

Home Page Url - Problema settando pagina statica

Con PolyLang si crea un problema di url quando invece della classica Ultimi Articoli, come homepage si seleziona una pagina statica.
La url dell'homepage continua a mostrare il permalink dell'articolo.
Per rimediare bisogna andare nelle impostazioni delle lingue (Impostazioni->Lettura->modifica Urls) e selezionare l'opzione Il frontend mostra il codice della lingua invece del nome o id pagina

https://polylang.pro/doc/define-your-home-page-as-a-static-page/