Искали ли сте някога временно да модифицирате уеб страница, за да видите как ще изглежда с конкретни цветове, шрифтове, стил? Това е възможно с инструмент, който вече съществува във вашия браузър, наречен " Проверете елемента ". Това е сбъдната мечта за всички потребители, които обичат да манипулират CSS.
В този урок ще ви преведем през основите на проверката на артикулите и как да го използвате с вашия сайт на WordPress.
Какво е инструмент за проверка на артикули?
Съвременните браузъри като Google Chrome и Mozilla Firefox имат вградени инструменти, които позволяват на уеб разработчиците да отстраняват грешки. Тези инструменти показват HTML, CSS и JavaScript за страница и показват как работи кода.
Използването на инструмента " Проверете елемента Можете да редактирате HTML, CSS или JavaScript код за всяка уеб страница и да видите промените си на живо (само на вашия компютър).
За собственик на а уеб сайт, тези инструменти могат да ви помогнат да визуализирате как ще изглежда определен стил, без всъщност да прилагате промените за всички.
За писателите тези инструменти са страхотни, защото можете лесно да променяте лична информация, докато правите екранни снимки, премахвайки необходимостта от действително размазване на елементи.
За агентите за поддръжка това е чудесен начин да идентифицират грешката, която може да е причина вашите галерии да не се зареждат или да им пречат да работят правилно.
Ние само надраскваме повърхността на случаите на употреба, тъй като инструментът " Проверете елемента Наистина е мощен.
В тази статия ще се съсредоточим върху инструмента " Проверете елемента От Google Chrome, защото това е нашият браузър по избор. Firefox има свои собствени инструменти за разработка, които също могат да бъдат извикани, като изберете менюто " инспектирайте елемент ".
Стартиране на инструмента "Проверка на елемент" и локализация на кода
Можете да стартирате този инструмент, като натиснете клавишите CTRL + Shift + I на клавиатурата. Като алтернатива можете да щракнете навсякъде на уеб страница и след това да изберете Проверка на елемента от менюто на браузъра.
Прозорецът на вашия браузър ще се раздели на две, а долният прозорец ще показва изходния код на уеб страницата.
Прозорецът на инструмента за разработчици е допълнително разделен на два прозореца. Вляво ще видите HTML кода за страницата. В десния прозорец ще видите правилата на CSS.
Докато преместите мишката върху източника на HTML кода, ще видите маркираната област, маркирана на уеб страницата. Ще забележите и CSS правилата за въпросния елемент.
Можете също да вземете показалеца на мишката върху елемент от уеб страницата, да кликнете с десния бутон на мишката и да изберете „ инспектирайте елемента ". Елементът, върху който сте щракнали, ще бъде маркиран в изходния код.
Разработчик на код и отстраняване на грешки на програмисти
HTML и CSS в прозореца за проверка на елементите са редактируеми. Можете да щракнете двукратно в изходния HTML код и да редактирате кода, както желаете.
Можете също така да щракнете двукратно и да редактирате атрибутите на стиловете в панела CSS. За да добавите правило, щракнете върху иконата плюс в панела за стил в горната част.
Когато направите промени в CSS или HTML код, тези промени ще бъдат отразени незабавно във вашия браузър.
Имайте предвид, че не всички промени, направени тук, се запазват навсякъде. Инструментът Проверете елемента Това е инструмент за отстраняване на грешки и не запазва вашите промени във файл на вашия сървър. Това означава, че ако обновите страницата, всички ваши промени ще бъдат загубени.
За да направите действително промените, ще трябва да промените стила на вашия WordPress тема или шаблон, за да добавите промените, които искате да запазите.
Преди да започнете да редактирате своя WordPress тема съществуващ с помощта на инструмента " Проверете елемента Не забравяйте да запазите всичките си промени, като създадете детска тема.
Как лесно да намерите грешки в WordPress
Инструментът Проверете елемента Има област, наречена „ Конзоли Което показва всички грешки, които съществуват на вашия сайт. Преди да се опитате да отстраните грешката или да потърсите помощ от авторите на тема или плъгин, винаги си струва да погледнете тук, за да видите какво не е наред.
Например, ако сте били клиент OptinMonster Кой се чуди защо неговият оптин не се зарежда, тогава лесно можете да намерите проблема, който показва, че „ плужекът на страницата ви не съвпада ".
Ако лентата ви за споделяне не работи правилно, можете да видите, че има грешка в JavaScript, която я причинява.
Това е всичко за този урок, надявам се, че можете да персонализирате по-добре своя WordPress блог. Чувствайте се свободни да споделите този урок с приятелите си.