WordPress con Elementor: conviene?

Integrare Elementor per costruire il proprio sito?

L’editor visuale paga?

L’esperienza con Elementor conviene quando si smanetta con wordpress? L’approccio top-down toglie qualcosa in termini di prestazioni al nostro sito? Meglio l’approccio bottom-up? All’ indirizzo https://elementor.com/ ci siamo cimentati con Elementor sul sito delle sperimentazioni di laboratorio all’ indirizzo https://www.umbriaway.it/wp/ . A scanso di equivoci è bene precisare subito che l’approccio bottom-up è impareggiabile non solo dal punto di vista del risparmio dei famosi 49 euro anno per N 1 sito come da prezziario ma anche per l’approccio didattico, dal momento che l’approccio visuale toglie proprio la conoscenza dei processi interni di WP che è una factory molto sofisticata e ricca di complessità che Elementor non può cogliere anche se la gestisce. Tuttavia quello che si è visto in termini di risparmio di tempo e anche di personalizzazioni, non ha eguali. Dopo aver installato il plug-in di Elementor in versione free siamo andati ad acquistare la PRO a 49 euro/anno direttamente sul sito, https://elementor.com/ che ci dà diritto a un uso illimitato per numero 1 siti! Una volta scaricato il plug-in si rientra in WP dove intendiamo sperimentare l’editor e si installa il PRO SENZA DISINSTALLARE il vecchio PLUG-IN FREE che deve rimanere ATTIVO, a questo punto si attiva il Plug-IN e si fa la connessione per formalizzare gli aggiornamenti anche sul sito loggato con il nostro account. Fatte queste semplici operazioni si sperimenta liberamente la PRO senza limitazioni, nel senso che ci dà la possibilità di scaricare un sacco di roba e di organizzare le pagine con un sacco di risorse che ovviamente nella versione FREE non c’erano. A questo punto cerchiamo di capire la versatilità dell’ editor rispetto all’ approccio manuale del programmatore che costruisce mattone dopo mattone con conseguente accumulo di tempistiche. Prendiamo ad esempio la pagina https://www.umbriaway.it/wp/libri/ dove abbiamo sperimentato manualmente delle custom queries. Ebbene se la paragoniamo a https://www.umbriaway.it/wp/map/ ci accorgiamo che tra i due approcci c’è un abisso in termini di stile e accuratezza e questo senza andare a giocare troppo con le opzioni di personalizzazione offerte da Elementor. In termini di velocità non si ha nessuna percezione di penalizzazione, anche se ovviamente i due plug-in attivi qualcosa di impercettibilmente nefasto devono alimentarlo a livello di assorbimento di risorse esterne. Quindi se in dieci minuti posso avere una pagina che in condizioni normali mi richiederebbe da neofita un’ ora di tempo per costruire delle custom queries personalizzate che invece Elementor gestisce in automatico cambiando solo le opzioni con un semplice clic, perchè dovrei escludermi la possibilità di costruire un intero sito con un supporto tecnico rilevante che costa poco più di 4 euro al mese? Anzi se si hanno numerosi clienti, più di tre, conviene fare senz’ altro l’abbonamento annuale a 199 euro! Ok , ma se fra un anno non rinnovo con Elementor cosa mi succede, mi cade il tema del sito? No, vengono solo stoppati gli aggiornamenti ma il lavoro fatto non si smaterializza. In ogni caso fra le tante leggende metropolitane che si sentono in giro su Elementor, conviene dato il costo irrisorio sperimentare direttamente dal vivo e vedere l’effetto che fa direttamente sulla propria pelle. L’unico problema riscontrato è quello di consentire a Elementor l’uso all’ interno della costruzione del sito in quanto l’anteprima viene disabilitata di default e si rende attiva grazie all’ OPZIONE di SAFE MODALITY inserita nelle voci di settaggio del menù offerto dal plug-in sulla sidebar di gestione a sx. Attivata la modalità che disattiva in background i temi di default originari, elementor lavora a pieno regime e potrà salvare le proprie pagine in attesa poi di una pubblicazione o del loro utilizzo. Ad esempio per attivare https://www.umbriaway.it/wp/map/ abbiamo semplicemente preso il link pubblicato per personalizzarlo all’ interno di ASPETTO -> MENU e renderlo visibile nell’ header, ma volendo si può anche lavorare direttamente con i template all’ interno delle pagine o dei post!

Conclusioni

In conclusione per rispondere alla domanda iniziale, possiamo dire che Elementor è una sorta di OSSIMORO perchè anche se NON PAGA in termini di costi, di fatto PAGA per il rendimento e la semplicità di uso che ci fa raggiungere risultati importanti e significativi in poco tempo.

L’illuminazione sulla via di Damasco con WP? Si diventa “santi” nella formazione quando si incontrano le media queries!

un piccolo passo per un potenziale sviluppatore ma grande per l’umanità, signori ecco a voi le media queries!

Quando si studia WP si tocca il nirvana o l’illuminazione sulla via di Damasco quando si inizia a capire che le pagine si possono personalizzare e questo avviene grazie alle custom queries! All’ indirizzo https://www.umbriaway.it/wp/chess/ ne vediamo un esempio ma ancora quello che non è charissimo è che tutte le pagine di assemblaggio si possono variare per struttura, forme e colori! Quindi l’0ideale è sperimentare sperimentare sperimentare. Ad esempio si potrebbero implementare custom post type sui LIBRI in modo da modellare altre query tematiche. Prima però bisogna costruirlo il custom post type e il codice da aggiunegre alla funzione che fa da motore sarà:

//contenuti personalizzati libro
function book_custom_post() {
    // creo e registro il custom post type
    register_post_type( 'book', /* nome del custom post type */
        // definisco le varie etichette da mostrare nei menù
        array('labels' => array(
            'name' => 'book', /* nome, al plurale, dell'etichetta del post type. */
            'singular_name' => 'book', /* nome, al singolare, dell'etichetta del post type. */
            'all_items' => 'books', /* testo nei menu che indica tutti i contenuti del post type */
            'add_new' => 'Aggiungi libro', /*testo del pulsante Aggiungi. */
            'add_new_item' => 'Aggiungi nuovo libro', /* testo per il pulsante Aggiungi nuovo post type */
            'edit_item' => 'Modifica libro', /*  testo modifica */
            'new_item' => 'Nuovo libro', /* testo nuovo oggetto */
            'view_item' => 'Visualizza libro', /* testo per visualizzare */
            'search_items' => 'Cerca libro', /* testo per la ricerca*/
            'not_found' =>  'Nessun libro trovato', /* testo se non trova nulla */
            'not_found_in_trash' => 'Nessun libro trovato nel cestino', /* testo se non trova nulla nel cestino */
            'parent_item_colon' => ''
            ), /* fine dell'array delle etichette del menu */
            'description' => 'Raccolta di libri del portale', /* descrizione del post type */
            'public' => true, /* definisce se il post type sia visibile sia da front-end che da back-end */
            'publicly_queryable' => true, /* definisce se possono essere fatte query da front-end */
            'exclude_from_search' => false, /* esclude (false) il post type dai risultati di ricerca */
            'show_ui' => true, /* definisce se deve essere visualizzata l'interfaccia di default nel pannello di amministrazione */
            'query_var' => true,
            'menu_position' => 8, /* definisce l'ordine in cui comparire nel menù di amministrazione a sinistra */
            /*'menu_icon' => get_stylesheet_directory_uri() . '/img/mia-icona.png',  imposta l'icona da usare nel menù per il posty type */
            'menu_icon' => 'dashicons-book-alt', /*nuova icona */
            'rewrite'   => array( 'slug' => 'libro', 'with_front' => false ), /* specificare uno slug per leURL */
            'has_archive' => true, /* definisci se abilitare la generazione di un archivio (tipo archive-cd.php) */
            'capability_type' => 'post', /* definisci se si comporterà come un post o come una pagina */
            'hierarchical' => false, /* definisci se potranno essere definiti elementi padri di altri */
            /* la riga successiva definisce quali elementi verranno visualizzati nella schermata di creazione del post */
            'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'sticky')
        ) /* fine delle opzioni */
    ); /* fine della registrazione */

}

// Inizializzo la funzione
add_action( 'init', 'book_custom_post');

A questo punto però quando apriamo il post dobbiamo avere sulla destra delle finestre come categorie e tags se non ci sono dobbiamo aggiungerle manualmente sempre da function.php, per la categoria:

//* Add categories support for CPT
add_action( 'init', 'category_book' );
function category_book() {
register_taxonomy_for_object_type( 'category', 'book' );
}

e per i tags:

//* Add tags support for CPT
add_action('init', 'reg_tag');
function reg_tag() {
register_taxonomy_for_object_type('post_tag', 'book');
}

Perfetto a questo punto non ci resta che creare i contenuti e delle categorie e anche delle parole chiave per operare successive selezioni di contenuto (tags), ma dobbiamo tenere conto che nel nostro menù va aggiunta una voce LIBRI che si prenderà in carico di customizzare le nostre query sulla base di criteri scelti da noi, che so, tipo “tira fuori tutti i libri di fantascienza che hanno elementi fantasy“, oppure estrapola libri con contenuto storico intendendo la categoria ma anche il tag storia locale.

La creazione della pagina base utilizzando il template con nome page-slug

Ora dal punto di vista pratico si va su creazione nuova pagina, la si intitola LIBRI e la si salva solo dopo averle assegnato un template in basso a destra sulle impostazioni di pagina, finestra che si può attivare da impostazioni in alto a destra. Salvata la pagina automaticamente abbiamo un nuovo link aggiunto sul menù principale che linkerà tutti i nostri libri modellati con la nostra query!

Gestire l’estrapolazione dei contenuti con la funzione wp_trim_words di WordPress

gestire l’estrazione dei contenuti con wp_trim_words

Il modo migliore di imparare wordpress è quello di avere delle aree di allenamento nel mondo reale dove fare training quotidiano per sperimentare delle soluzioni nuove. La mia è https://www.umbriaway.it/wp/ e qui nella index c’era da formare in tre colonne bootstrap la pagina, dove ogni recordset generato dal ciclo while viene gestito e modellato stampando a video funzioni specifiche. Per esempio per estrarre una porzione di contenuti e gestire la lunghezza del campo da estrapolare wordpress mette a disposizione la seguente comoda funzione:

<?php echo wp_trim_words(get_the_content(), 7); ?>

il numero sette fa riferimento alle parole da tirar fuori dal campo contenuto e nel nostro caso 7 era l’ideale per avere un allineamento degli ITEM su tutte le colonne che non a caso sono contrassegnate nella classe da un COL 4, ossia le dodici colonne del cento per cento della pagina bootstrap vengono divise per 4, generando appunto tre colonne di elementi che ruotano.

Conclusioni

la funzione è molto utile e ci consente di gestire comodamente i nostri contenuti durante la fase di stampa a video, per approfondimenti sulla teoria andare su https://developer.wordpress.org/reference/functions/wp_trim_words/

WordPress e l’ottimizzazione del codice: gestire le inclusioni con la funzione get_template_part()

Semplificare la gestione del codice si può!

All’ inidirizzo https://developer.wordpress.org/reference/functions/get_template_part/ abbiamo una funzione che ci aiuta a semplificare la gestione del codice come sviluppatori wordpress. Ora siccome ci piace come filosofia accompagnare la teoria alla pratica e la formazione alla costruzione di oggetti reali che servono anche nel quotidiano, se andiamo all’ indirizzo https://www.umbriaway.it/wp/ vediamo nello slider in alto il principio espresso in pratica della funzione get_template_part. Lo slider funziona perchè nel file function.php ci sono i link alle risorse esterne, tra cui anche il framework bootstrap e il codice dello slider con le classi specifiche è stato preso, tagliato dalla index e inserito in un file a parte inserito nella cartella includes e successivamente richiamato nella posizione specifica dove abbiamo tagliato il codice con l’istruzione:

<?php get_template_part ('nomefilesenzaestensione','home'); ?>

Il primo parametro identifica la location di codice da prelevare (il dove) mentre il secondo parametro garantisce che il recupero avvenga direttamente nella pagina interessata, cioé la home page (index.php)

Conclusioni

Alla fine cosa abbiamo ottenuto con questa operazione? Una migliore gestione del codice, in quanto sappiamo che per gestire lo slider adesso abbiamo un file dedicato completamente all’ oggetto corrispondente!

Non importa che tu sia di destra o di sinistra o se tifi Juve piuttosto che la Buglianese e neanche se vai in giro con la pistola o con il fucile dopo esserti adattato al mondo moderno con la visione dei film di Sergio Leone: wordpress comunque ti vuole conoscere, fatti taggare!

Premesso che siamo di fronte all’ ennesima tecnologia democratica che si concede a tutti indipendentemente dalla fede politica, sportiva o religiosa è impossibile oggi come oggi sottrarsi al “taggamento”. Una parolaccia, italianizzazione del verbo inglese to tag, che significa “etichettare”. Gli vogliamo dare forma a questi contenuti? Ma ci sono le categorie, che mi importa di taggare? Può far comodo estrapolare dei contenuti per parola chiave indipendentemente dalla categoria, per cui molto utile all’ interno del mondo wordpress la funzione the_tags(); che restituisce un array di oggetti, un oggetto per ogni tag assegnato al post. Se questa funzione viene utilizzata nrl loop, non è necessario passare alcun ID. La sintassi base prevede anche l’uso di importanti parametri per modellare l’output:

the_tags( string $before = null, string $sep = ', ', string $after = '' )

Per approfondire la teoria:

https://developer.wordpress.org/reference/functions/the_tags/

La teoria

<?php the_tags(); ?>
esempio base nell’ uso della funzione the_tags();

Opzioni di visualizzazione, base:

<?php the_tags( 'Tags: ', ', ', '<br />' ); ?>
default

Separare con >

<?php the_tags( 'Social tagging: ',' > ' ); ?>
separato da >

Separare con il pallino

<?php the_tags( 'Tagged with: ', ' • ', '<br />' ); ?>
separare i tags con il pallino

Visualizzare i tags con liste vertticali

<?php the_tags( '<ul><li>', '</li><li>', '</li></ul>' ); ?>
liste

Come integrare elementi BOOTSTRAP nel nostro tema minimalista CAPABLANCA in WordPress!

come integrare elementi bootstrap in WP

Continuano i nostri esperimenti didattici all’ indirizzo: https://www.umbriaway.it/wp/ sul tema minimalista Capablanca che stiamo tirando su con un approccio BOTTOM-UP. Questa volta approfondiamo l’integrazione a BOOTSTRAP senza l’uso di plug-in con il metodo naturale! Parliamo quindi di ENQUEUE, una parolaccia molto brutta che ci aiuterà a inserire elementi del framework BOOTSTRAP nella pagina. Accodare in inglese si dice enquee e quindi se nel file function.php dovessimo aggiungere una funzione come:

function uwc_files(){
wp_enqueue_style('google_font' ,  '//fonts.googleapis.com/css?family=Montserrat:400,700');
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('bootcss', '//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css');
wp_enqueue_script('bootjs','//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js');
wp_enqueue_style('uwc_style' , get_stylesheet_uri(), NULL , microtime());
}
add_action('wp_enqueue_scripts' , 'uwc_files');

che cosa andremmo ad ottenere?

Prima soffermiamoci un attimo sull’ istruzione add_action, in quanto nella metafora della fabbrica che sempre portiamo avanti per capire l’universo WordPress(WP) questa azione rappresenta un famoso HOOK, ossia il gancio che sopra le catene di montaggio transita per spostare elementi da assemblare e completare le lavorazioni. A questo punto urge spiegare la stringa:

wp_enqueue_style('uwc_style' , get_stylesheet_uri(), NULL , microtime());

Hai presente quando fai delle modifiche ai CSS e andando sulla pagina non le vedi? E perchè ci sono delle dipendenze con la cache che vanno annullate e il codice di cui sopra con NULL e MICROTIME consente una piena autonomia nella visualizzazione senza inutili sclerate sul perchè non vedo quando invecxe dovrei vedere. Che accade, non va il CSS? Andando su ISPEZIONA e apro il documento alla voce che ci interessa mi accorgo che non vi è un ricarico ex-novo del documento (indagando sulla cache NETWORK) perchè si vede che il file CSS viene espressamente preso dalla cache con tanto di dicitura. Con la stringa di cui sopra evito questo processo in automatico. il NULL significa non devi dipendere da nulla e il MICROTIME che è una funzione di PHP che azzera la cache caricando in millesecondi. Devo quindi lavorare in tempo reale e inserendo lo script ottengo lo scopo. Adesso possiamo proseguire:

Supponiamo che vada ad aggiungere il seguente codice nel template della pagina (attenzione non del post!) che è page.php:

   <!-- Marketing messaging and featurettes
      ================================================== -->
      <!-- Wrap the rest of the page in another container to center all the content. -->

      <div class="container marketing">

        <!-- Three columns of text below the carousel -->
        <div class="row">
          <div class="col-lg-4">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Heading</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->

Salviamo e vediamo l’effetto che fa.

seo umbria
wow!

Se vedo tutto corretamente significa una cosa sola, che i miei collegamenti a bootstrap sono stati configurati correttamente essendo abituati alla programmazione tradizionale dove tutti i link, script e css vengono inseriti o al fondo del body per consentire prima l’intero caricamento della pagina o all’ interno della sezione HEAD, qui non subito ci si focalizza sul function.php che invece è il cervello che comanda! WP è una azienda con direttive tutte sue particolari che bisogna conoscere e certo che se dovessimo confrontare tecnologie diverse come ad esempio CODEIGNITER MVC con questo modo di lavorare su WP troveremo un solo comune denominatore che lega il tutto: PHP che impone la sua sintassi all’ interno di ogni diverso CMS in quanto istruzioni condizionali, array e cicli while sono universali.

Finchè il Custom Post Type va lascialo andare: come Orietta ti risolve una situazione critica

Custom Post Type, tipi di post personalizzati

Classificare i propri CD con WP? Si può fare

L’ideale sarebbe studiare i tipi di post personalizzato in wordpress e dopo 24 ore -magari passando dal Santuario della Salette che è qua vicino-, ti svegli il mattino dopo sapendo già tutto, strano perchè nei film di Star Trek questo succede regolarmente solo indossando un paio di strane cuffie per cinque minuti. Ma nella realtà è diverso e ci si scontra con delle situazioni di gioco dove magari un tutorial che trovi in rete nel tuo caso non va bene perchè non hai la possibilità di gestire all’ interno del tuo tema artigianale che stai tirando su in modalità bottom-up l’opzione CHILD per esempio e allora se qualcuno non ti dice come funziona la gerarchia dei file wordpress per visualizzare le informazioni, tu non puoi andare avanti, per esempio. Quindi devi fare quella che in PNL chiamano RICALCO: devi andare sul sito ufficiale di wordpress per capirci qualcosa, oppure devi passare per delle piattaforme di e-learning come Udemy per esempio dove ci sono degli ottemi corsi o ancora devi tirare la coperta un pò a destra o a sinistra provando e riprovando cercando le informazioni dove capita, in ogni caso il tempo passa e per tua fortuna puoi compilare il tuo bugiardino a fine serata soddisfatto perchè le tue activity le stai portando avanti. Vediamo nel dettaglio che cosa è stato fatto per far funzionare il tutto. Ho recuperato in rete lo script su CD offerto dal bravo webmaster che ha condiviso l’informazione, link: https://alessioangeloro.it/, quindi ho creato seguendo le modalità indicate lo script all’ interno del function.php per mettere in piedi una sezione specifica di articoli dedicati alla musica, Ricordiamo che i tipi di post possono essere prevalentemente di due tipi più diffusi (sono molti di più) che sono equiparabili a PAGE e POST, nel nostro caso lavoriamo sui POST:

function cd_custom_post() {
    // creo e registro il custom post type
    register_post_type( 'cd', /* nome del custom post type */
        // definisco le varie etichette da mostrare nei menù
        array('labels' => array(
            'name' => 'CD', /* nome, al plurale, dell'etichetta del post type. */
            'singular_name' => 'CD', /* nome, al singolare, dell'etichetta del post type. */
            'all_items' => 'Tutti i CD', /* testo nei menu che indica tutti i contenuti del post type */
            'add_new' => 'Aggiungi nuovo', /*testo del pulsante Aggiungi. */
            'add_new_item' => 'Aggiungi nuovo cd', /* testo per il pulsante Aggiungi nuovo post type */
            'edit_item' => 'Modifica CD', /*  testo modifica */
            'new_item' => 'Nuovo CD', /* testo nuovo oggetto */
            'view_item' => 'Visualizza CD', /* testo per visualizzare */
            'search_items' => 'Cerca CD', /* testo per la ricerca*/
            'not_found' =>  'Nessun CD trovato', /* testo se non trova nulla */
            'not_found_in_trash' => 'Nessun CD trovato nel cestino', /* testo se non trova nulla nel cestino */
            'parent_item_colon' => ''
            ), /* fine dell'array delle etichette del menu */
            'description' => 'Raccolta di CD del portale', /* descrizione del post type */
            'public' => true, /* definisce se il post type sia visibile sia da front-end che da back-end */
            'publicly_queryable' => true, /* definisce se possono essere fatte query da front-end */
            'exclude_from_search' => false, /* esclude (false) il post type dai risultati di ricerca */
            'show_ui' => true, /* definisce se deve essere visualizzata l'interfaccia di default nel pannello di amministrazione */
            'query_var' => true,
            'menu_position' => 8, /* definisce l'ordine in cui comparire nel menù di amministrazione a sinistra */
            /*'menu_icon' => get_stylesheet_directory_uri() . '/img/mia-icona.png',  imposta l'icona da usare nel menù per il posty type */
			      'menu_icon' => 'dashicons-download', /*nuova icona */
            'rewrite'   => array( 'slug' => 'cd', 'with_front' => false ), /* specificare uno slug per leURL */
            'has_archive' => true, /* definisci se abilitare la generazione di un archivio (tipo archive-cd.php) */
            'capability_type' => 'post', /* definisci se si comporterà come un post o come una pagina */
            'hierarchical' => false, /* definisci se potranno essere definiti elementi padri di altri */
            /* la riga successiva definisce quali elementi verranno visualizzati nella schermata di creazione del post */
            'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'sticky')
        ) /* fine delle opzioni */
    ); /* fine della registrazione */

}

// Inizializzo la funzione
add_action( 'init', 'cd_custom_post');

Se aprissi ora la sezione CD per compilare un post sarei senza il riquadro categorie sulla destra quindi aggiungo anche:

//* Add categories support for CPT
add_action( 'init', 'category_cd' );
function category_cd() {
register_taxonomy_for_object_type( 'category', 'cd' );
}

Bravo! Fine lavori! MADDECHE?!

A questo punto ho finito? Macchè i consigli riportati sopra valgono per chi ha la possibilità di gestire i TEMI CHILD e non è il nostro caso, da questo momento dobbiamo arrampicarci sugli specchi da soli, per fortuna, anche perchè l’esercizio a questo punto diventa qualcosa di totalmente autonomo rispetto allo script originale. Quindi cosa dovremmo sapere per far funzionare il tutto?

Conoscere la gerarchia di file

Se stai lavorando su un tipo di post di tipo blog, quindi POST, hai due punti di riferimento sui file base di un tema e cioé single.php e archive.php che gestiscono rispettivamente il singolo post e la lista dei post. Quindi abbiamo bisogno di questi due template per gestire la nuova sezione di post appena creati con la dicitura CD, file che diventeranno rispettivamente single-cd.php e archive-cd.php secondo la convenzione degli SLUG

Linkare la pagina con la lista sul menù

A questo punto tramite l’opzione LINK PERSONALIZZATO , passando dalla BACHECA e dalle voci di menù ASPETTO e MENU dobbiamo dire che la pagina degli archivi personalizzata sarà il luogo del delitto per andare a consultare la nostra sezione , come mostrano le immagini messe in evidenza in questo post e da qui si potrà a scelta esplodere il singolo articolo!

conoscere i CPT? Missione compiuta (o quasi)

Conclusioni

Si noti che rispetto all’ approccio “grafico”, indirizzo https://umbriawaytarget.wordpress.com/2021/02/11/non-sai-niente-di-custom-post-type-ma-vuoi-combattere-il-crimine-e-lotti-per-una-giustizia-che-sia-giusta-e-uguale-per-tutti-allora-hai-bisogno-del-plug-in-custom-post-type-ui-per-wordpress-anche-se/ dove si usa un plu-in specifico e si esporta successivamente il codice, all’ indirizzo https://www.umbriaway.it/wp/genere/explore/ non esiste all’ interno dell’ applicazione un file di archivio di supporto e allora la domanda è, come fa WP a tirare fuori una pagina dal nulla? Perchè lavora per gerarchie e se non trova quello che gli serve risale fino al TEMPLATE che risolve il suo problema specifico in quel momento, in questo caso la pagina potrebbe essere quella salvagente che entra in gioco all’ ultimo stadio della ricerca, la index.php; la questione relativamente ai CPT è molto complessa perchè entrano in gioco tante opzioni e personalizzazioni e senza toccare con mano quello che fanno le varie voci coinvolte difficilmente si può avere un quadro generale su questo argomento.

Non sai niente di Custom Post Type ma vuoi combattere il crimine e lotti per una giustizia che sia giusta e uguale per tutti? Allora hai bisogno del plug-in Custom Post Type UI per WordPress, anche se qualche insidia ti aspetta dietro l’angolo!

Premessa

All’ indirizzo https://www.umbriaway.it/wp/genere/explore/ mi ritrovo una struttura di post atipica, personalizzata sulle esigenze del webmaster. Come è stato possibile personalizzare questi contenuti? Esistono diversi approcci e quello preso in esame qui, non è certo il migliore dal punto di vista didattico, anzi…

La tassonomia, analisi di una esigenza

Per classificare delle categorie ho bisogno di una tassonomia. Tipo che se analizzo dei film scrivendo delle recensioni con la tassonomia GENERE posso specificare a quale categoria appartiene, se horror, drammatico, thriller etc. La forza di WordPress sta proprio in questo tipo di esigenza, non a caso si parla di CPT, CUSTOM-POST-TYPE , tipo di post personalizzato. Prendiamo il caso di un glossario tipo questo costruito manualmente http://umbriawayformazione.altervista.org/ci_project_seicento/index.php/seicento/item ma quando mai possiamo fare una cosa così differenziando il tutto dal gregge in WP? Essendo una applicazione a se stante, non è una buona regola mescolare vari moduli e progetti dentro lo stesso minestrone proposto di default da WP visto che potrei comunque creare categoria lettera A e così via fino alla Z, inserendo il tutto con il materiale preesistente che racchiude già una mole enorme di informazioni.

Come risolvere?

Ci sono diversi approcci per risolvere il problema, quello più semplice per chi non è un wordpress developer e non scrive codice direttamente nel file functions.php è quello di affidarsi nella fase iniziale a un plug-in, in questo post analizzeremo l’uso per NEWBIE di https://it.wordpress.org/plugins/custom-post-type-ui/ , quindi accingiamo a installarlo nella nostra interfaccia tenendo presente però che abbiamo l’ esigenza di risolvere un problema reale

Analisi del problema

All’ indirizzo http://umbriawayformazione.altervista.org/uwcode/comparazioni.html mi ritrovo con una situazione dove non riesco ad etichettare le caratteristiche psicologiche dei vari investigatori, per cui non so come classificarli e in quale recinto di categoria rinchiuderli.

La soluzione

Applichremo quindi il plug-in Custom Post Type UI per la semplice ragione che un primo approccio visivo, senza conoscere il codice dall’ interno, può aiutarci a mettere in piedi tutta la struttura in modo facile, intuitivo e veloce (e anche senza capire bene quello che stiamo facendo!). Non è l’approccio didattico migliore per un developer wordpress, ma c’è anche la lieta novella: infatti anche disattivando il plug-in e quindi rendendo inutile tutta l’impalcatura di dati perché non sarebbe visibile, dalla voce impostazioni abbiamo modo di copiare direttamente il codice per inserirlo nel file functions.php e quindi di fatto lasciando inalterate tutte le funzionalità del nuovo CPT anche eliminando il plug-in, perchè sappiamo che i plug-in assorbono memoria e richiedono un dispendio di risorse. Ovviamente c’è anche un aspetto negativo in questo approccio ed è quello che se il tema circola, il nuovo utente potrebbe avere a disposizione delle funzionalità che non ha richiesto, quindi meglio lavorare sul function.php da proprietari.

Pronti via!

Dopo aver scaricato il plug-in e averlo attivato ecco la prima cosa da fare, scegliere il nome del CPT, nel nostro caso rapportandoci al documento http://umbriawayformazione.altervista.org/uwcode/comparazioni.html ci teniamo sul vago, sia che si parli di film, serie tv o di libri e ci limitiamo a combattere il male e la criminalità in generale con la voce:

fightcrime

L’operazione di aggiungere e salvare i contenuti creati è abbastanza semplice come testimoniano le due immagini a corredo:

il procedimento sembra facile e intuitivo

ma quello che più conta è che ora abbiamo a disposizione sulla sinistra una voce completamente nuova, fightcrime!

Le impostazioni

A questo punto dobbiamo gettare un occhio in basso su impostazioni dove ci sono tutta una serie di parametri che ci consentono di decidere cosa, dove e quando visualizzare per esempio (con public impostato a TRUE va da se che tutti possono vedere il materiale pubblicato) , posso disabilitare la ricerca sugli articoli, posso impostare delle dipendenze padre-figlio e fare tante altre cose. la cosa migliore visto che in un secondo approccio più complesso dovremmo comunque mettere le mani sul codice e andare sul codex e cercare di approfondire, indirizzo https://developer.wordpress.org/reference/functions/register_post_type/, le voci che si leggono in parametri sono uguali per corrispondenza a quelle visive viste nel plug-in; questi parametri servono a influenzare il comportamento del nostro nuovo CPT appena creato e possiamo quindi decidere le modalità di fruizione per noi e per gli utenti. Quali opzioni posso includere nei miei nuovi post?
Sempre dall’ interno del menù proposto possiamo andare a settare quello che ci interessa includere/escludere come si evince in figura:

Hai la bicicletta? Pedala!

Andiamo su http://umbriawayformazione.altervista.org/uwcode/comparazioni.html e copiamoci i contenuti in vari post, processo lungo e macchinoso ma indispensabile….ma cosa succede dopo aver creato il primo nostro post esclusivo su Sherlock? Che non ho la categoria per assegnarlo! Scandaloso! Come si può risolvere questo problema?

Inserire le categorie

In questa tassonomia potrei avere categorie come serie tv, film, libri o contenuti generici ma come creo questa cosa visto che non vedo il widget a destra al momento della compilazione del post? Nella sezione bacheca del plug-in ci viene mostrata aggiungi tassonomia:

tassonomie, classificare per categorie

Anche qui abbiamo la possibilità di impostare gerarchie tra categorie oppure fare diverse cose, ma la cosa più importante è che adeso tornando al mio articolo vedrò il box categorie sulla destra che prima non esisteva e da qui posso gestire le mie dipendenze e le mie nuove voci da creare

Ottimo, abbiamo finito il lavoro?

Ma che, siamo solo all’ inizio e c’è ancora tempo per lo sclero (inteso in senso propositivo, come sfida)! Adesso come personalizzo le iconcine? Adesso come faccio a vedere gli articoli su pagina singola visto che manca il template? E come faccio a inserire la categoria nella pagina singola? E come faccio a fare una pagina di riassunto in cui vedo tutti i post? E come faccio a inserire in un menù? Insomma come faccio a fare su e giù e alla fine si perde la bussola! Per il template si usa la copia del file single.php e si aggiunge lo slug, in questo caso il file diventa single-fightcrime.php. Dentro non si vedeva la categoria per visualizzarla abbiamo dovuto fare delle implementazioni:

<?php get_header(); ?>
 <div class="container">
  <div class="content">
<?php  if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- Articoli -->
<article>
<h3 style="margin-top:10px"><?php the_title(); ?></h3>
<p><i>Articolo creato da <?php the_author(); ?> | <?php the_time('d F Y'); ?></i> </p>
<?php if(has_post_thumbnail()) : ?>
  <div class="img-post"><?php the_post_thumbnail()?></div>
<?php endif; ?>
<p><?php the_content(); ?></p>
</article>
<?php  endwhile; ?>
<?php else : ?>
<?php echo wpautop('ops...non ho trovato articoli!'); ?>
<?php endif; ?>
<p style="margin-top:20px;padding:10px;border: 1px solid #ff9900;">
<?php  echo get_the_term_list($post->ID, 'genere', 'Genere:',',');?></p>
<?php the_meta(); ?>
<!--chiudo il div content -->	  
 </div>
<?php  get_sidebar(); ?>
<!--chiudo il div container -->	 
</div>
<?php get_footer(); ?>
</body>
</html>

in particolare si noterà che abbiamo dovuto aggiungere:

<p style="margin-top:20px;padding:10px;border: 1px solid #ff9900;">
<?php  echo get_the_term_list($post->ID, 'genere', 'Genere:',',');?></p>

Per personalizzare le icone si va su: https://developer.wordpress.org/resource/dashicons/#editor-textcolor e si prende la classe di interesse. A questo punto si va sulla sezione MENU dal pannello di controllo e si inserisce con un link personalizzato l’URL del link, nel nostro caso non essendo riusciti a risolverla con un clone di una index e tantomeno con un ciclo while inserito in una base di appoggio fightcrime.php ci siamo appoggiati alla CATEGORIA GENERICA per linkare tutti gli elementi, in modo da simulare lo stesso funzionamento: https://www.umbriaway.it/wp/genere/explore/ che non è certo una soluzione professionale. Questo dopo aver copiato il codice offerto dal plug-in e averlo copiato nel file functions.php che come sappiamo sovraintende a tutti i meccanismi vitali, dopodichè abbiamo eliminato il plug-in per disimpegnare risorse. Il risultato finale è che tutto funziona anche se tutto l’accrocchio non dovrebbe appoggiarsi alla pagina di categoria che filtra i dati per una categoria generica dove tutti i post sono linkati.

Conclusioni

Siamo solo all’ inizio e sui CPT c’è ancora molto da lavorare, soprattutto adesso serve un approccio bottom-up perchè questo del plug-in è decisamente una forzatura top-down. Quindi la voragine è appena aperta e lascerà fuoriuscire altri approfondimenti sui custom post type!

WordPress e i CUSTOM FIELDS al TOP

custom fields wow

Il risultato

All’ indirizzo https://www.umbriaway.it/wp/ abbiamo completato l’opera sui campi personalizzati, proseguendo il lavoro iniziale fatto su https://umbriawaytarget.wordpress.com/2021/02/09/come-creare-in-wordpress-un-modello-universale-in-poche-mosse-con-i-custom-fields-senza-ricorrere-a-plug-in-esterni/ ; dei primi 4 articoli presente si noterà che il primo al fondo dell’ articolo singolo non presenta spazi pubblicitari, il secondo presenta un box di 468 x 60 di colore rosso-arancio, il terzo presenta la stessa cornice ma con colori diversi blu-cyan e il quarto, quello più recente ospita direttamente un banner.

Quale funzione di WP fa il lavoro sporco?

Come è potuto succedere tutto ciò? Con la magia della funzione:

<?php the_meta(); ?>

inserita nella single.php che è responsabile di mostrare tutto il contenuto dell’ articolo (ricordiamoci che nellametafora della factory, ogni elemento meccanico sulla linea di montaggio ha la sua precisa funzione, quella e non altre!) . Naturalmente inserirò lo spot pubblicitario dove voglio vederlo all’ interno della pagina, nel nostro caso in fondo. Abbiamo anche detto che ci sono numerosi plug-in che fanno queste operazioni, quindi perchè inventare l’acqua calda? Il problema è che noi vogliamo progredire nelle nostre conoscenze sul versante wordpress developer e certamente colmare la lacuna dei CUSTOM FIELDS o dei CAMPI PERSONALIZZATI nativamente, con gli strumenti che ci mette a disposizione di default wordpress stesso, è un grande vantaggio in termini professionali!

personalizzare i div a proprio piacimento

La tecnica

Da questo esempio se ne deduce che ogni riquadro che ospita il campo personalizzato avrà una formattazione non solo HTML diversa, ma anche il CSS al seguito dovrà essere arricchito delle regole per modellare i campi, ciò spiega anche perchè di default non VEDO NULLA se non attivo le mie zone di interesse (con aggiungi nuovo prima e poi confermando con aggiungi campo personalizzato) all’ interno del singolo attivo

Conclusioni

Da queste breve excursus si evince che la personalizzazioni dei nostri campi all’ interno delle nostre pagine single.php ci consente di dare maggiore flessibilità ai contenuti. Infatti uno dei problemi di chi inizia a studiare WP dall’ interno è quello di considerare la scatola come qualcosa di rigido che non consente di modellarsi a nostra immagine e somiglianza, ma di fatto abbiamo gli strumenti per operare in tal senso e bisogna solo fare lo sforzo di andare a conoscerli!

Andare oltre

Per spingersi là dove mai nessuno è andato prima occorrerebbe andare a modellare anche le classi offerte dal sistema stesso, che si possono estrapolare da ispeziona documento messo a disposizione con il tasto destro su ogni browser, ma al momento per noi non è necessario arrivare alla perfezione, il nostro obiettivo come web design umbria è quello di avere una visione d’insieme su tutte le dinamiche della fabbrica, senza diventare massimi esperti mondiali di custom fields!

Come creare in WordPress un modello universale in poche mosse con i CUSTOM FIELDS senza ricorrere a PLUG-IN esterni

campi personalizzati

Che cosa sono i campi personalizzati? Quanti scrivendo un articolo sul vecchio editor si sono accorti che esiste una linguetta/TAB in alto a DX che recita IMPOSTAZIONI SCHERMATA? Se clicchiamo là sopra salta fuori anche un misterioso FLAG sui CAMPI PERSONALIZZATI! A questo punto fleggando come per magia sotto l’articolo, in fondo, comparirà la finestra di gestione dei campi personalizzati. Facciamo un AGGIUNGI, inseriamo il nome e confermiamo con il pulsante AGGIUNGI NUOVO CAMPO PERSONALIZZATO, nel nostro caso si vuole fare un BANNER a questa NEW AGENCY che sta crescendo che è FWD. Ok ma se vedo l’articolo adesso che vedo?

settare i campi personalizzati

Un bel nulla perché il campo personalizzato va inserito nella pagina e siccome siamo nell’ area blog e sappiamo che WP lavora in un certo modo per fare su e giù tra le linee di montaggio, a fianco delle catene a rulli scorrevoli, che approvvigionano le risorse per l’assemblaggio, la pagina responsabile dell’ AGGANCIO sarà la SINGLE.PHP; quindi rechiamoci da ASPETTO sull’ EDITOR del tema e andiamo a INSERIRE il punto preciso in cui desideriamo avere questo oggetto all’ interno di un articolo. Quale è la funzione che ufficializza così tutto il nostro lavoro?

<?php the_meta(); ?>
il primo custom field, ancora grezzo nella sostanza

A questo punto visualizziamo il sito e rendiamoci conto di cosa abbiamo fatto fino a questo momento. Prima lo abbiamo spostato sopra la sidebar di dx e non ci piaceva, poi lo abbiamo sistemato sotto i commenti così tanto per provare. Se andiamo a vedere ora il risultato dell’ articolo personalizzato ci accorgiamo che ora c’è acqua sotto i ponti e la domanda che sorge è:

ma adesso avendo modificato il template single.php valido per tutte le pagine sono andato a inserire questo campo in tutti i post?

Basta cliccare sugli altri post per accorgersi che di fatto questo problema non esiste, in quanto il campo personalizzato si chiama personalizzato proprio perchè inserisce il modello ma accetta le singoli personalizzazioni ovunque previa attivazione! Andiamo avanti. Ora vogliamo trasformare questo campo in un BOX che ospiterà una nostra pubblicità sottoforma di banner come fare?

A questo punto il gioco si fa divertente perchè posso anche usare le classi di bootstrap per avvolgere la funzione di richiamo dei miei campi personalizzati nel file single.php, magari inserendo uno sfondo verde Umbria:

<div class="bg-success">
<?php the_meta(); ?>
</div>
il nostro campo personalizzato inizia la sua evoluzione

bene allora aggiungiamo qualcosa al DIV , un padding e anche una classe da stilizzare (che ho chiamato customfwd) nel mio file di sovrascrittura style.css. I famosi P o M vanno da 1 a 5 e sono al contrario per dimensioni alle intestazioni HTML ossia il valore più basso 1 corrisponde con la dimensione minore e 5 dà la massima estensione, quindi la single.php diventa:

<div class="bg-success p-4 customfwd">
<?php the_meta(); ?>
</div>

e il CSS:

.customfwd {
width:90%;
margin:20px auto;
box-shadow: 8px 5px 50px rgba(0,0,240,0.5)
}
evoluzioni ulteriori del campo personalizzato

questo per quanto riguarda la personalizzazione generale valida per tutti i campi personalizzati. Tra l’altro ci sarebbero da stilizzare anche le classi interne di WP recuperabili dallo strumento ISPEZIONA messo a disposizione per gli sviluppatori dal BROWSER. Ma siamo sempre nel campo del GENERALE, ossia un modello VALIDO PER TUTTI. Ma ora potremmo inserire una immagine nello spazio creato , oppure stilizzare qualcosa altro dentro il campo dove abbiamo scritto il testo BannerFWD: “ottimo, hai creato il tuo primo spazio personalizzato” che ovviamente si può togliere, modellare a nostro gradimento giocando con le proprietà dei selettori.

Crea un sito o un blog gratuito su WordPress.com.

Su ↑