Arvutid ja kaasaegsed vidinad

Kui soovite luua hea veebisaidi, peate suutma malli suurust muuta. Vaikimisi pakuvad paljud teemad ebamugavaid malliraami suurusi. Kitsad teemad on sama halvad kui liiga laiad teemad. Teil peaks olema kesktee, mis sobib saidi funktsioonide jaoks. Ainult sel viisil kuvatakse teie ressursi sisu õigesti ja kõik vidinad mahuvad külgribale. Sellest artiklist saate teada, millised on külgmiste veergude suuruse reguleerimise viisid.

Ilma külgribata tundub sait kasutu. Kui soovite lehe sisu kuidagi visuaalselt lahjendada, peaksite muutma WordPressi malli, lisades sellele teatud suurusega külgriba. Tavaliselt on külgmised veerud sellesse juba vaikimisi paigaldatud. Kuid mitte alati ei ole külgriba laius konkreetse projekti jaoks optimaalne. Vaatame WordPressi saidi külje laiuse ja kõrguse muutmise meetodeid.

Milline peaks olema külgriba suurus

Võib-olla ei pea te midagi muutma. Muutke külgriba ainult siis, kui see näeb välja "kõver" ja ebaloomulik. Esiteks veenduge, et külgriba laius oleks väiksem kui sisu sisaldava lehe põhi. Külgriba ei ole saidi põhiosa, seega ei tohiks sellele erilist tähelepanu pöörata – maksimaalselt võib see hõivata 40% lehe nähtavast osast. Pange tähele, et kui teil on kaks (või mitu) külgriba, ei tohiks nende laius ületada 50% kogu lehe laiusest. Parem on kasutada ainult ühte külgsammast - nii on see tõhusam.

Ainult ühte külgriba kasutavate saitide puhul kehtib disainerite kuldreegel. See reegel ütleb, et kui lehel on ainult üks külgriba, ei tohiks see hõivata rohkem kui 38% saidi laiusest. Sellisest salapärasest kujust räägivad paljud silmapaistvad veebidisainerid (näiteks: Jarel Remik).

Kõrguse osas on oluline, et külgriba ei jääks koha peal välja. Selle kõrgus ülemises piiris peaks olema sarnane lehe põhiosaga. Kuid alumist piiri saab muuta nii, et saidi põhiosa on pikem. Pole vaja proovida saidil kõike külgribale toppida – see on vaid peamine. Ja kui teavet on tõesti palju, tehke kaks külgriba, kuid te ei pea külgriba saidi jaluseni venitama.

Kuidas muuta külgriba suurust käsitsi

Nüüd räägime sellest, kuidas iseseisvalt muuta külgmiste veergude ja malli raami suurust ilma lisandmooduleid kasutamata. See meetod hõlmab lehe lähtekoodi muutmist. Malli suuruse parameeter on lisatud html-märgenditesse. Pange tähele, et suuruse muutmisel võivad olla negatiivsed tagajärjed, kui laadite taustaks üles kohandatud suurusega pildi. Seetõttu on parem raami parameetreid muuta saidi paigutuse etapis.

Koodi külgriba parameetrid on ploki kujul. Kogu raami, sealhulgas külgmiste veergude suuruse muutmiseks peate sisenema koodi ja kohandama vaheldumisi iga elemendi laiuse ja kõrguse numbrilisi parameetreid. Nimelt:

  • päis – vastutab saidi päise suuruse eest;
  • bg - see on põhisisu, see tähendab lehe osa, kuhu artiklid paigutatakse (selles osas asub külgriba);
  • jalus on saidi jalus, st selle alumine osa.

Konkreetse ploki mõõtmete väljaselgitamiseks peate klõpsama ümbrise üksusel "Lehekoodi vaates". Brauseri CSS-i jaotise küljel näete elemendi laiuse arvväärtusi pikslites. Kogu traatraami suuruse muutmiseks peate redigeerima põhielementi ja seejärel muutma ka teisi elemente. Soovitatav on seda teha kohalikus serveris, et teie sait ei "hüppaks" kasutajate ette. Ja üldiselt on parem seda teha isegi enne Interneti-projekti käivitamist.

Külgriba suuruse muutmiseks leidke midagi sellist, nagu see rida

See rida vastutab lehe keskmise osa parameetrite eest, see tähendab sisuploki ja külgmiste veergude eest. Ärge puudutage "peamist" rida - see on saidi põhiosa. Peate leidma sildi "mainnav" - see on külgriba. Kõik, mida vajate, on CSS-is laiuse üksuse muutmine, mis vastutab laiuse eest - erineva suuruse väärtuse sisestamiseks. Külgriba saate muuta väiksemaks või suuremaks, kuid pidage meeles ülaltoodud suuruse määramise näpunäiteid, et tagada saidi õige kuvamine.

Muudatuste salvestamiseks tuleb need teha serveris. See tähendab, et saate algselt katsetada kohandusi kohalikus hostimises, kuid seejärel kopeerige kindlasti muudetud style.css fail ja lisage see põhiserveri andmebaasidesse. Alles siis hakkavad muudatused kehtima.

külgriba suuruse muutmise pistikprogramm

Kui te ei soovi kaskaadlaadilehtedel läbi tuhnida ja redigeerimist vajavaid elemente otsida, võite kasutada WordPressi pistikprogrammi Visual Sidebar Editor. See on spetsiaalne moodul, mis on spetsiaalselt loodud külgribade genereerimiseks. See on osa suuremast Visual Composeri tööriistast.

Visual Composeri pistikprogramm on WordPressi loomulik lehtede koostaja. Selle abil saate nullist luua valmis malli. Moodul töötab lühikoodidega ja seda on väga lihtne paigaldada. Kui külgriba suuruse muutmine pole ainus asi, mida peate tegema, laadige alla pistikprogramm Visual Composer ja lisage lisandmoodulina Visual Sidebar Editor. Kui probleem on ainult lehe külgriba suuruses, siis piisab Visual Sidebar Editor moodulist.

Külgriba muutmiseks mõeldud plugina kasutamise eeliseks on see, et see teeb kõik automaatselt. See tähendab, et näitate Drag & Drop süsteemi abil, mida soovite muuta, ja moodul parandab iseseisvalt elemendi koodi vastavalt teie päringutele. Kui soovid kätt proovida html-märgendite redigeerimisel, siis plugin pakub sulle sellise võimaluse. Lisaks on sellel saidile lisafunktsioonide lisamiseks spetsiaalsed lühikoodid - üle 40 laienduse.

Veel üks pluss sellise pistikprogrammi kasutamisel lehtede redigeerimiseks on see, et muudatused salvestatakse olenemata mootori versioonist. Isegi kui uuendate WordPressi, siis mall ei muutu – seda juhib moodul. Seetõttu võite lülituda vanematele versioonidele või värskendada WordPressi – see ei kahjusta enam külgriba mõõdet. Lisaks töötab pistikprogramm mugava impordi ja ekspordiga - see tähendab, et saate külgribasid ühelt saidilt kopeerida ja teisele üle kanda. Ja mis kõige tähtsam, moodul töötab äärmiselt selge põhimõtte järgi – ka algaja saab selle kiiresti selgeks.

Kui teile meeldib visuaalse külgriba redaktori töö, kaaluge lisandmoodulite täieliku komplekti - Visual Composeri mooduli - installimist. Siis on teil lihtne portaali lehtedel mis tahes elementi redigeerida.

WordPress on fantastiline ajaveebitööriist, kuid kahjuks mitte täiuslik. Isegi pärast paljusid värskendusi ja sadu uusi funktsioone on mugavaks kasutuskogemuseks siiski vaja mõningaid kasutajaliidese põhitäiustusi.

Olen viimasel ajal kirjutanud palju pikki artikleid ja selle käigus avastasin WordPressi sisseehitatud visuaalse postituse redaktori probleemi, millest ma varem ei teadnud või mis mind eriti ei häirinud.

Selles lühikeses õpetuses näitan teile, kuidas muuta WordPressi visuaalse postituse redaktoris põhiteksti veeru laiust.

Probleem

Luues suuri postitusi (enamasti piltidega), pidin sageli postituse salvestama ja eelvaate vaatama, et veenduda loendi õiges vormingus. Lisaks pidin sageli kirjutama teksti otse oma pildile, kuna redaktori akna suurus on peaaegu poolteist korda suurem kui ükski minu pilt (nagu ka minu saidi peamine sisuplokk):

Lahendus

Lahendus on suhteliselt lihtne, kuid peate teadma, kuidas seda rakendada. Kõigepealt peate teadma oma saidi sisuploki praegust laiust. Minu puhul on minu ajaveebiploki laius 650 pikslit.

Seejärel peate faili avama funktsioonid.php ja lisage faili allossa järgmine kood:

Funktsioon fb_change_mce_buttons($initArray) ( $initArray["width"] = "650px"; tagastab $initArray; ) add_filter("tiny_mce_before_init", "fb_change_mce_buttons");

Tulemus

Selle tulemusena näete saidil endal postituste redaktorit, mis kordab teie sisuploki laiust. Nii saate olla kindel, et administraatorikonsooli kaudu kirjet luues näeb see lõpptulemusele võimalikult sarnane välja.

Pidage meeles, et mõned ekraani eraldusvõimed muudavad teie seadeid ja kuvavad näiteks ainult ühte veergu – see sõltub teie sisu laiusest.

Autorilt: Tere, sõbrad. Järgmises WordPressi teema artiklis käsitleme küsimust, kuidas WordPressi malli muuta. Kui te pole kunagi varem WordPressi malli muutmise vajadusega kokku puutunud, siis lugege kindlasti seda artiklit, sest varem või hiljem peate suure tõenäosusega tegelema WordPressi malli kohandamise ja redigeerimise probleemidega.

Alustuseks määratleme kõige levinumad küsimused, millega kasutajad WordPressi malli enda jaoks kohandades kokku puutuvad. Siin on nende näidisloend:

kuidas redigeerida WordPressi malli

muutke Wordpressis malli laiust

kuidas muuta WordPressi malli suurust

kuidas muuta WordPressi malli värvi

kuidas muuta fonti WordPressi mallis

Ja see on vaid väike loetelu probleemidest, millega võite kokku puutuda või mida saate aidata teistel lahendada, sealhulgas tasu eest, kui arendate veebisaite tellimuse alusel.

Kõiki ülaltoodud loendis olevaid küsimusi saab lahendada kahel viisil, olenevalt saidil kasutatavast teemast. Alustame kõige lihtsamast võimalusest, mis ei nõua paigutusteadmisi. See valik sobib juhul, kui mall toetab sätetest redigeerimist.

Läheme jaotisse Välimus – kohandamine ja vaatame saidi avalehte ja saadaolevaid saidi sätteid lehe vasakus servas. Nende hulgas võib olla disainiseadeid.

Näiteks proovime muuta saidi värviskeemi. Läheme menüüsse Värvid ja muudame saidi külgmiste ja keskmiste osade tausta.

Nagu näete, on see üsna mugav ja WordPressi malli värvi muutmine on üsna lihtne - näeme tulemust kohe ja saame seda hinnata.

Kuid mitte iga teema ei paku kõiki vajalikke WordPressi mallide kohandusi. Näiteks ei ole tõenäoliselt sätteid, mis võimaldavad WordPressis malli laiust muuta, näiteks isegi praeguses teemas pole sätteid, mis võimaldavad mallis fonti muuta jne. Kuidas sel juhul olla? Siin peame kasutama teist võimalust ja siin on juba vaja mõningaid paigutusoskusi.

Seega peame enamasti redigeerima ainult ühte faili – see on stiilifail style.css. See asub teie teemakaustas. Muudame näitena fondi värvi. Muide, saate seda teha otse WordPressi administraatoripaneelilt. Lihtsalt olge ettevaatlik ja ettevaatlik, et mitte kogemata saiti "rikkuda". Enne muudatuste tegemist on kõige parem teema varundada. Niisiis, minge menüüsse Välimus - redaktor ja vaikimisi peaks teil olema redigeerimiseks avatud teema stiili fail.

Kui ei ole, siis valige see fail parempoolsest loendist, selle nimi on Stylesheet (style.css). Enamasti määratakse fondi värv kehas, seega otsime üles selle elemendi stiilid ja määrame fondi värviks punase värvi.

Pärast faili salvestamist saame saiti värskendada ja näha saidi põhifondi punast värvi.

Nagu näete, on WordPressi malli enda jaoks kohandamine üsna lihtne ülesanne. CSS-i väheste teadmistega saate WordPressi malli muuta ja malli vastavalt vajadusele kohandada. Sama skeemi järgi saame lahendada ka teisi sarnaseid probleeme. Sellega jätan teiega hüvasti. Edu ja peatse kohtumiseni!

Sageli tekib WordPressi malli valimisel probleem - see on plokkide ebapiisav laius. Paljudel tekib kohe soov malli laiust muuta. Neile, kes on hästi kursis html-i või php-ga, ei tekita see erilisi probleeme. Kuid selleks, et kirjutada üksikasjalikult, kuidas muuta Wordpressi malli suurust ettevalmistamata inimese jaoks, on vaja tervet brošüüri.

Kõige lihtsam on tellida, aga teadmised saavad juurde need, kes proovivad ise teha. Edaspidi ei pea ta iga pisiasja pärast spetsialistide poole pöörduma. Selle "aluse" teadmine on täiesti võimalik. Enne muudatuste tegemist tehke kindlasti kõigist oma ressursi lehtedest varukoopia. Ebatäpse töö korral saate hõlpsalt saidi esialgse välimuse taastada.

Wordpressi malle on uskumatult palju, need kõik on erinevad ja igaüks muutub omal moel. Kuid sellistel põhiplokkidel nagu: avalehe laius, päis, vasak ja parem veerg, jalus on kõik olemas. Tööks vajame:

  • Veebibrauser Mozilla Firefox.
  • Firebugi pistikprogramm installitud Firefoxi.

Kui kõik vajalik on alla laaditud, installitud ja kasutamiseks valmis, avage Mozilla Firefoxis valitud mall ja käivitage Firebug, klõpsates veaikooni.

Pistikprogrammi paneel

Allosas avaneb pistikprogrammi paneel, milles me töötame. Kõik tehtud muudatused kuvatakse kohe monitori ülaosas. Paremal vahekaardil näeme valitud elemendi CSS-stiili, vasakul lehe html koodi. Malli laiuse suurendamiseks või vähendamiseks peame kõigepealt teadma aluse praegust suurust. Klõpsake meie pistikprogrammi kursori ikooni.

Lehel olevad elemendid tõstetakse esile erinevate värvidega ja saate esile tõsta iga lehe elemendi, et oma saidi struktuuriga üksikasjalikult tutvuda. Pärast nime saamist saate teada täpsed mõõtmed. Pärast praeguse laiuse määramist tehke sellel väärtusel vasakklõps. Proovimeetodil loome sobivaima laiuse ja testime selle kuvamist.

Katsetage julgelt mis tahes elementide ja väärtustega. Praegused muudatused ei saa sinu lehte serveris kuidagi mõjutada, need on aktiivsed ainult pistikprogrammi aknas (Mozilla praegune vahemälu). Värskendamisel lähtestatakse kõik seaded.

Redigeerige style.css

Nüüd jääb üle need muudatused WordPressi malli jaoks salvestada. Tavaliselt kirjutatakse malli laius faili style.css. Siseneme veebisaidi halduspaneeli → välimus → redaktor → style.css → rida 79, muudame laiuse väärtust. Säästame.

Tihti juhtub, et meelepärasel teemal on postituste jaoks kitsas ala ja selle seaded ei näe ette laiuse muutmist. Sel juhul saab seda minimaalsete teadmistega suurendada HTML Ja css. Kasutame näiteks populaarset tasuta Patagoonia teemat. Teemat saate laiendada imelise pistikprogrammi abil FirefoxFirebug. Kõigepealt peate selle installima, laadides selle siit alla. Seejärel lülitage sisse sisse panema, nagu pildil näha - Vahekaart TööriistadVeebiarendusFirebugavatud tuleplika:

Pärast seda tuleb ekraani allosas kursorit osutades ja hiirega klõpsates valida erinevad elemendid. Sel juhul kuvatakse paremal küljel css stiilid, ja lehe alal tõstetakse esile see või see ala - peamine, külgriba, päis. Meid huvitab nüüd põhiala, kuhu me sildi juurde "välja minnes" jõuame

. Paremal küljel kuvatakse faili fragment stiil.css. Ja siin on näha, et põhiala laius on 580 pikslit. Ja sellest meie vajadusteks ei piisa.

Nt, suurendada laiust põhiala 550 pikslist 620-ni. Selleks peate joont muutma laius: 550 pikslit faili stiil.css. Kui teema on juba installitud, saate seda faili redigeerida otse administraatoripaneelilt, kui mitte, siis peate teemaga arhiivi lahti pakkima ja redigeerija abil faili muutma. Meie puhul on teema installitud, nii et minge aadressile administraatori paneelVälimusToimetaja- avage fail style.css, otsige joone laiust: 550px ja muutke laiuse väärtus 550px väärtuseks 620px. Klõpsake Värskenda faili.

Läheme saidile ja näeme, et postituste ala on laienenud, kuid mõnes kohas on see "jooksnud" paremasse veergu. Sel juhul peame seda piirkonda proportsionaalselt kitsendada. Selleks kasutame ka firebugi pistikprogramm, nagu ka eelmisel juhul. Sildi leidmine

>. Failis stiil.css, näeme, et külgriba laius määratakse kaudselt atribuudi abil laius, ja abiga veeris: 0 0 0 580 pikslit;

Redigeerimisega style.css teeme sama protseduuri nagu eelmisel juhul põhialaga, ainult et nüüd muudame rida veeris: 0 0 0 580 pikslit; Muutke taande väärtust 580 pikslilt 630 pikslile. Nüüd on kõik korras. Salvestusala on muutunud laiemaks ja ei jookse alasse külgriba. Juhtub ka seda, et stiilid pole kirjutatud mitte ainult style.css faili, vaid ka faili ekraan.css

Kui märkate viga, valige tekstiosa ja vajutage Ctrl + Enter
JAGA:
Arvutid ja kaasaegsed vidinad