Crearea unei pagini în WordPress. Crearea unui șablon de pagină nouă în WordPress

Crearea unui șablon de pagină pentru WordPress

Adesea, atunci când se utilizează WordPress, trebuie să creați un șablon personalizat pentru pagină. Cu siguranță ați observat că multe site-uri WordPress au layout-uri diferite pentru pagini diferite. O pagină personalizată vă permite să creați diferite aspect Pentru pagini obișnuiteîn WordPress. Dacă sunteți nou la WP și nu ați mai făcut asta până acum, nu vă temeți - crearea unui șablon de pagină personalizat pentru site-ul dvs. este mai ușor decât credeți.

Majoritatea temelor WP conțin fișier de pagină (page.php) care conține șablonul de pagină implicit utilizat pe fiecare pagină dacă nu este specificat tip specific. Dacă aveți nevoie de o pagină cu un aspect sau format diferit față de șablonul de pagină implicit, trebuie să creați tip propriușablon. Când dezvoltați șabloane WP, sunt necesare cunoștințe de bază de HTML, CSS și PHP. Cu toate acestea, puteți folosi gata făcute Teme WordPress- www.inbenefit.com, dacă nu aveți abilitățile necesare.

Crearea unui șablon de pagină

Pentru a crea șablon personalizat, veți avea nevoie de un editor de text. Pentru Windows, puteți utiliza un blocnotes obișnuit. Altfel vei avea nevoie de ceva sistem simplu software de editare precum FileZilla sau Dreamweaver. În orice caz, urmați acești pași:

Dacă accesați pagina din browser, veți vedea spatiu gol. Acest lucru se datorează faptului că nu există niciun cod în fișierul pe care l-ați creat pentru a spune WordPress cum să afișeze conținutul. Acum intră în joc abilitățile tale HTML, PHP și CSS.

Pregătirea șablonului

De fapt, puteți adăuga orice formular HMTL, Script PHP sau eticheta șablon în fișierul custompage01.php pe care doriți să îl utilizați. Ar putea fi util să citiți puțin despre ce puteți face la nivel de codificare înainte de a utiliza acest model. De asemenea, puteți include scripturi pentru site-uri web în diverse scopuri.

O modalitate ușoară de a începe cu șabloanele este să copiați informațiile de bază din fișierul page.php în tema pe care o utilizați. Acest lucru vă va oferi un punct de plecare și vă poate fi util atunci când învățați pentru prima dată să programați. Urmați acești pași:


ÎN în acest caz, Nu necesită multe abilități de programare pentru a configura funcționalitatea de bază pentru scopurile dvs. Totuși, decideți dacă doriți să creați un aspect personalizat pentru pagina dvs. De exemplu, pagina nu va afișa niciun conținut pe care îl introduceți în WordPress fără a intra într-o clasă pentru care zone.

Funcționează acest lucru pentru postările WordPress?

Din păcate, acest lucru funcționează numai pentru paginile statice din sistemul de control. Nu veți putea modifica atributele în acest fel pe ecran după editare.

Va afecta acest lucru altceva pe site-ul WordPress?

Pagina personalizată este izolată de restul conținutului dvs. Chiar dacă codificați incorect șablonul, acesta nu va afecta nimic pe site. Daca ai o problema pe pagina utilizatorului, schimbați șablonul la valoarea implicită și totul va reveni la cum a fost.

Există o alternativă pentru a crea machete fără codare?

Vă puteți crea propriul aspect fără a parcurge pașii creării unui șablon unic. Puteți folosi un plugin ca Creator de pagini de la SiteOrigin, care vă oferă posibilitatea de a personaliza un aspect unic atunci când utilizați widget-uri în conținutul însuși. Pentru cei care nu au abilități de programare, aceasta poate fi o alternativă mai bună.

Dacă preferați să utilizați Page Builder, îl puteți dezactiva cu ușurință panouri lateraleŞi subsolurile, păstrând titlul site-ului, alegând un aspect diferit al paginii.

Paginile personalizate pot avea scopuri diferite: de la publicitatea unui produs sau serviciu până la crearea pagina de destinație, ideal pentru o varietate de campanii.

De multe ori este necesar să ceri o pagină de blog WordPress separat un stil diferit de designul principal al blogului. Acest lucru se face folosind sarcina de pe această pagină șablon separat . Să vedem cum sunt implementate toate acestea.

Mai întâi trebuie să-l creați singur șablon de pagină. Pentru a face acest lucru, puteți edita pur și simplu fișierul page.php, care este responsabil pentru afișarea paginilor permanente.

Creăm o copie a acestui fișier și îl numim, de exemplu, page_extra.php (numele poate fi orice). După aceea, deschideți-l înăuntru editor de textși să schimbăm conținutul la ceea ce avem nevoie. De exemplu, dacă trebuie să schimbați antetul, puteți crea dosar separat header_extra.php (numele din nou nu contează), iar în fișierul page_extra.php în loc de get_header(); introduce include("header_extra.php");

. În mod similar, putem schimba alte blocuri ale paginii.

1 2 3 4 5

Acesta va fi numele noului nostru șablon. Asta e, salvează fișierul și pune-l în folderul cu tema stabilită! De asemenea, trimitem acolo toate fișierele nou create (header_extra.php).

Acum trebuie să aplicăm acest șablon la pagina dorită. Acest lucru se poate face prin panoul de administrare a blogului. Pentru a face acest lucru, creați o pagină sau accesați panoul de administrare WordPress pentru a edita paginile și schimbați șablonul paginii necesare cu cel pe care tocmai l-ați creat.



De asemenea, puteți scrie următorul cod în fișierul page.php:

Pentru versiuni WordPress de la 2.8, toate cele de mai sus se pot face folosind o altă metodă. Pentru a face acest lucru folosim funcția:. Trebuie inclus în etichetă în fișierul header.php al temei tale.

Ca rezultat, textul titlurilor de al treilea nivel va fi egal cu 18px și numai pe pagini statice, sau

1 2 3 #post-2 ( culoare : roșu ; )

Acest cod va schimba culoarea textului ID-ului postării 2 în roșu.

Aici lista completa clase de corp care pot fi folosite pentru a le aplica stiluri:

  • arhivă
  • căutare
  • paginat
  • atașament
  • eroare 404
  • singur postid- (id)
  • atașament- (id)
  • atașament- (tip mim)
  • autor
  • autor- (nume)
  • categorie
  • categorie- (nume)
  • etichetă- (nume)
  • pagină-părinte
  • page-child parent-pageid- (id)
  • page-template page-template- (numele fișierului șablon)
  • rezultatele căutării
  • căutare-fără-rezultate
  • autentificat
  • paginat- (numărul paginii)
  • cu o singură pagină- (numărul paginii)
  • page-paged- (numărul paginii)
  • categorie-paginată- (numărul paginii)
  • tag-paged- (numărul paginii)
  • data-paged- (numărul paginii)
  • autor-paginat- (numărul paginii)
  • search-paged- (numărul paginii)

Nu cu mult timp în urmă a fost publicat un manual despre. A fost de natura cunoștințelor la stadiul inițial, dar și inclus exemple practice. Aș dori să continui această direcție, doar să fii atent la pagini. Materialul pe această temă este multifuncțional, adică foarte mare. Prin urmare, va fi dificil să deschideți toate caracteristicile unui șablon de pagină într-un articol. Dar vom încerca măcar să atingem detalii indirecte și, bineînțeles, principalii parametri.

Ierarhia paginilor

Ierarhia înseamnă o secvență de la cel mai înalt nivel până la cel mai jos, sau invers. În cazul nostru, aceasta este aceeași ordine de autorizare a fișierelor șablon pentru pagină. Când un utilizator ajunge pe una dintre paginile dvs., WordPress își afișează conținutul pe baza opțiunii de creare a paginii (mai multe detalii mai jos).

Șablon personalizat– notat comentariu condiționatîn partea de sus în interiorul unui fișier cu un nume aleatoriu.

page-slug.php– un șablon cu numele paginii (comandă rapidă). Dacă nu a fost specificat un șablon personalizat, atunci WordPress folosește acest tip ca principală.

pagina-id.phpidentificator unic pagini.

pagina.phpfișier standard responsabil pentru conținutul paginilor.

index.phpfișier index. Dacă WordPress nu găsește niciunul dintre șabloanele enumerate mai sus, atunci implicit va fi responsabil pentru pagini.

Atenţie. Există, de asemenea, un șablon de pagină în WordPress numit paged.php, cu toate acestea, nu este folosit pentru a afișa pagini unice de postare, mai degrabă pentru a afișa o listă de pagini în arhivele de postări.

Creați un șablon personalizat pentru utilizare în masă

Există mai multe opțiuni pentru crearea unui șablon cu argumentele pro și contra, aproape nesemnificative. Această opțiune, pe care o vom lua în considerare acum, este cea mai comună. Primul pas este crearea fișier php sau duplicați pagina standard.php . Apoi salvați-l sub un alt nume, de exemplu, templates_my.php. Apoi adăugați un comentariu în partea de sus a fișierului:

Următorul pas este să încărcați fișierul pe tema dvs., să mergeți la panoul de administrare din fila „Pagini - Adăugați nou” sau puteți deschide unul existent. În atributele paginii, selectați ce șablon va fi folosit pe această pagină.

Dacă dintr-o dată nu aveți panoul „Atribute paginii”, atunci bifați caseta din setările ecranului din colțul din dreapta sus pentru a o afișa.

Utilizarea în masă înseamnă că acest tip de șablon poate fi aplicat oricăror pagini ale site-ului. Spre deosebire de specializat, care a fost creat cu un anumit identificator de pagină sau etichetă.

Sfaturi. Un șablon creat în acest fel poate fi localizat într-un subdosar subiect actual. Astfel, fără a lua spatiu suplimentarși creând un aspect compact.

Important. Nu utilizați pagina de prefix - ca nume al paginii șablon. Pentru că WordPress va interpreta fișierul ca fiind unul specializat, care în mod clar se aplică doar unei pagini.

Șabloane de pagină personalizate

A doua metodă este doar pentru anumite pagini fara exceptie. Să dăm un exemplu de vechea schema. Să presupunem că aveți o pagină numită „Portfolio”, în mod implicit eticheta acesteia este tradusă în cuvântul englezesc „portfolio”. Acest lucru poate fi văzut în setările „Page-Properties”. Acum pur și simplu duplicăm fișierul page.php și îl redenumim în page-portfolio.php.

ID-ul este creat exact în același mod, doar ID-ul paginii este înlocuit pentru etichetă. El este în bara de adrese, secțiunea „Pagini-Editare” arată ca această postare=9 . În același mod, fișierul standard este duplicat și redenumit în pagina-9.php.

Important. Un șablon de același tip, care este creat numai pentru pagină specifică nu poate fi localizat în subfolderele teme. Exact la fel ca în temele pentru copii.

Exemplu practic de creare a unui șablon de pagină

Acum, de exemplu, să creăm un șablon bazat pe prima opțiune și să schimbăm bucla în el adăugând rezultatul categoriilor cu înregistrări. Deschideți orice editor, adăugați codul de mai jos, salvați-l sub numele template_my.php și încărcați-l pe server.

    Categoria-1

    have_posts()): $the_query -> the_post(); ?>
  • ">

    Categoria-2

    have_posts()): $the_query -> the_post(); ?>
  • ">

    Categoria-3

    have_posts()): $the_query -> the_post(); ?>
  • ">

Acum trebuie să scrieți stiluri în fișierul style.css

My_main ( box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margine: 20px automat; padding: 15px; background: #fff; width:1000px; ) .page_cat (marja: 0 9px 20px; padding: 15px; vertical-align: top; 28%; .page_cat h2 (color: #676767; font: bold 18px arial; margin-bottom: 20px; ) ; afișare: bloc; .page_cat li ( margin-bottom: 6px; umplutură: 3px 3px 10px; afișare: bloc; ) .page_cat li a:hover (text-decor: subliniere; ) . 2n) ( fundal: #f7f7f7; )

Mai rămâne un singur lucru de făcut: în panoul de administrare, în fila „Pagini-Editare”, specificați șablonul nostru „exemplu de șablon” creat anterior în atributele paginii.

Rezultat.

Etichete de pagină condiționate

În ultimul paragraf, vom lua în considerare mai multe etichete condiționate. Sunt scrise în fișierul standard page.php.

Afișarea elementelor pe anumite pagini

/images/img.png"/> /images/img.jpg"/> /images/img.jpg"/> /images/img.jpg"/>

ieșire de informații

"; } ?>

O sarcină similară poate apărea atunci când trebuie să aveți diferite șabloane de pagină în ceea ce privește designul într-un singur site. Cea mai simplă situație care îmi vine în minte: ascunderea reclamelor/bannerelor în articolele prezentate; sau dintr-o dată vrei să ștergi liste de note similare sau, să zicem, unele elemente din unele publicații. Astăzi vă voi învăța cum să faceți asta.

Nu este prima dată când revin la această problemă am vrut să adun toate nuanțele și cunoștințele într-un singur loc. Din fericire, metodele moderne sunt cât se poate de simple în comparație cu modificările anterioare. Nici măcar nu trebuie să instalați module suplimentare ca înainte. Dezvoltatorii WordPress simplifică și îmbunătățesc cu adevărat sistemul.

Așa că astăzi să ne uităm la:

Diferite șabloane de pagină/postări în WordPress

În teorie, tot ce aveți nevoie în acest caz este să plasați un cod în partea de sus a fișierului corespunzător:

/* * Numele șablonului: NoAds Single Page * Tipul postării șablonului: postare, pagină, produs */ ?>

Prima linie indică numele pentru panoul de administrare WP, a doua determină tipurile de postări în care poate fi folosit acest aspect (în exemplu: postare, pagină și produs).

Adică, de fapt, trebuie doar să faci un nou șablon de pagină WordPress, care va stabili regulile de afișare a informațiilor pe site pentru toate notele cu conținut. Totuși, totul depinde de dacă codurile din single.php și page.php sunt diferite - dacă da, atunci va trebui să le modificați pe fiecare.

Algoritmul general al acțiunilor:

1. Folosind clientul FTP FileZilla, accesați găzduirea dvs. în directorul cu numele temei instalate wp-content/themes/theme_name(sau copil).

2. Copiați fișierul folosit pentru a afișa postări/pagini (single.php și page.php) pe computerul local.

3. Redenumiți, de exemplu, în page-new.php sau page-noads.php etc. (numele nu contează).

5. Încărcați noua versiune înapoi în găzduire în același director.

Alegerea unui șablon de pagină în WordPress

Acum accesați panoul de administrare a sistemului, deschideți orice publicație pentru editare și căutați următorul bloc acolo:

Numele afișat aici este specificat în linia Nume șablon.

Apropo, este convenabil să fie disponibil, adică puteți schimba șablonul de pagină pentru mai multe obiecte simultan. Accesați elementul „Toate înregistrările”, unde marcați câteva articole și selectați „Editați” în „Acțiuni”.

După ce ați făcut selecția, nu uitați să faceți clic pe „Actualizare”.

Diferite bare laterale, antet, subsol și multe altele

Dacă te uiți cu atenție la tema instalată, vei vedea că funcțiile standard sunt folosite pentru afișarea elementelor de bază: get_sidebar, get_header, get_footer. Dacă v-ați modificat aspectul, dar le-ați lăsat acolo, site-ul va afișa același conținut ca aspectul principal.

Să ne uităm la cea mai simplă situație - avem o nouă pagină.php corectată, dar trebuie să facem și câteva ajustări în bara laterală. În acest caz, în loc de get_sidebar, folosesc construcția:

Desigur, trebuie să creați fișierul corespunzător sidebar-category-noads.php. Deși, teoretic, puteți scrie cod imediat fără a fi inclus în noul aspect, dar în acest fel structura devine mai puțin clară.

Este clar că trucul este aplicabil nu numai acestor trei blocuri de pe site, ci și oricăror altele - studiază cu atenție codurile sursă pe care le folosești în munca ta.

Șabloane de postări individuale în funcție de categorie

Există în esență două moduri aici. Eu personal o prefer pe cea mai simplă - deschideți o singură postare single.php în editor și plasați codul:

In_category verifică cărei secțiuni aparține publicația: dacă cu ID=5, atunci se încarcă single-category5.php, în caz contrar single-forall.php. Desigur, aceste două fișiere ar trebui adăugate la FTP în avans (le puteți copia din nou din sursă și le puteți corecta ușor) + orice nume este permis.

A fost luată în considerare a doua opțiune. Trebuie să plasați următorul cod în functions.php:

/* * Definiți o cale constantă către folderul nostru unic șablon */ define (SINGLE_PATH, TEMPLATEPATH . "/single" ); /** * Filtrați șablonul unic cu funcția noastră personalizată */ add_filter("șablon_unic" , "șablon_un_meu" ); /** * Funcția de șablon unic care va alege șablonul nostru */ function my_single_template($single) ( global $wp_query, $post; /** * Verifică un singur șablon în funcție de categorie * Verifică după categorie slug și ID */ foreach ((array ) get_the_category() as $cat ): if (file_exists (SINGLE_PATH . "/single-cat-" . $cat -> slug . ".php" ) ) return SINGLE_PATH .

„/single-cat-” .

$cat -> melc . „.php”; elseif (fișier_există (SINGLE_PATH . "/single-cat-" . $cat -> term_id . ".php" ) ) return SINGLE_PATH . „/single-cat-” .$cat -> term_id . „.php”; endforeach ;

)

În sfârșit, 2 mici comentarii. Uneori se întâmplă ca într-o temă premium din panoul de administrare să nu existe o alegere de aspect pentru postări (postări), iar în schimb dezvoltatorii au implementat formate. În acest caz, puteți utiliza unul dintre ele pentru informații alternative.

Metoda, desigur, nu este cea mai competentă, dar funcționează. Nu uitați să faceți modificări la fișierul corespunzător.

Al doilea truc este atunci când trebuie să ascundeți/afișați widgetul în funcție de opțiunea de aspect selectată. În acest caz, operatorii condiționali is_page_template sau has_post_format vin și ei în ajutor.

Total. Repet, dacă trebuie să creați diferite șabloane pentru pagini și postări în WordPress, dar page.php și single.php în sine sunt diferite, atunci vă faceți propria „copie” pentru fiecare dintre ele. Când structura lor este aceeași, noile capabilități ale sistemului vă permit să creați un singur aspect, unde în descrierea Template Post Type pur și simplu indicați tipurile de obiecte cu care va funcționa.

Dacă aveți întrebări despre partea principală a notei și despre nuanțe suplimentare, scrieți mai jos și voi încerca să răspund.