Larghezza layout ibrida su WordPress

December 13

Larghezza layout ibrida su WordPress


Una pagina Web ha tre tipi di larghezze di pagina: fisso, fluida e ibrida. In un layout fisso, la larghezza dell'area di contenuto non altera la larghezza della finestra del browser. In un layout fluido, lo fa. Un layout ibrido contiene elementi di entrambi i layout fissi e fluidi e viene spesso utilizzato per mantenere un contenuto principale zona a larghezza fissa al centro di un fluido area di sfondo. Questo permette al sito di essere ottimizzato per una particolare risoluzione dello schermo, ma rimane centrato, la visualizzazione di un fondo specifico con risoluzioni maggiori.

Utilizzando l'Editor Theme

Per apportare questa modifica al tuo sito, è necessario accedere a Editor tema. Accedi al tuo pannello di controllo di amministrazione di WordPress. Vai a "Aspetto" e poi vedrete un elenco di file sulla destra "Editor." - Queste controllano l'aspetto del tuo sito. Se non vedi l'opzione "Aspetto", non si dispone dei privilegi di amministratore - contattare il proprietario del sito e chiedere loro di aggiornare le autorizzazioni.

Modifica del foglio di stile

Fai clic su "style.css" dalla lista dei file sulla destra dello schermo. Aggiungere il seguente codice al file, a partire da una nuova riga in fondo:

header-involucro, # footer-wrapper {background: #FFF;} intestazione, #footer, # page-wrapper {width: 960px; margin: 0 auto;} footer-wrapper {clear: both;}

Sostituire "960" con la larghezza in pixel che si desidera la zona fluida del sito per avere. È inoltre possibile scorrere il file e modificare i valori di larghezza per "#sidebar" e "#content".

Modifica della intestazione

Fai clic su "header.php" dalla lista a destra. Inizia una nuova riga appena sotto il tag "<body>", quindi aggiungere la seguente riga di codice:

<Div id = "header-wrapper">

Alla fine del file, aggiungere la seguente riga di codice:

</ Div> <! - Intestazione-wrapper ->
<Div id = "pagina-wrapper">

Il divisore "pagina-wrapper" inizierà subito dopo la testa d'albero principale del sito. Questo è necessario perché WordPress utilizza diversi file per la zona del corpo principale. Avvio del <div> nell'intestazione si evita di dover aggiungere il codice per ogni singolo file.

Modifica del piè di pagina

Fai clic su "footer.php" dalla lista principale sulla destra. Aggiungere il seguente nella parte superiore del file:

</ Div> <! - Pagina-involucro ->
<Div id = "footer-wrapper">

E il seguente in fondo, appena prima del tag </ body>:

</ Div> <! - Footer-wrapper →

La prima linea si chiude il divisore "page-wrapper" che è stato aperto nell'intestazione. Posizionamento nella parte superiore del file assicura che non avvolgere il piè pure.