Pluginuri pentru operațiuni de fundal WordPress. Editarea fundalului pe un șablon WordPress blog WordPress cu fundal transparent

blogul WordPress pot fi schimbate în mai multe moduri diferite și că aceste schimbări se fac de fapt în codurile de fișiere PHP situat în folderul temei de proiectare activă pe blog.

Acum aruncați o privire critică asupra blogului dvs. În curând, multe vor fi diferite, pentru că, în principiu, poți schimba singur ce vrei. Desigur, trebuie doar să știi cum să o faci.

În panoul de administrare

Accesați panoul de administrare la Aspect - Editor ... Știți deja de ce sunt responsabile multe dintre șabloane, dar acum nu veți fi interesați de șabloane, ci de ceea ce se află sub ele: Stiluri... Mai exact, o secțiune din ele, care se numește Lista de stiluri.

Fișierul se potrivește cu această listă stil.css ... Acest fișier se află pe blog în folderul temei activ. Îl poți găsi oricând acolo.

În browser

Deschideți-l doar în browserul dvs. Majoritatea browserelor au o caracteristică frumoasă: puteți face clic dreapta pe orice zonă de pe blog și puteți selecta din lista de operații Vizualizați codul articolului ... În partea de jos apare o fereastră unde puteți găsi informații interesante despre elementul pe care ați făcut clic.

În această fereastră stânga Veți vedea codul paginii și o linie va fi evidențiată în acel cod. corespunzător elementului dat. ȘI pe dreapta, în stiluri, vor exista proprietăți ale acestui element.

Dimensiunea fontului, liniuțe, text și culori de fundal, aliniere: totul este în stiluri și toate acestea pot fi schimbate.

Schimbați culoarea de fundal

Pe un blog WordPress, personal nu-mi place când fundalul articolelor și fundalul tuturor celorlalte sunt diferite. În acest caz, articolele din feed sunt în blocuri separate și, în opinia mea, nu arată foarte bine. Vom face fundalul peste tot la fel ca fundalul articolului. Faceți clic pe fundalul pe care dorim să îl modificăm, cu butonul din dreapta al mouse-ului, selectați Vizualizare cod element. Vom fi interesați de linia care va fi evidențiată ca rezultat în dreapta numele atributului clasei ... Stilurile sunt scrise pe clase.

În acest caz class \u003d art-layout-cell Aceasta înseamnă că în stiluri, în fișier stil.css, va exista și o astfel de clasă, iar proprietățile vor fi deja scrise în ea. Numai că va arăta diferit, și anume:

.art-layout-cell, iar apoi proprietățile acestei clase vor fi scrise cu acolade.

Găsiți o clasă cu acest nume în fișier stil.css... Să folosim funcția de căutare Ctrl + F, și scrieți numele în caseta de căutare: art-layout-cell... Vom vedea imediat fundalul:

culoare de fundal: transparent. Transparent mijloace transparent .

Acum, de ce culoare avem nevoie? Unde pot obține culoarea de fundal a articolelor noastre? De data aceasta o vom folosi fSCapture... În el. printre altele, printre setul de instrumente pe care îl puteți găsi pipetă care determină culoarea oricărei zone de pe ecranul monitorului. Un instrument foarte util!

Deschideți programul FSCapture, accesați Setări și alegeți instrumentul Pipetă de ecran ... Faceți clic pe zona dorită de pe ecran. La fereastră Hex Veți vedea codul culorii de care aveți nevoie: D2E8EE

Îl introduceți în stil art-layout-cell în loc de un cuvânt Transparent .

Vezi ce s-a întâmplat. Mai sunt multe lucruri de făcut, dar s-a început deja.

Video despre. cum să editați fundalul pe un blog WordPress

Informații mai detaliate pot fi găsite în secțiunile „Toate cursurile” și „Utilitatea”, care pot fi accesate prin meniul de sus al site-ului. În aceste secțiuni, articolele sunt grupate pe subiecte în blocuri care conțin cele mai detaliate (pe cât posibil) informații despre diferite subiecte.

De asemenea, vă puteți abona la blog și puteți afla despre toate articolele noi.
Nu durează mult timp. Doar faceți clic pe linkul de mai jos:

Fundalul este o imagine care prezintă toate elementele site-ului. Sau poate nu este o imagine, ci o culoare solidă sau degradată.

Majoritatea șabloanelor nu acceptă setarea și modificarea fundalurilor. Cu toate acestea, nu toate temele sunt capabile să facă acest lucru, mai ales când vine vorba de copii gratuite. Dar chiar dacă aveți un astfel de șablon instalat pe site-ul dvs., pe care puteți modifica fundalul WordPress în setări, aceasta va fi o operațiune foarte slabă, deoarece modificările vor fi aplicate simultan întregului site. Nu este posibil să schimbați fundalul în șabloanele obișnuite numai pentru unele postări, categorii sau pagini.

În acest articol, vă vom spune despre două pluginuri simple care rezolvă această problemă în câteva clicuri.

Fundal pe pagină

Acesta este cel mai simplu plugin care vă permite să vă manipulați fundalul WordPress. După instalare și activare, nu vor apărea setări și elemente suplimentare ale panoului de control al site-ului. Doar pe pagina fiecărei postări și pagini va exista o nouă opțiune care vă va permite să adăugați o imagine de fundal individuală.

Mai multe efecte pot fi aplicate imaginii selectate pentru fundalul WordPress:

  • Selectați repetare - orizontală sau verticală;
  • Faceți o imagine derulabilă cu site-ul sau fix, așa-numitul;
  • Selectați orientarea de fundal WordPress - dreapta, stânga, centru;
  • Alegeți o culoare de umplere obișnuită în locul imaginilor.

Pluginul este gratuit. În plus, fiecare fundal WordPress încărcat poate fi editat în editorul încorporat al acestui supliment.

Imagini de fundal pe ecran complet Pro

Și acest plugin este mai dificil de lucrat, vă permite să faceți mai mult de lucru cu fundalul WordPress. Se plătește și costă 13 USD. După instalarea activării pluginului, elementul de meniu al acestuia va apărea în panoul de administrare. Conține o galerie de fundaluri, aici puteți adăuga, șterge și edita imagini în orice moment.

În plus, puteți seta un fundal WordPress pentru orice postare sau pagină, identificându-le după ID, pentru pagina principală, orice categorie, pagini de arhivă și chiar o pagină 404.

Capabilitățile largi ale acestui plugin sunt completate de funcția care era în prima - pe pagină pentru adăugarea fiecărei pagini și postări, se adaugă opțiuni pentru setarea unei anumite imagini de fundal, cu un editor și tot felul de efecte.

Una peste alta, un instrument excelent pentru a crea un fundal WordPress. Atât pluginurile plătite, cât și cele gratuite sunt potrivite pentru multe sarcini legate de acest lucru.

Recent am vorbit despre soluții pentru - pe lângă utilizarea CSS și Javascript, 2 plugin-uri WordPress fac față și acestei sarcini. Unul dintre ele pe care îl voi lua în considerare mai detaliat astăzi este Background Manager. Nu fiecare temă are setări pentru schimbarea fundalului site-ului și nu fiecare utilizator va putea să o modifice prin stilurile din șablon. În plus, modulul are câteva funcții interesante suplimentare, așa că s-a decis studierea acestuia mai detaliată.

Actualizare 08.11.2018: Din păcate, modulul nu a fost actualizat de mult timp, iar acum a dispărut complet din depozitul oficial al Directorului de pluginuri. Citiți articolul sau vedeți selecția de pluginuri.

Puteți găsi modulul pe această pagină sau îl puteți instala după nume din zona de administrare WordPress. La momentul scrierii acestui articol, era deja considerat destul de vechi, deoarece versiunea acceptată s-a încheiat cu 3.7.8. Din păcate, este posibil ca pluginul să nu fie acceptat chiar acum. Cu toate acestea, l-am testat cu succes pe ultima versiune de sistem 4.2.1. În plus, 30 de mii de descărcări nu se găsesc în fiecare modul.

Sarcina principală a pluginului Background Manager este afișarea unui fundal aleatoriu pentru fiecare vizitator nou sau crearea unui slideshow din mai multe imagini. Sincer, inițial am crezut că modulul mă va ajuta doar să creez un fundal care poate fi făcut clic, dar funcțiile sale sunt ceva mai diverse. Vă permite să:

  • creați seturi de imagini din care imaginile vor fi inserate ca fundal al site-ului. Le puteți descărca de pe mașina dvs. locală, biblioteca media WordPress sau alte module;
  • determina pozitionarea fundalului, „replicarea” acestuia (daca este un tipar);
  • modele de suprapunere pe fundal;
  • vedeți imaginea completă după descărcare și nu așteptați până când apare treptat de sus în jos (dacă utilizați Internet lent);
  • configurați afișarea fundalului pe anumite pagini: principal, secțiuni, arhive sau postări;
  • adăugați un link pentru fundal cu calculul statisticilor de conversie prin Google Analytics.

După cum puteți vedea, un set foarte interesant de opțiuni. Acest lucru este la nivel global despre posibilități, dar modulul Manager de fundal este plin de tot felul de detalii. De exemplu, puteți alege transparența modelului suprapus, puteți determina efectul atunci când comutați între imagini într-un slideshow etc.

În afara setărilor modulului, îl veți găsi în secțiunea „Aspect” - „Fundal”. Aici, apropo, apare situația în care este posibil să aveți două elemente de meniu cu același nume simultan. Dacă vă amintiți, unele teme WordPress au această setare. Așadar, pluginul Background Manager este pe deplin compatibil cu acesta și îl puteți gestiona în această secțiune.

Dar este mai bine să mergeți la „Fundal”, care reprezintă doar setările modulului. Pe această pagină, veți vedea doar o grămadă de setări diferite.

Cu toate acestea, primul pas este crearea unui set de imagini pentru fundal - faceți clic pe linkul „ Adăugați un set de imagini noi". Puteți vizualiza seturile disponibile în fila „Seturi de imagini”.

După cum am spus, există o mulțime de setări aici, există:

  • principiul selectării imaginilor pentru fundal - aleatoriu etc;
  • afișarea diferitelor imagini de fiecare dată sau stocarea acestora într-o sesiune de browser;
  • culoare de fundal;
  • afișarea fundalului în ecran complet sau „replicare”;
  • suprapunerea unui model peste o imagine;
  • puteți adăuga un buton Pin It de la Pinterest și defini o serie de alte opțiuni.

În cele din urmă, trebuie remarcat faptul că uneori pot apărea probleme cu afișarea fundalului. Dacă aveți o setare strictă sau o redefinire a fundalului în șablonul dvs. CSS, este posibil ca plugin-ul Background Manager să nu funcționeze. De exemplu, pe un site am încărcat în liniște o imagine și am înlocuit proprietatea de fundal în stiluri, dar în acest blog a trebuit să o comentez special. De ce depinde este greu de spus. Iată ce s-a întâmplat în cele din urmă.

În general, Background Manager este un plugin grozav care vă permite să afișați diferite imagini pentru fundalul site-ului dvs. web și chiar să faceți un slideshow din ele. Pentru unele proiecte, acesta poate fi un mare element „decorativ”.

În ceea ce privește legăturile din fundal în Background Manager. Există o opțiune similară în setări și puteți specifica un link pentru fiecare imagine. Am testat această funcție și totul părea să funcționeze în momentul scrisului. Cu toate acestea, acum există probleme cu acest lucru. Singurul lucru pe care am reușit să-l facem a fost să plasăm linkul într-un element special - consultați pictograma [+] din captura de ecran de mai sus. Această funcție de plugin funcționează fără probleme.


Astăzi, în practica mea, am dat peste faptul că pentru fundalul meniului era necesar să pun transparenţă... Bineînțeles, a existat o opțiune de a o face folosind picture.png, dar totuși am decis să săpăm și să o facem fundal semitransparent cu CSS... S-a dovedit a fi destul de simplu :)

În codul html scriem o „clasă” pentru care este necesar să stabilim o anumită transparență:

FON (fundal: rgba (200, 54, 54, 0,5);)

astfel, am specificat culoarea de fundal prin setarea valorilor pentru cele trei culori primare (roșu - r, verde - g, albastru - b) și o transparență de fundal de 50% (alfa - a) de o singură proprietate. Valorile pentru culoare sunt specificate în intervalul de la 0 la 255, iar pentru transparență, intervalul va fi de la 0,0 la 1,0

Proprietate rgba aplicabil și pentru toate celelalte elemente. Dar dacă devine necesar să setați transparența pentru toate elementele din această clasă, atunci puteți utiliza proprietatea opacitate, care setează transparența întregului element sau a întregii pagini. atunci codul va arăta astfel:

FON (opacitate: 0,5;)

În acest caz, toate elementele din această clasă vor deveni transparente, inclusiv imaginile și textul vor fi transparente.

Abonați-vă și primiți articole utile prin poștă!

Alte articole interesante pe blogul nostru

  • Știu că, în practică, există adesea o astfel de situație încât proprietarul site-ului „elimină” sau creează un site „de la zero” de mai multe ori și, ca urmare, nu obține rezultatul dorit. În acest caz, urmează ...
  • Material afiliat! Datorită concentrării constante a motoarelor de căutare direct pe utilizatorul de internet însuși și a indicatorilor celor mai recente actualizări ale algoritmilor Google, a devenit și mai important ca proprietarii de site-uri să acorde atenție vitezei lor de încărcare ...
  • Uitați-vă, dacă sarcina dvs. este să „dezvoltați un site la cheie” - urmați acest link și delegați-ne sarcina. Dacă aveți nevoie de un exemplu de sarcină tehnică - consultați articolul „Termeni de referință pentru crearea ...
  • Material afiliat! - Vrei să-ți publici articolul? Pentru mulți proprietari de site-uri web, SEO pare o sarcină descurajantă. De fapt, acest lucru nu este adevărat. Atragerea specialiștilor cu înaltă calificare în promoție poate fi foarte ...