Come creare un modello di pagina larghezza completa per WordPress

January 4

Come creare un modello di pagina larghezza completa per WordPress


Anche se WordPress è prima di tutto una piattaforma di blogging, molte persone lo usano come un Content Management System (CMS). Quando si utilizza WordPress per costruire un sito web completo, la creazione di modelli di pagina rende il sito più flessibile, consentendo a più layout per i contenuti. Per creare un modello di pagina di grande ampiezza, è necessario creare un nuovo file di modello con una linea speciale di codice commento in alto. È possibile ottenere un rapido avvio la creazione del modello utilizzando il codice già presente nel file di modello di pagina "page.php", e allora si dovrebbe modificare il file prendendo le barre laterali.

istruzione

1 Creare un nuovo file vuoto nel testo normale o editor di codice della vostra scelta. Aprire il file "page.php" dal seguente percorso:

/ Yoursite / wp-content / themes / nome-del-tema /

"Yoursite" è la directory in cui è stato installato WordPress, e "il tema nome-di-" è il nome del tema che si desidera modificare. Copiare il contenuto di "page.php," e incollarlo nel file vuoto. Salvare il file vuoto come "il vostro-template-name.php," dove "il vostro-template-name" è qualsiasi nome che si desidera assegnare al file.

2 Aggiungere la seguente riga di codice alla cima del vostro nuovo file di modello:

<? php /

Template Name: Your Name Here />

WordPress legge questo codice, e quando si vede "Nome modello", si sa che "Your Name Here" è un modello che dovrebbe offrire quando si creano pagine nel cruscotto. Dategli un nome descrittivo, come "Pagina intera larghezza." Salvare il file.

3 Leggere il file PHP appena creato e cercare questa voce codice:

<? Php get_sidebar (); ?>

Nel caso di più barre laterali, si potrebbe vedere il codice per le altre barre laterali simili a quanto segue:

<? Php include TEMPLATEPATH. '/sidebar2.php'; ?>

Rimuovere i codici per barre laterali, ovunque li vedi. Salvare nuovamente il file.

4 Aprire il file "header.php", e verificare che il tag <body> include la seguente riga di codice:

<? Php body_class (); ?>

Se non lo vedi lì, aggiungere quel tag all'interno del tag <body>. Salvare il file "header.php". Ora torna al tuo file di grande ampiezza modello, e assicurarsi che il <div> o <section> tag che si avvolge intorno al vostro contenuto della pagina è la sua classe impostato su <? Php post_class (?); ?> In questo modo:

< "<? Php post_class (?);>" Div class =>

5 Aprire il file "style.css" e aggiungere il seguente:

.pagina-template-layout full-width-php .pagina {

width: 100%;

}

Change ".pagina-template-layout full-width-php" per riflettere il nome assegnato file del modello. Un file denominato "my-new-page.php" sarà ".pagina-modello-my-new-page-php". Questo codice CSS assicura che qualsiasi pagina impostato per utilizzare il modello a tutta larghezza verrà visualizzato il contenuto per tutta la larghezza dello schermo.

6 Accedere al cruscotto di WordPress, e creare una nuova pagina. Dopo aver aggiunto i tuoi contenuti per l'editor, trovare la discesa sotto Modello nella pagina Attributi riquadro a destra dello schermo. Fare clic sul menu a discesa e selezionare il nuovo modello. Fare clic sul pulsante blu di aggiornamento nella casella in alto per pubblicare la pagina.

Consigli e avvertenze

  • Quando si codifica il tuo tema WordPress, utilizzare un framework CSS, come 960.gs o Blueprint CSS. Poi invece di modificare la larghezza di una colonna in CSS, è possibile aggiungere le classi di colonna per i tag HTML per definire la larghezza.
  • Non un nome al file di modello "home.php" o "front-page.php", perché WordPress tratta questi file come alternative per "index.php".