Crearea manuală a diverselor teme WordPress și utilizarea programelor. Cum să creați singur un șablon de prezentare Powerpoint

În acest articol, voi vorbi despre modalități de a crea șabloane pentru paginile persistente WordPress. Fiecare metodă are avantajele și dezavantajele sale. Dar înainte de a începe, puțin despre ce sunt paginile și cum diferă acestea de postări.

În WordPress puteți crea pagini (pagini) și postări (postări). Ele diferă prin faptul că postările: apar în feedul de pe pagina principală; Categoriile sunt indicate pentru intrări; postările nu pot fi arborescente, iar paginile: sunt folosite pentru conținut precum „Despre mine”, „Contacte”, „Harta site-ului”; nu au categorii, dar au o structură arborescentă. Intrările sunt de obicei destinate informațiilor cronologice (pe baza orei în care au fost adăugate), iar paginile sunt pentru o structură arborescentă care este independentă de timp. De exemplu, acest articol este publicat ca „intrare” în secțiunea „Cod”, iar linkurile din meniul antet duc la paginile: Funcții.

Paginile sunt similare cu înregistrările - sunt situate în același tabel de bază de date și datele lor sunt aproape aceleași: titlu, text, câmpuri suplimentare etc. Ambele sunt postări, dar de diferite tipuri: paginile sunt în formă de arbore și sunt organizate prin crearea de pagini părinte și copil, iar postările sunt organizate pe categorii și etichete. În WordPress puteți crea tipuri de postări suplimentare, arbore sau nu.

Crearea de pagini în WordPress

Adesea trebuie să creați un șablon de pagină separat, astfel încât informațiile afișate să difere de alte pagini. Prin crearea unui șablon de pagină în WordPress, puteți schimba complet pagina: eliminați bara laterală, subsolul, antetul, puteți schimba pagina dincolo de recunoaștere. De exemplu, pe acest site se modifică în acest fel pagina pe care sunt afișate codurile fișierelor WordPress.

Metoda 1: șablon de pagină folosind un fișier cu un nume personalizat și conectarea acestuia în panoul de administrare (metoda clasică)

Acesta este cel mai comun mod de a crea un șablon de pagină în WordPress. Pentru a face acest lucru, trebuie să creați un fișier .php, de exemplu, tpl_my-page.php în folderul cu teme și chiar la începutul fișierului scrieți o notă că fișierul creat este un șablon pentru pagini:

Acum, când creăm o pagină în panoul de administrare, în blocul „Proprietăți pagini”, putem selecta un „șablon”:

Din WordPress 4.7. Astfel de șabloane de pagină pot fi create pentru orice tip de postare, nu doar pentru pagină. Pentru a face acest lucru, completați comentariile cu rândul: Template Post Type: post, page, unde post, page sunt numele tipurilor de postare cărora le aparține șablonul.

/* Numele șablonului: șablonul paginii mele Tipul postării șablonului: post, pagină, produs */

Avantaje:

    După ce am creat un șablon, îl putem aplica convenabil pe diferite pagini. De exemplu, puteți crea un șablon fără bară laterală și îl puteți utiliza pe pagini diferite.

  • Numai înregistrările cu șablonul specificat pot fi preluate. De exemplu, puteți afișa toate paginile cu șablonul „Servicii” (fișierul servises.php). Uneori este convenabil. Numele fișierului șablon este stocat în metacâmpul _wp_page_template, așa că pentru a afișa pagini cu șablonul specificat trebuie să creați o interogare folosind metacâmpul (consultați WP_Query).

Defecte:

După ce ați creat fișierul șablon în folderul cu teme, trebuie să mergeți la panoul de administrare și să instalați șablonul pentru pagină. Acest lucru nu este întotdeauna convenabil în timpul dezvoltării. Prin urmare, dacă intenționați să utilizați șablonul pentru o singură pagină, utilizați a doua metodă.

Cum functioneaza:

Când accesați panoul de administrare pentru a edita o pagină de postare arborescentă, WordPress scanează toate fișierele șablon pentru linia:

Nume șablon: ***

Linia poate fi localizată oriunde și în orice mod în fișier.

Toate fișierele cu șiruri similare sunt colectate și afișate în selecția șablonului din blocul „Atribute pagină”.

La publicarea unei pagini, câmpul personalizat _wp_page_template este completat cu numele fișierului șablon sau implicit dacă nu este specificat niciun șablon:

Wp_page_template = implicit
_wp_page_template = tpl_my-page.php

Apoi, când utilizatorul vizitează pagina, WordPress va verifica meta câmpul _wp_page_template, dacă șablonul este instalat, atunci fișierul șablon este utilizat. În caz contrar, căutarea șablonului de pagină continuă prin ierarhie.

Metoda 2: șablon de pagină printr-un fișier cu un nume specific (ierarhia fișierelor șablon)

Când o pagină este creată, i se atribuie o etichetă (slug, nume alternativ). Este folosit în adresa URL a paginii. Și poate fi schimbat:


Pentru a crea un șablon în acest fel, trebuie să aflați pagina slug-ul și să creați un fișier în folderul cu teme. Să presupunem că slug-ul nostru, ca în imagine, este egal cu contacts, apoi vom crea un fișier page-contacts.php în temă. și completați-l cu codul necesar (puteți copia conținutul din fișierul șablon page.php și îl puteți edita după bunul plac). Asta e, acum când vizităm pagina ar trebui să vedem un nou șablon. În mod similar, puteți lua ID-ul (să fie 12) al paginii și puteți crea un fișier page-12.php .

Avantaje:

Nu este nevoie să mergeți la panoul de administrare și să instalați fișierul șablon. Șablonul începe să funcționeze imediat după crearea fișierului. Convenabil pentru dezvoltare.

Defecte:

Șablonul este creat doar pentru o anumită pagină. Depinde de slug-ul paginii; dacă se schimbă, șablonul nu va funcționa. Dacă utilizați ID, atunci dependența de slug dispare, dar devine neclar în fișierul temă căreia îi aparține șablonul (dacă există mai multe șabloane cu ID).

Aproape inutil când scriu șabloane și cu atât mai mult plugin-uri. Poate fi folosit atunci când vă editați site-ul web, în ​​care slug-ul sau ID-ul paginii este cunoscut în prealabil.

Cum functioneaza:

WordPeress selectează ce fișier să folosească în următoarea ordine (fișierele trebuie să fie în rădăcina temei):

  • (any_name).php (atunci când utilizați un șablon de pagină)
  • pagina-(post_label).php
  • pagina-(post_ID).php
  • pagina.php
  • singular.php
  • index.php

Metoda 3: șablon de pagină prin filtrul „template_include” (codare)

Aceasta este o metodă avansată, este mai complexă, dar odată cu complexitatea deschide posibilități largi. Folosind această metodă, puteți seta un șablon pentru orice pagină, postare, categorie, orice publicație de pe site sau chiar un grup de publicații. Vezi exemple cu descrieri:

// filtrul trece variabila $template - calea către fișierul șablon. // Schimbând această cale, schimbăm fișierul șablon. add_filter("template_include", "my_template"); function my_template($template) ( # similar cu cea de-a doua metodă // dacă aceasta este o pagină cu slug de portofoliu, utilizați fișierul șablon page-portfolio.php // folosiți eticheta condiționată is_page() if(is_page("portfolio") ))( if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; ) # șablon pentru grupul de categorii // acest exemplu va folosi fișierul din folderul temă tpl_special-cats.php, // ca șablon pentru categorii cu ID 9 , titlu „Necategorizat” și slug „php” if(is_category(array(9, „Uncategorized”, „php”)))( return get_stylesheet_directory() . „/tpl_special-cats. php"; ) # șablon pentru introducerea după ID // fișierul șablon este localizat în folderul plugin /my-plugin/site-template.php global $post; if($post->ID == 12)( return wp_normalize_path( WP_PLUGIN_DIR) . "/my-plugin/site- template.php"; ) # șablon pentru pagini de tip personalizat „carte” // se presupune că fișierul șablon book-tpl.php se află în folderul temă global $post ; if($post->post_type == „carte”)( return get_stylesheet_directory() . „/book-tpl.php”; ) returneaza $template; )

Acest cod trebuie plasat în fișierul functions.php al temei sau într-un plugin, sau conectat într-un alt mod. După cum puteți vedea din exemplu, în timpul filtrului template_include, etichetele condiționate funcționează deja, variabilele globale sunt setate: $wp_query , $post , etc.

Avantaje:

    Puteți seta un șablon pentru orice pagină sau grup de pagini. Carte albă aproape completă în acțiuni.

  • Puteți crea un șablon când scrieți un plugin.

Defecte:

Necesitatea de a scrie cod și de a-l conecta separat (de exemplu, în funcțiile temei.php).

În acest articol, vom învăța cum să creăm o temă WordPress. Pentru început, vom crea un șablon HTML + CSS pe care îl vom plasa în structura temei WordPress. După ce veți termina de citit acest articol, veți putea să vă creați propriul șablon WordPress sau, mai degrabă, îl veți crea pe măsură ce citiți și finalizați sarcinile practice. Veți ști cum este structurată tema și veți putea implementa în mod independent nucleul temei WordPress din alte șabloane HTML/CSS. Sa incepem?

Introducere – Structura temei WordPress

Structura unei teme WordPress este extrem de simplă. In topic avem un fisier index.php, el este responsabil de asamblarea pieselor șablon. Alții conectați la acest fișier: antet.php,subsol.php. Aceste fișiere (piese șablon) sunt folosite pe orice pagină a site-ului. Știm că nu toate paginile sunt construite folosind același șablon, așa că o temă WordPress are alte fișiere, cum ar fi arhive.php sau singur.php. De asemenea, vă puteți crea propriul tip de pagină dacă doriți ca acesta să fie categoric diferit de celelalte de pe site. Este foarte confortabil.

Dacă luați în considerare cu atenție structura temei și citiți conținutul fișierelor, veți înțelege intuitiv ce este. Dar mai sunt câteva puncte pe care le vom lua în considerare. Vă puteți întoarce oricând la această pagină și puteți citi cum se face totul.

Acum să ne uităm la crearea unui șablon pas cu pas:

Pasul 1 – style.css

Un fișier CSS este un fișier de parametri și soluții de proiectare pentru elementele șablonului HTML. Ar trebui să redenumiți fișierul CSS principal (dacă aveți mai multe) la stil.css. Apoi, trebuie să adăugați următoarele informații comentate la începutul acestui fișier:

/* Numele temei: Typography Paramount Theme URI: http://site/ Descriere: Un șablon fără imagini care se concentrează pe Typography..0 . Comentarii generale/Declarație de licență, dacă este cazul. . */

Acest cod va afișa informații despre temă pentru administratori. Asigurați-vă că este la începutul fișierului și că nu există caractere albe înaintea acestuia!

Apoi am creat un alt fișier numit 1. css, și puneți-l într-un folder tipografie-primată, pe care l-am creat în folderul cu teme WordPress. Această structură trebuie urmată cu strictețe pentru ca WordPress să poată vedea acest fișier.

Pasul 2 – antet și subsol

În acest pas vom crea două fișiere: antet.phpȘi subsol.php, care au fost menționate mai devreme. Deși nu sunt de bază și sunt incluse opțional în temă, sunt folosite în majoritatea șabloanelor, așa că le vom crea.

Header.php

Să începem cu acest fișier. Creați un fișier și dați-i un nume antet.php, apoi inserați codul furnizat în el și salvați. Acest fișier va fi afișat pe toate paginile șablonului nostru.

-

Până acum, nu a existat nimic special în contrast cu o temă simplă html/css. Dar acum vom înlocui unele elemente cu etichete WordPress.

> <?php bloginfo("name"); ?> <?php wp_title(); ?> ; set de caractere=" /> " type="text/css" media="screen,projection" />

Acestea sunt doar câteva dintre etichetele pe care le cunosc. Veți găsi multe mai multe pe site-ul oficial: codex.wordpress.org.

atribute_limbă()– Afișează tipul de limbă pentru etichetă .

bloginfo()– Folosit pentru a afișa informații despre site, toți parametrii pot fi găsiți în codul WordPress.

wp_title()– Returnează titlul paginii.

wp_head()– conectează javascript și alte elemente necesare.

get_option()– primește opțiunile necesare pentru lucrul cu baza de date.

Subsol.php

Acum să creăm așa-numitul „subsol al site-ului”. Creați un fișier subsol.phpși pune următorul cod în el. Acest subsol va afișa anul, numele site-ului și linkurile rss.

< ?php wp_footer(); ?>

phpthe_timp("Y"); ?>- afișează anul curent.

- numele blogului.

- adăugarea unui link către fluxul rss al blogului.

wp_footer()– acest lucru este necesar pentru nucleul WordPress în sine, care adaugă acolo elementele de care are nevoie.


Pasul 3 – fișierul șablon wordpress principal

Este timpul să creați fișierul șablon WordPress principal care va conecta partea de sus și de jos a site-ului. Creați un fișier index.php. Acesta este unul dintre cele două fișiere de teme WordPress necesare (celălalt este style.css). Lipiți fișierul nou creat cu următorul cod:

Acest cod ajută WordPress să obțină informații unde să se conecteze antet.phpȘi subsol.php. Să mai adăugăm câteva rânduri între aceste etichete:

">

la | |

Woops...

Ne pare rău, nu am găsit nicio postare.

Această bucată de cod primește informații despre postările existente pe blog și, dacă există, le afișează. Dacă nu sunt detectate, atunci partea de cod de după , ceea ce ne anunță că blogul este încă gol.

A adăugat și eticheta , care afișează linkuri de navigare pentru ca utilizatorii să poată citi postările adăugate anterior.

Exemplu de temă WordPress

Acum avem o aparență de temă, să vedem un exemplu despre cum funcționează tema WordPress creată.


Avem patru fișiere în tema noastră, ceea ce este suficient pentru început. În articolul următor vom adăuga fișierul singur.php, care va fi afișat atunci când este afișată o anumită postare. Acest fișier va include, spre deosebire de fișier index.php.

Dacă mai aveți întrebări sau neînțelegeri despre crearea unui șablon WordPress (temă), exprimați-vă îngrijorările în comentariile de mai jos!

Salutari. Acest articol va răspunde la întrebarea cum să creați un șablon unic pentru WordPress, frumos și diferit. Va trebui să încerci să-ți încordezi puțin creierul.

Cum să creați un șablon unic pentru WordPress - să începem

Mai jos este o listă de pași despre cum să creați un șablon WordPress unic cu propriile mâini și gratuit.

  1. Schimbați pozele.
  2. Schimbați numele șablonului.
  3. Faceți modificări minore la stiluri.

Să începem să analizăm fiecare punct în ordine.

Schimbarea pozelor

Mă voi uita la cel mai simplu punct folosind șablonul douăzeci și unsprezece ca exemplu. Înlocuim imaginile stoc cu propriile noastre convertite. Este necesar să schimbați antetul, subsolul, fundalul și altele mici.

Dar nu pot veni cu o soluție anume, șablonul meu are un minim de imagini (iar cele care există sunt uriașe). În general, trebuie să înlocuiți majoritatea imaginilor cu propriile imagini. Să ne uităm la cele două elemente care sunt înlocuite:

  • Primul este prin intermediul panoului de administrare în sine.
  • Al doilea este prin cod.

Dacă înțelegi principiul, atunci mult respect pentru tine.

Prin intermediul panoului administrativ propriu-zis

Temele moderne au o funcție bună de setări prin WordPress însuși, de ce să nu le folosiți? Accesați panoul administrativ al blogului, apariția și configurați.

Dacă tema este creată pentru oameni, atunci setările globale de design vor fi aici și ne vom ocupa de detaliile de mai jos. În secțiunea despre exemplul lui Twenty unsprezece.

  1. Culori tematice generale. Setări pentru elementele de bază (titluri, subtitrări etc.).
  2. Imagine antet, adică în antet.
  3. Imagine de fundal. Nu este prezent pe toate temele; poate fi personalizat fie cu poza, fie doar cu culoare.

În acest stadiu, asta este ceea ce am primit. Sa trecem peste.

Schimbarea imaginilor manual

Să presupunem că nu sunteți mulțumit de imaginea unui element din șablon și doriți să o schimbați. Ce să fac? Ne vom da seama. De exemplu, voi lua rezultatul unei imagini cu numărul de comentatori.

Sistemul se aplică tuturor subiectelor.

Faceți clic dreapta pe element și căutați rezultatul acestuia în cod folosind instrumentul „vizualizare cod”.

  1. Elementul în sine, faceți clic dreapta pe el.
  2. Selectați opțiunea „Vizualizare cod”.
  3. Acesta este codul HTML de ieșire în sine, nu îi acordăm atenție.
  4. Aceasta este adresa prețuită la care trebuie să mergeți cu un înlocuitor. Fișierul pe care îl căutați este bubble.png, aflat în folderul imagini din tema în sine.

Adică, trebuie să creați același fișier, cu același nume, și să îl înlocuiți. Sper că știți cum să utilizați manageri de fișiere precum FileZilla. Am vrut să fac o poză care să afișeze numărul de comentarii cu o stea și un contur. L-am făcut în Photoshop și am salvat-o ca imagine cu balonul de nume și extensia png.

Gata, am deschis Filezilla și am trecut la subiectul activ twenty unsprezece din folderul imagini (pe care l-am recunoscut mai sus). și pur și simplu trageți și plasați noua imagine în folder, cu înlocuire. Toate detaliile sunt în captură de ecran.

Dacă totul este bine făcut, atunci noua poză va fi afișată pe site, iată un instantaneu.

După cum înțelegeți, puteți schimba orice imagine folosind această metodă dacă nu există setări în panoul administrativ.

Schimbarea numelui șablonului

Puteți schimba doar temele gratuite, acest lucru este important.

Sunt două puncte care trebuie făcute:

  • Reluarea titlului în fișierul style.css
  • Schimbați numele folderului cu teme.

Reluarea numelor în style.css

Pentru a face acest lucru, mergeți la editor ( îmi amintește de editorul de apariție), și găsiți style.css.

Pe ecran vedem inscripția, totul trebuie schimbat aici. Fiecare fișier style.css conține informații despre șablon la început. Trebuie schimbat cel puțin în aceste linii.

Numele temei: moi-template Descriere: Versiunea standard 1.. Licență: GPL

Ar trebui să arate așa după înlocuire.

Completați datele dvs., nu le luați pe ale mele, pentru că noi facem șablonul unic. Schimbați cel puțin numele, autorul și site-ul web.

Ne-am dat seama, să trecem la următorul punct.

Schimbați numele folderului cu teme

O facem printr-un manager de fișiere, eu folosesc Filezilla. În paragraful anterior, am schimbat numele subiectului din rând:

Numele temei: moi-template

Am nevoie de un nume original douazeci unsprezece schimbarea la una nouă, în cazul meu, moi-template. Accesați folderul FileZilla teme, și găsiți numele original twenty11.

Și îl schimbăm cu unul nou.

Dacă totul a fost făcut corect, va funcționa. Tema pentru motoarele de căutare nu va mai fi standard, ci unică.

Modificări minore ale stilurilor

Nu pot veni cu o singură soluție pentru a crea un șablon unic pentru WordPress, trebuie doar să priviți șablonul pur vizual și să vedeți ce nu vă place. Mă uit la bara laterală.

Serios, nu chiar? Vreau să măresc fontul de titlu, deoarece sunt mici și se amestecă în fundal. Toți pașii îi vedem în imaginea de mai jos.

  1. Selectați elementul pe care vrem să îl editam. Click dreapta.
  2. Faceți clic pe „vezi codul”.
  3. Întregul stil al acestui titlu.
  4. Numele stilului pe care îl cauți.

Deschideți fișierul style.css. Căutăm numele stilului folosind combinația de taste CNTRL + F.

Vreau să măresc fontul, să fac o linie continuă sub el, să schimb culoarea și grosimea textului. Pentru a face acest lucru, modific sau adaug următorii parametri.

Culoare: #1a1a1a; dimensiunea fontului: 15px; greutate font: 600; chenar-jos: 2px solid #271eb1;

Să ne uităm la liniile de cod.

  1. Schimbarea culorii.
  2. Schimbarea dimensiunii.
  3. Modificați lățimea textului.
  4. Adăugarea unei subliniere.

Schimbăm sau adăugăm parametrii stilului în consecință. Ar trebui să iasă așa.

Toate modificările vor apărea imediat pe site.

Sarcina mea acum nu este să predau aspectul, acest lucru va dura mult timp și articole, ci să arăt însuși principiul modului de a face un șablon unic.

Deci, cu toate celelalte elemente, aduceți-l la perfecțiune. Vă arăt ce s-a întâmplat în cadrul acestui articol.

Acest articol a răspuns la întrebarea cum să creați un șablon WordPress unic. Iar tema standard poate fi numită a ta.

Dacă aveți întrebări, vă rugăm să le lăsați în comentarii. Noroc.

Bună ziua, dragi prieteni și cititori – site!

Astăzi vă voi arăta cum să creați un șablon WordPress de la zero.

Sincer să fiu, nu m-am gândit niciodată că voi înțelege asta, dar setea de cunoaștere m-a învins. Dorința puternică de a înțelege dispozitivul și de a pune în aplicare o grămadă de idei m-a forțat să mă așez și să umplu toate golurile din capul meu.

În fiecare zi apar noi funcții și modalități de implementare a acestora în șabloanele WordPress. Desigur, este imposibil din punct de vedere fizic să studiezi totul și să ții evidența tuturor, dar a avea o idee despre cum funcționează totul va face mult mai ușor să navighezi pe orice subiect.

Pregătirea pentru crearea unui șablon pentru WordPress.

Înainte de a începe să creați un șablon pentru WordPress folosind , trebuie să vă conectați la un server activ de pe Internet sau local instalat pe computer.

Pentru a nu trebui să vă faceți griji cu privire la transferul fișierelor prin FTP, vă sfătuiesc să dezvoltați șabloane pe o mașină virtuală.

Din punctul de vedere al editării și editării codului, recomand cu căldură să utilizați Notepad++. Datorită evidențierii codului și unei interfețe simple, acest program este preferat de cel mai mare număr de webmasteri.

Accesați directorul rădăcină care conține instalările dvs. WordPress, accesați wp-content => teme și creați acolo un folder numit „New Theme 3.0”. În interiorul acestui folder plasați următoarele fișiere (extensii – PHP, CSS, PN G):

Step-1 style.css

Fișierul va conține toate elementele de stil ale șablonului WordPress. Îl vom folosi mai întâi pentru a declara numele șablonului, numele autorului, un link către site cu o descriere și un număr de versiune:

Aceste informații pot fi modificate în orice moment. Principalul lucru este că totul este comentat ().

Acum, în acest fișier, trebuie să creați câteva definiții de stil de bază, care vor fi ulterior implementate în unele fișiere PHP ale temei WordPress:

Acest cod folosește eticheta body doar pentru a specifica (defini) fonturile folosite pe site și culoarea de fundal (totul se schimbă pentru a se potrivi fiecărui gust). În continuare, declarăm atributele de stil pentru link, precum și unele dintre titlurile pe care le vom folosi pe parcursul temei noastre.

#wrapper - va fi responsabil pentru dimensiunea completă a paginii web. Cu #header, totul este evident, acesta este titlul, iar #blog, acestea sunt cele mai recente postări de pe pagina principală.

Stilurile de antet și subsol rămase # (anteturi) subsol și bara laterală vor fi aplicate fișierelor corespunzătoare numelor lor, pe care le vom analiza puțin mai târziu.

Pasul 2 header.php.

Acum, vom crea un fișier - care va conține sigla și navigarea obișnuită:

De fapt, nu are rost să explicăm acest cod în detaliu. Trebuie doar să rețineți că trebuie să fie prezent în toate temele WordPress. Dar, dacă sunteți interesat, vă spun.

La început, declarăm tipul de document și codul standard care va fi folosit pentru afișarea numelui site-ului introdus în setările de administrare WordPress. În continuare, există cod PHP care vă permite să lucrați cu comentarii în arbore.

Pasul 3 Adăugarea de navigare personalizată.

Acum că am codificat informațiile noastre de bază, putem adăuga un meniu de navigare personalizat. Dar mai întâi, trebuie să deschideți fișierul functions.php și să scrieți o funcție specială:

După cum puteți vedea, am comentat secțiunile codului. Prima parte, add_action , este folosită pentru a adăuga suport pentru un meniu personalizat, iar a doua parte înregistrează în sine zona principală a meniului. În continuare, să trecem la implementarea în sine în șablonul WordPress.

Pentru a crea un meniu, trebuie să adăugați linia sub codul scris anterior în fișier:

Să o descompunem puțin. Funcția principală care este folosită aici este wp_nav_menu. Variabilele sort_column , container_class și theme_location sunt folosite ca argumente. Sort_column - garantează ordinea de afișare, care este setată în panoul de administrare. Container_class - vă permite să vă selectați meniul. Ei bine, theme_location atribuie pur și simplu meniului primar valorile pe care le manipulăm în timp real.

Pasul 4 Stilul de navigare pentru șablonul WordPress.

Datorită acțiunilor anterioare, tema noastră WordPress a dobândit o navigare personalizată. Dar meniul obișnuit pare simplu și nu atrăgător. Pentru a remedia acest lucru, vom crea o clasă de navigare în fișierul .

După cum puteți vedea în .nav , am făcut declarații de bază, cum ar fi culoarea de fundal, lățimea de navigare, alinierea și poziția elementului pe monitor. Apoi, setăm ordinea de plasare a elementelor principale și a ferestrelor pop-up.

Pasul final este să adăugați stiluri pentru link-uri din meniul drop-down:

În .nav ul ul, setăm poziția la absolut și facem primul link dropdown 100%, astfel încât să apară sub cel principal. De asemenea, am schimbat fundalul ferestrei drop-down pentru a o face diferită de cea existentă. Atributul z-index:99999 a fost adăugat la valorile generale, ceea ce face ca linkurile drop-down să se deschidă deasupra altor obiecte.

În acest moment, adăugarea de stiluri pentru meniul personalizat al șablonului WordPress este completă.

Pasul-5 index.php.

Fișierul index.php va fi responsabil pentru pagina principală a site-ului nostru. Acesta va conține codul pentru a activa antetul, subsolul și bara laterală, despre care vom vorbi mai târziu. De asemenea, va avea funcția de a include cele mai recente postări de blog și de a afișa miniaturile corespunzătoare acestora.

Următoarele linii de cod sunt folosite pentru a afișa toate informațiile din , sidebar.php și footer.php unde le plasați în șablonul WordPress:

În principiu, înțelegerea acestui cod nu este atât de dificilă. După ce apelăm la , folosim #blogul nostru, care a fost creat inițial în . Apoi adăugăm o buclă pentru afișarea celor mai recente postări de blog și codul pentru antet, pe care îl includem

.

Aici, există o bucată de cod care afișează miniaturile în postările de pe pagina principală a blogului. Deocamdată, este inactiv, dar următorul pas este să folosești functions.php pentru a-l face să funcționeze.

În al cincilea pas, am adăugat o bucată de cod care este responsabilă pentru afișarea miniaturilor postărilor pe pagina principală a blogului. Momentan nu se întâmplă nimic de genul acesta, deoarece este dezactivat. Pentru a-l activa, trebuie să deschideți fișierul functions.php și sub codul meniului de navigare instalat anterior, scrieți următoarele:

După ce a examinat codul cu atenție, scopul său devine imediat evident. Prima linie adaugă suport pentru miniaturi temei dvs. WordPress, iar a doua linie stabilește dimensiunile exacte ale imaginii.

Pasul 7 sidebar.php.

Cred că ați ghicit că fișierul sidebar.php va afișa toate informațiile pe care vrem să le vedem pe bara laterală. Deoarece l-am folosit deja în index.php, tot ce rămâne este să plasăm codul într-un fișier și bara noastră laterală va fi afișată pe pagina principală a site-ului:

Da, acesta este tot codul pe care trebuie să îl adăugați la sidebar.php pentru a-l face funcțional. Acum, voi explica semnificația lui.

Folosind div, apelăm stilurile din fișier, iar codul de mai jos ne oferă posibilitatea de a plasa widget-uri din zona de administrare WordPress, în secvența dorită.

Dar, la fel ca multe funcții, pentru ca acesta să funcționeze, trebuie să scrieți următorul cod în fișierul functions.php:

Acest cod îi spune pur și simplu WordPress să înregistreze bara laterală pe care am declarat-o în sidebar.php. Pentru informații generale, WordPress poate rula cu ușurință mai multe bare laterale într-o singură temă.

single.php este ceea ce va fi folosit pentru o pagină de postare. Codul de mai jos va fi foarte asemănător cu cel pe care l-am pus în index.php. Singura diferență este că am adăugat un șablon de comentarii cu un div și codul care ar trebui să includă comments.php:

Odată cu lansarea WordPress 3.0, dezvoltatorii au decis să ușureze viața autorilor de teme și șabloane WordPress. Au trecut la un standard unic pentru formularele de comentarii.

Codul de mai jos ar trebui să fie plasat în fișierul comments.php:

Acest lucru va adăuga un formular standard de comentarii la postările tale.

În fișierul page.php, vom plasa codul care va fi responsabil pentru paginile statice ale site-ului nostru. Va fi aproape identic cu cel care a fost plasat în single.php. Singurele modificări sunt eliminarea șablonului de comentarii și adăugarea de cod care procesează paginile mai degrabă decât postările. Toate celelalte vor fi la fel:

Fișierul category.php este folosit pentru a afișa mesaje dintr-o anumită categorie sau arhivă pe care o accesează cititorul. Aici, cea mai mare parte a codului va fi similară cu page.php și single.php pe care le-am codificat mai sus, cu excepția bitului de la început:

Fragmentul de cod de mai jos este singurul lucru pe care l-am adăugat după bucla principală:

Aici folosim o mulțime de declarații if/elseif în PHP care arată ceea ce vezi pe blog. De exemplu, dacă ne uităm la o categorie numită - „”, atunci aceasta va fi afișată în Arhiva h2 din categoria: „” în fața tuturor intrărilor, defalcându-le după dată sau autor.

Pasul 12 Configurarea fundalului site-ului.

Odată cu apariția WordPress 3.0, a fost creată o caracteristică care face posibilă schimbarea fundalului site-ului din panoul de administrare, folosind o imagine sau o culoare obișnuită. Pentru a face acest lucru, trebuie să inserați următorul cod în fișierul functions.php:

Deci, fundalurile personalizate sunt incluse. Ca bonus, vom adăuga mai jos un cod care face disponibile link-uri către arhive, comentarii și etichete din fluxul RSS:

Pentru a termina crearea șablonului WordPress, vom adăuga o bucată de cod la footer.php care folosește #footer care a fost declarat în . Subsolul nostru va conține doar informații de bază despre drepturile de autor, precum și un flux RSS de știri și comentarii:

Aceasta completează crearea celui mai simplu șablon (temă) pentru WordPress.

Pentru a-i verifica funcționalitatea, puteți descărca arhiva cu tema creată și o puteți activa pe resursa dvs.:

Ai reușit să creezi primul tău șablon pentru WordPress?

Prieteni, în timp ce scriu o nouă postare, puteți citi următoarele:

Asta e tot pentru azi.

Oricine i-a plăcut articolul se poate abona la actualizările blogului pentru a primi notificări despre lansarea de materiale noi în căsuța de e-mail.

Până la articole noi...

Salutări, Denis Chernikov!

Interesant pe tema:

Vă rugăm să faceți o faptă bună și să spuneți prietenilor tăi despre blog:

96 de comentarii Ce crezi?

    Multumesc mult pentru articol! Informații foarte utile pentru tinerii designeri de layout! Am citit un articol despre rap... =)

    Denis Cernikov a răspuns:
    3 noiembrie 2012 la 14:38

    Te rog, Alexandru! Am stat trei zile pufând și pufând peste el, am vrut ca toată lumea să înțeleagă totul! Sper ca am reusit! Regele tipul rap!

    Alexander Krasiliy a răspuns:
    3 noiembrie 2012 la 15:13

    Da, am observat că articolul nu este mic și există o mulțime de mici nuanțe. Dacă nu le iei în calcul, atunci totul va merge prost! Am un prieten care face lucrări de amenajare pură, stă la birou și salariul este decent, în jur de 4000-5000 UAH. Mai mult, este autodidact! Deci am dorință, dar nu suficient timp... =(

    Arhiva nu a putut fi instalată. PCLZIP_ERR_BAD_FORMAT (-10): Imposibil de găsit semnătura Sfârșitul înregistrării directorului central

    Asta se scrie după ce am vrut să testez acest subiect. Ce s-a întâmplat?

    Cu respect și recunoștință, Evgeniy!

    Multumesc pentru articolul util. După părerea mea, este mai bine să refaci o temă gata făcută pentru tine.

    Denis, șablonul s-a dovedit a fi puțin îngust, pe pagina principală din subsol există o mulțime de semne de întrebare în loc de o inscripție, iar editarea intrării este afișată și numai cu semne de întrebare. Asa ar trebui sa fie? și nu este încă în meniul de sus al paginii principale și este incomod să intri în panoul de administrare, doar prin editorul articolului. Dar, în principiu, este foarte bun și de înțeles, mulțumesc.

    Iulia a raspuns:
    4 noiembrie 2012 la 6:47

    Nu știu ce este în neregulă cu șablonul, dar fundalul instalat nu este vizibil pe blog.

    Și încă ceva. Nu tot codul este vizibil pe capturi de ecran.

    Dar oricum, multumesc pentru articol! esti bine facut! Noroc în viitor!

    Salutări, Evgeniy!

    Multumesc pentru informatii. Cu siguranță o voi încerca.

    Denis, mi-am eliminat vechea temă și am instalat una complexă și nouă. Multe dintre fișierele pe care le descrieți lipsesc, de exemplu, single.php, page.php și category.php. Prin urmare, este dificil să știi ce să faci într-o astfel de situație. Dar pozele cu miniaturi m-au interesat. Când sunt pe pagina principală, nu pot vedea pozele. Dar de îndată ce introduceți un spațiu în căutare și începeți căutarea, toate miniaturile apar imediat. Care crezi că ar putea fi motivul?

    Salut Denis! Ei bine, asta este deja acrobație! Creați-vă propriile teme WordPress în loc să descărcați prostește un șablon! Dar încă nu am timp să încerc și eu acest subiect. Mai sunt multe de făcut pentru a implementa ceea ce este interesant în designul site-ului dvs. (săgeată în sus, colț pliabil etc.).

    Denis, subiectul este util, iar ochii mei se tem...

    Marcat pentru moment...

    Am venit la tine din întâmplare, dar mă bucur mult!!! Multumesc foarte mult pentru informatie.

    Articolul este foarte relevant, cel puțin pentru mine. Recent m-am întrebat cum să-mi creez propria temă pentru WordPress (șablon) și am găsit acest program - Artisteer. Adevărat, acest program este plătit, DAR, nu pentru ruși dacă înțelegeți ce vreau să spun.

    Denis, ai încercat să schimbi culoarea barelor laterale? sau cum să faci asta mai detaliat, în css

    Multumesc mult pentru articol. Am căutat informații potrivite pentru a personaliza un șablon WP. În cele mai multe cazuri, doar fraze generale și fără detalii, dar pentru tine este o altă chestiune!

    Denis, codul tău se rupe pe alocuri din cauza dimensiunii imaginii... Dar fericirea a fost atât de aproape!

    Grozav, multumesc foarte mult! Am crezut că am înțeles greșit ceva.

    Denis, salut!

    Mulțumesc foarte mult pentru lecție. Am reușit să-mi implementez designul) Dar din anumite motive a existat o problemă cu inserarea fotografiilor în postări - din anumite motive, încadrarea textului în jurul fotografiilor nu funcționează. Este scris asta undeva în șablon? Pur și simplu nu înțeleg ce este în neregulă... nu au mai fost niciodată probleme de genul acesta.

    Vă mulțumesc anticipat!

    Denis Cernikov a răspuns:
    19 martie 2013 la 15:45

    Bună, Lyudmila!

    Am scris o postare excelentă special pentru asta. Acesta arată cum să împachetați imagini și videoclipuri în postări. Căutați prin căutare sau căutați în lista de articole.

    Lyudmila a răspuns:
    19 martie 2013 la 15:57

    Bine, multumesc!

    Din punctul de vedere al editării și editării codului, recomand cu căldură să utilizați Notepad++.

    Folosesc Sublime Text 2 - ceva între NotePad++ și binecunoscutul TextMate (Mac OS). Trag proiectul în fereastră și apare ca un arbore. Foarte confortabil! Plus o grămadă de alte funcții care fac viața mai ușoară decât NotePad++! Recomand cu incredere))

    Denis, nu am înțeles nimic la prima etapă. De unde pot obține toate aceste coduri? copiați de pe ecranele dvs. de imprimare? Poate pot obține un șablon de undeva și să-l editez?

    Mulțumesc foarte mult! Voi încerca să fac totul așa cum este scris! Aspectul individual este mult mai bun))

    Bună seara. Sunt începător și nu prea înțeleg cum să îmi „Creați folderele și fișierele necesare” „În acest folder plasați următoarele fișiere (extensii – PHP, CSS, PNG)” Le-am tastat prin intermediul Notepad++ și cum să le transferăm ???

    Salut din nou...cum pot face asta????:

    În interiorul acestui folder plasați următoarele fișiere (extensii – PHP, CSS, PNG):

    Fișierele necesare sunt create pe desktop-ul computerului folosind un notepad obișnuit, cu extensia necesară atribuită.

    Nu-mi dau seama cum să plasez fișierele ÎN-UN DOSAR. Când le copiez din Notepad, apar prostii. Vă rugăm să explicați. Exact cum se transferă din Notepad ++ în folderul de fișiere.

    De ce am un avatar rău? În general sunt amabil. Cum îl pot schimba???

    Salut Denis! Sunt un începător, vă rog să-mi spuneți cum pot crea o temă în Word Press, tema mea nu este afișată în Aspect/Teme...((((

    Multumesc, articolul a fost de mare ajutor!

    doar adăugați-l la footer.php, altfel panoul de administrare nu va fi vizibil fără el.

    Denis, o zi bună!

    Sincer să fiu, nu am înțeles nimic din ce s-a scris... Meritul pentru asta nu este al tău - nu am cunoștințe absolut zero în acest domeniu și pentru mine notele tale s-au dovedit a fi o scrisoare chineză... I' cer fie niște clarificări (dacă permiteți), fie pur și simplu să vă șterg comentariul :)

    Cum pot schimba numele șablonului care este afișat în meniul din stânga al panoului de administrare pentru unele teme?

    Am încercat să vă descarc șablonul - nici fundalul și nici antetul nu se modifică - datele sunt introduse, culoarea este selectată - dar nu se întâmplă modificări pe site :)))))

    Buna ziua! Ați putea minimiza subiectul pentru mine pentru o taxă rezonabilă? Am o idee despre cum vreau să văd site-ul dvs., am fotografii pentru temă, dar nu am abilitățile de a lucra cu Photoshop și HTML

    Sergey a răspuns:
    23 martie 2014 la 1:50

    Denis, imi cer scuze degeaba, nu traiesti in layout, ai reusit sa desenezi o astfel de capodopera in doar 3 seri, acum 2 ani am adunat astfel de informatii putin cate putin si iata un astfel de link de comoara catre tine in contact și o plecăciune profundă pentru munca depusă, există într-adevăr unele neajunsuri. Dar totul este bine chiar și cu toate lucrurile mărunte, acest articol mi-ar fi luat 2 ani, oh, cât m-ar fi ajutat cu primul meu proiect. Aveți ceva în JavaScript în arsenalul dvs. Doar că oamenii de nivelul dvs. de educație sunt întotdeauna mai interesați să citească și să studieze informații.

    Denis Cernikov a răspuns:
    23 martie 2014 la 12:12

    Serghei, uneori îmi câștig existența cu aspectul, dar nu-mi place să caut codurile deja proaste încercând să găsesc firul care a ucis întregul site! Îmi este mai ușor să fac lucruri de la zero decât să caut erori pe site-urile clienților. Iar pentru scenarii, am un maestru excelent care face totul cu competență și frumos!

    Sergey a răspuns:
    23 martie 2014 la 23:59

    Nu, nu am nevoie de un programator, ci de informații pentru un demon personal. De fapt, am văzut deja o secțiune întreagă despre Javascript pe site-ul dvs. În general, vă mulțumesc pentru resursa dvs., foarte informativă.

    Ajutor, nu pot edita styles.css din panoul de administrare. Mă duc la „aspect - editor”, selectez fișierul de stil, dar se deschide gol. Totul poate fi editat prin FTP, dar acest lucru nu este convenabil pentru mine.

    ajută-mă să încarc un site web personalizat pe WP (voi plăti)

    Denis, mulțumesc foarte mult pentru articol! Informații foarte valoroase și utile. Cu siguranță îl voi folosi când îmi creez șablonul de la zero.

    Dar deocamdată a fost aleasă o temă gata făcută pentru site, iar eu sunt un începător complet... V-aș fi foarte recunoscător pentru ajutorul dvs! Așa că, aveam nevoie să afișez știri doar din categoria „A” pe pagina „ A". Am copiat pagina index.php, am adăugat o linie de cod la ea și am selectat „A” ca șablon pentru pagină. Acum doar înregistrările necesare sunt afișate pe el, dar tot designul a dispărut...) pentru ca designul acestei pagini să nu difere de designul site-ului, trebuie să adăugați ceva la foaia de stil? Sau am făcut totul greșit în primul rând? Mulțumesc)

    Denis Cernikov a răspuns:
    30 martie 2014 la 21:35

    Elena, nu dau astfel de sfaturi! Nu am idee ce faci acolo și nu este întotdeauna clar din descriere!

    Elena a raspuns:
    1 aprilie 2014 la 16:51

    Denis, voi schimba întrebarea: se pot afișa numai articole din categoria „A” pe pagina cu numele „A”, iar articolele doar din categoria „B” pe pagina cu numele „B”? Mulțumesc.

    Sergey a răspuns:
    30 martie 2014 la 22:37

    Elena Nu sunt sigură că asta ți se va potrivi, dar ți-aș rezolva problema cu ajutorul a 2 plugin-uri Display Widgets este un plugin care determină afișarea widget-urilor pe orice pagină de care ai nevoie, iar acest Recent Posts Widget Extended face un frumos ieșire de știri, dar repet că aș face asta

    Sergey a răspuns:
    30 martie 2014 la 22:41

    Totuși, după ce am citit și regândit-o din nou, mi-am dat seama că această opțiune nu este prea potrivită pentru întrebarea ta, Elena.

    Elena a raspuns:
    1 aprilie 2014 la ora 17:16

    Serghei, mulțumesc pentru răspuns! Am încercat pluginul Recent Posts Widget Extended. Un lucru util) As dori exact aceeasi iesire de articole, dar nu in widget-uri, ci pe pagina principala) Multumesc!!

    Denis, ajută-mă să înțeleg acest subiect.

    Subiectul tău din postare a fost luat ca bază. Am refăcut totul după mine, totul mi se potrivește, dar nu se văd comentarii. Există un formular de comentarii, trec prin moderare, dar după aprobare arată doar numărul de comentarii la postare și formularul în sine, dar comentariile nu sunt vizibile.

    Am crezut că am frecat ceva în timp ce lucram cu fișiere, dar nu...

    Am instalat originalul dvs., aceeași problemă, spuneți-mi care ar putea fi problema, v-aș fi foarte recunoscător.

    PS. Cred că poate problema este că motorul a fost actualizat și după actualizare ceva a mers prost. Există o altă opțiune pentru a încerca să schimbi versiunea php a hosterului.

    Denis, mulțumesc foarte mult pentru informațiile care sunt ușor de înțeles. De mult timp caut un site cu template-uri standard care ar putea servi drept surse pentru orice subiect. Peste tot este descris astfel: este creat un fișier index.html, care este apoi tăiat și distribuit în părți în foldere .php. În același timp, textul obișnuit și punctat este plasat în index.html pentru eșantion. Dar nici un subiect nu conține inițial vreun text (este scris de utilizator după crearea unei pagini sau postare). După articolul tău, totul a căzut la loc. Fragmente separate ale mozaicului din capul meu formau o singură imagine. Mulțumesc din nou!

    Bună ziua, Denis, am citit articolul și am făcut totul așa cum ai scris, DAR folosind notele și culorile tale, TOTUL A FUNCTAT. Asta e bine))

    ÎNTREBARE: Cum să mutați bara laterală astfel încât să fie în stânga și a doua întrebare: aveți un articol despre cum să vă puneți propriile imagini în șablon (adică există un design în PSD deja decupat, eu doriți să-l îmbinați cu șablonul).

    Multumesc anticipat pentru raspuns.

În acest articol vă voi spune cum să faceți un șablon WordPress fără cunoștințe de programare. Va dura câteva minute pentru a vă crea tema. Vom lucra folosind un singur serviciu gratuit și simplu.

Cum să faci singur un șablon WordPress

Înainte de a crea un șablon WordPress folosind acest instrument, ar trebui să vă familiarizați cu ceea ce face fiecare opțiune. Iată funcțiile lor:

  • Numele site-ului.În această secțiune, puteți selecta culoarea titlului site-ului, puteți seta titlul în sine și, de asemenea, puteți specifica adresa URL a siglei. Logo-ul poate fi lăsat necompletat.
  • Marimea corpului. Selectați lățimea site-ului. Pentru afișarea corectă, este mai bine să o lăsați la valoarea implicită – 100%.
  • Locația barei laterale. Această opțiune vă permite să selectați dimensiunea și locația barei laterale. Există trei opțiuni de dimensiune pentru bara laterală din stânga și din dreapta, precum și opțiunea de a face tema fără bare laterale.
  • A treia coloană. Această opțiune activează o a treia coloană. Există diferite opțiuni.
  • Aspect meniu. Aici selectați aspectul meniului - există 4 opțiuni diferite.
  • Schema generală. Schema de culori este configurată - fundaluri ale diferitelor elemente, margini.
  • TextScheme. Schema de design text: culorile, stilurile și fonturile din toate părțile site-ului sunt configurate - anteturi, meniuri, textul principal și altele.
  • Nor de etichete. Puteți activa și dezactiva norul de etichete din bara laterală.
  • Arhive și căutare. Afișarea arhivelor și căutarea pot fi configurate - afișați versiunile complete ale testului sau numai anunțurile.
  • Selectarea dreptului de autor.

Deci acum știi cum să faci un șablon WordPress. Tot ce mai rămâne este să-l obții. Pentru a face acest lucru, faceți clic pe butonul „Salvare” din partea de jos, apoi, unde era previzualizarea, faceți clic pe linkul „Fișiere împachetate: descărcați fișierul ZIP de temă” pentru a descărca arhiva temei pe computer. După aceea, îl puteți instala pe site-ul dvs. web.