blog_posts_img_5

Cum sa adaugi CSS personalizat pe wordpress

Trebuie sa adaugati CSS personalizat pe site-ul web WordPress, dar pur si simplu nu stiati cum? Exista o solutie chiar daca sunteti o persoana cu tehnologie redusa!

Utilizati tema copil pentru a edita CSS

29

Daca ati descarcat o tema pentru site-ul web si doriti sa faceti unele modificari la aceasta, atunci sunteti sfatuit sa o faceti folosind o tema copil. Multi dezvoltatori WordPress actualizeaza deseori temele pentru modificari de design si remedieri de erori.

Acesta este un mod simplu, dar eficient de a adauga CSS personalizat la WordPress si, folosind aceasta metoda, veti avea sansa de a vedea modificarile pe care le-ati facut ca o previzualizare.

Cu versiunea actualizata a WordPress, puteti adauga pur si simplu CSS personalizat WordPress din sectiunea de administrare.

Pe de alta parte, unii dezvoltatori profesionisti de teme sunt constienti de importanta temei copil, asa ca, in general, includ tema copil impreuna cu tema principala.

Cum sa adaugati CSS personalizat prin intermediul tabloului de bord WordPress?

  • Navigati la Appearance (Aspect) > Theme Editor (Editor de teme).
  • Selectati o tema copil pentru a o edita, din coltul din dreapta sus.
  • Selectati Stylesheet (style.css) pentru a edita si lipiti codul in partea de jos a fisierului.
  • Salvati modificarile.

Utilizati plugin-uri pentru a adauga CSS personalizat in WordPress

Aceasta este considerata a fi cea mai convenabila modalitate de a adauga CSS personalizat la site-urile WordPress.

Iata cateva plugin-uri care va vor ajuta sa adaugati CSS personalizat la WordPress.

Simple Custom CSS si JS

Este un plugin care este utilizat pentru a adauga CSS personalizat la WordPress, care va satisface nevoile dezvoltatorilor. Acest plug-in are mai multe caracteristici, cum ar fi controlul personalizat, iluminator de sintaxa, interfata usor de utilizat si multe altele.

Custom CSS and JavaScript

Acesta este un alt plugin WordPress util care permite dezvoltatorului sa utilizeze CSS personalizat pentru intregul site web si, de asemenea, pentru elemente individuale ale paginii web. Acest plugin este disponibil in mai multe limbi, ceea ce il face sa iasa in evidenta fata de alte plugin-uri.

AccessPress Custom CSS

AccessPress Custom CSS permite dezvoltatorului sa adauge alte coduri personalizate, cum ar fi PHP, HTML sau doar text simplu. Acest plugin va permite sa folositi personalizarea pe elemente specifice ale paginii web, cum ar fi zonele de widget-uri, titlul postarii sau al paginilor, continutul postarii sau al paginilor, etichete si multe alte zone.

CSS personalizat specific posturilor si paginilor

Daca sunteti in cautarea unui plugin care sa va permita sa va previzualizati modificarile inainte de a publica site-ul web, atunci aceasta este solutia pentru dvs. Acest plugin permite un manager CSS personalizat in sectiunea de administrare pentru a adauga fragmente de cod CSS personalizat la site-ul web WordPress.

Acest plugin ofera mai multe caracteristici, cum ar fi previzualizarea live, interfata usor de utilizat, procesul de dezinstalare, iar principala caracteristica semnificativa este ca nu este necesara nicio configurare pentru a seta acest plugin

Plugin Child Theme Configurator

Daca va simtiti epuizat de modul manual de creare a unei teme copil in WordPress, nu va faceti griji, nu sunteti singur. Mai ales personalizarea temei parinte prin gasirea claselor CSS individuale din parent style.css este mai tehnica pentru un incepator WordPress. Din fericire, Child Theme Configurator este un plugin care va ajuta sa creati si sa personalizati teme copil in WordPress.

Editarea CSS prin intermediul WordPress Customizer

In loc sa folositi Editorul de teme, incercati acest lucru. Autentificati-va in backend-ul WordPress si faceti clic pe Appearance > Customize pentru a deschide ecranul de personalizare a temei. Veti vedea o previzualizare live a site-ului dvs. web, cu optiuni in stanga pentru a personaliza elemente precum culorile, meniurile sau alte widgeturi.

Chiar in partea de jos a acestui meniu, ar trebui sa gasiti caseta Additional CSS.

Faceti clic pentru a o deschide. Veti fi directionat catre un nou ecran cu o caseta de introducere a codului si cateva instructiuni. Ecranul Additional CSS include evidentierea sintaxei, la fel ca in Theme Editor, impreuna cu validarea care va anunta daca codul dvs. este gresit.

Orice cod pe care il scrieti apare automat in zona de previzualizare din dreapta, cu exceptia cazului in care are o eroare (desi puteti alege sa il publicati oricum).

Cand ati terminat de lucrat, puteti sa va publicati codul, sa programati momentul in care acesta va intra in vigoare sau sa il salvati ca proiect pentru a lucra mai tarziu. Puteti obtine chiar si un link de previzualizare pentru a-l partaja cu altii.

Dupa cum puteti vedea, pagina Additional CSS este, in multe privinte, mai puternica decat Theme Editor si mult mai potrivita pentru adaugarea de cod decat pentru a te juca cu fisierele de baza.

Singurul dezavantaj este ca modul de adaugare a CSS-ului personalizat, in cazul in care schimbati tema, tot ceea ce ati scris va fi sters. Asigurati-va ca faceti o copie de rezerva a CSS-ului inainte de a trece la o noua tema sau s-ar putea sa ajungeti sa pierdeti o multime de munca.

Concluzii

Daca sunteti un incepator sau o persoana cu un nivel tehnologic scazut, folositi plugin-uri. Atunci cand dobanditi experienta, puteti utiliza alte metode pentru a adauga CSS personalizat pe site-ul WordPress. Desi puteti contacta o agentie de dezvoltare de site-uri web pentru a obtine servicii profesionale de dezvoltare WordPress.

Reducere 20%

pentru abonati!

Click aici

STAY IN THE LOOP

Subscribe to our free newsletter.

Don’t have an account yet? Get started with a 12-day free trial

Alte Articole Din Blog

Vezi toate
  • Nam lacinia arcu tortor, nec luctus nibh dignissim eu nulla sit amet maximus.

    Continua
  • Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

    Continua
  • Nam lacinia arcu tortor, nec luctus nibh dignissim eu nulla sit amet maximus.

    Continua
  • Nam lacinia arcu tortor, nec luctus nibh dignissim eu nulla sit amet maximus.

    Continua