Magazine WP: differenze tra le versioni

Da Webmobili Wiki.
 
(17 versioni intermedie di 2 utenti non mostrate)
Riga 13: Riga 13:
<syntaxhighlight lang="bash">
<syntaxhighlight lang="bash">
127.0.0.1  designbestmagazine.dbdemo47.com
127.0.0.1  designbestmagazine.dbdemo47.com
</syntaxhighlight>
e questo in PROD
<syntaxhighlight lang="bash">
127.0.0.1  designbestmagazine.com www.designbestmagazine.com
127.0.0.1  designbestmagazine.com www.designbestmagazine.com
</syntaxhighlight>
</syntaxhighlight>
E installare i pacchett <code>intl</code> e <code>imagick</code>
 
E installare i pacchetti <code>intl</code> e <code>imagick</code>
<syntaxhighlight lang="bash">
<syntaxhighlight lang="bash">
sudo apt install php8.0-intl php8.0-imagick
sudo apt install php8.0-intl php8.0-imagick
Riga 24: Riga 22:


== Ambiente di Test ==
== Ambiente di Test ==
<code>http://designbestmagazine.dbdemo47.com/</code>
<code>https://designbestmagazine.dbdemo47.com/</code>
<pre>
<pre>
Admin    -> admin
Admin    -> admin
Password -> W3bm0b1l!
Password -> W3bm0b1l!
</pre>
</pre>
'''IMPORTANTE'''<br/>
Nell'ambiente di ''test'', nel file <code>wp-config.php</code> inserire la costante
<syntaxhighlight lang="php">
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', true );
define( 'WP_ENVIRONMENT_TYPE', 'staging' );  // mettere 'local' per sviluppo locale
</syntaxhighlight>
In ''produzione'' rimuovere <code>WP_ENVIRONMENT_TYPE</code> e rimuovere WP_DEBUG e figli.


== Creazione del tema child ==
== Creazione del tema child ==
Riga 85: Riga 94:
Creare le '''categories''' prima.
Creare le '''categories''' prima.


== 4DEM nel footer ==
== Brevo nel footer ==
All'interno di un Widget con contenuto html è stato messo il seguente codice che iscrive l'utente al form di 4DEM:
Scaricare il plugin '''Newsletter, SMTP, Email marketing and Subscribe forms by Brevo'''.<br/>
<syntaxhighlight lang="html">
Il plugin permetterebbe autonomamente di creare dei form da inserire con uno shortcode ma '''NON FUNZIONA, NON CREARE FORM DA QUI'''
<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>
Il '''workaround''' è quello di utilizzare il solito '''Contact Form 7'''<br/>
<form action="https://mailchef.4dem.it/subscribe.php" method="post" target="_blank" class="search-form" style="cursor:auto!important">
prima bisogna andare nel suo menu alla voce <code>Integrazione</code> e attivare l'integrazione con Brevo inserendo l' ''API Key'' dell'account.
<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>
</syntaxhighlight>


== Estensioni Designbest del tema ==
== Estensioni Designbest del tema ==
Riga 231: Riga 229:


=== WPBakery Page Builder ===
=== WPBakery Page Builder ===
<code>56€ ogni 6 mesi</code><br/>
<code>56$ all'anno</code><br/>
Al momento non abbiamo acquistato una licenza e di conseguenza non si lascia aggiornare.
https://support.wpbakery.com/<br/>
Account
<pre>
username: s.vincenzi@webmobili.it
password: W3bm0b1l!
licenza : eb88acb8-c966-4725-80d6-75249a09a5a4
scadenza: 28-10-2023
</pre>
 
=== Slider Revolution ===
<code>42,70€ ogni anno</code><br/>
https://account.sliderrevolution.com/<br/>
Account
<pre>
username: s.vincenzi@webmobili.it
password: W3bm0b1l!
licenza : 8f137c-ad20cc-d86203-6564ef-925130
</pre>
 
 
== Rinnovo Certificati ==
Su register stiamo pagando i certificati dei domini <code>designbestmagazine.com</code> e <code>designbestmagazine.it</code>.<br/><br/>
 
Quando c'è da fare il rinnovo è necessario cliccare su<br/>
''Richiedi '''nuovo CSR'''''<br/>.
 
In ordine dovremo
* Creare un nuovo <code>.csr</code> da ''Merida''
* L'operazione precedente restituisce un <code>.csr</code> e una chiave privata <code>.key</code>
* Aprire il pannello di Register e inserire il contenuto del <code>.csr</code> per fare generare il certificato
<br/>
 
Per generare il <code>.csr</code> utilizzare
<syntaxhighlight lang="bash">
openssl req -new -newkey rsa:2048 -nodes -keyout designbestmagazine.com_private_key.key -out designbestmagazine.com.csr
openssl req -new -newkey rsa:2048 -nodes -keyout designbestmagazine.it_private_key.key -out designbestmagazine.it.csr
</syntaxhighlight>
 
 
<syntaxhighlight lang="bash">
cat designbestmagazine.it_ssl_certificate.crt designbestmagazine.it_ssl_certificate_intermediate.crt >> designbestmagazine.it_ssl_certificate_bundle.crt
cat designbestmagazine.com_ssl_certificate.crt designbestmagazine.com_ssl_certificate_intermediate.crt >> designbestmagazine.com_ssl_certificate_bundle.crt
</syntaxhighlight>

Versione attuale delle 11:12, 30 ago 2024

Abilitare le API

[modifica]

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

[modifica]

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

127.0.0.1  designbestmagazine.dbdemo47.com
127.0.0.1  designbestmagazine.com www.designbestmagazine.com

E installare i pacchetti intl e imagick

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

Ambiente di Test

[modifica]

https://designbestmagazine.dbdemo47.com/

Admin    -> admin
Password -> W3bm0b1l!

IMPORTANTE
Nell'ambiente di test, nel file wp-config.php inserire la costante

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', true );
define( 'WP_ENVIRONMENT_TYPE', 'staging' );  // mettere 'local' per sviluppo locale

In produzione rimuovere WP_ENVIRONMENT_TYPE e rimuovere WP_DEBUG e figli.

Creazione del tema child

[modifica]

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

[modifica]

Il nostro tema a pagamento è Sway preso da ThemeForest che collaborano con questi che si chiamano Envato.
Dalla pubblicità asserivano che il tema fosse basato su Bootstrap 5, in realtà è un vecchio Bootstrap 3.
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

[modifica]

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

[modifica]
  • 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.

[modifica]

Scaricare il plugin Newsletter, SMTP, Email marketing and Subscribe forms by Brevo.
Il plugin permetterebbe autonomamente di creare dei form da inserire con uno shortcode ma NON FUNZIONA, NON CREARE FORM DA QUI

Il workaround è quello di utilizzare il solito Contact Form 7
prima bisogna andare nel suo menu alla voce Integrazione e attivare l'integrazione con Brevo inserendo l' API Key dell'account.

Estensioni Designbest del tema

[modifica]

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

[modifica]

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

[modifica]

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

[modifica]

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

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

Articoli

[modifica]

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

[modifica]

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

[modifica]

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/


Plugin a pagamento - Aggiornamenti

[modifica]

Aggiornare i plugin non è mai semplice, in particolare abbiamo quelli a pagamento che devono essere aggiornati in modo custom.

PolyLang PRO

[modifica]

99€ all'anno
Se non si aggiorna in automatico, bisogna entrare nel portale
https://polylang.pro/
e loggarsi con le credenziali

s.vincenzi@webmobili.it
xIfm^EWLS6IVuYf8Y2^@neJqhZ5Xm@vD

Per poi navigare nella sezione Download
tirare giù lo zip
ed uploadarlo nella sezione Plugin come se fosse una nuova aggiunta (WP si accorge che è una sostituzione di nuovo su vecchio).

Tema Sway - Theme Forest

[modifica]

59€ ogni 6 mesi
Per aggiornare il tema leggere l'apposita sezione #Tema Sway - Theme Forest

WPBakery Page Builder

[modifica]

56$ all'anno
https://support.wpbakery.com/
Account

username: s.vincenzi@webmobili.it
password: W3bm0b1l!
licenza : eb88acb8-c966-4725-80d6-75249a09a5a4
scadenza: 28-10-2023

Slider Revolution

[modifica]

42,70€ ogni anno
https://account.sliderrevolution.com/
Account

username: s.vincenzi@webmobili.it
password: W3bm0b1l!
licenza : 8f137c-ad20cc-d86203-6564ef-925130


Rinnovo Certificati

[modifica]

Su register stiamo pagando i certificati dei domini designbestmagazine.com e designbestmagazine.it.

Quando c'è da fare il rinnovo è necessario cliccare su
Richiedi nuovo CSR
.

In ordine dovremo

  • Creare un nuovo .csr da Merida
  • L'operazione precedente restituisce un .csr e una chiave privata .key
  • Aprire il pannello di Register e inserire il contenuto del .csr per fare generare il certificato


Per generare il .csr utilizzare

openssl req -new -newkey rsa:2048 -nodes -keyout designbestmagazine.com_private_key.key -out designbestmagazine.com.csr
openssl req -new -newkey rsa:2048 -nodes -keyout designbestmagazine.it_private_key.key -out designbestmagazine.it.csr


cat designbestmagazine.it_ssl_certificate.crt designbestmagazine.it_ssl_certificate_intermediate.crt >> designbestmagazine.it_ssl_certificate_bundle.crt
cat designbestmagazine.com_ssl_certificate.crt designbestmagazine.com_ssl_certificate_intermediate.crt >> designbestmagazine.com_ssl_certificate_bundle.crt