Wordpress тақырыбын қалай кеңейтуге болады. Бүйірлік тақтаның өлшемін өзгерту жолы - қолмен әдіс және визуалды бүйірлік тақта өңдегішімен өңдеу
Автордан:Сәлем достар. WordPress тақырыбына арналған басқа мақалада біз қалай өзгертуге болатындығы туралы мәселені қарастырамыз wordpress үлгісі. Егер сіз WordPress үлгісін өзгерту қажеттілігін ешқашан кездестірмеген болсаңыз, міндетті түрде оқып шығыңыз Бұл мақала, өйткені ерте ме, кеш пе, WordPress үлгісін теңшеу және өңдеу мәселелерімен айналысуыңыз мүмкін.
Бастау үшін, WordPress үлгісін өздері үшін теңшеу кезінде пайдаланушылар жиі кездесетін сұрақтарды анықтайық. Міне, олардың үлгі тізімі:
Wordpress үлгісін қалай өңдеуге болады
wordpress-те үлгі енін өзгерту
Wordpress үлгісінің өлшемін қалай өзгертуге болады
wordpress үлгісінің түсін қалай өзгертуге болады
Wordpress үлгісінде қаріпті қалай өзгертуге болады
Және бұл сіз кезігуі мүмкін немесе басқаларға шешуге көмектесетін мәселелердің шағын тізімі, соның ішінде тапсырыс беру үшін веб-сайттарды жасап жатсаңыз, ақылы.
Жоғарыдағы тізімдегі барлық сұрақтарды сайт үшін қолданылатын тақырыпқа байланысты екі жолмен шешуге болады. Ең қарапайым нұсқадан бастайық, ол макет туралы білімді қажет етпейді. Үлгі параметрлерден өңдеуді қолдайтын болса, бұл опция қолайлы.
Бөлімге барайық Сыртқы түрі- Реттеңіз және қараңыз басты бетсайт және беттің сол жағында қол жетімді сайт параметрлері. Олардың арасында дизайн параметрлері болуы мүмкін.
Мысалы, өзгертуге тырысайық түс схемасысайт. Түстер мәзіріне өтіп, жағының фонын өзгертіңіз және орталық бөліктерісайт.
Көріп отырғаныңыздай, бұл өте ыңғайлы және WordPress үлгісінің түсін өзгерту өте қарапайым - нәтижені бірден көреміз және оны бағалай аламыз.
Дегенмен, кез келген тақырып бізге қажет WordPress үлгісінің барлық теңшелімдерін ұсынбайды. Мысалы, WordPress-те үлгінің енін өзгертуге мүмкіндік беретін параметрлердің болуы екіталай, мысалы, тіпті ағымдағы тақырыпта үлгідегі қаріпті өзгертуге мүмкіндік беретін параметрлер жоқ және т.б. Бұл жағдайда қалай болу керек? Бұл жерде біз екінші нұсқаға жүгінуіміз керек, және мұнда кейбір орналасу дағдылары қажет.
Сонымен, біз көбінесе бір ғана файлды өңдеуіміз керек - бұл style.css мәнер файлы. Ол тақырып қалтасында орналасқан. Мысал ретінде шрифт түсін өзгертейік. Айтпақшы, сіз мұны тікелей WordPress басқару тақтасынан жасай аласыз. Тек абай болыңыз және сайтты кездейсоқ «бұзбау» үшін абай болыңыз. жасаған дұрыс сақтық көшірмеонда бірдеңені өзгертпес бұрын тақырыптар. Сонымен, «Көрініс» - Редактор мәзіріне өтіңіз және әдепкі бойынша өңдеу үшін тақырып стилі файлы ашық болуы керек.
Егер олай болмаса, оң жақтағы тізімнен осы файлды таңдаңыз, ол стильдер кестесі (style.css) деп аталады. Көбінесе қаріп түсі негізгі бөлікте орнатылады, сондықтан осы элементтің стильдерін тауып, қаріп түсі ретінде қызыл түсті орнатайық.
Файлды сақтағаннан кейін біз сайтты жаңартып, сайттағы негізгі шрифттің қызыл түсін көре аламыз.
Көріп отырғаныңыздай, WordPress үлгісін өзіңіз үшін теңшеу өте қарапайым тапсырма. CSS-ті аз ғана білу арқылы сіз WordPress үлгісін өзгертіп, жасай аласыз қажетті параметрүлгі. Сол схема бойынша біз басқа ұқсас мәселелерді шеше аламыз. Осы орайда мен сенімен қоштасамын. Сәттілік және жақын арада кездескенше!
Жақсы веб-сайт жасағыңыз келсе, үлгінің өлшемін өзгерту мүмкіндігі болуы керек. Әдепкі бойынша, көптеген тақырыптар ыңғайсыз үлгі жақтау өлшемдерін ұсынады. Тар тақырыптар тым кең болғандай жаман. Сізде сайттағы функцияларға сәйкес келетін орта деңгей болуы керек. Тек осылай ғана ресурсыңыздың мазмұны дұрыс көрсетіледі және барлық виджеттер бүйірлік тақтаға сәйкес келеді. Бұл мақалада сіз бүйірлік бағандардың өлшемін реттеудің қандай жолдары бар екенін білесіз.
Бүйірлік тақтасыз сайт пайдасыз болып көрінеді. Егер сіз беттің мазмұнын қандай да бір түрде көрнекі түрде сұйылтқыңыз келсе, белгілі бір өлшемдегі бүйірлік тақтаны қосу арқылы WordPress үлгісін өзгертуіңіз керек. Әдетте бүйірлік бағандар әдепкі бойынша оған орнатылған. Бірақ әрқашан бүйірлік тақтаның ені белгілі бір жоба үшін оңтайлы бола бермейді. WordPress сайтының бүйірінің ені мен биіктігін өзгерту әдістерін қарастырайық.
Бүйірлік тақтаның өлшемі қандай болуы керек
Сізге ештеңені өзгерту қажет болмауы мүмкін. Бүйірлік тақтаны «қисық» және табиғи емес болып көрінсе ғана өзгертіңіз. Алдымен, бүйірлік тақтаның ені мазмұнды қамтитын беттің негізгі бөлігінен кішірек екенін тексеріңіз. Бүйірлік тақта сайттың негізгі бөлігі емес, сондықтан оған көп көңіл бөлуге болмайды - ол беттің көрінетін бөлігінің ең көбі 40% алуы мүмкін. Егер сізде екі бүйірлік тақта (немесе бірнеше) болса, олардың ені бүкіл бет енінің 50% аспауы керек екенін ескеріңіз. Тек бір бүйірлік бағанды қолданған дұрыс - осылайша ол тиімдірек.
Бір ғана бүйірлік тақтаны пайдаланатын сайттар үшін дизайнерлердің «алтын ережесі» бар. Бұл ереже бетте бір ғана бүйірлік тақта болса, ол сайт енінің 38% аспауы керек екенін айтады. Көптеген танымал веб-дизайнерлер мұндай жұмбақ фигура туралы айтады (мысалы: Джарел Ремик).
Биіктікке келетін болсақ, бүйірлік тақтаның сайттың үстіне шығып кетпеуі маңызды. Оның жоғарғы шекарадағы биіктігінің өлшемі беттің негізгі бөлігіне ұқсас болуы керек. Бірақ төменгі шекті сайттың негізгі бөлігі ұзағырақ болатындай өзгертуге болады. Сайттағы барлық нәрсені бүйірлік тақтаға салудың қажеті жоқ - ең бастысы. Егер ақпарат шынымен көп болса, онда екі бүйірлік тақтаны жасаңыз, бірақ бүйірлік тақтаны сайттың төменгі деректемесіне дейін созудың қажеті жоқ.
Бүйірлік тақтаның өлшемін қолмен қалай өзгертуге болады
Енді бүйірлік бағандардың өлшемін және шаблон жақтауының өзін ешқандай қондырмаларды қолданбай өз бетінше қалай өзгертуге болатыны туралы сөйлесейік. Бұл әдіс өзгертуді қамтиды бастапқы кодбеттер. Үлгі өлшемі параметрі html тегтерінде қамтылған. Фон ретінде реттелетін кескінді жүктеп салсаңыз, өлшемін өзгерту теріс салдары болуы мүмкін екенін ескеріңіз. Сондықтан сайттың орналасу сатысында жақтау параметрлерін өзгерткен дұрыс.
Кодтағы бүйірлік тақтаның параметрлері блок түрінде болады. Бүкіл жақтаудың, соның ішінде бүйірлік бағандардың өлшемін өзгерту үшін кодқа кіріп, әр элементтің ені мен биіктігінің сандық параметрлерін кезекпен реттеу керек. Атап айтқанда:
- тақырып – сайт тақырыбының өлшеміне жауапты;
- bg - бұл негізгі мазмұн, яғни мақалалар орналастырылатын бет бөлігі (дәл осы бөлікте бүйірлік тақта орналасқан);
- төменгі деректеме сайттың төменгі деректемесі, яғни оның төменгі бөлігі.
Белгілі бір блоктың өлшемдерін білу үшін «Бет коды көрінісі» ішіндегі орауыш элементін басу керек. Браузердің CSS бөлімінің бүйірінде элемент енінің пиксельдегі сандық мәндерін көресіз. Бүкіл сымның өлшемін өзгерту үшін негізгі элементті өңдеу керек, содан кейін басқа элементтерге де өзгертулер енгізу керек. Мұны істеу ұсынылады жергілікті серверсіздің сайтыңыз пайдаланушылар алдында «секірмеуі» үшін. Ал, жалпы, мұны интернет-жобаны іске қоспай тұрып жасаған дұрыс.
Бүйірлік тақтаның өлшемін өзгерту үшін осы жол сияқты нәрсені табыңыз
Бұл жол беттің ортаңғы бөлігінің параметрлеріне, яғни мазмұн блогына және бүйірлік бағандарға жауап береді. «Негізгі» жолға қол тигізбеңіз - бұл сайттың негізгі бөлігі. Сізге «mainnav» тегін табу керек - бұл бүйірлік тақта. Сізге тек ені үшін жауап беретін CSS-тегі ен элементін өзгерту қажет - басқа өлшем мәнін енгізу үшін. Бүйірлік тақтаны кішірейтуге немесе үлкейтуге болады, бірақ сайтыңыздың дұрыс көрсетілуін қамтамасыз ету үшін жоғарыдағы өлшемдер бойынша кеңестерді орындаңыз.
Өзгерістерді сақтау үшін олар серверде жасалуы керек. Яғни, сіз бастапқыда реттеулерді сынай аласыз жергілікті хостинг, бірақ өңделген style.css файлын көшіріп, оны негізгі сервердің дерекқорларына қосуды ұмытпаңыз. Сонда ғана өзгерістер күшіне енеді.
бүйірлік тақта өлшемін өзгерту плагині
Егер сіз каскадты стиль кестелерін аралап, өңдеуді қажет ететін элементтерді іздегіңіз келмесе, WordPress плагиніне арналған Visual Sidebar Editor қолданбасын пайдалануға болады. Бұл бүйірлік тақталарды жасау үшін арнайы жасалған арнайы модуль. Бұл үлкенірек Visual Composer құралының бөлігі.
Visual Composer плагині WordPress үшін табиғи бет құрастырушы болып табылады. Оның көмегімен сіз нөлден жасай аласыз дайын шаблон. Модуль қысқа кодтармен жұмыс істейді және орнату өте оңай. Бүйірлік тақтаның өлшемін өзгерту сізге қажет жалғыз нәрсе болмаса, Visual Composer плагинін жүктеп алып, Visual Sidebar өңдегішін қосымша ретінде қосыңыз. Егер мәселе тек беттің бүйірлік тақтасының өлшемінде болса, онда Visual Sidebar Editor модулі жеткілікті болады.
Бүйірлік тақтаны өзгерту үшін плагинді пайдаланудың артықшылығы - ол бәрін автоматты түрде жасайды. Яғни, Drag & Drop жүйесі арқылы өзгерткіңіз келетін нәрсені көрсетесіз және модуль сұрауларыңыздың негізінде элемент кодын дербес түзетеді. Егер сіз html тегтерін өңдеуде өз күшіңізді сынағыңыз келсе, онда плагин сізге осындай мүмкіндік береді. Сонымен қатар, оның жасау үшін арнайы қысқа кодтары бар қосымша мүмкіндіктерсайтта - 40-тан астам кеңейтім.
Беттерді өңдеу үшін осындай плагинді пайдаланудың тағы бір плюс - бұл қозғалтқыштың нұсқасына қарамастан, өзгерістер сақталады. WordPress-ті жаңартсаңыз да, үлгі өзгермейді - оны модуль басқарады. Сондықтан сіз ескі нұсқаларға ауыса аласыз немесе WordPress-ті жаңарта аласыз - бұл енді бүйірлік тақтаның өлшеміне зиян келтірмейді. Сонымен қатар, плагин ыңғайлы импорттау және экспорттаумен жұмыс істейді - яғни бүйірлік тақталарды бір сайттан көшіріп, оларды басқасына тасымалдауға болады. Ең бастысы, модуль өте айқын принцип бойынша жұмыс істейді - тіпті жаңадан бастаушы оны тез меңгереді.
Егер сізге Visual Sidebar Editor жұмысы ұнаса, қосымшалардың толық жинағын – Visual Composer модулін орнатуды қарастырыңыз. Содан кейін портал беттеріндегі кез келген элементті өңдеу сізге оңай болады.
Толық өлшемді WordPress бетін жасағыңыз келе ме?
Содан кейін біз мұнда не үшін келгенімізге оралыңыз.
1-әдіс: WordPress тақырыбында кірістірілген ені үлгісін пайдалану
Егер сіздің WordPress тақырыбыңыз толық бет үлгісімен бірге келсе, бұл әдіс ұсынылады. Егер сізде жоқ болса, келесі таңдауды қараңыз және оны алыңыз.
Алдымен сіз бетті өңдеуіңіз немесе жаңасын жасауыңыз керек. Беттер > ҚосуЖаңа бет
Бетті өңдеу терезесінде таңдаңыз Толық енібет атрибуттары құсбелгісінің астындағы үлгі ретінде.
Модельді таңдағаннан кейін Толық еніСіз өзіңіздің парақшаңызды тіркеуіңіз керек. Қосымша мазмұн қосу үшін бетті теңшеуді жалғастыра аласыз немесе оны әрекетте көру үшін алдын ала қарау түймесін басыңыз.
Егер сізде «Толық ені» опциясы болмаса - «үлгі толық ені' - бетті өңдеу экранында бұл сіздің WordPress тақырыбыңызда бұл бет жоқ дегенді білдіреді.
Бірақ уайымдамаңыз, біз сізге WordPress тақырыбын өзгертпестен толық бетті жасау қаншалықты оңай екенін көрсетеміз.
2-әдіс: Толық ені бет үлгісін қалай жасауға болады
Бұл әдіс сізден пайдаланып жатқан WordPress тақырып файлдарын өңдеуді және PHP, CSS және HTML туралы негізгі түсініктерді қажет етеді.
Айтпақшы, біз сізді де кеңесуге шақырамыз
Алдымен ашу керек мәтіндік редакторБлокнот сияқты , және келесі кодты бос файлға қойыңыз:
Php / * Имя шаблона: * Полная ширина / get_header (); ?>Бұл код жай ғана файл үлгісінің атын анықтайды және WordPress-тен тақырып үлгісін шығаруды сұрайды.
Содан кейін кодтың мазмұндық бөлігі қажет. FTP клиенті арқылы сайтыңызға қосылыңыз ( немесе файл менеджері cPanel ішінде) содан кейін өтіңіз /wp-content/themes/your-theme-каталогы/ .
Содан кейін сіз « атты файлды табуыңыз керек page.php«. Бұл тақырыпқа арналған әдепкі бет үлгісі файлы.
"" дегеннен кейін барлығын көшіріңіз. get_header()Және оны файлға қойыңыз Толық width.phpБұл сіздің компьютеріңізде жасалған нәрсе.
Енді сіз «full-width.php» файлының мазмұнын қарап, осы код жолын алып тастауыңыз керек:
Php get_sidebar (); ?>Бұл жол жай ғана бүйірлік тақтаны қалпына келтіреді және оны WordPress тақырыбыңызда көрсетеді. Мұны жою арқылы үлгіні пайдаланған кезде тақырыбыңыз бүйірлік тақтаны көрсетпейді Толық ені.
Бұл жолды WordPress тақырыбыңызда бірнеше рет көруге болады. Егер сіздің WordPress тақырыбыңызда бірнеше болса, кодта бір рет сілтеме жасалған әрбір бүйірлік тақтаны көресіз. Қай бүйірлік тақталарды сақтағыңыз келетінін шешуіңіз керек.
Веб-сайтыңыз баяу жүктелуде, табыңыз
Егер тақырып бетіңізде бүйірлік тақталарды көрсетпесе, бұл кодты файлыңыздан таба алмауыңыз мүмкін.
Біздің full-width.php кодымыз өзгертулер енгізуге осылай қамқорлық жасайды. Кодыңыз тақырыпқа байланысты сәл өзгеше болуы мүмкін.
php / * * Имя шаблона: полная ширина * / get_header (); ?>Содан кейін файлды жүктеп алу керек Толық width.php WordPress тақырып қалтаңызда бар.
Тақырыпыңыз үшін толық ені теңшелетін бет үлгісін сәтті жасап, жүктеп салдыңыз. Келесі қадам толық өлшемді бет жасау үшін осы үлгіні пайдалану болып табылады.
Бақылау тақтасына өтіп, жаңа бетті өңдеңіз немесе жасаңыз.
Бетті өңдеу экранында бет атрибуттары құсбелгісін тауып, Үлгі опциясының астындағы ашылмалы мәзірді басыңыз.
Сіз өзіңіздің үлгіңізді көре аласыз. Жалғастырыңыз, оны таңдаңыз және бетті сақтаңыз немесе жаңартыңыз.
Енді сіз веб-сайтыңызға кіре аласыз, сонда сіз бүйірлік тақталар жойылғанын және сіздің бетіңіз бір баған беті ретінде көрсетілетінін көресіз. Ол әлі толтырылмаған болуы мүмкін, бірақ енді сіз оны басқа жолмен таратуға дайынсыз.
Ашу арқылы сайтыңызды танымал етіңіз
Мазмұн аймағын анықтау үшін тақырыбыңыз пайдаланатын CSS сыныптарын табу үшін Тексеру құралын пайдалануыңыз қажет.
Одан кейін оның енін CSS көмегімен 100% реттеуге болады. Біз келесі CSS кодын қолдандық:
.page-template толық ен аймағы.мазмұн(ені: 100%; жиегі: 0px; жиек: 0px; толтыру: 0px; ) .бет үлгісі толық ен.Output(маржа: 0px; )Twenty Seventeen осылай болады.
Мұның бәрі осы оқулық үшін, бұл сізге толық өлшемді беттерді жасауға мүмкіндік береді деп үміттенемін.
Жоғарыда аталған әдістер мүмкіндігі бар және толық немесе толық ені макеттерін жылдам жасағысы келетіндер үшін тегін.
Сондай-ақ кейбір премиум WordPress плагиндерін табыңыз
Заманауи көрініс беру және блогты немесе веб-сайтты басқаруды жеңілдету үшін басқа WordPress плагиндерін пайдалануға болады.
Біз сізге мұны істеуге көмектесетін бірнеше премиум WordPress плагиндерін ұсынамыз.
1. Divi Builder
Divi Builder - жоғары бағаланған жоғары сапалы бет құрастырушы Керемет тақырыптарОл әдетте Divi WordPress тақырыбының бөлігі ретінде пайдаланылғанымен, Divi Builder сонымен қатар басқа WordPress тақырыптарында пайдалануға болатын дербес плагин болып табылады.
Divi Builder интерфейс жағындағы көрнекі интерфейсті, сондай-ақ серверлік интерфейсті пайдаланып мазмұнды өңдеуге мүмкіндік береді, дегенмен пайдаланушылардың көпшілігі бұрынғы интерфейсті қалайды.
Негізінде, бүйірлік тақталардың орнына бәрі қалқымалы терезелер мен қалқымалы түймелерде. Ол 40 түрлі презентация бумалары бойынша таратылған 316 алдын ала анықталған үлгілерге қол жеткізуге мүмкіндік береді, сонымен қатар өзіңіздің дизайныңызды үлгілер ретінде сақтауға мүмкіндік береді.
ашуға шақырамыз
Divi белгілерінің бірі әрқашан сізге беретін стильдерді бақылау болды. Үш түрлі қойындыда әртүрлі опцияларды, соның ішінде жауап беретін басқару элементтерін, реттелетін бос орынды және т.б. реттеуге болады.
Сіз тіпті реттелетін CSS қосуға болады, себебі оның CSS өңдегіші жинақтары негізгі тексеружәне автотолтыру.Divi Builder сынының бірі оның негізіне әрқашан негізделген.Бұл оны бір рет өшірсеңіз, мазмұныңызда қысқа кодтар тобы қалады дегенді білдіреді. Кішкене күйзеліске ұшырағанымен, Shortcode Cleaner сияқты плагиндерге қатысты мәселелер азырақ.
2. Құрылысшы
Themify Builder - Themify командасының ұсынысы екені таңқаларлық емес. Ол тұтынушыларға оңай теңшеу опцияларын беру үшін оны көптеген WordPress тақырыптарына біріктіреді. Бірақ сіз оны дербес плагин ретінде сатып алып, кез келген WordPress тақырыбымен пайдалана аласыз.
Divi Builder және WPBakery Page Builder сияқты, Themify Builder сізге фронтенд немесе серверде орналасуларды жасауға мүмкіндік береді.Тағы бір жақсы нәрсе - бұл плагин жауап беретін тоқтау нүктелерін теңшеуге мүмкіндік береді (бірақ тек жалпы сайт деңгейінде).
Интернет-дүкен құрып, өнімдеріңізді желіде оңай сатыңыз
Themify Builder бағдарламасының қызықты ерекшелігі - ол әлі де стандартты WordPress редакторын пайдалануға мүмкіндік береді, ал басқа бет құрастырушылар барлығы үшін Page Builder интерфейсін пайдалануға мәжбүрлейді.
3. Факир
Бастапқыда 2016 жылы іске қосылған WordPress Elementor плагині осы тізімдегі ең жас әзірлеушілердің бірі болып табылады. Кеш іске қосылғанына қарамастан, Elementor WordPress.org сайтында 1 000 000-нан астам белсенді орнатуларды тез жинап, оны ең танымал WordPress құрастырушылардың біріне айналдырды.
Егер сізде қандай да бір ұсыныстар немесе ескертулер болса, оларды біздің бөлімде қалдырыңыз
Көбінесе сізге ұнайтын тақырыптың жазбалар үшін тар аймағы бар және оның параметрлері енін өзгертуді қамтамасыз етпейді. Бұл жағдайда оны ең аз біліммен арттыруға болады HTMLжәне css. Мысалы, біз танымалды қолданамыз тегін тақырыпПатагония. Тақырыпты тамаша плагиннің көмегімен кеңейтуге болады Firefox— Өрт жәндігі. Алдымен оны осы жерден жүктеп алу арқылы орнату керек. Содан кейін қосыңыз плагин, суретте көрсетілгендей - Құралдар қойындысы — Веб әзірлеу — Өрт жәндігі — ашық өрт:
Осыдан кейін экранның төменгі жағында курсорды көрсетіп, тінтуірмен басу арқылы әртүрлі элементтерді таңдау керек. Бұл жағдайда оң жақта көрсетіледі css стильдері
, ал бет аймағында осы немесе басқа аймақ бөлектеледі - негізгі, бүйірлік тақта, тақырыбы. Бізді енді тегке «шығатын» кезде алатын негізгі аймақ қызықтырады Мысалыға, енін ұлғайтунегізгі аумақ 550 пиксельден 620 пикселге дейін. Ол үшін сызықты өзгерту керек ені: 550pxфайл style.css. Тақырып әлдеқашан орнатылған болса, бұл файлды тікелей басқару тақтасынан өңдеуге болады, егер жоқ болса, тақырыппен бірге мұрағатты ашып, редакторды пайдаланып файлға өзгертулер енгізу керек. Біздің жағдайда тақырып орнатылған, сондықтан өтіңіз басқару тақтасы— Сыртқы түрі — Редактор- style.css файлын ашыңыз, жолдың енін іздеңіз: 550px және 550px енінің мәнін 620px етіп өзгертіңіз. басыңыз Файлды жаңарту. Біз сайтқа кіріп, посттардың аумағы кеңейгенін көреміз, бірақ кейбір жерлерде ол оң жақ бағанға «қалып кетті». Бұл жағдайда біз бұл аумақты пропорционалды түрде тарылтуымыз керек. Ол үшін біз де қолданамыз Firebug плагині, алдыңғы жағдайдағыдай. Тегті табу