Crearea unui șablon WordPress este mai ușoară decât ați crede. Pentru a face acest lucru, nu trebuie să aveți o experiență vastă în design sau programare site-uri web. În acest articol, vă vom prezenta elementele de bază ale creării propriilor teme WordPress de la zero.
De ce ați avea nevoie chiar să vă creați propriul șablon WordPress când puteți utiliza șabloanele disponibile în baza de date? Iată câteva motive care pot determina acest lucru:
- Puteți obține un site web unic sau o pagină de destinație diferită de concurenții dvs. Având în vedere milioanele de bloguri construite pe acest CMS, fiecare design standard este folosit de cel puțin o sută de ori.
- Libertate totală de acțiune în stadiul de dezvoltare. Puteți adăuga propria dvs. funcționalitate cu elementele de lucru de care aveți nevoie.
- Puteți utiliza diferite modele pentru diferite secțiuni ale site-ului, ceea ce nu este posibil atunci când utilizați un șablon gata făcut.
- Puteți face mai multe vizualizări și oferi vizitatorilor posibilitatea de a comuta între diferite subiecte, ceea ce va crește interesul și loialitatea față de resursa web.
- Simplitatea de a lucra pe WordPress îl face accesibil pentru mulți (tutorialele video de pe Internet vă vor ajuta). Aceasta înseamnă că dezvoltarea unei teme principale sau crearea personală a unei teme copil va economisi bani pe angajarea de designeri și programatori terți.
- Puteți profita de posibilitatea temelor copil - atunci când se fac ajustări pentru a duplica foile de stil style.css, în timp ce fișierul principal rămâne neatins. Acest lucru vă permite să anulați rapid modificările în cazul în care acestea nu reușesc și, de asemenea, să nu pierdeți munca la actualizarea temei principale.
Instrucțiuni scurte
Desigur, nu veți putea învăța pe deplin cum să creați un șablon de pagină cu un singur articol. Pentru început, este important să înțelegeți elementele de bază - cum sunt realizate cele mai simple teme. Pe baza acestora, poți deja să fii creativ și să creezi o pagină de destinație sau un site web conform dorințelor tale. Acum vă vom oferi o scurtă foaie de cheat cu instrucțiuni pas cu pas - vă va ajuta să înțelegeți cum să creați un site web.
Pasul unu: munca pregătitoare
Înainte de a începe lucrul, trebuie să vă asigurați că aveți un editor de text (cel mai simplu este Notepad sau Nodepad++, mai ales că le puteți descărca gratuit). Următorul pas este să instalați motorul WordPress și suita Denwer pe computerul dvs. local. Denver este un pachet de instrumente esențiale pentru programatori. Cu ajutorul lor, procesul de dezvoltare și modificare a site-urilor web este mult facilitat și accelerat. Acest videoclip vă va arăta cum să îl instalați:
Pasul doi: creați un nou folder cu temă
Să mergem la directorul dorit. Cel mai adesea urmează următoarea cale: . Toate temele sunt stocate aici - atât standard, cât și personalizate. Intrăm în el și creăm un folder nou. Îl numim, de exemplu, „MyFirstTheme”.
Acum accesați un folder nou și asigurați-vă că adăugați două fișiere realizate prin Nodepad++ sau alt editor. Acestea sunt index.php și style.css. Deocamdată, lăsați aceste documente să rămână goale, apoi vom începe să le completăm. De asemenea, adăugați folderul cu imagini la „MyFirstTheme”. unde puteți adăuga imagini pentru a decora șablonul.
Ulterior, puteți adăuga șabloane la „MyFirstTheme” pentru părți individuale ale site-ului: bară laterală (sidebar.php), site (header.php), postări pe pagini (single.php), comentarii (comments.php), etc. A setul de fișiere suplimentare depinde de structura pe care o planificați pentru resursa dvs. web.
Pasul trei: completarea index.php
Primul lucru de făcut este să completați fișierul index (index.php). Iată un exemplu de cel mai simplu cod, conform căruia site-ul va avea patru zone: antet, principal, bară laterală și subsol.
Titlul Site-ului
În fișier puteți înregistra orice elemente pe care doriți să le vedeți pe site-ul dvs. Mai multe informații despre scrierea codului index.php pentru a crea teme în WordPress pot fi găsite în videoclip:
Pasul patru: completați style.css
Acum trebuie să deschideți style.css, să adăugați și să completați următoarele câmpuri (în loc de ***, introduceți propriile informații despre site și proprietar). Datele introduse vor fi afișate în panoul de administrare.
/*Numele temei: ***
URI temei: http:// ***
URI autor: http:// ***
Descriere: ***
Ulterior, va fi posibilă introducerea diferitelor date și reguli în acest fișier care determină aspectul paginilor. De exemplu:
(informațiile din /**/ sunt comentarii, nu părți de cod)
În această etapă, este prea devreme pentru a seta parametri stricti de stil, dar atunci când lucrați în continuare cu fișierul, acest tutorial video va fi util:
Pasul cinci: împărțiți fișierele
Toate elementele specificate în index.php ar trebui să fie duplicate în fișiere separate. În pasul unu, în exemplu, pe lângă partea principală, au fost specificate antetul, bara laterală și subsolul - prin urmare, creăm propriile noastre documente pentru ele în format .php.
De exemplu, creați un fișier header.php, deschideți index.php. Găsim secțiunea corespunzătoare de cod și o lipim într-un fișier nou. Va fi:
Titlul Site-ului
Același lucru se procedează și pentru părțile rămase. Acest lucru ar trebui făcut pentru o navigare mai ușoară. Când există multe elemente ale viitorului site, fișierele separate vă vor ajuta să navigați mai bine pentru a verifica sau a face modificări.
Pentru ca fișierul index principal să fie în concordanță cu cele suplimentare, trebuie scrise următoarele în index.php sub blocurile pentru fiecare parte:
Mai jos este o listă de fișiere șablon standard utilizate de WordPress. Nu trebuie să le utilizați sau să adăugați propriile secțiuni:
- Antet – stilul antetului site-ului dvs.
- Comentarii – șablon pentru crearea de comentarii.
- Acasă – temă pentru pagina principală.
- Pagina - definește tema dacă creați pagini separate pe site
- Categorie – șablon pentru defalcarea categoriilor
- Data – definește stilul de afișare dată-oră.
- Arhivă – un șablon pentru o secțiune de arhivă cu materiale vechi.
- Căutare – un fișier care specifică parametrii de căutare pe site.
- 404 este un șablon pentru o pagină care raportează o eroare 404 Not Found.
- Subsol – definește stilul subsolului site-ului dvs.
Când rafinați ulterior fiecare element, veți avea nevoie de un tutorial video vizual. Iată câteva selecții care vă pot ajuta:
Antet în header.php:
Adăugarea conținutului:
Comentarii de stil:
Subsol de pe site:
Cum să faci schimbări în siguranță
Când trebuie să faceți modificări în paginile site-ului, există riscul de a scrie ceva incorect și de a nu putea să îl „retroduceți”. De asemenea, se poate întâmpla ca intrările din foaia de stil să dispară atunci când tema principală este actualizată.
Pentru a preveni acest lucru, puteți crea o temă WordPress pentru copii (subtemă) - aceasta este o copie a fișierului style.css care nu afectează fișierul principal (modificările într-unul nu anulează actualizările în celălalt).
Crearea unei teme copii WordPress este ușoară. Trebuie să creați un folder nou în directorul principal C:\WebServers\home\localhost\www\NAME_SET_DUR_INSTALL\wp-content\themes. În noul folder creăm propriul fișier style.css cu următorul conținut:
Numele temei: NUMELE SUBIECT
Șablon: NUME DOSAR ÎN TEMA COPIL
URI temă: COMPLETARE
Descriere: FILL IN
URI autor: FILL IN
/* import stilurile temei părinte */
@import url("../NUME/style.css");
/* Stilurile tale suplimentare */
Foo (culoare: roșu; )
Acum puteți merge la „Aspect›Teme” din panoul de administrare și puteți activa șablonul copil. În viitor, puteți lucra în noul fișier. În plus, o scurtă prezentare video pe tema șabloanelor pentru copii:
Astăzi, vom arunca o privire detaliată asupra procesului de creare a unei pagini de setări pentru o temă WordPress, folosind minunatul WooFramework ca exemplu.
Apoi, vom complica puțin sarcina, folosind puterea jQuery, vom îmbunătăți ușor funcționalitatea paginii.
WordPress este de departe cel mai popular sistem de management al conținutului (CMS). Mulți dezvoltatori aleg WordPress ca CMS, indiferent de tipul de proiect.
Acest sistem este foarte ușor de utilizat, dar îl puteți face și mai ușor activând panouri de control suplimentare pentru utilizatori. În loc să deschidă fișierele șablon PHP și să manipuleze codul, utilizatorii pot folosi pagina obișnuită de setări din panoul de control pentru a vă gestiona tema WordPress.
De exemplu, dacă tema dvs. are o schemă de culori roșu, albastru și verde, fiecare cu un anumit fișier CSS, ar fi mult mai ușor dacă utilizatorul ar putea selecta culoarea dorită dintr-o listă derulantă. Așadar, astăzi, veți parcurge procesul de creare și îmbunătățire a unei pagini de setări suplimentare pentru panoul dvs. de administrare WordPress.
Pasul 1
Înainte de a începe să creăm tabloul de bord, vom avea nevoie de o temă. Prin urmare, descărcați , cu fișierele sursă. Veți vedea o temă clasică WordPress ușor modificată. Copiați folderul „nettuts” (așa se va numi tema noastră) în folderul wp-content/themes. Dosarul ar trebui să conțină următoarele fișiere:
- functions.php (gol)
- index.php
- comentarii.php
- footer.php
- header.php
- rtl.php
- sidebar.php
- stil.css
- screenshot.png
- folder cu imagini care conțin două fișiere
Majoritatea codului nostru va fi localizat în fișierul functions.php.
Tema poate folosi opțional un fișier de funcții situat în folderul teme numit functions.php. Acest fișier acționează ca un plugin și, dacă este inclus cu tema dvs., este încărcat automat în timpul inițializării WordPress (atât paginile externe, cât și panoul de administrare).
Acest fișier ar trebui să fie folosit pentru:
- descrieri ale funcțiilor utilizate în diferitele fișiere șablon ale temei dvs
- Instalarea panourilor de control suplimentare care permit utilizatorilor să personalizeze culorile, stilurile și alte aspecte ale temei dvs.
Pasul 2
Acum, după ce ați descărcat și instalat tema propusă, accesați pagina „Aspect” - „Teme” și activați tema noastră nettuts.
Acum, trebuie să ne gândim la marcajul html pentru panoul nostru de control. Vom folosi această structură:
Lasă-mă să-ți explic totul aici. Grupurile de setări vor fi împachetate într-un bloc cu clasa „rm_wrap”, apoi într-un bloc cu clasa „rp_opts”. Apoi, în interiorul acestor blocuri, deschidem eticheta de formular, în interiorul căreia vor fi plasate toate intrările necesare. Fiecare secțiune de setări (Setări de bază, Setări pagina de pornire, Setări blog etc.) va fi amplasată într-un bloc separat cu numele clasei „rm_section”. Acest bloc va conține numele (pentru secțiunea de setări) și câteva blocuri cu intrări. Folosind clase speciale pentru blocuri, cum ar fi
Cea mai importantă parte din toate acestea este că nu va trebui să creăm tot acest cod manual - vom folosi puterea PHP ori de câte ori este posibil. Nu are rost să scriem codul manual atunci când avem bucle la dispoziție.
Pasul 3
Deschideți fișierul functions.php cu editorul de cod preferat (eu folosesc NotePad++) și lipiți următorul cod:
Acestea sunt două variabile PHP care conțin numele temei dvs. (în cazul nostru este Nettuts) și aliasul pe care îl specificați (în exemplul nostru este nt). Aliasul este folosit ca prefix la numele tuturor setărilor temei și este de obicei unic pentru fiecare temă.
În continuare, vom crea câteva rânduri de cod pentru a genera automat o listă de categorii WordPress, în loc să forțăm utilizatorul să introducă manual ID-ul. Lipiți următorul cod imediat după cel anterior:
$categorii = get_categories("hide_empty=0&order_by=name"); $wp_cats = matrice(); foreach ($categorii ca $category_list)( $wp_cats[$category_list -> cat_ID] = $category_list -> cat_name; ) array_unshift($wp_cats, "Selectate categorie");
Acest fragment de cod folosește funcția încorporată wordpress get_categories pentru a obține toate categoriile și apoi folosește o buclă foreach pentru a le stoca în variabila $wp_cats. Apoi opțiunea „selectate categorie” este adăugată la matrice.
Pasul 4
Acum este timpul să creăm o listă de setări pentru tema noastră. Lipiți următorul cod în fișierul functions.php:
$opțiuni = array(array("nume" => "Setări", "tip" => "titlu"), matrice ("nume" => "Setări de bază", "tip" => "secțiune"), matrice ( "type" => "deschide"), matrice ("name" => "Schema de culori", "desc" => "Selectați schema de culori a temei", "id" => $shortname . "_color_scheme", "type" = > „select”, „opțiuni” => matrice („albastru”, „roșu”, „verde”), „std” => „albastru”), matrice („nume” => „Adresa URL a siglei”, „desc” => "Introduceți un link către imaginea logo-ului", "id" => $shortname "_logo", "type" => "text", "std" => ""), matrice ("name" => ". CSS personalizat ", "desc" => "Doriți să utilizați propriul cod CSS Lipiți-l în acest câmp", "id" => $shortname . "_custom_css", "type" => "textarea", "std? " => "" ), array ("type" => "close"), array ("name" => "Home page", "type" => "section"), array ("type" => "deschidere "), array ( "name" => "Imagine în antet, pe pagina principală", "desc" => "Introduceți adresa URL a imaginii care va fi folosită în antet", "id" => $shortname ."_header_img", "type" => " text", "std" => ""), array ("name" => "Categoria paginii de pornire", "desc" => "Selectați categoria în care vor fi postările publicat", "id" => $shortname _feat_cat", "type" => "selectare", "opțiuni" => $wp_cats, "std" => "Selectați categoria"), matrice ("type" => „închidere”), matrice („nume” => „Soclu”, „tip” => „secțiune”), matrice („tip” => „deschis”), matrice (“nume” => „Text cu drepturi de autor”, "desc" => "Introduceți textul care va fi postat în partea dreaptă a subsolului. Puteți utiliza HTML", "id" => $shortname."_footer_text", "type" => "text", "std" => ""), array("name" => "Cod Google Analytics", " desc " => "Aici puteți plasa codul Google Analytics, sau orice alt contor", "id" => $shortname."_ga_code", "type" => "textarea", "std" => ""), array( "name" => "Favicon", "desc" => "Favicon este o pictogramă pixel care reprezintă site-ul dvs.. Introduceți adresa URL a imaginii cu extensia .ico", "id" => $shortname."_favicon ", "type " => "text", "std" => get_bloginfo("url") ."/favicon.ico"), array("name" => "Adresa URL Feedburner", "desc" => "Feedburner este un serviciu Google , care controlează fluxurile RSS. Lipiți adresa URL a Feedburner aici pentru a permite cititorilor să-l vadă pe site-ul dvs.", "id" => $shortname."_feedburner", "type" => "text", "std" =. > get_bloginfo("rss2_url"), array("type" => "close"));
Aceasta a fost o bucată de cod destul de mare care merită o mică clarificare. Asa de:
- Variabila $options PHP stochează întreaga listă de setări pentru tema noastră.
- Lista de setări constă din mai multe matrice, fiecare dintre ele conținând o cheie „tip” pentru a determina tipul de setare și modul în care este afișată.
- Lista noastră de setări începe cu matricea „type” => „title” - care va fi folosită pentru a afișa numele și titlul temei în titlul paginii.
- Fiecare secțiune (Setări de bază, Pagina de pornire, Subsol) are o listă separată de setări.
- Începem o nouă secțiune prin închiderea oricăreia dintre secțiunile anterioare și declarând noua secțiune folosind array(„name” => „Footer”, „type” => „section”).
- Fiecare opțiune poate conține următoarele setări:
Nume: Numele câmpului de text.
desc: O scurtă descriere a câmpului pentru utilizator.
id: ID câmp, prefixat cu alias. Acesta va fi folosit atât pentru a înregistra setarea, cât și pentru a o accesa.
tip: tip de intrare - text, select sau textzona
Opțiuni: folosit pentru a declara o serie de setări pentru un câmp din lista derulantă.
std: Valoarea implicită a câmpului, utilizată dacă nu sunt specificate alte valori.
Pasul 5
Încercați să vă conectați la tabloul de bord WordPress. Nu veți găsi nicăieri setările pe care le-am specificat, așa că cum le putem afișa? Adăugați următorul cod în fișierul functions.php:
Funcția mytheme_add_admin())( global $themename, $shortname, $opțiuni; if($_GET["pagină"] == nume de bază(__FILE__))( if("salvat" == $_REQUEST["acțiune"])( pentru fiecare ( $options ca $value)( update_option($value["id"], $_REQUEST[$value["id"]]); ) foreach ($options ca $value)( if(isset ($_REQUEST[$value) [ "id"]]))( update_option($value["id"], $_REQUEST[$value["id"]]); )else( delete_option($value["id"]); ) ) antet( " Locație: admin.php?page=functions.php&saved=true" ) ) else if("reset" == $_REQUEST["action"])( foreach($opțiuni ca $valoare)( delete_option($) value ["id"]); header("Locație: admin.php&page=functions.php&reset=true"); funcția mytheme_add_init() ( )
Această funcție este folosită atât pentru a actualiza setările în sine, cât și pentru a adăuga o pagină în panoul de control. Dacă setările au fost salvate (determinate de salvarea variabilei ascunse), atunci toate setările sunt actualizate cu valorile specificate. Dacă, totuși, setările au fost resetate (determinate folosind o altă resetare variabilă ascunsă), atunci toate setările sunt șterse.
Ultima linie a funcției adaugă o pagină de meniu - parametrii în ordine: nume și titlu, nivelul drepturilor utilizatorului pentru vizualizarea paginii, salvarea paginii și funcția folosită pentru afișarea/salvarea setărilor (în exemplul nostru numit mytheme_admin).
Observați că funcția mytheme_add_init este goală? Lasă-l să rămână așa cum este deocamdată, vom reveni la el mai târziu.
Pasul 6
Pagina de setări din panoul de control tot nu apare? Dar, încă nu am finalizat funcția mytheme_admim, care a fost menționată mai sus. Pentru a crea această funcție vom avea nevoie de codul de la pașii 6,7 și 8. Să începem.
Funcția mytheme_admin())( global $themename, $shortname, $opțiuni; $i = 0; if($_REQUEST["action"] == "salvare") echo "
setările temei ". $themename ." au fost salvati
setările temei ". $themename ." au fost resetate
Setări
Pentru o gestionare mai convenabilă a temei, puteți folosi meniul de mai jos
Aici este folosită bucla PHP foreach, fiecare tip de setări este determinat individual pentru fiecare caz. Pentru a face acest lucru, vom folosi o instrucțiune switch. Variabila din instrucțiunea switch este tipul curent al parametrului, case este tipul așteptat al parametrului. Probabil ați observat expresia „pauză” după fiecare caz? Această expresie este folosită pentru a preveni procesarea incorect a condiției. Când valoarea unui caz se potrivește cu o variabilă, toate cazurile ulterioare vor fi, de asemenea, executate. Adică dacă am definit case3, atunci pe lângă el se vor executa și case4, case5 etc. Dar nu avem nevoie de asta, așa că folosim break pentru a termina declarația switch.
Dacă valoarea curentă a parametrului este „deschisă”, nu se întâmplă nimic. Dacă valoarea curentă este „închis”, sunt plasate două blocuri de închidere. Valoarea parametrului „titlu” este folosită o singură dată - în textul introductiv înainte de setările temei. Pentru fiecare tip „text” (tip de intrare = „text”), „select” (listă derulantă) și „textarea” (numele vorbește de la sine), este afișată intrarea corespunzătoare. Atenție la blocaj
Pasul 8
Ne apropiem de sfârșitul acestei caracteristici destul de mari. Lipiți următorul cod:
Cazul „selectați” : ?>
/functions/images/trans.gif" class="inactive" alt=""/>
!}
Pentru tipul de configurare „secțiune”, folosim variabila contor $i. Acest lucru vă permite să urmăriți numărul secțiunii și să îl combinați cu numele butonului de trimitere, dând astfel fiecărui buton un nume unic. În plus, la sfârșitul secțiunii este adăugat un formular pentru a reseta toate setările. Imaginea va fi folosită pentru modificarea ulterioară a jQuery. Aceasta este ultima bucată de cod care va pune funcțiile noastre în acțiune:
Add_action("admin_init", "mytheme_add_init"); add_action(„meniul_admin”, „theme_add_admin”);
Acest cod adaugă o pagină suplimentară la tabloul de bord WordPress.
Pasul 9
Grozav, acum avem propria noastră pagină de gestionare, cu un element de meniu separat. Cu toate acestea, după ce am vizitat această pagină, vedem că nu totul este atât de bun pe cât ne-am dori. Dar nu contează, avem un mare ajutor - CSS! Creați un nou folder „funcții”, în folderul nettuts. În acest folder, creați un fișier nou - functions.css și inserați următorul cod în el:
Rm_wrap( lățime:740px; ) .rm_section( chenar:1px solid #ddd; border-bottom:0; background:#f9f9f9; ) .rm_opts label( font-size:12px; font-weight:700; width:200px; display :block; float:left; .rm_input ( padding:30px 10px; border-bottom:1px solid #ddd; border-top:1px solid #fff; ) .rm_opts small( display:block; float:right; width:200px ; culoare:#999; ) .rm_opts de intrare, .rm_opts select( width:280px; font-size:12px; padding:4px; color:#333; line-height:1em; background:#f3f3f3; ) .rm_input input: focus, .rm_input textarea:focus( background:#fff; ) .rm_input textarea( lățime:280px; înălțime:175px; font-size:12px; padding:4px; color:#333; line-height:1.5em; fundal: #f3f3f3; ) .rm_title h3 (cursor:pointer; dimensiunea fontului:1em; transformarea textului: majuscule; marginea:0; greutatea fontului:bold; culoare:#232323; float:stânga; lățime: 80%; umplutură: 14px 4px; ) .rm_title( cursor:pointer; border-bottom:1px solid #ddd; background:#eee; padding:0; ) .rm_title h3 img.inactive( margin:-8px 10px 0 2px; lățime: 32px; înălțime: 32px; background:url("images/pointer.png") no-repeat 0 0; plutește la stânga; -moz-border-radius:6px; chenar:1px solid #ccc; ) .rm_title h3 img.active( margin:-8px 10px 0 2px; width:32px; height:32px; background:url("images/pointer.png") no-repeat 0 -32px; float:left; -moz- border-radius:6px; -webkit-border-radius:6px; border:1px solid #ccc; .rm_title h3:hover img( border:1px solid #999; ) .rm_title span.submit dreapta; margine: 0; lățime: 14 px 0; rm_table th, .rm_table td.feature (border-color:#888; )
Cred că acest cod nu necesită nicio explicație, totul este extrem de simplu și clar. Bineînțeles că îl poți schimba după bunul plac.
Pasul 10
Acum că avem fișierul CSS gata, cum îl conectăm la pagină dacă nu avem acces direct la secțiunea document?
? Vă amintiți că am creat o funcție goală mytheme_add_init()? Ea este cea care ne va ajuta. Schimbați-l după cum urmează:Funcția mytheme_add_init() ( $file_dir = get_bloginfo("director_șabloane"); wp_enqueue_style("funcții", $file_dir."/functions/functions.css", false, "1.0", "toate"); )
Acest cod va include fișierul functions.css în secțiunea document
. Locația fișierului este determinată de folderul șablon.
Pasul 11
Aruncă o privire pe pagina noastră. Arată destul de bine, tot ce rămâne este să adăugați funcționalitate pictogramelor plus din anteturile secțiunilor. Pentru aceasta vom folosi jQuery. Creați un fișier nou rm_script.js în folderul nettuts/functions/folder. Lipiți următorul cod:
JQuery(document).ready(function())( jQuery(".rm_options").slideUp(); jQuery(".rm_section h3").click(function())( if(jQuery(this).parent() .next ("".rm_options").css("display")==="none") ( jQuery(this).removeClass("inactive").addClass("active").children("img").removeClass (" inactiv").addClass("activ"); else ( jQuery(this).removeClass("activ").addClass("inactiv").children("img").removeClass("activ").addClass (" inactiv"); jQuery(this).parent().next(".rm_options").slideToggle("lent");
Ce face acest cod? Odată ce DOM-ul este încărcat, toate blocurile cu clasa „rm_options” sunt restrânse. Apoi, când dați clic pe pictograma plus, clasa „inactivă” este eliminată și este adăugată clasa „activă”, care înlocuiește pictograma cu semnul minus. Când faceți clic din nou pe această pictogramă, are loc procesul invers. Pentru a restrânge/extinde blocuri, este folosită o funcție jQuery slideToggle destul de simplă. Pentru a conecta acest script la pagină, vom folosi funcția mytheme_add_init() cu care suntem deja familiarizați, modificați-o după cum urmează:
Funcția mytheme_add_init() ( $file_dir = get_bloginfo("template_directory"); wp_enqueue_style("functions", $file_dir."/functions/style.css", false, "1.0", "all"); wp_enqueue_script("rm_script", $file_dir."/functions/script.js", false, "1.0" )
După aceasta, scriptul ar trebui să funcționeze. Vezi cum arată pe pagină:
Pasul 12
Acum că pagina noastră de setări este complet gata, rămâne să vorbim puțin despre utilizarea setărilor în sine. Codul de utilizare a parametrilor arată astfel:
$var = get_option("nt_colur_scheme");
Cu ajutorul acestuia, vom putea schimba schema de culori a site-ului. Este destul de simplu:
/* Schimbați fișierul CSS în funcție de culoarea selectată */ /.css" /> /*Text de ieșire în subsol, puteți folosi etichete HTML */
Domeniul de aplicare este limitat doar de imaginația ta.
Cu acest articol continui o serie de lecții despre crearea de site-uri web folosind motorul WordPress. După instalarea unei noi teme pe blog, va trebui să o personalizăm pentru a se potrivi nevoilor noastre. Acest lucru nu este deloc greu de făcut. Dar pentru editarea unui șablon WordPress, trebuie, cel puțin, să știți cum funcționează și ce fișiere sunt responsabile pentru ce. După ce a studiat Structura șablonului WordPressși având cunoștințe de bază despre HTML și CSS, puteți deja edita șablonul de temă, schimbându-i aspectul și funcționalitatea. Dar mai întâi lucrurile.
Imediat după instalarea unei noi teme, blogul tău este puțin probabil să aibă un aspect atractiv. Pentru a remedia acest lucru, trebuie să vă personalizați tema WordPress adăugând și organizând toate elementele necesare pe paginile blogului dvs. Asadar, haideti sa începem personalizarea unui șablon de temă WordPress.
Configurarea unei teme WordPress (șablon).
Să intrăm Bara de instrumente() WordPress și va continua să-l studieze, examinând în detaliu toate punctele din secțiunea „Design”, care este responsabilă de apariția și editarea șablonului WordPress:
Următoarea filă este „Widget-uri”. Când trecem la el, următoarea imagine se va deschide în fața noastră:
În partea stângă vedem totul” Widgeturi disponibile„: RSS, Arhive, Calendar, Găsire, Tag Cloud, Ultimele postări, Titluri, Text etc. Bara laterală a blogului este indicată schematic în partea dreaptă. În funcție de structura șablonului WordPress, pot exista una sau mai multe bare laterale. Pe un blog, arată ca o bară laterală situată în dreapta sau în stânga și, eventual, pe ambele părți în același timp.
Pentru a umple bara laterală cu widget-urile de care avem nevoie, trebuie doar să selectăm widget-ul necesar cu butonul stâng al mouse-ului și, ținând-l țintă, trageți widget-ul în bara laterală de care avem nevoie. În același mod, puteți muta widget-urile în sus sau în jos în bara laterală în sine.
Ce înseamnă fiecare dintre widget-uri este suficient de clar din numele lor. Widgetul „Text” merită o atenție specială. Prin mutarea acestuia în bara laterală, se vor deschide câmpuri pentru introducerea datelor și un titlu. Aici puteți insera atât text obișnuit cu imagini, cât și diverse coduri HTML. De exemplu, contoare de statistici, blocuri și bannere publicitare, formulare de abonare etc. După completarea sau editarea widget-ului „Text”, faceți clic pe butonul „Salvare” pentru ca modificările să intre în vigoare. Widgeturile care nu sunt necesare pot fi eliminate făcând clic pe butonul „Șterge” sau trăgându-le înapoi la secțiunea „ Widgeturi disponibile„. Dacă trebuie să dezactivați temporar un widget, în timp ce salvați toate setările acestuia pentru utilizare ulterioară, trageți acest widget în jos spre stânga în secțiunea „ Widgeturi inactive„. Îl puteți returna oricând.
Urmează fila „Meniu”. După ce l-am deschis, ne aflăm pe pagina pentru crearea propriului meniu de blog cu o descriere detaliată a modului de a face acest lucru. Puteți include categorii, pagini și link-uri arbitrare în meniu, aranjandu-le în ordinea necesară, prin simpla glisare și plasare. Făcând clic pe butonul „Salvare meniu”, va fi creat meniul blogului.
Pentru ca meniul creat să apară în bara laterală, trebuie să mergeți la fila „Widget-uri” și să trageți widgetul „ Meniu propriu” în bara laterală. În consecință, dacă ați activat widget-urile „Categorii” și „Pagini” pe blogul dvs., acestea pot fi dezactivate. Trebuie să spun că puțini oameni folosesc meniul de pe blog.
Ultima filă „Editor” vă permite să editați fișiere șablon WordPress. După ce l-ați deschis, în dreapta veți vedea o listă cu toate fișierele șablon WordPress, adică structura acesteia. Când faceți clic pe oricare dintre aceste fișiere, conținutul acestuia se va deschide într-o fereastră pentru editare. După efectuarea modificărilor necesare, nu uitați să le confirmați făcând clic pe butonul „Actualizați fișierul”.
Așadar, am studiat secțiunea „Design” din panoul de administrare al blogului nostru și am descoperit setările temei (șablon) WordPress.
Este de remarcat faptul că aproape fiecare temă modernă are propriile setări. De obicei, acestea sunt plasate în panoul de administrare într-o secțiune separată cu numele subiectului.
Uneori, setările personalizate pentru un șablon de temă WordPress se găsesc ca elemente separate în secțiunea „Design”.
Cum să configurați o anumită temă ar trebui să fie descris în detaliu pe site-ul web al dezvoltatorului sau al localizatorului șablonului de pe care l-ați descărcat. Setările individuale ale temei WordPress vă permit să modificați cu ușurință, fără a interfera cu codul sursă al șablonului, elementele de design ale site-ului web (logo, fundal, fonturi, aspectul barei laterale etc.), să inserați bannere, butoane de rețele sociale și RSS, contoare de statistici, publicitate blocuri și multe altele. Vă sfătuiesc să studiați cu atenție aceste setări, mai ales dacă sunteți nou în HTML și CSS.
Atenţie! Este important să știți că, dacă ați făcut modificări la setările individuale ale șablonului, atunci când instalați o temă nouă, aceste setări trebuie să fie readuse la starea inițială. De obicei, în aceste scopuri există butoanele „Resetare” sau „ Restabiliți la valorile implicite„, în funcție de tema WordPress pe care o alegeți.
Acum să vedem în ce fișiere constă șablonul de temă și să studiem structura acestuia.
Fiecare dintre fișierele șablon WordPress este responsabil pentru proiectarea blocurilor individuale pe pagina web a site-ului. Apoi, ca un set de construcție, paginile de blog sunt asamblate din aceste blocuri într-un singur întreg. Deoarece temele (șabloanele) WordPress sunt create de diferiți dezvoltatori, structura acestor șabloane poate fi diferită. Unele fișiere șablon de temă trebuie să fie prezente pe fiecare pagină web, în timp ce altele sunt afișate doar în anumite cazuri.
În imaginea de mai jos puteți vedea structura aproximativă a unui șablon WordPress.
Iată o listă de fișiere care sunt de obicei prezente în toate șabloanele și o scurtă descriere a acestora:
- header.php (header) – este prezent pe toate paginile web și este responsabil pentru afișarea părții de sus a site-ului.
- index.php – este responsabil pentru afișarea conținutului paginii principale.
- single.php – afișează fiecare articol specific.
- page.php – conținutul unei pagini statice de site.
- categorie.php – un fișier care afișează postări dintr-o anumită categorie.
- tag.php – afișează o arhivă de postări după etichetă.
- archive.php – arhivă temporară de articole (pentru o lună sau un an). Uneori, acest fișier înlocuiește category.php și tag.php.
- search.php – afișează înregistrări ale rezultatelor căutării pentru site.
- comments.php – fișier șablon de comentariu.
- sidebar.php – coloana laterală a site-ului în care se află widget-urile. Pot exista mai multe bare laterale, în funcție de structura șablonului WordPress. Acest fișier este prezent pe toate paginile site-ului.
- 404.php este un fișier de eroare 404 care apare dacă este introdusă o adresă incorectă a paginii web sau nu există.
- functions.php – acest fișier conține de obicei funcții care sunt apelate atunci când se afișează un site sau când se lucrează cu panoul de administrare.
- footer.php (footer) – partea de jos a site-ului, prezentă pe toate paginile acestuia. Ne-am uitat deja la acest fișier șablon WordPress când am eliminat fișierele nedorite.
- style.css este un fișier de foaie de stil responsabil pentru designul extern al site-ului.
Acum știind Structura șablonului WordPressși pentru ce este responsabil fiecare dintre fișierele sale, puteți modifica aspectul și funcționalitatea unei anumite părți a site-ului.
Este important să înțelegeți că fără cunoștințe de bază de HTML și CSS, este mai bine să nu încercați să editați fișierele cu teme (șablon) WordPress. Și dacă tot trebuie să editați un fișier șablon, asigurați-vă că ați făcut mai întâi o copie de rezervă a acestuia. Apoi, dacă ceva nu merge bine, puteți oricând să restaurați fișierul original.
Aș dori să notez de la mine că editați șablonul WordPress Este mai convenabil nu din panoul de administrare al blogului, ci prin deschiderea fișierului în Notepad++, folosind o conexiune la serverul de găzduire printr-un client FTP. Puteți citi despre cum să faceți acest lucru în articolul „“.
Asta e tot pentru azi. Acum site-ul pe care l-ați creat va arăta mult mai atractiv. Ne vedem pe paginile blogului.
Lăsați comentariile voastre și nu uitați să faceți clic pe butoanele rețelelor sociale din partea de jos a articolului, astfel veți ajuta la dezvoltarea acestui blog. Vă mulțumesc anticipat!
Am lansat o nouă carte, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make them to Love with Your Brand.
Funcționarea temelor copiilor („fiice”) se bazează pe relația lor cu temele lor parentale („părinții”). Este important să luați în considerare că temele gratuite și plătite sunt inițial părinți, prin urmare, fiica le copiază parametrii și proprietățile și primește, de asemenea, un set standard al funcțiilor sale. În viitor, ținând cont de nevoile unei anumite resurse de Internet, setul acestor opțiuni poate fi extins.
Dacă atingem terminologia, atunci vorbim de un subiect aparte care capătă semnificația altuia, care acționează ca părinte. De ce sunt create? Pentru a modifica temele WordPress existente și astfel crește numărul acestora.
Care este diferența dintre „fiică”
O temă copil WordPress vă permite să faceți modificările și ajustările necesare. În continuare ne vom uita la cum să-l creăm, dar înainte de asta ne vom uita la diferențele cheie:
- Modificările aduse modificării părinte nu afectează modificarea copilului. De aici rezultă că, după dezvoltare, acestea sunt independente unele de altele.
- Derivatul funcționează numai dacă părintele este instalat, iar activarea lui are loc mai târziu.
- Filialele sunt legate doar de baza lor și nu sunt interconectate nici cu una, nici cu alta.
Este convenabil să lucrezi?
O temă pentru copii WordPress este o idee grozavă, cu o gamă largă de beneficii. Personal, l-am recomanda ca standard cu produse premium. Să enumeram doar câteva dintre avantaje:
- Ele salvează automat ajustările efectuate. Datorită acestui lucru, puteți face ajustări direct la cod, fără riscul ca setările să se piardă sau să se piardă în timpul actualizării.
- Lucrul cu ei este o pregătire excelentă pentru a trece la scrierea codului principal pentru variantele părinte.
- Flux de lucru îmbunătățit. Cu un singur cadru tematic la dispoziția dumneavoastră, puteți crea site-uri web de diferite complexități și funcționalități.
Deoarece aceasta este o continuare a celei părinte, setul de caracteristici și funcții este identic aici. Componentele principale:
- Director (dosarul/locația componentelor fișierului).
- „style.css”, unde sunt specificate proprietățile principale și suplimentare.
- „functions.php”, unde este scrisă definiția funcțiilor.
Nu există restricții privind adăugarea de șabloane, dar componentele enumerate trebuie să fie prezente în oricare.
Operațiune
„Fiicele” sunt localizate în propriul folder și au „functions.php” și „style.css” separate. Puteți scrie oricând fișiere auxiliare, dar această pereche este responsabilă pentru funcționarea corectă - fără blocări sau probleme.
Dacă aceste formate sunt utilizate corect, puteți edita aproape orice parametri inițiali, inclusiv stilul, elementele de aspect individuale, scripturile etc.
Dispozitivul tematic este similar cu straturile editoriale ale editorilor foto. Dacă un utilizator vă vizitează resursa de internet, o „fiică” se deschide în fața lui, iar apoi opțiunile și stilurile lipsă sunt încărcate de la părinte. În cele din urmă, cea mai mare parte a codului este transmisă de la părinte, dar trebuie modificat pentru a se potrivi cu setările copilului înainte de a putea fi utilizat.
Cum se creează
În primul rând, verificați dacă aveți tot ce aveți nevoie la dispoziție. Și anume, acces la FTP sau un manager de fișiere, acces deschis la panoul de control WordPress în sine. Asadar, haideti sa începem.
Pasul nr 1. Crearea unei teme pentru copii WordPress
Acesta este un proces destul de simplu. Dacă urmați instrucțiunile în detaliu, orice utilizator îl poate stăpâni.
În primul rând, creăm un folder pentru fiica noastră în directorul standard. Pentru ca directorul să aibă ordine și conținutul să fie sistematizat, este mai bine să denumești folderul după exemplul „Numele părintelui + copilul final”. Pentru comoditate, puteți adăuga numele unui anumit proiect pentru care creăm o temă. Principalul lucru este că numele directorului nu are spații, altfel acest lucru poate duce la erori. Un manager de fișiere sau un client FTP vă va ajuta să creați un folder nou. Astăzi, un astfel de client FTP precum FileZilla s-a dovedit bine.
De exemplu, să luăm drept bază „Twenty Seventeen”, care este familiar pentru mulți. Prefer să lucrez cu Managerul de fișiere, așa că calea mea către folderul creat arată astfel:
Facem următoarele:
Cu siguranță, ești convins că crearea este un proces ușor. Trebuie doar să urmați cu strictețe instrucțiunile și să lucrați cu abordarea corectă.
Pasul nr 2. Setări
Pentru a începe, modifica, completa, adapta „fiica” la solicitările și cerințele site-ului tău, trebuie să faci setările corect. Să ne uităm la el în ordine.
- Mai întâi trebuie să personalizați aspectul.
Pentru a face acest lucru, vom face ajustări la „custom.css”, care se află în director. Acest lucru se poate face printr-un client FTP, un editor de text obișnuit, un manager de fișiere sau un editor special WordPress ( îl puteți găsi deschizând „Aspect”, apoi „Editor”). Aici veți avea nevoie de cunoștințe minime despre regulile de utilizare a CSS, precum și de priceperea de a verifica elementele site-ului printr-un browser. De exemplu, pentru a schimba culoarea de fundal în „style.css”, scriem următoarea regulă CSS:
Următoarea imagine arată cum se va schimba designul site-ului după ce au fost făcute ajustările. Fundalul a devenit verde deschis:
În acest fel puteți edita orice elemente existente pe site.
2. Lucrul cu funcții.
Utilizarea și lucrul cu „fiice” oferă, de asemenea, avantajul de a putea menține două „functions.php” independente. Să vă reamintim că aceste fișiere sunt folosite pentru a elimina funcții vechi și pentru a adăuga funcții noi. Dacă sunt disponibile, nu trebuie să vă faceți griji cu privire la siguranța sau problemele în funcționarea documentului. Chiar dacă baza este actualizată, aceasta va rămâne neschimbată.
Pentru a adăuga o nouă opțiune, în fișier este scris și un nou cod PHP. De exemplu, codul de mai jos va elimina opțiunea de căutare WordPress.
Servicii speciale pentru a ușura munca dezvoltatorului
Puteți face procesul de creare mai ușor folosind o serie de plugin-uri speciale. Biblioteca WordPress oferă o selecție largă de plugin-uri, dintre care majoritatea sunt gratuite. Utilizarea pluginurilor simplifică foarte mult procesul de dezvoltare. Să ne uităm la cele mai populare plugin-uri.
- Copil Themify.
Acesta este cel mai simplu și mai ușor de utilizat plugin cu o interfață intuitivă. Multe setări aici pot fi făcute cu un clic pe un buton.
2. Configurarea temei pentru copii.
Aici puteți crea și o „fiică”, iar acest lucru va dura doar câteva clicuri. Editorul CSS de aici este destul de puternic, ceea ce vă permite să configurați funcționalități avansate. Pluginul identifică automat regulile cheie CSS și nu le afectează la editare.
3. _copil Tema Boilerplate.
Iată șabloane gata făcute pentru formarea „fiicelor”. Șablonul este numit simplu - „_child” - și este conceput special pentru a simplifica munca. Șablonul oferă o temă intuitivă și necesită doar să furnizați un link către „părinte”. Acest tip de șablon vă permite să creați opțiuni profesionale - 2 fișiere gata făcute au fost deja create aici, standard „functions.php” și „style.css”.
Primul are o funcție specială numită „aa_enqueue_styles()”. Opțiunea vă permite să creați o coadă de foi de stil, unde merg primele cele părinte, iar apoi copiii. Ca urmare, stilul celui din urmă este întotdeauna determinat de primul.
Majoritatea dezvoltatorilor leagă aceste tabele împreună în CSS, dar acest lucru face mai mult rău decât bine. Browserul durează mult timp pentru a încărca site-ul, deoarece trebuie să încărcați mai întâi stiluri din „părinte”, apoi din derivat. Dacă puneți foile de stil separat, sarcina browserului va fi mai ușoară și viteza de încărcare va crește.
Iată codul cu care puteți adăuga această opțiune:
Al doilea fișier are un antet de bază care conține informații speciale. Aceste informații îi permit WordPress să o recunoască ca foaie de stil „copil”. Prin urmare, este deosebit de important să scrieți codul pentru „style.css”:
Să rezumam
Nu contează nivelul tău de competență în programare sau experiența cu WordPress. Crearea unei teme copii WordPress este ușoară și nu există riscul ca setările să fie șterse după ieșire. Scriind un mic cod sau modificând ceea ce ați scris deja și făcând lucruri simple cu directorul, vă puteți schimba site-ul. Principalul lucru este să urmați instrucțiunile, trecând treptat de la un punct la altul. Nu uitați următoarele: dacă există actualizări pentru „părinte”, „fiica” nu se modifică, această regulă se aplică modificărilor aduse conținutului, setărilor și așa mai departe.
Experimentează, încearcă diferite opțiuni și caută-o pe cea mai bună pentru tine.
Dacă utilizați teme descărcate, atunci probabil că ați dat peste o pagină care este disponibilă în panoul de administrare și cu ajutorul acesteia puteți personaliza tema fără a edita codul temei în sine.
Astfel de pagini sunt adesea create pentru a face viața mai ușoară utilizatorilor unui anumit subiect. Datorită paginii de setări ale temei, utilizatorul poate ascunde anumite blocuri, poate schimba locația barei laterale, schemele de culori, poate adăuga propriile stiluri, poate specifica calea către noi imagini etc. Totul este limitat doar de imaginația celui care a creat o astfel de pagină pentru subiect.
Dacă creați un subiect de vânzare sau pur și simplu doriți să vă ușurați viața, atunci această metodă vă poate fi utilă. Într-una dintre lecții, am scris că poți afișa valori (contoare de vizitatori), publicitate etc., prin intermediul widget-urilor, creând locuri speciale pentru ele. Folosind pagina de setări a temei, puteți crea aceleași câmpuri în care puteți introduce orice text, cod sau link-uri.
În general, veți avea opțiuni suplimentare de temă pe care le puteți crea singur fără un plugin. Arata cam asa:
Voi scrie despre mai multe elemente ale unei astfel de pagini și voi explica cum să le folosesc. Am creat pagina de la o grămadă de alții. Am găsit multe altele, dar fiecare avea ceva care nu mi se potrivea sau nu funcționa. Unul nu avea casete de selectare sau casete de selectare, al doilea nu avea un mesaj că setările au fost salvate, mult text inutil etc. După ce am stat puțin și mi-am dat seama ce era, mi-am luat propria pagină pe care pot adăuga și elimina elemente fără probleme.
Să începem să facem pagina noastră de setări.
În primul rând, trebuie să decideți cum exact veți conecta codul paginii. Există două opțiuni.
Prima este simplă, adăugăm totul la sfârșitul tau funcții.php după ?> Și asta e tot.
A doua modalitate este de a crea un fișier setări.phpși adăugați tot codul la acesta, apoi conectați-l la funcții.phpîn felul următor.
Include("/settings.php");
Când creezi setări.php, înainte de a adăuga cod la acesta, asigurați-vă că este salvat în codificarea corectă - UTF-8 fără BOM. Cel mai bine este să editați fișierele în programul Notepadd++.
Acum să începem să adăugăm codul în sine. În primul rând, să ne înregistrăm funcția.
Acum să adăugăm pagina noastră la panoul de administrare din meniul din stânga.
// Adăugarea unei pagini de setări la funcția de meniu add_settings_page() ( add_menu_page(__(„Opțiuni temă”), __(„Opțiuni temă”), „gestionare_opțiuni”, „setări”, „pagină_setări_temă”); ) //Adăugarea de acțiuni add_action( "admin_init", "theme_settings_init"); add_action("admin_meniu", "add_settings_page");
Acum, când accesați partea de administrare, veți vedea acest element în meniul administrator. Aceasta va fi pagina noastră de setări.
Să adăugăm acțiuni și o funcție pentru salvarea opțiunilor paginii noastre
//Funcția de salvare a setărilor theme_settings_page() ( global $select_options; if (! isset($_REQUEST["settings-updated"])) $_REQUEST["settings-updated"] = false; ?>
Acum vom începe să adăugăm codul care va afișa elementele paginii noastre. Creați un div și adăugați blocuri în interiorul acestuia.
Primul element va fi titlul paginii, care va fi afisat chiar de la inceput, apoi un bloc in cadrul caruia va aparea un mesaj in care se spune ca setarile au fost salvate.
Configurarea unei teme
setarile au fost salvate
Acum tot codul
Configurarea unei teme
setarile au fost salvate
Pagina de setări este gata. Vă puteți uita la rezultatul final. În continuare, trebuie să afișăm rezultatele în locurile potrivite din subiect, apoi vom selecta sau vom intra în opțiuni.
Pentru a face acest lucru, mai întâi trebuie să ne activați funcția
Această linie trebuie scrisă de fiecare dată înainte de afișarea opțiunii
Imediat după lansare, adăugăm rezultatul opțiunii în sine. Arată aproape la fel pentru câmpurile de text și câmpurile de introducere, principalul lucru este să specificați corect numele, despre care am scris deja multe mai sus.
Pentru un logo, de exemplu, este așa:
Rezultatul final va arăta așa
Cred că acest lucru este clar. Dacă vrem să afișăm valoarea din pagina de setări, introducem codul de mai sus la locul potrivit, doar specificând corect numele. Deci afișăm pentru metrică și banner, schimbând doar numele în urmărire și banner, sau cele cu care vii, principalul lucru este că acestea coincid cu cele de pe pagina de setări.
Încă mai poți scoate un truc. Folosind exemplul opțiunii - Text în subsol, sugerez să adăugați o condiție - Dacă. Linia de jos este aceasta: inițial, textul din subsol este scris implicit, dar dacă utilizatorul introduce ceva în pagina de setări, atunci în loc de textul implicit, va apărea ceea ce a specificat utilizatorul.
Pentru a face acest lucru trebuie să scriem următorul cod:
/" title="" rel="homepage">. Toate drepturile rezervate. Orice utilizare a materialelor este permisă numai cu un link activ către sursă.
Pentru a afișa conținutul dacă caseta de selectare este bifată, trebuie să scrieți următorul cod. Similar textului din subsol, dar doar prima jumătate a codului
Conținut dacă caseta de selectare este bifată.
Puteți adăuga orice conținut. Dacă este necesar, ascundeți cel puțin jumătate din site.
Acum tot ce rămâne este să afișați conținutul a ceea ce utilizatorul selectează în listă. Pentru noi a fost plasarea blocului în stânga sau în dreapta
Aici, ca și în cazul textului din subsol, vom folosi condiția - Dacă. Există doar două elemente în lista mea, deci condiția este următoarea: dacă elementul numărul unu (din stânga) este selectat, arătăm blocul care are proprietatea în stiluri - plutește la stânga;, altfel aratam un bloc cu proprietatea - float:dreapta;.
Bloc în stânga
Bloc din dreapta
În principiu, ți-am arătat elementele de bază. Puteți adăuga și elimina elemente, puteți schimba totul pentru dvs. și puteți crea ceva. Lecția nu este ușoară și principalul lucru aici este să nu te confuzi, dar după ce ai înțeles și studiat bine, poți crea cu ușurință astfel de pagini pentru toate subiectele.
Asta e tot, mulțumesc pentru atenție. 🙂
