Cum putem adăuga CSS în site-ul WordPress

Cum putem adăuga CSS în site-ul WordPress

Dacă nu suntem programatori, dar avem totuși minime cunoștințe de CSS și HTML, sau vrem să încercăm ceva nou (poate tocmai am făcut un curs online de noțiuni introductive de CSS și HTML), și vrem să modificăm unele elemente din tema instalată, trebuie să avem cumva acces la cod, fără a-l strica.

Pentru un programator modificarea codurilor de CSS și HTML este un lucru simplu. Ei copiează fișierul dorit în tema child și-l modifică cum dorește. Dau, scrie în fișierul style.css implicit. Dar uneori chiar și pentru un programator de profesie metoda asta de modificare a codului poate fi peste mână. Adică? Adică nu are acces nici la FTP, nici la cPanel și nici la fișiere din adminul site-ului (scriere fiind blocată).

Așadar, cum putem adăuga CSS nou fără să modificăm fișierele de stil?

Există mai multe metode, dar în acest tutorial voi vorbi despre modulul: Simple Custom CSS.

Ce este Simple Custom CSS?

Simple Custom CSS este un modul WordPress, ușor de utilizat, folosit pentru a adăuga stiluri CSS personalizate, care înlocuiesc stilurile implicite din module și temă. Acest modul este conceput pentru a răspunde nevoilor administratorilor ce doresc să adauge propriul CSS pe site-ul WordPress, fără a modifica fișierele.

Atenție! Stilurile create cu acest plugin vor fi salvate și utilizate chiar dacă tema este schimbată.

Caracteristici

  • Control vizual (previzualizare live)
  • Evidențiează sintaxa
  • Verificarea erorilor
  • Nu este necesară configurare
  • Interfață simplă, construită pe UI WordPress nativ
  • Practic nu are impact asupra performanței site-ului
  • Nu există interogări complicate la baza de date
  • Documentare bună
  • Permite accesul administratorului în rețele WP (mai multe site-uri)

Instalarea modulului Simple Custom CSS

Simple Custom CSS este un plugin (modul), așadar se instalează la fel ca oricare alt modul.

Pentru început trebuie să fiți autentificat în WordPress ca administrator, apoi din Module → Adaugă modul scrieți în câmpul de căutare numele modului: Simple Custom CSS.

simple-custom-css-1

Click pe Instalează acum, apoi pe Activează. Modulul va fi vizibil și accesibil din meniul Aspect.

simple-custom-css-2

Rezultatul arată ca mai jos:

simple-custom-css-3

În câmpul principal, unde scrie

/* Enter Your Custom CSS Here */

se poate ad[uga codul CSS dorit. Acesta poate adăuga proprietăți noi sau poate modifica unele existente. Codul scris aici suprascrie codul CSS din fișierele temei active, sau a modulelor.

Atenție! Nu uitați să faceți clic pe „Update Custom CSS” la final.

Notă: Un avantaj (sau dezavantaj) al utilizării acestei metode este că CSS-ul dvs. personalizat va fi disponibil chiar și atunci când vă schimbați tema.

Insert Headers and Footers

Insert Headers and Footers

Pornesc de la o situația practică: am instalat WordPress-ul, am instalat și o temă, fie din librăria de teme gratuite a WordPress-ului, fie cumpărată, sau din altă sursă, am făcut setările, am pus conținut și acum vreau să pun în site codul de Google Analytics pentru a putea urmări traficul. Sau vreau să pun codul de la Facebook, sau codul de la Google AdSense, sau alt cod. Cum fac asta?

Există trei mari metode:

  1. folosind setările temei instalate, dacă ele există
  2. copiind manual acele coduri în fișierele temei
  3. folosind un plugin specializat

În acest tutorial vă voi arăta un plugin simplu, numit Insert Headers and Footers și dezvoltat de

Ce este Insert Headers and Footers?

Cu ajutorul acestui modul puteți să inserați coduri precum Google Analytics, CSS personalizat, Facebook Pixel și multe altele în antetul și subsolul site-ului (blogului) dvs. de pe site-ul WordPress. Nu este nevoie să editați fișierele cu temă!

Interfața simplă a pluginului Insert Headers and Footers vă permite să inserați scripturi, mai degrabă decât să vă ocupați de zeci de pluginuri diferite.

Caracteristici:

  • Rapid de configurat
  • Simplu pentru a insera scripturi
  • Introduceți codul antetului și / sau codul de subsol
  • Adăugați codul Google Analytics la orice temă
  • Adăugați CSS personalizate pe teme
  • Introduceți codul de pixeli Facebook
  • Introduceți orice cod sau script, inclusiv HTML și Javascript

Instalarea unui plugin WordPress

Insert Headers and Footers este un plugin (modul), așadar se instalează la fel ca oricare alt modul.

Pentru început trebuie să fiți autentificat în WordPress ca administrator, apoi din Module → Adaugă modul scrieți în câmpul de căutare numele modului: Insert Headers and Footers.

insert-headers-and-footers-1

Click pe Instalează acum, apoi pe Activează. Modulul va fi vizibil și accesibil din meniul Setări.

insert-headers-and-footers-2

Dacă-l accesați veți vedea un formular simplu în care puteți de acuma să introduceți codurile dorite.

insert-headers-and-footers-3

Se pot introduce coduri JavaScript și HTML.

Cum poți face un glosar, dicționar, pe site?

Cum poți face un glosar, dicționar, pe site?

Glosarul este o listă de cuvinte mai puțin cunoscute însoțite de explicația lor. Ca sinonime se pot folosi: vocabular sau dicționar. Așadar: cum putem crea o secțiune pe WordPress de tip dicționar, o listă de cuvinte însoțite de explicația lor?

În primul rând trebuie lămurit aspectul practic al unui astfel de secțini. Ce plus valoare adaugă site-ului, de ce ar fi necesar acest efort și altele. Voi veni cu un exemplu general. Dacă aveți un site de firmă în care prezentați produsele și serviciile oferite, o secțiune de tip dicționar, care să conțină toți termenii și prescurtările specifice afacerii dvs., ar da un plus de încredere, clienților, în calitatea și seriozitatea afacerii dvs.

Iar uneori poate s-ar constituii într-o zonă de interes educațional. Cum ar fi ca pe site-ul unui stomatolog să găsim explicațiile tuturor termenilor folosiți, sau ale uneltelor specifice.

Pentru a construi o secțiune de glosar am folosit modulul CM Tooltip Glossary a celor de la CreativeMindsSolutions.

Instalarea modulului CM Tooltip Glossary

CM Tooltip Glossary este un modul WordPress, așadar se instalează la fel ca oricare alt modul.

Pentru început trebuie să fiți autentificat în WordPress ca administrator, apoi din Module → Adaugă modul scrieți în câmpul de căutare numele modului: CM Tooltip Glossary.

Se face click pe Instalează acum, apoi pe Activează.

Setarea modulului CM Tooltip Glossary

După activare veți fi redirectați spre secțiunea de setare a modulului. Primul pas este înregistrarea:

După înregistrare, treci peste Ghidul inițial și accesează tabul General Settings:

În primul ecran sunt câteva setări ce trebuie discutate. Prima este „Generate page for Glossary Index”. Dacă opțiunea este selectată atunci se va crea o pagină specială pentru glosar (dicționar), dacă nu codul necesar afișării listei de termeni va trebui introdus într-o altă pagină. Acolo unde se dorește afișarea listei.

O altă opțiune este ce numită „Highlight terms on posts?” Ce înseamnă asta. Modulul caută în articol termenii din lista introdusă în glosar și îi evidențiează. Atunci când se va trece cu mouseul peste acel termen subliniat se va deschide o fereastră cu explicațiile lui. Un mod util de a accesa aceste informații.

Cele două opțiuni merg bine împreună. În sensul că se poate crea un dicționar fără o pagină dedicată. Astfel că explicațiile termenilor din dicționar vor putea fi citite doar acolo unde apar în textele din site.

Următorul tab se numește „Glossary Index Page” și conține opțiuni de setare al aspectului termenilor.

Notă: În dreptul fiecărei opțiuni este un semn de întrebare. Dacă puneți mouseul peste el veți putea citi instrucțiunile de utilizare.

Parcurgeți și restul opțiunilor pentru a vă găsi cea mai potrivită formă de afișare.

Adăugarea unui termen în secțiunea de glosar

Instalarea și activarea modulului aduce în meniul din stânga următorul bloc de linkuri:

Glossary, primul din meniu, listează toți termenii din Glosar. La început nu va fi niciunul.

Pentru a adăuga un termen se accesează Add New, fid din meniul din stânga, fie din fereastra CM Tooltip Glossary. Formularul de adăugare a unui termen seamănă mult cu adăugarea unui articol de blog, în care se folosește interfața cu editorul clasic.

Se pot adăuga pe rând termenii doriți. Aceștia vor fi afișați în ordine alfabetică și grupați alfabetic.

Pe partea publică rezultatul va fi vizibil în pagina specială a glosarului cu termeni. Mai jos este un exemplu:

Respectiv explicațiile vor apărea în acele articole în care se regăsesc:

Asta este. Se pot adăuga sute de termeni, cu explicații complexe, cu imagini, cu video, cu tot ce doriți. Dar, atenție: căutați să nu suprasolicitați atenția vizitatorilor cu prea multe informații redundante.

Un modul foarte util, simplu de instalat și de folosit. Succes!

Evidenţierea codului în WordPress (SyntaxHighlighter)

Evidenţierea codului în WordPress (SyntaxHighlighter)

Uneori este nevoie să se evidenţieze codurile, fie ele cod php, css, javascript sau altele. Evidenţierea poate fi făcută folosind Blockquote însă o metodă mult mai bună (din punct de vedere vizual) este folosirea unui plugin: SyntaxHighlighter Evolved.

SyntaxHighlighter Evolved vă permite să publicați cu ușurință cod evidențiat ca sintaxă pe site-ul dvs., fără a pierde formatarea sau a face modificări manuale. Acesta folosește pachetul JavaScript SyntaxHighlighter de Alex Gorbatchev.

Pentru o demo live, consultați pagina principală a acestui plugin.

Instalarea modulului SyntaxHighlighter Evolved

SyntaxHighlighter este un modul WordPress, așadar se instalează la fel ca oricare alt modul.

Pentru început trebuie să fiți autentificat în WordPress ca administrator, apoi din Module → Adaugă modul scrieți în câmpul de căutare numele modului: SyntaxHighlighter Evolved.

Se face click pe Instalează acum, apoi pe Activează.

Setarea modulului SyntaxHighlighter Evolved

După activare modulul adaugă un meniu în Setări → SyntaxHighlighter.

Cod exemplu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
    <h1>PHP Code Example</h1>
 
    <p><?php echo 'Hello World!'; ?></p>
 
    <p>This line is highlighted.</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

În setări există o listă cu codurile de folosit.

Importante sunt următoarele:

  • dacă folosiți editorul clasic, treceți pe editare TEXT
  • dacă folosiți sistemul de blocuri, aveți grijă să selectați blocul HTML

Mai jos sunt parametrii:

Instalarea moduluui bbPress

Instalarea moduluui bbPress

Dacă dorești să formezi o comunitate pe site-ul tău, atunci aplicațiile de tip forum pot fi o soluție. Aceste forumuri sunt o modalitate excelentă de a pune subiecte în discuție și de a crea o comunitate pornind de la subiecte comune.

Există două tipuri de forumuri (numite și bulletin board). Unele care se instalează separat de WordPress, fie într-un subdirector, fie într-un subdomeniu, sau chiar ocupând un domeniu web întreb, cum ar fi: phpBB sau MyBB. Altele, cele care ne interesează pe noi în principal, se instalează ca un plugin la WordPress. Dintre acestea cele mai cunoscute sunt: bbPress, BuddyPress, ForumEngine, Simple:Press, wpForo Forum, Asgaros Forum, CM Answers, WP Symposium Pro, DW Question and Answer sau Discussion Board. Ultimele nu sunt chiar ceea ce se înțelege prin forum, dar, chiar și așa, permit crearea unei comunități.

În acest tutorial voi prezenta unul din cele mai bune pluginuri de tip forum pentru WordPress și anume bbPress, considerat de mulți ca fiind cel mai performant sistem bulletin board, alături de BuddyPress.

Ce este bbPress?

bbPress este un software gratuit cu sursă deschisă dezvoltat de o echip de colaboratori voluntari. Se integrează foarte bine cu WordPress-ul, folosind codul acestuia.

Similar cu WordPress-ul se pot instala noi pluginuri ce îmbunătățesc funcționalitățile de bază ale forumului, adaugă unele noi, ajută la gestionarea comunității, sau oferă unelte de design.

Pentru cei deja obișnuiți cu uneltele WP instalarea și administrarea forumului se va dovedi o treabă ușoară.

Instalarea forumului bbPress

bbPress este un plugin (modul), așadar se instalează la fel ca oricare alt modul.

Pentru început trebuie să fiți autentificat în WordPress ca administrator, apoi din Module → Adaugă modul scrieți în câmpul de căutare numele modului: bbPress.

Sa face click pe Instalează acum, apoi pe Activează.

După cum se vede modulul este parțial tradus în limba română, ceea ce constituie un real avantaj, atât pentru administratori, cât și pentru membrii comunității.

Crearea unui forum nou

Modulul adaugă în meniul din stânga trei noi meniuri: Forumuri, Subiecte și Răspunsuri.

La început nu există niciun forum. Să adăugăm unul:

Forumul are structura: Titlu, Descriere, Atribute și Moderatori.

 

Atritutele forumului se împart în:

Tip forum: forum sau categorie
Stare forum: deschis sau închis
Vizibilitate: public, privat sau ascuns
Părinte (ierarhic): se poate selecta un alt forum sau o altă categorie
Ordonează: se stabilește ordinea de afișare pe același nivel ierarhic (sub același părinte)

Moderatorii se numesc din rândul utilizatorilor existenți.

Destul de simplu, nu-i așa?

Publicarea forumului bbPress

După crearea structurii dorite, forumul trebuie publicat. pentru asta creați o nouă pagină numită Forum, sau Comunitate, sau Discuții, sau cum doriți și introduceți codul următor:

[bbp-forum-index]

Rezultatul trebuie seă fie asemănător cu:

Designul diferă funcție de tema folosită. În imagine este tema implicită: Twenty Twenty.

Forumul este bine integrat în WordPress și va prealua setările implicite ale temei, cum ar fi culorile, sau alte elemente specifice. De asemenea forumul este compatibil cu modulul antispam Akismet.

Setarea forumului bbPress

O altă pagină ce trebuie creată este cea de Înregistrare, unde se copiază codul:

[bbp-register]

Rezultatul pe partea publică fiind:

În acest moment dacă încercați să vă înregistrați veți primi mesajul: „ Înregistrarea utilizatorului nu este permisă în prezent. ”

Pentru a rezolva problema trebuie să mergeți în Setări → Generale și să bifați opțiunea „Membri: Oricine se poate înregistra”. Nu uitați să salvați!

Dacă încercați din nou să creați un user totul va decurge bine. Pe adresa introdusă se va trimite un email de confirmare a înregistrării.

Recuperarea parolei pierdute se poate realiza și implicit din interfața clasică de logare a WordPress-ului, dar cel mai bine este crearea unei pagini separate. Necesitatea vine din motive de securitate. De multe ori este indicat ca interfața de logare să aibă un alt url decât clasicul wp-admin, caz în care membrii forumului nu vor avea acces la schimbarea parolei.

Așadar, se crează o nouă pagină cu numele de „Ai uitat parola?” sau altceva similar („Recuperare parola”).

Pagina rezultată va fi asemănătoare cu:

Ultimul lucru care mai trebuie făcut pentru ca forumul să fie complet funcțional și accesibil vizitatorilor, viitorilor membri ai comunități, este să-i facem un formular de înregistrare vizibil pentru toți. De obicei pe sidebar.

Modulul bbPress adaugă mai multe Piese (Widgets) în zona de Aspect → Piese

Formularul de autentificare este (bbPress) Piesă autentificare. Doar trageți-l în locul dorit și completați câmpurile.

Rezultatul se poate vedea mai jos. Designul, culorile, fontul diferă funcție de tema instalată.

Administrarea forumului bbPress

Forumul are o mulțime de setări suplimentare, accesibile din Setări → Forumuri .

Îm majoritatea situațiilor setările implicte sunt suficiente. Darle puteți testa. Indicațiile sunt în limba română și ușor de înțeles.

Roluri pentru utilizatori în bbPress

WordPress vine cu propriul sistem de gestionare a rolurilor utilizatorului, care vă permite să atribuiți utilizatorilor roluri cu permisiuni diferite.

bbPress extinde rolurile utilizatorului WordPress prin adăugarea propriilor cinci roluri de utilizator predefinite, cu funcții diferite.

Aceste roluri sunt:

1. Keymaster – Administratorilor WordPress li se atribuie automat rolul Keymaster atunci când instalează bbPress. Un Keymaster poate șterge și crea forumuri, poate crea, edita, șterge toate postările, subiectele, categoriile.

2. Moderatori – Utilizatorii cu rol de moderator au acces la instrumente de moderare, pe care le pot utiliza pentru a modera forumuri, subiecte și postări.

3. Participanți – Acesta este rolul implicit al utilizatorului, participanții își pot crea și edita propriile subiecte și postări, pot prefera și abona la subiecte.

4. Spectatori – Spectatorii au acces numai la citirea forumurilor, subiectelor și postărilor publice.

5. Blocat – Când un utilizator este blocat, toate capacitățile lui sunt blocate. Încă poate citi subiecte și postări, care pot fi vizualizate public, dar nu poate participa la forumuri.

Sper să vă fi plăcut acest tutorial. Este primul scris pentru platforma tutorialewp.ro.