Come creare una larghezza testata fluido per WordPress

October 23

larghezze dei fluidi nella progettazione Web si riferiscono a larghezze di elementi della pagina che cambiano in base alle dimensioni del browser di un utente. Quando si modifica la larghezza della finestra del browser, gli elementi fluidi larghezza cambiano la loro larghezza pure. L'utilizzo di valori percentuali invece dei valori dei pixel nel CSS (Cascading Style Sheets) creerà questo effetto. In WordPress, creare un'intestazione fluid-width, rendendo il modello "header.php" prima e modificando il file "style.css" con il codice CSS.

istruzione

1 Creare un file in Blocco note o un editor di codice e salvarlo come "header.php". Copia e incolla questo codice nel file per avviare il file di intestazione:

<! DOCTYPE html>

? <Html <language_attributes php (); ? >>

<Head>

<Meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />

<Meta charset = "<? Php bloginfo ( 'charset');?>">

<Meta http-equiv = "X-UA-Compatible" content = "IE = bordo, cromo = 1">

? <Title> <? Php bloginfo ( 'name'); ?> </ Title>

<! - [If lt IE 9]> <script href = "<? Php bloginfo ( 'stylesheet_url');?>" Media = "screen">

<Link rel = "pingback" href = "<? Php bloginfo ( 'pingback_url');?>">

<? Php wp_head (); ?>

</ Head>

? <Body <? Php body_class (); ? >>

Questo codice utilizza HTML5Shim per aggiungere il supporto HTML5 quando i visitatori caricare il tuo blog nei browser non HTML5, vale a dire Internet Explorer 8 e sotto.

2 Inserire questo codice all'interno del file "header.php", dopo l'apertura "<body>" tag:

<Header>

<H1> <a href="<?php bloginfo('wp_url'); ?> "title =" <? Php bloginfo ( 'name');?>? "> <Span> <? Php bloginfo ( 'name') ; ?> </ Span> </a> </ h1>

</ Head>

Si noti l'uso di "bloginfo ()" per l'uscita l'URL home page e il nome del blog o il titolo. Questa funzione sta tirando le informazioni dal database che gestisce WordPress.

3 Aggiungere lo slogan per l'intestazione, anche se non si desidera mostrare ai visitatori:

? <H2> <span> <? Php bloginfo ( 'descrizione'); ?> </ Span> </ h2>

Salvare il file e caricarlo "/ wp-content / themes / theme_name /" sul vostro server via FTP.

4 Accedere a WordPress e passare alla "Editor" sotto il menu "Aspetto" nella barra laterale. Caricare il file "style.css" cliccando sul link sul lato destro dello schermo "modificare i temi". Vai alla fine del file e scrivere una nuova regola di stile per i "<header>" tag:

intestazione {

}

Tag-selettori di tipo non hanno bisogno di alcun prefisso, in modo da "colpo di testa" è il modo corretto per selezionare questi tag.

5 Aggiungere una larghezza all'intestazione, ma usa un valore percentuale invece di un valore di pixel. Questo renderà il vostro fluido larghezza testata:

intestazione {

width: 75%;

}

6 Aggiungere queste due regole di stile per sostituire il titolo di testo e slogan con un logo:

intestazione h1 un {

fondo: URL (path / to / logo.png) centro no-repeat;

width: 200px;

altezza: 150px;

blocco di visualizzazione;

}

arco intestazione {

margin-left: -999em;

}

Modificare il percorso per il logo per abbinare il proprio e modificare la larghezza e l'altezza a quella del vostro logo. È necessario utilizzare "display: block" quando si aggiungono dimensioni a tag "<a>". Il "margin-left: -999em" codice sposta il testo fuori dallo schermo senza rimuoverlo dalla vista di crawler dei motori di ricerca.

Consigli e avvertenze

  • Se si dà l'intero blog una larghezza impostata, allora l'intestazione perderà la sua larghezza fluida. Rendere l'intero fluido blog di design.
  • L'intestazione di WordPress non funzionerà finché non si crea un modello di "index.php" e chiamare l'intestazione con "<? Php get_header ();?>".