Stai visitando l'archivio per Videotutorial.

da cate

Banner in header

10 Febbraio 2019 in Videotutorial, Wordpress

Vediamo come inserire un logo/banner sulla destra dell’header customizzabile.

Ricreiamo una situazione analoga a quella esistente del tema pasw2015 di Marco Milesi con personalizzazione del customizer e l’aggiunta di una nuova sezione con i vari settaggi.
Andremo a modificare i file caricati nel tema-child e precisamente

  1. nel header.php  esattamente inseriremo nel <div id=”header-interno”> una nuova classe che chiameremo, per differenziarla dal logo del sito, <div id=”headerbanner”>
  2. modifica del file function.php con registrazione della funzione e i vari settaggi
  3. inserimento della proprietà CSS in “CSS aggiuntivo” di WordPress

Vediamo nel dettaglio

Per prima cosa scarichiamo in locale il file header.php e inseriamo lo snippet necessario per richiamare l’immagine (in questo caso il logo-repubblica) e  il template tag per i percorsi

Trascrivo di seguito lo snippet aggiunto, troverente comunque a fondo articolo il link per il download dei file modificati

<div id=”header-interno”>

<a href=”<?php bloginfo(‘url’); ?>”><img style=”max-height:160px;” src=”<?php echo get_option(‘pasw_logo’); ?>” alt=”” class=”logo”/></a>
/*(da qui il codice aggiunto, ho trascritto il div già esistente per individuare con più esattezza dove inserire la modifica)*/
<div id=”headerbanner”>
<?php if(get_theme_mod(‘pasw2015_banner_image’, ”)!= ”){?>

<a href=”<?php bloginfo(‘url’); ?>”><img style=”max-height:100px;” src=”<?php echo get_theme_mod(‘pasw2015_banner_image’, ”); ?>” alt=”<?php echo get_theme_mod(‘pasw2015_banner_alt_text’, ”); ?>”>

<?php } else {?>

<a href=”<?php bloginfo(‘url’); ?>”><img style=”max-height:110px;” src=”<?php echo get_template_directory_uri(); ?>/images/repubblica-italiana.png” alt=”banner sito”>

<?php } ?>
</a>

</div>

*****************************************************************
Ho impostato come altezza massima (max-height) dell’img 110px (lo screenshot riporta 100px sono prove  testate  su header di diverse dimensioni)

Andiamo ad uploadare il nostro file modificato nel tema-child (per chi non avesse un child può sovrascrivere i file del tema, ma avendo cura di fare  un backup preventivo e tenendo presente che le modifiche andranno perse con un eventuale aggiornamento)

A questo punto avremo una situazione più o meno così, il logo-repubblica  al centro e titolo del sito che sfasa
header-senza-css

Andiamo a sistemare il css:
bacheca>aspetto>personalizza>css aggiuntivo

avendo creato una nuova classe la regola sarà:
#headerbanner{
float: right;
margin-left: 5px;
}

se volessimo aumentare o centrare verticalmente possiamo aggiungere un margin-top (dipende anche dal height dell’header):

#headerbanner{
float: right;
margin-left: 5px;
margin-top: 6px;
}

img-css-aggiuntivo

questo il risultato
header-banner-ok

Procediamo a customizzare

Per avere una panoramica su tutte le funzionalità del customizer di WordPress basta accedere a questo link

Vediamo come utilizzarle nel nostro caso

Apriamo in locale il file function.php già presente nel tema child ed inseriamo la registrazione della funzione con all’interno delle graffe tutti settaggi e la legheremo ad una action (da notare che il file function.php del tuo child si presenta solo con la funzione che indica a WordPress quale stili caricare del tema genitore)

/* Add customizer settings
——————————————————– */

function pasw2015_customize_register($wp_customize){

$wp_customize->add_section(‘pasw2015_banner’, array(
‘title’ => __(‘Banner’, ‘pasw2015’),
‘description’ => __(‘All the info about the banner’, ‘pasw2015’),
‘priority’ => 20
)
);

/* Banner Image */
$wp_customize ->add_setting(‘pasw2015_banner_image’, array( ‘default’ => ”));
$wp_customize ->add_control( new WP_Customize_Image_Control( $wp_customize, ‘pasw2015_banner_image’, array(
‘section’ => ‘pasw2015_banner’,
‘label’ => __(‘Banner Image’, ‘pasw2015’),
‘settings’ => ‘pasw2015_banner_image’
)));

/* Banner alt text */
$wp_customize ->add_setting(‘pasw2015_banner_alt_text’, array( ‘default’ => ‘Banner right’));
$wp_customize ->add_control(‘pasw2015_banner_alt_text’, array(
‘section’ => ‘pasw2015_banner’,
‘label’ => __(‘Banner alt text’, ‘pasw2015’),
‘type’ => ‘text’
));

}

add_action(‘customize_register’, ‘pasw2015_customize_register’);

img-function

Salviamo il file e trasferiamolo via ftp nel tema-child.
Ecco che nel customizer avrai il nuovo modulo con possibilità di cambiare immagine secondo le tue esigenze.

banner-customize
La funzione ‘if’,  inserita nel file header.php, indica a WordPress che se (if) il campo è diverso da vuoto “vai a mostrare l’immagine customizzata, altrimenti (else) vai a visualizzare l’immagine impostata” (nel nostro caso logo-repubblica)

cambia-img

Il campo “alt text” permette di settare l’attributo alt:

da “ispeziona ” (browser Google Chrome) o da “analizza elemento” (browser Firefox) notiamo il settaggio corretto

alt-text

Questa la demo , da questa pagina è possibile scaricare una cartella zippata con gli snippet già “confezionati” per essere inseriti nei file.php e la propietà css per essere aggiunta al foglio di style.

Raccomandazioni

  • inserire le modifiche possibilmente nel child
  • testate prima in locale oppure su un sito di prova;
  • gli snippet condivisi sono stati salvati in .php e .css apriteli con un buon editor di testo (NotePad++)

Per qualsiasi chiarimento contattami senza problemi!

Indicazioni, suggerimenti, tutorial per la relizzazioni di codici sono a cura di
Logo-NXMARCHETTI DESIGN-Andrea Marchetti

Trasferimento sito wordpress da gov a edu

27 Gennaio 2019 in Videotutorial, Wordpress

Migrazione gov - edu

Di seguito le operazioni da effettuare per trasferire il sito costruito con wordpress da un dominio gov.it ad uno edu.it

In pratica sono le stesse operazioni che si fanno in caso di trasferimento dei contenuti da uno spazio hosting ad un altro. Ecco le operazioni da effettuare in caso di sito hostato in uno spazio Aruba. Per gli atri provider le procedure sono sostanzialmente le stesse, può essere che ci siano delle piccole differenze:

Trasferisco il database

  1. collegati a https://mysql.aruba.it con i dati del db vecchio ed esporta il db, dovrai salvare sul tuo pc un file chiamato SqlXXXXXX.sql
  2. apri il file con un editor di testo minimale (notepad, notepad++ in ambiente windows; gedit o altro in ambiente linux) e con la funzione “trova e sostituisci” cambia tutte le occorrenze tuosito.gov.it -> tuosito.edu.it. Salva nello stesso formato (sql)
    1. i più temerari che usano linux possono fare questa operazione anche da linea di comando digitando in un terminale questo comando:
      sed -i  ‘s/tuosito.gov.it/tuosito.edu.it/g’ SqlXXXXXX.sql
  3. collegati a https://mysql.aruba.it con i dati del db nuovo e importa il db: dovrai caricare il file che hai appena modificato

Trasferisco i dati

  1. con un programma come Filezilla scarica in locale tutto il contenuto dello spazio hosting (le cartelle wp-admin, wp-content, wp-includes, avcp e file relativi)
  2. modifica nel file config.php i riferimenti al db mettendo il nome, la password e l’host del nuovo
  3. sempre con Filezilla carica tutto nel nuovo spazio web
  4. incrocia le dita e vai al nuovo indirizzo www.tuosito.edu.it

Imposto un reindirizzamento da gov verso edu

Se tutto funziona correttamente devi fare in modo che chi si reca all’indirizzo gov.it venga mandato automaticamente a edu.it. Modifica il file .htaccess che si trova nella root dello spazio gov.it scrivendo queste righe:

# Redirect
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_HOST} ^tusito.gov.it [NC,OR] RewriteCond %{HTTP_HOST} ^www.tuosito.gov.it [NC] RewriteRule ^(.*)$ http://tuosito.edu.it/$1 [L,R=301,NC] </IfModule>
# END Redirect

Piccoli aggiustamenti

Nel nuovo spazio web offerto da Aruba ci sarà sicuramente php7. Se usi pasw2015 è quindi necessario sostituire il tema che stai usando con una nuova versione. Trovi le indicazioni su come procedere qui

Le stesse operazioni sono descritte in un video tutorial realizzato da Alberto Ardizzone:

Registrazione dominio_gov.it

24 Giugno 2013 in Novità, Senza categoria, Videotutorial

Come fare per richiedere la registrazione del dominio gov.it? La nostra collega Anna Rita Lauri lo ha fatto per la propria scuola, ha registrato tutti gli step ed ora li mette a disposizione per tutti coloro che devono cimentarsi nell’opera!  Grazie! Chi desidera il file pdf lo può scaricare da qui

Backwpup, elementi di configurazione

24 Febbraio 2013 in Videotutorial

BackWPup è un ottimo plugin per eseguire backup del proprio sito. Plugin molto flessibile che permette di eseguire diversi tipi backup; dal singolo database al sito intero, sia di cartelle e file sia in formato xml, comprese  directory e ottimizzazione del database; nel seguente video uno spunto delle potenzialità e delle configurazioni basilari:

Il tuo sito Pasw2013 in 19 video (continua)

16 Ottobre 2012 in PASW-2013, Videotutorial, Wordpress

Il tema Pasw2013 in 19 video: i primi due di presentazione, dal numero 3 al numero 19 video correlati alla nuova guida a Pasw2013, in uscita domani 17 ottobre. Buona visione!

Da Pasw2011 a Pasw2013

21 Agosto 2012 in Novità, PASW-2013, Videotutorial

Da Pasw2011 a Pasw2013: si può. Il tutoriale mostra i passi da seguire per ridare vita al tuo sito scolastico realizzato con Pasw2011, mostrando live le operazioni eseguite sul sito dell’IC Corniglio.
Grazie a Angelo Paganini per avere fornito le chiavi di accesso al sito della sua scuola, davvero bello e completo.

Uniche criticità:

  • se si vogliono tenere entrambi i temi (ma che senso avrebbe?) occorre ogni volta riassociare la home al template home page e le pagine con categoria al template Pagina con categoria (Pasw2011) o Pagina standard (Pasw2013);
  • rieditare i contenuti della testata (logo, da inserire con l’apposita funzione) e indiririzzo, tel, ecc utilizzando l’apposita procedura automatica presente in Aspetto – Tema Pasw (Pasw2013);
  • associare l’articolo Benvenuti alla categora homeboxes (o similare) da gestire utilizzando l’apposita procedura automatica presente in Aspetto – Tema Pasw (Pasw2013).

Primi passi con Pasw2013

20 Agosto 2012 in Installazione, PASW-2013, Senza categoria, Videotutorial

Ecco i primi tre videotutorial per configurare Pasw2013 passo a passo.

Primo passaggio

Secondo passaggio

  • Realizzare i menu orizzontali
  • Trasferire contenuti dal sito modello al sito della nostra scuola
  • Realizzare pagine standard e pagine con categorie

Terzo passaggio

  • Realizzare i menu verticali
  • Creare sottopagine
  • Gestire i permalink

Risorse utili

WordPress: modifica del tema Pasw2011 con Firebug

26 Maggio 2012 in Foglio di stile, Videotutorial

So che alcune scuole con cui mi confronto usano il tema Pasw2011 per siti scolastici, quello sul verdino. Se desiderano personalizzare la grafica (ad esempio, cambiare i colori, ma non solo), possono dare un’occhiata al videotutorial che riporto sotto.

Segnalo anche http://pixlr.com/, interessante editor web per foto e immagini,

Tema Pasw2011: inserire il menu inferiore sotto il footer

13 Maggio 2012 in Videotutorial

In attesa del completamento dei lavorisul nuovo tema Pasw2012, inserisco un videotutorial su come inserire il menu orizzontale inferiore sotto il footer.

Il tutto si risolve in quattro veloci passaggi:

  • modifica del file function.php;
  • modifica di footer.php;
  • inserimenti di pagine al nuovo menu;
  • modifica del foglio di stile.

Scarica il documento con il codice da copiare e incollare (txt, 2 kb).

Spostare il pulsante di log in

20 Luglio 2011 in Videotutorial

In  questo videotutorial spiegato come spostare il pulosante di log in (collegamento al panello di amministrazione di WordPress) dal menu orizzontale per soggetti al menu superiore.

per visualizzare il video è necessario disporre del plugin flash per il proprio browser