Wordpress бет фонын мөлдір ету жолы. CSS көмегімен мөлдір фон немесе мәтін

Бүгін мен өз тәжірибемде мәзірдің фонына қою керек екеніне тап болдым ашықтық. Әрине, мұны picture.png көмегімен жасау мүмкіндігі болды, бірақ мен қазып, жасауды шештім. мөлдір фон CSS көмегімен . Бұл өте оңай болып шықты :)

Html кодында біз белгілі бір мөлдірлікті орнату қажет «сыныпты» жазамыз:

FON (фон: rgba(200, 54, 54, 0,5); )

осылайша, мен үш негізгі түстің мәндерін орнату арқылы фон түсін көрсеттім (қызыл - r, жасыл - g, көк - б) және фон мөлдірлігі 50% (альфа - а) бір қасиетпен. Түс мәндері 0-ден 255-ке дейінгі диапазонда көрсетіледі, ал мөлдірлік үшін диапазон 0,0-ден 1,0-ге дейін болады.

Меншік rgbaбарлық басқа элементтер үшін де қолданылады. Бірақ егер осы сыныптағы барлық элементтер үшін мөлдірлікті орнату қажет болса, онда сипатты пайдалануға болады мөлдірлік, ол бүкіл элемент немесе бүкіл бет үшін мөлдірлікті орнатады. содан кейін код келесідей болады:

FON (мөлдірлік: 0,5; )

Бұл жағдайда осы сыныптағы барлық элементтер, соның ішінде мөлдір болады суреттер мен мәтін мөлдір болады.

Жазылыңыз және пайдалы мақалаларды пошта арқылы алыңыз!

Біздің блогтағы басқа тамаша мақалалар

• Тәжірибеде сайт иесінің сайтты бірнеше рет «қайта жасап» немесе «нөлден» жасап, соңында қалаған нәтижеге жете алмайтын жағдайлар жиі болатынын білемін. Бұл ретте ол…
• Серіктестік мазмұны! Тұрақты назар аудару арқылы іздеу жүйелерітікелей интернет пайдаланушысында және көрсеткіштерде соңғы жаңартулар Google алгоритмдері, сайт иелері үшін олардың жүктеу жылдамдығына назар аудару одан да маңызды болды…
• Қараңыз, егер сізде «кілтке арналған веб-сайтты әзірлеу» тапсырмасы болса - осы сілтемеге өтіп, тапсырманы бізге тапсырыңыз. Егер сізге мысал керек болса техникалық тапсырма- мақаланы қараңыз «ТР құру үшін ...
• Серіктестік мазмұны! – Мақалаңызды жариялағыңыз келе ме? Көптеген веб-сайт иелері үшін SEO қиын тапсырма сияқты көрінеді. Шындығында бұл дұрыс емес. Көтермелеу үшін жоғары білікті мамандарды жалдау өте…

Жақында - қоспағанда шешімдер туралы айтылды CSS пайдаланужәне Javascript бұл тапсырманы да жеңеді 2 WordPress плагині. Мен бүгін олардың бірін толығырақ қарастырамын - бұл фондық менеджер. Әрбір тақырыпта сайттың фонын өзгерту параметрлері бола бермейді және әрбір пайдаланушы оны үлгідегі стильдер арқылы өзгерте алмайды. Сонымен қатар, модульде бірнеше қосымша бар қызықты ерекшеліктері, сондықтан оны егжей-тегжейлі зерттеу туралы шешім қабылданды.

11/8/2018 жаңарту: Өкінішке орай, модуль ұзақ уақыт бойы жаңартылмады, енді ол Plugin Directory ресми репозиторийінен мүлдем жоғалып кетті. Мақаланы оқыңыз немесе плагиндердің таңдауын қараңыз.

Сіз модульді осы бетте таба аласыз немесе оны WordPress әкімшісінен аты бойынша орната аласыз. Бұл жазу кезінде ол өте ескі деп саналды, өйткені. қолдау көрсетілетін нұсқа 3.7.8 нұсқасымен аяқталды. Өкінішке орай, плагинге қазір қолдау көрсетілмеуі мүмкін. Дегенмен, мен оны сәтті сынақтан өткіздім соңғы нұсқасыжүйелер 4.2.1. Сонымен қатар, әрбір модульде 30 мың жүктеу табылмайды.

Background Manager плагинінің негізгі міндеті - әрбір жаңа келуші үшін кездейсоқ фон көрсету немесе бірнеше кескіннің слайд-шоуын жасау. Шынымды айтсам, бастапқыда модуль маған басылатын фон жасауға көмектеседі деп ойладым, бірақ оның функциялары біршама әртүрлі. Ол мүмкіндік береді:

• сайттың фоны ретінде суреттер кірістірілетін кескіндер жиынын жасаңыз. Сіз оларды мына жерден жүктей аласыз жергілікті компьютер, WordPress медиа кітапханасы немесе басқа модульдер;
• фонның орналасуын, оның «репликациясын» (егер ол үлгі болса) анықтау;
• фонға үлгілерді қолдану;
• жүктеп алғаннан кейін кескінді толығымен қараңыз және ол жоғарыдан төменге қарай біртіндеп пайда болғанша күтпеңіз (егер сіз баяу Интернетті пайдалансаңыз);
• белгілі бір беттерде фондық дисплейді орнату: негізгі, бөлімдер, мұрағаттар немесе хабарламалар;
• Google Analytics арқылы түрлендіру статистикасын есептеу арқылы фонға сілтеме қосыңыз.

Көріп отырғаныңыздай, опциялардың өте қызықты жиынтығы. Бұл мүмкіндіктер туралы жаһандық деңгейде айтылады, бірақ Background Manager модулі барлық мәліметтерге толы. Мәселен, мысалы, қабаттасу үлгісінің мөлдірлігін таңдауға, слайд-шоуда суреттер арасында ауысу кезінде әсерді анықтауға және т.б.

Модуль параметрлерінің сыртында сіз « бөлімінде таба аласыз Сыртқы түрі" - "Фон". Мұнда, айтпақшы, сізде бірден екі бірдей атаумен мәзір элементі болуы мүмкін жағдай туындайды. Естеріңізде болса, кейбіреулерінде WordPress тақырыптарыұқсас параметр бар. Осылайша, Background Manager плагині онымен толық үйлесімді және оны осы бөлімде басқаруға болады.

Бірақ модульдің параметрлерін ғана көрсететін сол «Фонға» барған дұрыс. Бұл бетте сіз көптеген әртүрлі параметрлерді көресіз.

Дегенмен, бірінші қадам - ​​​​фонға арналған кескіндер жинағын жасау - сілтемені басыңыз » Жаңа кескіндер жинағын қосыңыз«. Қолжетімді жинақтарды «Сурет жиындары» қойындысында көруге болады.

Мен айтқанымдай, мұнда көптеген параметрлер бар, олар:

• фон үшін суреттерді таңдау принципі - кездейсоқ және т.б.;
• әр уақытта әртүрлі суреттерді көрсету немесе оларды браузер сеансында есте сақтау;
• фон түсі;
• фонды толық экранда немесе «репликацияда» көрсету;
• суреттің үстіне өрнекті қабаттау;
• Pinterest-тен Pin It түймешігін қосуға және бірқатар басқа опцияларды анықтауға болады.

Соңында, кейде фон дисплейінде проблемалар туындауы мүмкін екенін атап өткен жөн. Егер сіз кірсеңіз CSS үлгісіқатаң параметр немесе өңді қайта анықтау бар болса, Фондық реттеуші плагин жұмыс істемеуі мүмкін. Мысалы, бір сайтта сурет тыныш жүктеліп, стильдердегі фон сипатын ауыстырды, бірақ бұл блогта мен оны әдейі түсіндіруге тура келді. Неге байланысты, айту қиын. Міне, осылай аяқталды.

Тұтастай алғанда, Background Manager веб-сайтыңыздың фоны үшін әртүрлі кескіндерді көрсетуге және тіпті олардан слайд-шоу жасауға мүмкіндік беретін тамаша плагин. Кейбір жобалар үшін бұл тамаша «сәндік» элемент болуы мүмкін.

Фондық менеджердегі фондық сілтемелерге келетін болсақ.Параметрлерде ұқсас опция бар және сіз әрбір сурет үшін сілтемені көрсете аласыз. мен сынадым бұл функцияжәне жазу кезінде бәрі жұмыс істеген сияқты. Дегенмен, қазір бұл мәселеде проблемалар бар. Біздің қолымыздан келген жалғыз нәрсе сілтемені арнайы элементке орналастыру болды — жоғарыдағы скриншоттағы [+] белгішесін қараңыз. Бұл плагин мүмкіндігі еш қиындықсыз жұмыс істейді.

Блогыңызға қазір сын көзбен қараңыз. Жақында көп нәрсе өзгереді, өйткені негізінен сіз өзіңіз қалағанның бәрін өзіңіз өзгерте аласыз. Әрине, сіз мұны қалай жасау керектігін білуіңіз керек.

Әкімші панелінде

Әкімші панеліне кіріңіз Сыртқы түрі - редактор . Сіз көптеген үлгілердің не үшін жауапты екенін білесіз, бірақ енді шаблондар сізді қызықтырмайды, бірақ олардың астында не бар: Стильдер. Дәлірек айтқанда, олардың бір бөлімі, ол аталады Стиль тізімі.

Осы тізімге сәйкес файл style.css. Бұл файл блогта белсенді тақырып қалтасында орналасқан. Сіз оны әрқашан сол жерден таба аласыз.

Браузерде

Браузеріңізді өз қалтаңызда ашыңыз. Көптеген браузерлерде бар жақсы қасиет: Тінтуірдің оң жақ түймешігімен блогтың кез келген аймағын басып, әрекеттер тізімінен таңдауға болады Элемент кодын қарау . Төменгі жағында сіз басқан элемент туралы қызықты ақпаратты таба алатын терезе пайда болады.

Бұл терезеде солСіз беттің кодын көресіз және сол кодта жол бөлектеледі. осы элементке сәйкес келеді. БІРАҚ оң жақта, стильдерде сол элементтің қасиеттері болады.

Қаріп өлшемі, толтыру, мәтін және фон түсі, туралау: бәрі стильде , және мұның барлығын өзгертуге болады.

Фон түсін өзгертіңіз

Үстінде WordPress блогыМақалалардың астары мен басқаның астары бөлек болғаны маған ұнамайды. Бұл жағдайда арнадағы мақалалар бөлек блоктарда келеді және менің ойымша, өте жақсы көрінбейді. Біз барлық жерде фонды мақаланың қазіргі фоны сияқты жасаймыз. Біз өзгерткіміз келетін фонға нұқыңыз, тінтуірдің оң жақ түймешігімен басыңыз, «Элемент кодын қарау» таңдаңыз. Нәтижеде оң жақта бөлектелетін жолда бізді қызықтырады тақырып класс атрибуты . Стильдер сынып бойынша жазылады.

Бұл жағдайда сынып = арт-макет-ұяшықБұл стильдерде, файлда дегенді білдіреді style.css, сондай-ақ мұндай класс болады және онда қасиеттер жазылады. Тек ол басқаша көрінеді, атап айтқанда:

.art-layout-ұяшық, содан кейін бұйра жақшаларосы сыныптың қасиеттері тіркеледі.

Файлдан осы атаумен классты табыңыз style.css. Іздеу функциясын қолданайық ctrl+f, және іздеу жолағына атын жазыңыз: көркемдік макет-ұяшық. Біз бірден фон көреміз:

фон түсі: мөлдір. мөлдірбілдіреді мөлдір .

Енді бізге қандай түс керек? Мақалаларымыздың фон түсін қайдан алуға болады? Бұл жолы біз пайдаланамыз FSCapture бағдарламасы. Оның ішінде. басқа нәрселермен қатар, құралдар жиынтығы арасында сіз таба аласыз тамшуыр, ол монитор экранындағы кез келген аймақтың түсін анықтайды. Өте пайдалы құрал!

FSCapture бағдарламасын ашыңыз, өтіңіз Параметрлер, және құралды таңдаңыз Экранды тамшуыр . Басыңыз қалаған аумақэкранда. терезеде алтылықСізге қажет түстің кодын көресіз: D2E8EE

Сіз оны стильге енгізесіз көркемдік макет-ұяшықсөздің орнына мөлдір .

Не болғанын қараңыз. Әлі атқарылатын жұмыс көп, бірақ қазірдің өзінде бастама жасалды.

туралы бейне. Wordpress блогында фонды қалай өңдеуге болады

Көбірек егжейСіз сайттың жоғарғы мәзірі арқылы қол жеткізуге болатын «Барлық курстар» және «Утилита» бөлімдерінен ала аласыз. Бұл бөлімдерде мақалалар тақырыптар бойынша әртүрлі тақырыптар бойынша ең егжей-тегжейлі (мүмкіндігінше) ақпаратты қамтитын блоктарға топтастырылған.

Сіз сондай-ақ блогқа жазыла аласыз және барлық жаңа мақалалар туралы біле аласыз.
Бұл көп уақытты қажет етпейді. Төмендегі сілтемені басыңыз:

Фон - бұл сайттың барлық элементтері көрсетілген сурет. Немесе бұл сурет емес, тұтас немесе градиент түсті болуы мүмкін.

Көптеген үлгілер өңді орнатуға және өзгертуге қолдау көрсетпейді. Дегенмен, барлық тақырыптар мұны істей алмайды, әсіресе тегін көшірмелерге қатысты. Бірақ сіздің сайтыңызда параметрлерде WordPress фонын өзгертуге мүмкіндік беретін үлгі орнатылған болса да, бұл өте нашар операция болады, өйткені өзгертулер бүкіл сайтта бірден қабылданады. Кәдімгі үлгілерде тек кейбір хабарламалардың, санаттардың немесе беттердің фонын өзгерту мүмкін емес.

Бұл мақалада біз сізге екі туралы айтып береміз қарапайым плагиндербұл мәселені бірнеше рет басу арқылы шешеді.

әр бет үшін фон

Бұл WordPress фоны арқылы операцияларды орындауға мүмкіндік беретін ең қарапайым плагин. Оны орнатып, іске қосқаннан кейін сайттың басқару тақтасының параметрлері мен қосымша элементтері пайда болмайды. Тек әрбір жазбаның және беттің бетінде теңшелетін фон суретін қосуға мүмкіндік беретін жаңа опция болады.

WordPress фоны үшін таңдалған суретке қолдануға болатын бірнеше әсерлер бар:

• Қайталауды таңдаңыз - көлденең немесе тік;
• Кескінді сайтпен жылжымалы немесе бекітілген етіп жасаңыз, деп аталатын ;
• WordPress фондық бағытын таңдаңыз – оңға, солға, орталыққа;
• Суреттердің орнына әдеттегі түсті бояуды таңдаңыз.

Плагин тегін. Бұған қоса, әрбір жүктелген WordPress фонын осы қондырманың кірістірілген редакторында өңдеуге болады.

Толық экранды фондық суреттер Pro

Және бұл плагинмен жұмыс істеу күрделірек, WordPress фонымен көбірек әрекеттерді орындауға мүмкіндік береді. Бұл ақылы және 13 доллар тұрады. Әкімші панелінде плагинді белсендіруді орнатқаннан кейін оның мәзір элементі болады. Ол фон галереясын сақтайды, мұнда кез келген уақытта суреттерді қосуға, жоюға және өңдеуге болады.

Бұған қоса, кез келген пост немесе бет үшін идентификаторы бойынша анықтай отырып, WordPress фонын орнатуға болады басты бет, кез келген санат, мұрағат беттері және тіпті 404 бет.

Бұл плагиннің кең мүмкіндіктері біріншісінде болған функциямен толықтырылған - әрбір бетті және жазбаны қосу, бір немесе басқа орнату опцияларын қосу үшін бетте. фондық сурет, редакторы және барлық әсерлері бар.

Тұтастай алғанда, WordPress фонын жасауға арналған тамаша құрал. Ақылы да, тегін плагиндер де осыған байланысты көптеген мәселелерді шешуге жарамды.