ako urobiť priehľadné pozadie vo wordpresse. Priehľadné pozadie alebo text pomocou CSS

Pozadie je obrázok, na ktorom sú zobrazené všetky prvky stránky. Alebo to nemusí byť obrázok, ale plná alebo prechodová farba.

Väčšina šablón nepodporuje nastavenie a zmenu pozadia. Nie všetky témy to však dokážu, najmä pokiaľ ide o bezplatné kópie. Ale aj keď máte na svojom webe nainštalovanú šablónu, kde si môžete v nastaveniach zmeniť pozadie WordPressu, pôjde o veľmi skromnú operáciu, keďže zmeny sa aplikujú na celý web naraz. V bežných šablónach nie je možné zmeniť pozadie len niektorých príspevkov, kategórií alebo stránok.

V tomto článku vám povieme o dvoch jednoduchých doplnkoch, ktoré tento problém vyriešia niekoľkými kliknutiami.

Pozadie na stránku

Toto je najjednoduchší doplnok, ktorý vám umožňuje vykonávať operácie s pozadím WordPress. Po jeho inštalácii a aktivácii sa v ovládacom paneli lokality nezobrazia žiadne nastavenia ani ďalšie položky. Iba na každom príspevku a stránke bude nová možnosť, ktorá vám umožní pridať vlastný obrázok na pozadie.

Na obrázok vybraný pre pozadie WordPress je možné použiť niekoľko efektov:

  • Vyberte opakovanie – horizontálne alebo vertikálne;
  • Urobte obrázok rolovateľným s webom alebo pevným, tzv.
  • Vyberte orientáciu pozadia WordPress – vpravo, vľavo, v strede;
  • Namiesto obrázkov zvoľte bežnú farebnú výplň.

Plugin je bezplatný. Navyše každé stiahnuté pozadie WordPress je možné upravovať v vstavanom editore tohto doplnku.

Obrázky na pozadí celej obrazovky Pro

Tento doplnok je zložitejší na používanie a umožňuje vám vykonávať viac operácií s pozadím WordPress. Platí sa a stojí 13 dolárov. Po nainštalovaní aktivácie pluginu sa v administračnom paneli objaví položka ponuky. Ukladá galériu pozadí, kde môžete obrázky kedykoľvek pridávať, mazať a upravovať.

Okrem toho môžete nastaviť pozadie WordPress pre akýkoľvek príspevok alebo stránku a identifikovať ich podľa ID domovskej stránke, ľubovoľná kategória, archívne stránky a dokonca aj 404 strán.

Široké možnosti tohto pluginu dopĺňa funkcia, ktorá bola v prvom - na pridávacej stránke každej stránky a príspevku sú pridané možnosti inštalácie toho či onoho obrázok na pozadí, s editorom a všetkými možnými efektmi.

Celkovo vzaté, skvelý nástroj na vytvorenie pozadia WordPress. Platené aj bezplatné pluginy sú vhodné na riešenie mnohých problémov, ktoré s tým súvisia.


Dnes som sa vo svojej praxi stretol s tým, že pre pozadie menu bolo potrebné nastaviť transparentnosť. Samozrejme, existovala možnosť, ako to urobiť pomocou súboru picture.png, ale aj tak som sa rozhodol prekopať a urobiť to priesvitné pozadie s pomocou CSS . Ukázalo sa, že je to celkom jednoduché :)

Do html kódu napíšeme „triedu“, pre ktorú je potrebné nastaviť určitú transparentnosť:

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

Preto som špecifikoval farbu pozadia nastavením hodnôt pre tri základné farby (červená - r, zelená - g, Modrá - b) a priehľadnosť pozadia na 50 % (alfa - a) s jednou vlastnosťou. Hodnoty farby sú v rozsahu od 0 do 255 a pre priehľadnosť je rozsah od 0,0 do 1,0

Nehnuteľnosť rgba platí aj pre všetky ostatné prvky. Ak však bude potrebné nastaviť priehľadnosť pre všetky prvky v danej triede, môžete použiť vlastnosť nepriehľadnosť, ktorý nastavuje priehľadnosť pre celý prvok alebo celú stránku. potom bude kód vyzerať takto:

FON (nepriehľadnosť: 0,5; )

V tomto prípade sa všetky prvky v tejto triede stanú transparentnými, vrátane obrázky a text budú priehľadné.

Prihláste sa na odber a dostávajte užitočné články e-mailom!

Ďalšie skvelé články na našom blogu

  • Viem, že v praxi často nastáva situácia, že majiteľ stránky niekoľkokrát „prerobí“ alebo vytvorí „od začiatku“ a nakoniec nedosiahne požadovaný výsledok. V tomto prípade by ste mali...
  • Partnerský materiál! Vďaka neustálemu sústredeniu vyhľadávače priamo na samotnom užívateľovi internetu a indikátory najnovších aktualizácií Algoritmy Google, je pre majiteľov webových stránok ešte dôležitejšie venovať pozornosť rýchlosti ich načítania...
  • Pozrite, ak máte za úlohu „vytvoriť webovú stránku na kľúč“, kliknite na tento odkaz a delegujte túto úlohu na nás. Ak potrebujete príklad zadávacích podmienok- pozri článok „Špecifikácie pre vytváranie...
  • Partnerský materiál! - Chcete zverejniť svoj článok? Pre mnohých majiteľov webových stránok sa SEO optimalizácia javí ako veľmi náročná úloha. V skutočnosti to nie je pravda. Prilákanie vysokokvalifikovaných odborníkov na propagáciu môže byť veľmi...


Nedávno som hovoril o riešeniach pre – okrem pomocou CSS a Javascript tiež zvládajú túto úlohu 2 WordPress plugin. Dnes zvážim jeden z nich podrobnejšie - toto je správca pozadia. Nie každá téma má nastavenia na zmenu pozadia stránky a nie každý používateľ ju bude môcť opraviť prostredníctvom štýlov v šablóne. Okrem toho má modul niekoľko doplnkových zaujímavé funkcie, a tak bolo rozhodnuté preštudovať si ho podrobnejšie.

Aktualizácia 8. 11. 2018: Bohužiaľ, modul nebol dlho aktualizovaný a teraz úplne zmizol z oficiálneho úložiska Plugin Directory. Prečítajte si článok alebo si pozrite výber pluginov.

Modul nájdete na tejto stránke alebo si ho nainštalujete podľa názvu z administračného panela WordPress. V čase písania bol považovaný za dosť starého, pretože... podporovaná verzia skončila na 3.7.8. Žiaľ, doplnok nemusí byť práve teraz podporovaný. Mám to však úspešne otestované Najnovšia verzia systémy 4.2.1. Navyše v každom module nenájdete 30 tisíc stiahnutí.

Hlavnou úlohou pluginu Správca pozadia je zobrazenie náhodného pozadia pre každého nového návštevníka alebo vytvorenie slideshow z viacerých obrázkov. Úprimne povedané, pôvodne som si myslel, že modul mi jednoducho pomôže vytvoriť klikacie pozadie, ale jeho funkcie sú o niečo rozmanitejšie. Dovoľuje:

  • vytvárať sady obrázkov, z ktorých budú obrázky vložené ako pozadie stránky. Môžete si ich stiahnuť z lokálny počítač, knižnica médií WordPress alebo iné moduly;
  • určiť umiestnenie pozadia, jeho „replikáciu“ (ak ide o vzor);
  • aplikujte vzory na pozadie;
  • zobraziť obrázok celý po načítaní a nečakať, kým sa postupne objaví zhora nadol (ak máte pomalé internetové pripojenie);
  • nastaviť zobrazenie na pozadí určité stránky: hlavná stránka, sekcie, archívy alebo príspevky;
  • pridať odkaz na pozadie s výpočtom štatistík konverzií cez Google Analytics.

Ako vidíte, veľmi zaujímavý súbor možností. To hovorí globálne o schopnostiach, ale modul Správca pozadia je plný najrôznejších detailov. Môžete si teda napríklad zvoliť priehľadnosť vzoru prekrytia, určiť efekt pri prechode medzi obrázkami v prezentácii atď.

Mimo nastavení modulu nájdete v sekcii " Vzhľad" - "Pozadie". Tu, mimochodom, nastáva situácia, že môžete mať naraz dve položky menu s rovnakým názvom. Ak si pamätáte, tak v niektorých WordPress témy Existuje podobné nastavenie. Doplnok Správca pozadia je s ním plne kompatibilný a môžete ho spravovať v tejto sekcii.

Je však lepšie prejsť na „Pozadie“, ktoré predstavuje iba nastavenia modulu. Na tejto stránke uvidíte len veľa rôznych nastavení.

Prvým krokom je však vytvorenie sady obrázkov na pozadí - kliknite na odkaz “ Pridať novú sadu obrázkov". Dostupné sady si môžete pozrieť na karte „Súpravy obrázkov“.

Ako som už povedal, je tu veľa nastavení, sú tu:

  • princíp výberu obrázkov na pozadí - náhodne atď.;
  • zobrazenie rôznych obrázkov zakaždým alebo ich zapamätanie v relácii prehliadača;
  • farba pozadia;
  • zobrazenie pozadia na celej obrazovke alebo „replikácia“;
  • prekrytie vzoru cez obrázok;
  • môžete pridať tlačidlo Pin It z Pinterestu a definovať množstvo ďalších možností.

Na záver treba poznamenať, že niekedy môžu nastať problémy so zobrazením pozadia. Ak máte prísne priradenie alebo prepísanie pozadia v CSS šablóny, doplnok Správca pozadia nemusí fungovať. Napríklad na jednej stránke som ľahko načítal obrázok a nahradil vlastnosť pozadia v štýloch, ale v tomto blogu som to musel konkrétne komentovať. Ťažko povedať, od čoho to závisí. Toto sa nakoniec stalo.

Celkovo je Správca pozadia skvelý doplnok, ktorý vám umožňuje zobraziť rôzne obrázky na pozadí vašich webových stránok a dokonca z nich vytvoriť prezentáciu. Pre niektoré projekty to môže byť skvelý „dekoratívny“ prvok.

Čo sa týka odkazov z pozadia v Správcovi pozadia. V nastaveniach je podobná možnosť a pre každý obrázok môžete zadať odkaz. testoval som túto funkciu a zdá sa, že v čase písania článku všetko fungovalo. Teraz sú s tým však problémy. Jediné, čo som mohol urobiť, bolo umiestniť odkaz do špeciálneho prvku – pozri ikonu [+] na snímke obrazovky vyššie. Táto funkcia pluginu funguje bez problémov.

blog na WordPress možno zmeniť najviac rôzne cesty a že tieto zmeny sú skutočne vykonané v kódoch PHP súbory Nachádza v priečinku motívu aktívneho dizajnu na blogu.

Teraz sa pozrite na svoj blog kritickým okom. Čoskoro na nej bude veľa vecí inak, pretože v princípe si na tej svojej môžete zmeniť, čo len chcete. Samozrejme, len treba vedieť, ako na to.

V administratívnom paneli

Prihláste sa do administratívneho panela v Vzhľad – redaktor . Už viete, za čo sú zodpovedné mnohé šablóny, ale teraz vás nebudú zaujímať šablóny, ale to, čo je pod nimi: Štýly. Presnejšie jeden ich úsek, ktorý je tzv Zoznam štýlov.

Súbor zodpovedajúci tomuto zoznamu je style.css. Tento súbor sa nachádza na blogu v aktívnom priečinku témy. Vždy ho tam nájdete.

V prehliadači

Stačí otvoriť prehliadač. Väčšina prehliadačov má príjemnú funkciu: Môžete kliknúť pravým tlačidlom myši na ľubovoľnú oblasť na blogu a vybrať si zo zoznamu operácií Zobraziť kód prvku . V spodnej časti sa zobrazí okno, v ktorom nájdete zaujímavé informácie o prvku, na ktorý ste klikli.

V tomto okne vľavo Uvidíte kód stránky a v tomto kóde sa zvýrazní riadok. zodpovedajúce tomuto prvku. A napravo, v štýloch budú vlastnosti tohto prvku.

Veľkosť písma, zarážky, farba textu a pozadia, zarovnanie: všetko je v štýloch a toto všetko sa dá zmeniť.

Zmena farby pozadia

Zapnuté WordPress blog Osobne nemám rád, keď je pozadie článkov a pozadie všetkého iné. V tomto prípade sa články vo feede zobrazujú v samostatných blokoch a podľa mňa nevyzerajú veľmi dobre. Pozadie urobíme všade rovnaké ako aktuálne pozadie článku. Kliknite pravým tlačidlom myši na pozadie, ktoré chceme zmeniť, a vyberte Zobraziť kód prvku. V riadku, ktorý bude vo výsledku zvýraznený vpravo, nás bude zaujímať názov atribútu triedy . Štýly sú predpísané konkrétne podľa triedy.

IN v tomto prípade trieda = art-layout-cell To znamená, že v štýloch, v súbore style.css, bude aj taká trieda a vlastnosti v nej už budú špecifikované. Bude to vyzerať inak, konkrétne:

.art-layout-cell a potom sa vlastnosti tejto triedy zapíšu do zložených zátvoriek.

Nájdite triedu s týmto názvom v súbore style.css. Využime funkciu vyhľadávania Ctrl+F a do vyhľadávacieho poľa zadajte názov: art-layout-cell. Okamžite uvidíme pozadie:

farba pozadia: priehľadná. Transparentné znamená transparentný .

Teraz, akú farbu potrebujeme? Kde môžem získať farbu pozadia našich článkov? Tentoraz využijeme Program FSCapture. V ňom. okrem iného medzi súpravou nástrojov, ktoré nájdete pipeta, ktorý určuje farbu ľubovoľnej oblasti na obrazovke monitora. Veľmi užitočný nástroj!

Otvorte program FSCapture, prejdite na nastavenie a vyberte nástroj Kvapkadlo na obrazovke . Kliknite na požadovanú oblasť na obrazovke. V okne Hex Uvidíte kód farby, ktorú potrebujete: D2E8EE

Vložíte ho do štýlu art-layout-cell namiesto slova Transparentné .

Pozrite, čo sa stalo. Čaká nás ešte veľa práce, ale už sa začalo.

Video o tom. ako upraviť pozadie na blogu wordpress

Viac podrobnosti Môžete ho získať v sekciách „Všetky kurzy“ a „Nástroje“, ku ktorým je možné pristupovať Horné menu stránky. V týchto sekciách sú články zoskupené podľa tém do blokov obsahujúcich čo najpodrobnejšie (pokiaľ je to možné) informácie o rôznych témach.

Môžete sa tiež prihlásiť na odber blogu a dozvedieť sa o všetkých nových článkoch.
Nezaberie to veľa času. Stačí kliknúť na odkaz nižšie: