Unde să inserați acest cod în WordPress? Structura generală a fișierelor teme. Cum se introduce codul HTML în pagina HTML

06.12.2021 Windows Phone

Mai mult, aș dori să clarific imediat că vom introduce codul în articolul propriu-zis, astfel încât cititorii noștri să îl poată copia fără să piardă timp tastând textul în sine. Astfel, vom crește confortul () al resursei noastre - de data aceasta. Iar articolele vor arăta mai profesioniste și mai finisate - sunt două.

De asemenea, aș dori să menționez că informațiile din acest articol vor fi utile persoanelor care fie, după cum vă spunem, cum să facă diferite tipuri de completări pe site, fie utilizatorilor cărora le place doar să împărtășească informații utile. Și nu contează că această informație este un cod 🙂 Apropo, o să dezvălui un mic secret, pe acest proiect îl afișăm folosind plugin-ul Wp-Syntex.

Vă întrebați: „De ce folosim acest anume?” Răspunsul este simplu - nu există tovarăși pentru gust și culoare. Glumă. De fapt, am ales acest plugin pentru că este ușor de utilizat, adaugă perfect stil vizual diferitelor tipuri de limbaje de programare (css, html, java, javascript, perl, sql etc.) și nu ne supraîncărcă. Server.

Ei bine, din moment ce am lăsat să scape despre Wp-Syntex, așa că să folosim exemplul lui și să arătăm cum să inserăm cod în articolele de pe WordPress.

Mai întâi trebuie să instalați acest plugin. Am vorbit despre cum să facem acest lucru în articolul despre . Prin urmare, nu voi descrie această acțiune aici.

Ca rezultat, veți avea următorul rezultat:

Codul care doriți să fie afișat

De asemenea, în loc de php în acest cod, puteți introduce un alt limbaj de programare, cum ar fi css sau java. În același timp, stilul aspectului se va schimba.

Funcții suplimentare ale Wp-Syntex

Dacă adăugați atributul linia, adică codul pe care va trebui să-l introduceți va începe astfel:

Codul care doriți să fie afișat

Sper că ai observat diferența?

Mai este un mic atribut de care ai putea avea nevoie - acesta este scăpat... Vă permite să convertiți codurile de caractere html direct în caracterele în sine. De exemplu, „& gt” se convertește în „>”. Pentru ca această funcție să funcționeze, introduceți următorul atribut în eticheta de deschidere „pre”:

scăpat = „adevărat”

În consecință, eticheta va începe astfel:

< pre lang= "php" line= "1" escaped= "true" >

Tot pe Internet, am găsit informații că puteți instala un alt plugin (WP-Syntax Button), care funcționează împreună cu pluginul nostru și adaugă un buton de inserare de cod în editorul WP. Nu am fost leneș și am decis să protestez.

Imediat după ce l-am instalat, am fost alarmat de faptul că nu a fost actualizat de mult timp și nu a fost testat cu versiunea noastră de Wordpress. Ei bine, ce să spun, temerile mele erau justificate.

După ce am activat WP-Syntax Button, am decis să inserez un script java într-unul dintre articolele noastre. Am făcut totul așa cum a fost indicat în instrucțiunile și recomandările montane. Am introdus scriptul în articol, l-am selectat și am dat clic pe butonul „cod”.

Apoi a indicat limbajul de programare și numărul liniei de la care ar trebui să înceapă ieșirea scriptului.

Vă puteți întreba, de ce am scris despre acest experiment în acest articol? Prin aceasta, am vrut să spun că atunci când căutați câteva informații pe Internet, fiți atenți la data publicării. La urma urmei, există o probabilitate foarte mare ca informațiile din articolul vechi să fie relevante în urmă cu câțiva ani, dar în acest moment pur și simplu nu funcționează, iar aplicarea sau implementarea acesteia poate duce la vulnerabilitatea proiectului dumneavoastră.

Pe blogul nostru, încerc să țin tot materialul la zi, să urmăresc constant actualizările și, dacă este cazul, să fac ajustări la articolele deja scrise.

Dacă doriți să primiți informații de actualitate pentru dvs. prin e-mail, atunci vă recomand.

Videoclipul „Cum să inserați codul HTML într-un articol”

Prieteni, dacă cineva preferă să vadă cum se face asta, atunci am înregistrat un videoclip pentru voi. Și permiteți-mi să vă reamintesc că avem și un canal de youtube la care vă puteți abona.

Articole similare:

Ei bine, sper că articolul nu s-a dovedit a fi complicat și am reușit să vă spun în detaliu cum puteți introduce cod html într-un site web fără probleme inutile.

Nu neglija aspectul estetic al blogului tău. La urma urmei, cititorul nostru, ca și în viață, se întâlnește pe haine și se descurcă în funcție de minte.

Asta e tot pentru mine!

Pa! Pa!

Cu stima, Anton Kalmykov

Să vorbim despre cum să inserăm cod într-un site web, cum să inserăm cod html, cod de contor, cod de script terță parte în Artisteer. În programul propriu-zis, codul poate fi introdus în două locuri, primul este la crearea subsolului făcând clic pe butonul „text”, iar al doilea se află chiar în partea de jos a paginii, la setarea setărilor de export, „ fila Descriere". În cel din urmă, este încă mai convenabil să se insereze după ce șablonul a fost creat.

Cum se introduce codul de contor

Cod de contor poate fi introdus in josul paginii in locul indicat in poza, acesta este cel mai logic loc.
În șabloane Cod de contor Joomla poate fi introdus prin deschiderea paginii index.php a folderului șablon cu notepad. Găsim în partea de jos a liniei:

iar în locul liniei „Designed by

Înlocuirea liniei,

Cod PHP:

Cu sprijinul< a href= "http://wordpress.org/" target= "_blank" >WordPressși< a href= „http://www.artisteer.com/?p=wordpress_themes” target = "_blank"> Tema WordPresscreat cu Artisteer

La codul contorului dvs.

În șabloane Cod de contor Drupal poate sa introduce prin deschiderea paginii page.tpl.php a șablonului realizat prin înlocuirea codului din partea de jos:

Cod PHP:

" " ... t („Drupal”). „”. t ("și"). „Tema Drupal”... t („creat cu”). „Artist”; ?>.

Pe codul contorului sau butonului.

Introduceți codul de script, cod html de asemenea, puteți introduce în modul și, deși acestea sunt întrebări legate de utilizarea unui anumit CMS, ne vom opri asupra unora dintre ele.

Inserați codul HTML în modulul Joomla

Pentru a introduce codul în Joomla 1.5 (în joomla 1.7 se inserează în mod similar), trebuie să creați un nou modul HTML, în panoul de administrare deschideți Extensii -> Module Manager -> butonul creați un modul -> selectați Cod HTML personalizat -> butonul următor. În continuare, ajungem la creat de noi modul mod_custom Setăm poziția, completăm datele. Mai jos vedem editorul. În editor, faceți clic pe butonul HTML:

Și introduceți scriptul sau codul banner de care avem nevoie. Notă: rețineți că se folosește editorul TinyMSE, dacă ați instalat un alt editor, atunci trebuie să treceți la TinyMSE dacă butonul HTML pe care l-ați instalat nu este prezent.

Buna baieti!

Astăzi am decis să abordez un subiect care nu va înceta niciodată să fie relevant în rândul tinerilor creatori de site-uri web.

Există întotdeauna o nevoie de personalizare a site-urilor după ce sunt create. Unele dintre setări sunt efectuate prin editarea fișierelor șablonului de skin instalat. De exemplu, trebuie să introduceți un cod care afișează înregistrări similare. Dar unde să-l introduc?

Foarte des începătorii pun astfel de întrebări. De asemenea, sunt îngrijorați de alte probleme similare, a căror soluție, în esență, este exact aceeași. În plus, în articolele mele viitoare, voi recurge adesea la inserarea codurilor în diverse locuri din șablon. Prin urmare, acest material este mai util ca niciodată.

În acest articol, vă voi arăta cum vă este foarte ușor să definiți locul în șablonul WordPress în care trebuie să introduceți orice cod. Voi lua în considerare și alte puncte importante care vă pot preocupa în etapa inițială.

Să începem de sus și să ne uităm la fișierele pe care ar putea fi necesar să le editați dacă doriți să introduceți coduri cu pixuri în loc să folosiți pluginuri, deoarece există o astfel de opțiune. Nu-i urez bun venit, dar pentru cei mai leneși le voi descrie astfel de plugin-uri în articolele următoare.

La început, dau o lecție video, deoarece fără ea va fi greu de înțeles materialul prezentat în format text de mai jos.

Acum voi explica totul în detaliu în format text.

Fișierele responsabile pentru ieșirea fiecărui tip de pagină

Dacă ați citit multe articole pe alte bloguri despre implementarea unor funcții folosind coduri (scripturi), atunci sunteți 100% sigur că ați văzut fraze precum:

Lipiți acest cod în fișierul responsabil cu afișarea paginii principale;
Lipiți acest cod în fișierul responsabil pentru afișarea înregistrărilor și altele.

Există multe fișiere în care poate fi necesar să inserați coduri. Dar care sunt aceste fișiere? Totul este foarte simplu.

Ieșire din pagina principală - index.php;
Ieșirea înregistrărilor - fișier single.php;
Afișarea paginilor - fișier page.php;
Afișarea arhivelor și categoriilor - archive.php;
Ieșire subsol - footer.php;
Ieșire din pagina de căutare - search.php;
Ieșire din bara laterală - sidebar.php;
Fișier de stiluri - style.css;
Fișierul de ieșire de 404 pagini este 404.php.

Acum, când vă vor spune că trebuie să introduceți cod într-un astfel de fișier, veți ști unde să căutați.

Rămâne doar să răspundem la întrebarea cum să determinați locul potrivit în fiecare dintre fișiere?

Stabiliți locul pentru introducerea codului

Mai întâi, să trecem prin locurile care nu trebuie identificate. Toate vor fi la fel, indiferent de șablon.

Primul loc, care este identic pentru toate șabloanele, este zona din fișierul Header.php. Acestea sunt etichetele de deschidere și de închidere. .

Unele scripturi sunt întotdeauna plasate între aceste etichete, care ar trebui să funcționeze pentru toate paginile site-ului. Adică am plasat un script între aceste etichete, de exemplu, butoanele sociale și funcționează pe toate paginile site-ului, unde le vom afișa.

Aceste etichete sunt situate în partea de sus a fișierului Header.php.

Conținutul dintre ele va fi diferit pentru fiecare, deoarece totul depinde de șablon.

Dacă vi se spune să lipiți acest cod între etichetele de deschidere și de închidere, apoi copiați codul, căutați o zonă similară în fișierul șablon și doar lipiți-o între acele etichete.

Al doilea loc, care este, de asemenea, identic pentru toate șabloanele, se află în fișierul footer.php responsabil pentru afișarea subsolului.

Scripturile pot fi conectate nu numai prin inserarea lor între etichete în fișierul Header.php. De asemenea, le puteți încărca prin fișierul footer.php, accelerând astfel încărcarea paginii site-ului.

Faptul este că atunci când o pagină începe să se încarce, aceasta se încarcă de sus în jos. Dacă toate scripturile sunt în partea de sus a paginii, atunci afișarea conținutului acesteia va încetini, deoarece este nevoie de timp pentru a se încărca scripturile.

Sarcina noastră este să arătăm conținutul paginii, cât mai repede posibil, atât vizitatorilor, cât și motoarelor de căutare. În acest caz, este recomandabil să încărcați scripturile chiar la sfârșitul paginii pentru a afișa mai întâi conținutul, apoi încărcați totul.

Pentru a face acest lucru, trebuie să deschideți fișierul footer.php și să introduceți scriptul înainte de eticheta body de închidere. Este situat la sfârșitul conținutului fișierului, deoarece este responsabil pentru sfârșitul zonei paginii.

După cum puteți vedea, am adus toate scripturile din această zonă, înainte de eticheta de închidere(evidențiat cu un cadru albastru). Apropo, le-am scos prin încărcare din fișiere și nu prin plasarea scripturilor în această zonă. După aceea, mi-am accelerat foarte mult blogul. Va exista un articol separat despre cum să faceți acest lucru. Aștepta!

Sperăm că atunci când vi se spune să introduceți cod în aceste zone, îl veți face fără probleme.

Să trecem la o întrebare mai complexă și să încercăm să învățăm cum să determinăm locurile din alte fișiere șablon în care sunt inserate diverse alte coduri. De obicei, aceste coduri includ:

Afișarea postărilor similare;
Afisarea formularului de abonare;
Afișarea butoanelor sociale și așa mai departe.

Toate aceste lucruri sunt introduse după partea principală a conținutului, adică după sfârșitul articolului. Fiecare are un cod șablon diferit și, prin urmare, un răspuns universal la întrebare „Unde ajunge codul meu de ieșire a articolului?” pur si simplu nu.

Dar puteți defini cu ușurință sfârșitul codului, după care trebuie să implementați funcția de care aveți nevoie. Am arătat deja parțial această metodă în articolul despre alegerea unui șablon WordPress (). Am folosit apoi funcționalitatea standard a browserului de internet.

Pentru a înțelege mai bine întreaga esență a acestei metode, vă recomand cu căldură vizionarea videoclipului de la începutul acestei postări. În ea, am arătat cum totul se întâmplă în timp real. Ei bine, acum voi încerca să o descriu cât mai clar posibil.

Îl voi arăta folosind browserul Google Chrome ca exemplu. În alte browsere, această funcție este și ea disponibilă, poate fi numită puțin diferit.

Google Chrome - vizualizați codul elementului;
Firefox - explorați un element;
Opera - inspectați un element.

Principiul în 3 browsere este similar. Acum vă voi arăta cum să determinați unde să afișați orice zonă din orice șablon.

Accesați vizualizarea codului elementului (Google Chrome). Faceți clic dreapta pe o zonă goală a paginii.

După aceea, în partea de jos a paginii apare un panou, care arată întregul cod sursă al paginii, pe care îl putem edita și urmări cum se va schimba structura și aspectul șablonului în timp real. Dar modificările datelor nu sunt salvate. Pentru a face acest lucru, trebuie să editați ele însele fișierele șablon.

Așa arată acest panou.

Cu săgeata, am indicat o lupă (lupă), făcând clic pe care putem inspecta structura șablonului și a determina din ce blocuri este format șablonul nostru. Eu numesc această funcție un inspector.

După ce facem clic pe inspector, putem muta mouse-ul peste pagina noastră și vom vedea că toate elementele pe care trecem cu mouse-ul încep să fie evidențiate cu un fundal colorat. Ca exemplu, voi afișa o captură de ecran din articolul despre alegerea unui șablon. Acolo am trecut cu mouse-ul peste titlul postării.

Dacă trebuie să inserăm cod după ieșirea articolului nostru, atunci nu va fi dificil să ghicim că trebuie să inspectăm zona șablonului nostru și să găsim un bloc care conține tot conținutul articolului. Puteți căuta atât sfârșitul blocului, cât și începutul. Adică, puteți inspecta șablonul de jos și de sus.

Dar iată o remarcă ... Trebuie să găsim nu doar rândurile articolului, ci și blocurile în care se află conținutul în sine, deoarece nu există articole în fișierele șablon. Există doar cod care afișează conținut și este închis în blocuri. Este după eticheta blocului de închidere

și va trebui să lipiți codul.

Deci ce facem? Faceți clic pe pictograma lupă și începeți să inspectați zona în care se află articolul nostru. Trebuie să găsiți o astfel de parte a paginii atunci când zona întregului articol este evidențiată. Acesta va fi blocul care afișează conținutul.

De exemplu, am creat un articol nou cu conținut mic pentru a arăta cum va fi evidențiat acest bloc.

De asemenea, ar trebui să căutați pentru a găsi blocul care conține conținutul dvs. Când treceți cu mouse-ul, vedeți un mic sfat explicativ care arată numele acestui bloc.

Când găsiți o astfel de parte a șablonului, apăsați butonul mouse-ului și această parte devine activă. O linie de cod cu acest bloc va fi evidențiată automat în panoul de vizualizare a codului elementului.

După cum puteți vedea, acest bloc are exact același nume ca și în balonul de tip hover.

Când cunoaștem numele blocului în care este afișată partea principală a articolului, putem merge la fișierul necesar și putem introduce codul de care avem nevoie după acest bloc. Să luăm ca exemplu un fișier post output (single.php).

Îl deschid în Notepad și caut o linie în cod care începe exact la fel ca în panoul de vizualizare a codului elementului.

Este foarte convenabil să lucrezi în editorul Notepad, deoarece atunci când dai clic pe eticheta de deschidere a blocului, este evidențiată și eticheta de închidere (prezentată în imaginea de mai sus). Eticheta de sfârșit indică faptul că acesta este sfârșitul conținutului. După el ne putem introduce butoanele sociale, postările aferente și alte funcții.

Tocmai am inserat butoanele sociale acolo împreună cu formularul pentru a vă înscrie pentru actualizări.

Așa sunt afișate pe pagini.

În mod similar, este inserat în alte fișiere șablon (pagini, categorii, arhive...).

Fără practică, această metodă de inserare este puțin probabil să fie stăpânită din text și imagini. Prin urmare, ia-l și încearcă. Sunt sigur că totul se va rezolva. De asemenea, pentru a ajuta videoclipul de la începutul articolului.

Despre determinarea locului în fișierul șablon pentru inserarea ulterioară a celui dorit în acesta, când ne-am dat seama.

Există un ultim moment, care merită sfințit în acest moment.

Există multe setări care necesită intervenție în fișierul functions.php al șablonului. Dar, cum să inserați coduri în el, trebuie să înțelegeți.

De regulă, pe toate blogurile scriu că inserarea trebuie făcută chiar la sfârșitul fișierului, înainte de eticheta de închidere?>.

Dar dacă această etichetă nu este în fișier? De exemplu, pur și simplu nu-l am. Cum să fii într-o astfel de situație? Absența unei etichete de final nu înseamnă că fișierul este invalid. Blogul functioneaza. Deci totul este OK.

În acest caz, vă propun să faceți opusul - introduceți-l în cod chiar la începutul fișierului, înainte de eticheta de deschidere. Aruncă o privire la imaginea de mai jos.

Eticheta de deschidere este evidențiată cu roșu, iar codul care a fost introdus este evidențiat cu albastru.

Aceasta este o opțiune. De asemenea, puteți lipi cod la sfârșitul fișierului, dar înainte de ultimul cod. În acest caz, trebuie să înțelegeți măcar puțin de unde începe ultimul cod, pentru a nu-l tăia.

Asta e tot. Dacă dintr-o dată ai aceeași situație cu absența unui tag de închidere în fișierul funsctions.php, vei ști cum să procedezi.

Definirea stilurilor vizuale într-un șablon

De asemenea, noi înșine putem vizualiza stilurile de design pentru elementele paginii și le putem modifica, precum și să le adăugăm pe ale noastre. Același inspector de elemente ajută în acest sens.

Când găsim elementul dorit și facem clic pe el, stilurile pentru blocul (elementul) selectat sunt afișate în zona din dreapta a panoului de vizualizare a codului. Vă voi arăta stilurile pentru același bloc de articole discutat mai sus.

Dacă vrem să edităm aceste stiluri în timp real și să vedem cum va arăta acest sau acel element, le putem schimba chiar în acest panou. Doar faceți clic pe valorile stilurilor dorite și schimbați-le.

Dar modificările vor fi valabile doar până la reîmprospătarea primei pagini. Pentru a aplica aceste stiluri, trebuie să le adăugați la foaia de stil a șablonului. Într-una din imaginile de mai sus am arătat cu un cadru albastru o zonă care arată numele fișierului în care sunt scrise aceste stiluri, precum și linia exactă de la care încep.

Prin urmare, deschideți foaia de stil style.css și căutați linia 890 în cazul meu.

Aici le puteți edita. Salvați fișierul și încărcați-l pe găzduire.

Rețineți că editez toate fișierele de pe computerul meu. În acest caz, folosesc programe externe, ceea ce face posibilă anularea oricăror modificări dacă apar probleme. Același lucru este valabil și pentru diferite experimente cu coduri și scripturi - totul este activat.

Vă recomand cu tărie să efectuați și editarea similară a oricăror fișiere de pe computer. Pentru a face acest lucru, mai întâi trebuie să descărcați fișierele pe computer de pe găzduire folosind un client ftp. Am scris despre asta în. Și apoi deschideți fișierele cu orice editor convenabil pentru dvs. care le poate deschide. Folosesc Notepad în acest scop.

Aceasta încheie articolul. Iată un proces atât de dificil de a determina unde să inserați un cod sau un script. La prima vedere, această procedură poate părea complicată. Dar totul este foarte simplu. Vei încerca de câteva ori și nu vei pune astfel de întrebări.

Desigur, puteți insera coduri și scripturi în blogul dvs. folosind plugin-uri speciale, pe care cu siguranță le voi lua în considerare în articolele următoare. Insa, pentru a evita folosirea lor, poti face astfel de actiuni fara ele, pe care ti le recomand. Făcând acest lucru, veți scăpa de încărcătura inutilă de pe site, accelerând-o și făcându-l mai convenabil de utilizat pentru vizitatori.

Toți prietenii. Aceasta se încheie. Astept intrebarile voastre in comentarii. Să ne dăm seama. Ne vedem în materiale noi.

Salutări, Konstantin Khmelev.

Am lansat o nouă carte, „Marketing de conținut pe rețelele sociale: cum să intri în fruntea abonaților și să te îndrăgostești de marca ta”.

Există multe instrumente care vă ajută să vă îmbunătățiți site-ul web, să vă îmbunătățiți afacerea online și să îmbunătățiți implicarea clienților. Multe dintre aceste instrumente sunt gratuite. Dar ce se întâmplă dacă nu ești un dezvoltator web și nu știi cum să le instalezi pe site-ul tău? Acesta este un mare obstacol.

Oricât de ironic ar părea, o afacere care dezvoltă instrumente utile pentru site-ul tău are și un obstacol în calea propriei prosperități - nevoia de a impune utilizatorilor instalarea codului său.

Să încercăm să rezolvăm două probleme simultan, vorbind despre cele mai comune modalități de a insera cod JavaScript/fragmente (fragmente) pentru site-uri web:

Pe WordPress.
Panouri de administrare auto-scrise (folosind FTP vechi).
La Squarespace.
Pe Shopify.

Vom atinge Wix la sfârșitul articolului. În majoritatea cazurilor, această platformă nu permite instalarea de coduri sau fragmente JavaScript, dar oferă o alternativă sub formă de integrări pentru diverse servicii.

De unde să obțineți codul de instalare

Să vedem unde găsim codul de instalare folosind serviciul Crazy Egg ca exemplu.

Procesul este standard: introducem datele de înregistrare, după încărcare intrăm în tabloul de bord. Acolo căutăm o secțiune cu un cod.

Cum să încorporați codul într-un site WordPress

Puteți utiliza un plugin special - Tracking Code Manager.

Pentru a introduce Tracking Code Manager, accesați panoul de administrare a site-ului și căutați secțiunea de pluginuri în panoul de control.

Selectați funcția „Adăugați nou”.

O bară de căutare va apărea în partea dreaptă. Introduceți „Manager cod de urmărire”, apoi faceți clic pe „Instalare acum”.

După terminarea instalării, trebuie să vă asigurați că pluginul este activat. Să trecem la setări.

Faceți clic pe „Adăugați un nou cod de urmărire”.

Puteți face fără pluginul Tracking Code Manager. În acest caz, opțiunea noastră este să lipim codul în fișierul header.php al temei WordPress (mai multe despre asta mai târziu).

Cum se instalează codul pe WordPress.com

Un site WordPress și un site WordPress.com sunt două lucruri diferite.

Un site WordPress este un site care este administrat de un CMS instalat pe propriul server. Aceasta înseamnă că ați plătit pentru numele de domeniu (myname.com) și pentru găzduire.

Site-ul WordPress.com este gratuit. Puteți înregistra un site web pe acesta fără a plăti pentru găzduire. În acest caz, adresa URL a site-ului va fi: myname.wordpress.com. Există câțiva pași suplimentari pe care trebuie să-i faceți pentru a vă schimba numele de domeniu.

Când rulați site-ul dvs. pe WordPress.com, sunteți limitat în alegerea codurilor JavaScript și a fragmentelor pe care le puteți instala. Motivul este în protocolul de securitate - dezvoltatorii nu permit utilizatorilor să introducă coduri în platformă. De exemplu, dezvoltatorii MySpace au permis. Evident, acesta este motivul pentru care site-ul a scăzut de pe locul 5 în lume până în 1967 în șase ani.

În același timp, WordPress.com oferă utilizatorilor diverse bonusuri pentru conducerea unei afaceri. De exemplu, integrarea cu Google Analytics sau posibilitatea de a adăuga butoane pentru rețelele sociale. Dar, în unele cazuri, acest lucru poate să nu fie suficient.

Cum să instalați coduri și fragmente JavaScript pe un panou de administrare personalizat

Folosind FTP. Va trebui să ne întoarcem la elementele de bază.

În zilele noastre, multe site-uri sunt auto-scrise. Site-ul auto-scris a fost creat de la zero, nu folosește CMS pentru managementul conținutului.

Să ne imaginăm că avem doar un astfel de site. Va fi puțin mai dificil să pui codul pe el decât pe WordPress, pentru că va trebui să ții minte despre FTP.

Managerii FTP precum FileZilla vă permit să glisați și să plasați fișiere și imagini de pe un site web pe un server. Folosind programul, puteți adăuga fișiere pe server sau le puteți descărca, înlocui fișierele vechi cu altele noi, ștergeți datele inutile, schimbați numele docurilor.

Nu este nimic complicat în protocolul de transfer de date: după 20 de minute te poți simți ca un profesionist. Pentru majoritatea oamenilor, cea mai grea parte este pur și simplu contactarea serverului.

Dacă aveți probleme cu serverul, contactați compania de găzduire. Poate dura o oră, dar după 60 de minute vei ști tot ce trebuie să știi. De obicei, recomand înregistrarea unor astfel de conversații prin ScreenRecorder. Sau cel puțin notează manual.

După ce v-ați conectat la serverul FTP, asigurați-vă că faceți acest lucru. Dacă faci o greșeală, fișierele importante nu vor merge nicăieri. Puteți face o copie de rezervă prin simpla glisare și plasare a tuturor fișierelor de pe server pe computer.

De obicei, API-ul manager FTP are două coloane. De exemplu, în imaginea de mai jos, în coloana din stânga, vezi fișiere care sunt stocate pe computer. În dreapta - fișiere de pe server.

Pentru a modifica sau adăuga fișiere, pur și simplu trageți și plasați-le dintr-o coloană în alta.

Avertizare

Înlocuirea fișierelor este periculoasă. Puteți înlocui cu ușurință o nouă versiune a unui fișier cu una veche și puteți pierde mai multe date actuale, puteți șterge din greșeală ceva important sau puteți face o altă greșeală. Copia de rezervă vă permite să vă protejați împotriva unor astfel de greșeli și să vă protejați de problemele inutile. Nu uitați să salvați toate fișierele într-un folder separat de pe computer înainte de a face modificări.

Cum să inserați codul folosind header.php

Să presupunem că avem un site web pe care îl gestionăm cu WordPress. Pentru a introduce codul, trebuie să găsim fișierul header.php sau un alt fișier numit antet sau cap.
Antet necesare pentru a activa un cod sau un fragment JavaScript pe toate paginile site-ului. Puteți folosi un program gratuit precum Sublime Text pentru a deschide fișierul. Cu ajutorul acestuia, trebuie să deschideți un fișier care este stocat pe computer, și nu un fișier similar pe server.

Când deschidem fișierul în Sublime Text, putem vedea curcubeul din codul de culoare. Nu vă fie teamă, totul este simplu acolo.

Toate paginile sunt împărțite în două secțiuni - Capul și corpul. Titlurile sunt notate prin cod HTML și... Corp - și.

Cele mai multe dintre lucrurile care fac site-ul să funcționeze și să afișeze textul se află între aceste două secțiuni. Puteți utiliza căutarea în pagină pentru a găsi aceste etichete.
În cele mai multe cazuri, puteți introduce codul chiar înainte de eticheta de închidere.

După ce ați introdus codul sau fragmentul, salvați fișierul și încărcați-l pe server. Gata.

Acum despre panourile de administrare auto-scrise. Dacă site-ul dvs. a fost construit manual și nu puteți găsi fișierul de antet sau antet, cel mai probabil va trebui să introduceți codul manual în fiecare pagină. Cel mai adesea, acest lucru nu cauzează prea multe dificultăți.

Imaginea de mai sus este un site HTML ipotetic care constă din patru fișiere HTML. Dacă am vrea să inserăm vreun cod pe el, ar trebui să deschidem toate aceste fișiere unul câte unul și să introducem codul sau fragmentul în etichetele fiecăruia dintre ele. După aceea, procesul este standard: salvăm fișierele și le încărcăm pe server în locul celor vechi.

Cum să încorporați codul pe un site web Squarespace

Squarespace le-a făcut ușor utilizatorilor săi. Puteți folosi „injectarea codului” pentru a insera codul JavaScript sau fragmentul. În meniu, accesați filele Setări> Avansat> Injectare cod. Puteți adăuga cod la sau subsolul site-ului.

Găsim setările.

Derulați în jos și faceți clic pe „Avansat”.

Selectăm „Code Injection”.

Lipiți codul și salvați modificările.

Cum să încorporați codul în Shopify

În panoul de control, găsiți secțiunea cu Magazine online și selectați Teme.

Pentru a accesa fila dorită, faceți clic pe „Acțiuni” și selectați „Editare HTML / CSS”.

Avem nevoie de fragmente.

Făcând clic pe opțiune, se va deschide o casetă de dialog cu posibilitatea de a adăuga un nou fragment.

Dați un nume fragmentului și faceți clic pe butonul Creați fragment.

Introduceți codul fragmentului în zona „tracking snippet.liquid”. Faceți clic pe salvare.

Cum să încorporați codul dacă site-ul dvs. este pe Wix

Wix a devenit rapid un constructor de site-uri web popular. La fel ca WordPress.com, impune restricții utilizatorilor săi în capacitatea de a introduce coduri.

Dar Wix oferă o soluție sub forma Wix App Market. Acolo puteți găsi o varietate de widget-uri pentru marketing, social media și analiză. Apropo, acolo poți vota și pentru cel mai necesar widget.

Salutare dragi prieteni. Astăzi, în continuarea subiectului, accelerând viteza de încărcare a blogului, să vorbim despre posibilitatea înlocuirii pluginurilor cu scripturi „leșoare”. Scripturile, spre deosebire de pluginuri, au o sarcină mult mai mică pe server și, prin urmare, viteza de încărcare a site-ului va fi mai mare. Astăzi există o mulțime de plugin-uri și sunt capabile să rezolve multe probleme ale bloggerilor. Dar adesea, aceste plugin-uri pot fi înlocuite cu scripturi mai rapide. Și uneori puteți dezactiva complet pluginurile inutile. Și cu cât sunt mai puține pluginuri terță parte, cu atât viteza de încărcare a site-ului sau blogului este mai mare.

Dacă analizezi viteza de încărcare a site-ului, poți vedea ce pluginuri încetinesc viteza de încărcare a site-ului tău. Ce servicii să folosesc pentru verificare am scris. În cazul meu, cea mai mare frână este un plugin care vă permite să afișați exemple de cod sursă în articole, cu evidențiere de sintaxă chiar pentru acest cod. Acest plugin se numește SyntaxHighlighter.

Rezultatul testului nici nu se potrivea pe pagină. Desigur, evidențierea codului este foarte frumoasă, dar dacă îți dai seama, nu este vorba de evidențiere. În general, eficiența codului este importantă. Și dacă codul este doar introdus, atunci există o mare probabilitate de inoperabilitate.

Și astăzi vă voi spune cum să înlocuiți pluginul SyntaxHighlighter cu cod obișnuit și chiar să inserați un buton în panoul de editare al blogului dvs.

Cum să introduceți un cod într-un articol fără un plugin

Se știe că în WordPress, pentru a afișa un exemplu de cod sursă într-un articol, la tastarea unui articol din editorul vizual este suficient să mergi la cel de testare și să includă codul cerut în etichete

Codul tau

Dar un astfel de cod cu greu va ieși în evidență în cea mai mare parte a textului articolului tău. Și astfel puteți adăuga mai multe stiluri, să zicem, culoarea de fundal, culoarea fontului, chenarul și așa mai departe. În acest fel, codul dvs. va fi prezentat cel mai clar sub forma unui exemplu.

Cum se schimbă vizualizarea codului afișat

Acest lucru este destul de simplu de făcut.

Opțiunea 1

Puteți atribui etichetei

Class, de exemplu, class = "cod" și setați stilurile necesare în fișierul style.css.

.cod (lățime: automat; culoarea fundalului: whitesmoke; chenar: 1px solid # C7C3C3; chenar-rază: 5px; culoare: # 167dec;)

Opțiunea 2

Puteți seta stiluri direct când introduceți codul. Va arata cam asa:

Codul tau

Și în primul și al doilea exemplu, dacă codul inserat iese din limitele articolului, ar trebui să adăugați proprietatea overflow: auto; care vă va permite să manipulați elementul bloc.

Aceste metode sunt bune pentru toată lumea, dar mi-aș dori ceva mai simplu. În general, din nou, lenea - motorul progresului te face să vii cu ceva care să faciliteze acest proces.

Cum să adăugați butonul „Inserați cod” în panoul de editare WordPress

Un simplu buton din panoul de editare WordPress va ușura acest proces. Și arată așa.

Dacă vrei să-ți pui un astfel de buton, atunci vei avea nevoie de câteva minute de timp și de câteva fișiere de la mine. Asadar, haideti sa începem.