Chceli ste niekedy dočasne zmeniť webovú stránku, aby ste videli, ako by vyzerala s konkrétnymi farbami, typmi písma, štýlom? To je možné pomocou nástroja, ktorý už vo vašom prehliadači existuje, s názvom „ Skontrolujte prvok ". Toto je sen pre všetkých používateľov, ktorí radi manipulujú s CSS.
V tomto výučbe vás prevedieme základmi kontroly položiek a jej použitím na webe WordPress.
Čo je nástroj na kontrolu položiek?
Moderné prehliadače ako Google Chrome a Mozilla Firefox majú zabudované nástroje, ktoré umožňujú vývojárom webových stránok ladiť chyby. Tieto nástroje zobrazujú HTML, CSS a JavaScript pre stránku a ukazujú, ako sa kód spúšťa.
Používanie nástroja “ Skontrolujte prvok Môžete upravovať kód HTML, CSS alebo JavaScript pre ľubovoľnú webovú stránku a vaše zmeny sa zobrazujú naživo (iba v počítači).
Pre majiteľa a webové stránky, tieto nástroje vám môžu pomôcť zobraziť ukážku toho, ako bude vyzerať určitý štýl, bez toho, aby sa zmeny skutočne použili pre všetkých.
Pre autorov sú tieto nástroje úžasné, pretože pri vytváraní snímok obrazovky môžete ľahko meniť osobné identifikačné informácie a eliminovať tak potrebu skutočne rozmazávať prvky.
Pre agentov podpory je to skvelý spôsob, ako identifikovať chybu, ktorá môže spôsobiť, že sa vaše galérie nenačítajú, alebo im môže zabrániť v správnom fungovaní.
Poškriabeme iba povrch prípadov použitia, pretože nástroj „ Skontrolujte prvok Je skutočne silný.
V tomto článku sa zameriame na nástroj “ Skontrolujte prvok Z prehliadača Google Chrome, pretože je to náš vybraný prehliadač. Firefox má svoje vlastné vývojové nástroje, ktoré je možné vyvolať aj výberom ponuky „ skontrolovať prvok ".
Spustenie nástroja „Skontrolovať prvok“ a lokalizácia kódu
Tento nástroj môžete spustiť stlačením tlačidiel CTRL + SHIFT + I na klávesnici. Prípadne môžete kliknúť kamkoľvek na webovú stránku a potom kliknúť na položku Skontrolovať položku ponuky prehliadača.
Okno prehľadávača sa rozdelí na dve časti a spodné okno zobrazí zdrojový kód webovej stránky.
Okno vývojového nástroja je ďalej rozdelené na dve okná. Na ľavej strane uvidíte kód HTML stránky. Na pravej table uvidíte pravidlá CSS.
Pri pohybe myšou po zdroji kódu HTML sa na webovej stránke zvýrazní zvýraznená oblasť. Tiež si všimnete pravidlá CSS pre tento prvok.
Môžete tiež vziať ukazovateľ myši na položku na webovej stránke, kliknúť pravým tlačidlom myši a vybrať možnosť „ skontrolovať prvok „. Položka, na ktorú ste klikli, bude zvýraznená v zdrojovom kóde.
Vývojár kódu a ladiaci program pre vývojárov
HTML a CSS v okne kontroly prvkov sú editovateľné. Môžete dvakrát kliknúť na zdrojový kód HTML a upravovať ho podľa svojich predstáv.
Môžete tiež dvakrát kliknúť a upraviť atribúty štýlov v table CSS. Ak chcete pridať pravidlo, kliknite na ikonu plus na paneli štýlov v hornej časti.
Keď vykonáte zmeny v kóde CSS alebo HTML, tieto zmeny sa okamžite prejavia vo vašom prehliadači.
Upozorňujeme, že nie všetky tu vykonané zmeny sa uložia kdekoľvek. Nástroj Skontrolujte prvok Je nástrojom na ladenie a neukladá vaše zmeny do súboru na vašom serveri. To znamená, že ak stránku obnovíte, všetky vaše zmeny sa stratia.
Ak chcete skutočne vykonať zmeny, budete musieť upraviť svoj štýl WordPress tému alebo šablónu na pridanie zmien, ktoré chcete uložiť.
Skôr ako začnete upravovať svoj WordPress tému existujúce pomocou nástroja " Skontrolujte prvok Nezabudnite uložiť všetky svoje zmeny vytvorením podradeného motívu.
Ako nájsť WordPress chyby ľahko
Nástroj Skontrolujte prvok Má oblasť s názvom „ Konzola Ktorá zobrazuje všetky chyby, ktoré existujú na vašom webe. Pred pokusom o ladenie chyby alebo požiadaním o pomoc od autorov témy alebo doplnku sa vždy oplatí pozrieť sa, čo sa deje.
Napríklad, ak ste boli zákazníkom OptinMonster Kto sa pýta, prečo sa jeho optin nenačíta, potom môžete ľahko nájsť problém, ktorý naznačuje, že „ Slug vašej stránky sa nezhoduje ".
Ak váš panel zdieľania nepracoval správne, môžete zistiť, že došlo k chybe kódu JavaScript.
To je všetko pre tento tutoriál, dúfam, že si ho môžete lepšie prispôsobiť WordPress blog. Neváhajte a zdieľajte tento návod so svojimi priateľmi.
