WordPress Responsive Header
Ciao! Se come me vuoi modificare un tema ma non sai come fare sei nel posto giusto.
Twenty Seventeen
WordPress Twenty Seventeen è un tema sempre aggiornato By the WordPress team adatto a molti siti internet quindi prendiamo questo come esempio, inoltre Header di questo tema è perfetto per una visualizzazione sul Browser del Pc ma viene tagliato in male modo quando viene visualizzato in un dispositivo mobile, non so perché visto che la maggior parte delle visualizzazione avviene proprio in quest’ultimi.
Cosa Vogliamo fare?
Vogliamo rendere responsive, ovvero adattare automaticamente ad ogni dispositivo, l’immagine dell’Header di un Tema specifico.
Prerequisiti
Nel momento in cui scrivo questo articolo e testo quello che vi dico ho WordPress 5.8 e faccio le mie modifiche su un Theme Child WordPress ( cos’è? cerca su un motore di ricerca il significato, è bene fare queste operazioni sempre su un Theme Child.
Vuoi fare qualcosa di più specifico? Usa questo plugin che ti aiuterà a personalizzare il css del tuo sito, ma e bene che tu sappia cosa stai facendo.
Come lo faremo?
Dovremo aggiungere del CSS personalizzato al nostro tema
Entra con modalità amministratore nel pannello WordPress del tuo sito internet, nella colonna a sinistra del tuo pannello segui questo percorso (Aspetto-> Personalizza -> CSS aggiuntivo) qui aggiungeremo questo codice:
/*
Benvenuto su CSS personalizzato!
Twenty Seventeen Theme Header Responsive
Testato Funziona
*/
@media screen and (max-width: 1024px) {
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: 66% !important;
object-fit: fill !important;
width: 100%;
max-height: 100% !important;
display: block !important;
position: relative !important;
}
#wp-custom-header {
height: 100% !important;
}
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(71vh – 32px) !important;
}
.page #content {
padding-top: 13px !important;
}
.home.blog.has-header-image .site-branding {
padding: 0px;
}
}
#content.site-content {
padding-top: 0px;
padding-bottom: 0px;
}
.wrap {
padding-top: 25px;
padding-bottom: 0px !important;
margin: 0px;
}
.site-content-contain {
padding-bottom: 0px !important;
}
#post-919.post-919.post.type-post.status-publish.format-standard.hentry.category-content {
padding-bottom: 0px;
}
#colophon.site-footer {
margin-top: 0px;
}oppure
/*
Benvenuto su CSS personalizzato!
Bisogna personalizzare tutti i valori per adattarli alle tue necessità.
Twenty Seventeen Theme Responsive Header
*/
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: 75% !important;
object-fit: fill !important;
width: 66%;
max-height: 80% !important;
display: block !important;
position: relative !important;
}
.custom-header-media {
height: 60vw !important;
}
#wp-custom-header {
height: 100% !important;
}
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(71vh – 32px) !important;
}
