Как да персонализирате своя WordPress уебсайт с CSS: 3 лесни метода

WordPress се развива през годините и днес е доста гъвкава и лесна за персонализиране платформа чрез своя редактор на блокове Gutenberg. Все пак ще има моменти, когато имате нужда от малко по-голям обхват, отколкото предоставя редакторът на Gutenberg.

Това е мястото, където персонализираният CSS е полезен. CSS стилът ви позволява да редактирате цветовете, разстоянието, шрифтовете, оформленията и по същество всеки друг визуален елемент на вашия уебсайт на WordPress, което ви позволява да го направите да изглежда точно както искате.

В тази статия ще ви преведем през основните неща за персонализирането на вашия WordPress уебсайт с CSS.

Защо да персонализирате уебсайта си с CSS?

Добавянето на персонализиран CSS е само един от методите, които можете да използвате за фина настройка на външния вид на вашия сайт. Други методи включват използването на a добре представена първокласна тема на WordPress, или инсталиране на конструктор на страници.

Въпреки че тези два метода са малко по-лесни за използване от начинаещи и не изискват познания за кодиране, използването на персонализиран CSS е по-изгодно по два основни начина:

Нулева цена

Премиум теми и създателите на страници на WordPress могат да бъдат удобни, но имат цена - в долари и центове. Въоръжени със знанията как да пишете персонализиран CSS, от друга страна, можете да постигнете същите ефекти, без да правите допълнителни разходи.

Минимално подуване

Създателите на страници и добре представените теми са предназначени да дадат на потребителите повече гъвкавост и широк спектър от опции за персонализиране на техните уебсайтове. Поради това те са склонни да добавят раздуване към уебсайтовете, което потенциално ги забавя.

Когато пишете персонализиран CSS, от друга страна, ще добавите само необходимите функции, което обикновено води до по-леки уебсайтове и по-бързи скорости на зареждане.

3 лесни метода за персонализиране на вашия WordPress уебсайт с CSS

Надяваме се, че вече знаете как да напиша CSS. След като сте запознати с основите, можете да използвате всеки един от следните методи, за да добавите персонализиран CSS към вашия уебсайт на WordPress:

Метод 1: Използвайте инструмента за персонализиране на WordPress

С WordPress 4.7 или всяка версия след него можете да добавите персонализиран CSS директно от административната област. Това е най-лесният метод и тъй като има налична визуализация на живо, можете да видите всички промени, които правите в реално време.

Това е и най-препоръчителното, тъй като всички промени, които ще правите, се записват в самия WordPress. Това означава, че дори да промените или актуализирате вашата тема, няма да загубите персонализирания си CSS.

Ето стъпките, които трябва да предприемете:

Етап 1: Навигирайте до Външен вид > Персонализиране.

Това ще отвори инструмента за персонализиране на теми на WordPress, който ви показва визуализация на живо на вашия сайт вдясно, заедно с някои опции за персонализиране отляво. Превъртете надолу до долната част на левия панел и ще намерите Допълнителен CSS раздел.

Стъпка 2: Щракнете върху Допълнителен CSS Раздел.

Това ще отвори малко поле в левия панел, където можете да добавите своя персонализиран CSS. Можете да въведете толкова реда CSS код, колкото искате. Страхотното на този редактор е, че той валидира кода ви, като ви предупреждава, ако има някакви грешки.

Стъпка 3: Публикувайте промените си.

Всяко валидно CSS правило, което добавите, ще се покаже в областта за визуализация на живо вдясно. За да приложите промените към вашия сайт, щракнете върху Публикувайте бутон в горната част на левия панел, след като сте доволни. Ако не искате промените да влязат в сила незабавно, можете също да насрочите публикуване за по-късен момент или да запазите работата си като чернова.

Важно е да се отбележи, че всички промени, които правите с помощта на инструмента за персонализиране, са обвързани с текущата ви тема. Ако някога преминете към друга тема, промените ще бъдат загубени, освен ако не копирате своя персонализиран CSS и не го добавите към новата тема. Добра практика е да запазите всички персонализирани CSS, които добавяте към тема, в бележник. По този начин можете просто да копирате кода и да го поставите в секцията „Допълнителен CSS“ за друга тема.

Ако това звучи като твърде много работа и предпочитате решение, което ви позволява да приложите своя персонализиран CSS към всяка тема на WordPress, която използвате, следващият метод е за вас.

Метод 2. Използвайте плъгин

Персонализираните CSS плъгини съхраняват вашия персонализиран CSS отделно от вашата тема, позволявайки вашите промени да бъдат приложени, независимо коя тема използвате. Тези плъгини също се предлагат с допълнителни функции като автоматично довършване, което може да улесни добавянето на CSS.

Единственият недостатък е, че те са софтуер на трета страна, което означава, че потенциално могат да забавят вашия сайт. Повечето от тези плъгини обаче са леки, така че обикновено имат малко влияние върху производителността на вашия сайт. Ето някои от най-добрите персонализирани CSS плъгини, които можете да използвате:

• Прост персонализиран CSS

Прост персонализиран CSS е един от най-популярните персонализирани CSS плъгини. Той е лек, лесен за използване и предлага страхотни функции. Настройването му е лесно. Всичко, което трябва да направите, е да инсталирате и активирате приставката. След това отидете до Външен вид раздел в левия панел на таблото ви.

Ще видите нова опция, наречена Персонализиран CSS. Щракването върху него ще отвори редактор, където можете да добавите своя персонализиран CSS. Щракнете върху Актуализирайте персонализиран CSS бутон, за да запазите промените си. За да видите промените, просто опреснете уебсайта си.

• Прост персонализиран CSS и JS

Ако искате още повече функции, Прост персонализиран CSS и JS плъгин е страхотен вариант. В допълнение към добавянето на CSS, той ви позволява да добавяте записи в JavaScript.

• CSS герой

Ако не искате да пишете нито един ред код, CSS Hero плъгин е идеален за вас. Този плъгин предлага визуален CSS редактор с падащи менюта и полета за въвеждане, които ви позволяват да редактирате почти всеки CSS стил на вашия сайт, без да се налага да пишете код.

Метод 3. Редактирайте необработения код

Двата метода, които описахме по-горе, ви позволяват да добавяте персонализиран CSS към вашия сайт, без да е необходимо да докосвате някой от вашите тематични файлове. Но в някои случаи може да искате да редактирате CSS на вашата тема или директно да добавите персонализиран CSS към кода на вашата тема.

За да направите това, ще трябва да получите достъп до таблицата със стилове на вашия уебсайт. Лесен начин за достъп до тази таблица със стилове е чрез Редактор на теми на вашето табло за управление на WordPress.

Преди да продължим по-нататък обаче, има няколко предпазни мерки, които трябва да поставите. първо, архивирайте уебсайта си. Докато редактирате вашите файлове с теми, е лесно да правите грешки, които потенциално могат да сринат вашия сайт.

Резервното копие гарантира, че имате функционален уебсайт, към който да се върнете. Следващия, създайте детска тема. Ако направите директни редакции на вашата родителска тема, промените ще бъдат загубени всеки път, когато темата се актуализира.

След като тези предпазни мерки са въведени, влезте в своя бекенд на WordPress. Отидете на Външен вид > Редактор на теми. Когато щракнете върху опцията за редактор на теми, ще видите изскачащ прозорец, който ви предупреждава да не правите директни промени във вашите файлове с теми. Ако следвате горните стъпки, можете да тръгнете.

Щракнете върху разбирам за да продължите.

След като щракнете, трябва да видите стиловата таблица на вашия сайт по подразбиране. Ако не, просто погледнете в десния панел и щракнете върху style.css под Таблица със стилове опция.

От тук можете да правите директни промени във вашите файлове с теми. Просто не забравяйте да щракнете Запазете и актуализирайте след като сте готови.

Поемете контрол върху външния вид на вашия сайт с персонализиран CSS

Научаването как да пишете персонализиран CSS в WordPress може да отнеме известно време за начинаещи, но ще ви даде истински контрол върху външния вид на вашия уебсайт. И това е с нулева цена и с минимално въздействие върху производителността на вашия сайт.

Ако предпочитате да не правите ръчно проектиране обаче, има и други начини да свършите работата, като например да използвате един от най-добрите създатели на страници за WordPress.

5 конструктора на страници в WordPress, които могат да ви помогнат да изградите невероятни уебсайтове

Искате да направите своя WordPress сайт да изглежда невероятно, но не можете да си позволите разработчик? Вместо това опитайте тези създатели на страници на WordPress.

Прочетете Следващото

За автора