Ak chcete vytvoriť dobrý web, musíte byť schopní zmeniť veľkosť šablóny. V predvolenom nastavení ponúka veľa tém nepohodlné skeletové rozmery šablóny. Úzke témy sú rovnako zlé ako príliš široké. Musíte mať „sladké miesto“, ktoré je akurát na vykonávanie funkcií na stránke. Iba tak sa obsah vášho zdroja zobrazí správne a všetky miniaplikácie sa zmestia do bočného panela. V tomto článku sa dozviete, aké sú spôsoby úpravy veľkosti bočných stĺpcov.
Bez bočného panela stránka vyzerá zbytočná. Ak chcete nejako vizuálne rozriediť obsah stránky, mali by ste zmeniť šablónu WordPress pridaním bočného panela určitej veľkosti. Zvyčajne má predvolene nainštalované bočné panely. Ale šírka bočného panela nie je vždy optimálna pre konkrétny projekt. Poďme sa pozrieť na spôsoby, ako zmeniť šírku a výšku bočnej časti WordPress stránky.
Aká by mala byť veľkosť bočného panela
Možno nebudete musieť nič meniť. Bočný panel zmeňte iba vtedy, ak vyzerá „krive“ a neprirodzene. Najprv sa uistite, že bočný panel je užší ako hlavná časť stránky s obsahom. Bočný panel nie je kľúčovou súčasťou webu, preto mu netreba venovať veľkú pozornosť – nanajvýš môže zaberať 40 % viditeľnej časti stránky. Upozorňujeme, že ak máte dva (alebo viac) postranných panelov, ich šírka by nemala presiahnuť 50 % celej šírky stránky. Je lepšie použiť iba jeden bočný stĺpik - je to takto efektívnejšie.
Existuje „zlaté pravidlo“ dizajnérov pre stránky, ktoré používajú iba jeden bočný panel. Toto pravidlo hovorí, že ak je na stránke len jeden bočný panel, nemal by zaberať viac ako 38 % šírky webu. O takejto záhadnej postave hovorí mnoho významných webdizajnérov (napríklad Jarel Remik).
Čo sa týka výšky, je dôležité, aby bočná lišta nevytŕčala z hornej časti stránky. Jeho výška v hornej hranici by mala byť rovnaká ako výška hlavného tela stránky. Spodnú hranicu však možno zmeniť, aby bola základná časť stránky dlhšia. Netreba sa snažiť do bočného panela vtesnať všetko, čo je na stránke – len to základné. A ak je informácií naozaj veľa, urobte dva bočné stĺpce, ale nemusíte naťahovať bočný panel do päty webu.
Ako manuálne zmeniť veľkosť bočného panela
Teraz si povedzme, ako nezávisle zmeniť veľkosť bočných panelov a samotného rámca šablóny bez použitia akýchkoľvek doplnkov. Táto metóda zahŕňa zmenu zdrojového kódu stránky. Parameter veľkosti šablóny je uzavretý v značkách html. Upozorňujeme, že zmena veľkosti môže mať negatívne dôsledky, ak ste nahrali obrázok vlastnej veľkosti ako pozadie. Preto je lepšie zmeniť parametre drôteného modelu vo fáze rozloženia stránky.
Parametre bočného panela v kóde sú vo forme bloku. Ak chcete zmeniť veľkosť celého rámu vrátane bočných stĺpcov, musíte sa pohrabať v kóde a striedavo upravovať digitálne parametre šírky a výšky každého prvku. menovite:
- hlavička - je zodpovedná za veľkosť hlavičky stránky;
- bg je hlavný obsah, to znamená časť stránky, na ktorej budú uverejnené články (toto je časť, kde sa nachádza bočný panel);
- footer je päta lokality, teda jej päta.
Ak chcete zistiť rozmery konkrétneho bloku, musíte kliknúť na položku obalu v časti „Zobraziť kód stránky“. Na bočnej strane v sekcii CSS prehliadača uvidíte číselné hodnoty pre šírku prvku v pixeloch. Ak chcete zmeniť veľkosť celého drôtového modelu, musíte upraviť hlavný prvok a potom vykonať zmeny v ostatných prvkoch. Odporúča sa to urobiť na lokálnom serveri, aby váš web „neskákal“ pred používateľov. A vo všeobecnosti je lepšie to urobiť ešte pred spustením internetového projektu.
Ak chcete zmeniť veľkosť bočného panela, nájdite takýto riadok
Tento riadok je zodpovedný za parametre strednej časti stránky, teda za blok obsahu a za bočné stĺpce. Nedotýkajte sa „hlavnej“ línie – toto je hlavná časť stránky. Musíte nájsť značku „mainnav“ - toto je bočný panel. Všetko, čo musíte urobiť, je zmeniť položku šírka v CSS - zadajte inú hodnotu veľkosti. Bočný panel môžete zmenšiť alebo zväčšiť, ale nezabudnite postupovať podľa vyššie uvedených tipov na dimenzovanie, aby ste sa uistili, že sa vaša lokalita zobrazuje správne.
Aby sa vykonané zmeny uložili, musia byť vykonané na serveri. To znamená, že úpravy môžete najskôr otestovať na lokálnom hostingu, ale potom nezabudnite skopírovať upravený súbor style.css a pridať ho do databáz hlavného servera. Až potom sa zmeny prejavia.
Doplnok na zmenu veľkosti bočného panela
Ak sa nechcete ponoriť do vnútra kaskádových štýlov a hľadať prvky, ktoré je potrebné upraviť, môžete použiť doplnok Visual Sidebar Editor pre WordPress. Ide o špeciálny modul určený na generovanie bočných reproduktorov. Je súčasťou globálnejšieho nástroja Visual Composer.
Doplnok Visual Composer je prirodzený tvorca stránok pre WordPress. S ním môžete vytvoriť hotovú šablónu od začiatku. Modul pracuje s krátkymi kódmi a jeho inštalácia je veľmi jednoduchá. Ak zmena veľkosti bočného panela nie je jediná vec, ktorú musíte urobiť, stiahnite si doplnok Visual Composer a pridajte Visual Sidebar Editor ako doplnok. Ak je problém len s veľkosťou bočného panela stránky, potom postačí modul Visual Sidebar Editor.
Výhodou použitia pluginu na zmenu bočného panela je, že robí všetko automaticky. To znamená, že pomocou systému Drag & Drop ukážete, čo chcete zmeniť, a modul nezávisle upraví kód prvku na základe vašich požiadaviek. Ak si chcete vyskúšať úpravu html tagov, plugin vám takúto možnosť poskytne. Okrem toho má špeciálne krátke kódy na pridávanie ďalších funkcií na stránku – viac ako 40 rozšírení.
Ďalším plusom používania takéhoto pluginu na úpravu stránok je ukladanie zmien bez ohľadu na verziu motora. Aj keď aktualizujete WordPress, šablóna sa nezmení – riadi ju modul. Môžete teda upgradovať na staršie verzie alebo aktualizovať WordPress – rozmerom bočného panela to nijako neuškodí. Plugin navyše funguje s pohodlným importom a exportom – to znamená, že môžete kopírovať bočné panely z jednej stránky a presúvať ich na iné. A čo je najdôležitejšie, modul funguje na mimoriadne zrozumiteľnom princípe - rýchlo ho zvládne aj začiatočník.
Ak vás práca Visual Sidebar Editor baví, zvážte inštaláciu kompletného doplnku – modulu Visual Composer. Potom bude pre vás jednoduché upraviť ľubovoľný prvok na stránkach portálu.
Bočný panel je súčasťou takmer každej stránky, býva umiestnený naľavo, napravo od oblasti obsahu, alebo pred pätou, (päta). Bočné panely WordPress nie sú výnimkou. Jediný rozdiel je v tom, že vo WordPress je bočný panel oblasťou, v ktorej sa automaticky zobrazujú widgety. Vo WordPress môžete vytvoriť neobmedzený počet bočných panelov, ale pre tento príklad vytvorím dva bočné panely, vľavo a vpravo od oblasti hlavného obsahu.
Registrácia bočných panelov WordPress
Aby sa bočné panely zobrazili ako prvé v administračnom paneli, musíme ich zaregistrovať. Inými slovami, pridajte nasledujúci kód do svojho súboru functions.php:
/ ** * Registrácia bočných panelov. * / funkcia fwbs_widgets_init () (postranný panel registra ("názov" => __ ("Pravý stĺpec", "fwbs"), "id" => "bočný panel-1", "popis" => __ ("Pravý bočný panel " ," fwbs "), before_widget "=>" "," before_title "=>"
"," after_title "=>"
",)); register_sidebar (pole (" name "=> __ (" Ľavý stĺpec "," fwbs "), id "=>" sidebar-2 "," description "=> __ (" Ľavý stĺpec v päta stránky "," fwbs ")," before_widget "=>" "," before_title "=>""," after_title "=>"
",));) add_action (" widgets_init "," fwbs_widgets_init ");Teraz prejdite do oblasti správcu v časti „widgety“ a pozrite si výsledok. Tu je obrázok toho, čo som dostal:
Ale len tak sa bočné panely nezobrazia vo front-ende, na prednej strane webu ich bude potrebné vyvolať. Ale o tom viac nižšie.
Analýza vyššie uvedeného kódu na vytváranie bočných panelov WordPress
Všetko nie je také zložité, ako sa na prvý pohľad zdá.
- "name" => __ ("Pravý stĺpec", "fwbs") - názov zóny widgetov, názov môžete napísať ľubovoľný, len opatrne medzi zátvorky, na obrazovke vidíte, kde sa zobrazuje;
- "id" => "sidebar-1" - ID je jedinečný identifikátor pridelený bočnému panelu, všetky bočné panely musia mať svoje vlastné, odlišné od ostatných ID;
- "popis" => __ ("stĺpec na pravej strane", "fwbs") - popis, podobný názvu oblasti widgetu;
- "before_widget" => "
- "after_widget" => ""- HTML tag uzatvárajúci zónu bočného panela. Ako vieme, všetky HTML tagy, s niektorými výnimkami, musia byť spárované (otváranie a zatváranie);
- "before_title" => "
“- názov miniaplikácie bude zabalený do značky H4 s triedou
, môžete zmeniť dôležitosť nadpisu H1, H2, H3, H4, H5, H6 a priradiť si vlastné triedy;
- "after_title" => "“- zatváraniespárovaná značka pre názov miniaplikácie.
S týmto kódom som zaregistroval dve zóny widgetov WordPress, teraz ich potrebujem zobraziť na obrazovke.
Zobrazenie bočných panelov WordPress
Ak chcete zobraziť bočné panely kdekoľvek v šablóne, je logické napísať nasledujúci kód na správne miesto:
Trochu objasnenia kódu:
- - PHP kód, ktorý dáva príkaz, ak sú v bočnom paneli pod id = sidebar-1 widgety, potom sa musí zobraziť, ak nie sú žiadne widgety, bočný panel sa nezobrazuje;
- - PHP kód, ktorý volá postranný panel pod id = sidebar-1 na mieste, kde ste ho napísali v kóde šablóny.
Ale ako vidíte, v šablónach WordPress je výstupný kód bočného panela umiestnený v samostatných súboroch sidebar.php a potom sa obsah zo súboru sidebar.php zobrazí na správnom mieste v šablóne. Keďže vieme, že WordPress zobrazuje obsah dynamicky a šablóna stránky sa skladá z niekoľkých častí, jednou z jej častí je súbor sidebar.php.
Vytvorenie súboru sidebar.php
Vytvorte súbor ako sidebar-right.php, pomenujte ho a vložte doň vyššie uvedený kód. Všetko spolu to bude vyzerať takto:
Ako môžete vidieť z príkladu, kód som doplnil o ďalšie HTML značky.
Teraz, aby sa oblasť miniaplikácií zobrazila na správnom mieste, zostáva zaregistrovať nasledovné:
Pre stĺpec na ľavej strane sa zodpovedajúcim spôsobom vytvorí súbor sidebar-left.php a na správnom mieste v šablóne ho zobrazíme takto:
Ako sa hovorí, nájdite v kóde jeden rozdiel.
Všetko, bočné panely boli vytvorené, teraz zostáva urobiť málo, vytvoriť pre ne značky v šablóne HTML a napísať štýly CSS, ale toto je úplne iný príbeh. Práve som otvoril novú rubriku
Najprv si vyjasnime niekoľko všeobecných bodov o bočných paneloch:
- Bočný panel- toto je oblasť stránky vľavo alebo vpravo od hlavného obsahu (jedným slovom, bočný stĺpec),
- Bočný panel vo WordPress- toto je akákoľvek oblasť na stránke, v ktorej sa zobrazujú widgety;
V oboch prípadoch je účel bočných panelov rovnaký - navigácia na stránke, odkazy na sociálne siete, widgety sociálnych sietí, widgety akýchkoľvek služieb tretích strán (napríklad vyhľadávanie letov) atď.
Jediný rozdiel oproti definícii bočného panela vo WordPress je ten, že môže byť umiestnený kdekoľvek na stránke webu (najčastejšie sú to však bočné panely vpravo a vľavo od obsahu a päta).
V tomto kroku vás prevedieme krokmi, ako vytvoriť dva bočné panely – jeden v bočnom paneli a jeden v päte lokality.
Krok 1. Zaregistrujte bočný panel
Na začiatok, rôzne témy WordPress registrujú bočné panely odlišne, niektoré stále používajú metódu z roku 2007. prečo? Ide len o to, že niektorí falošní vývojári radi nevedomky kopírujú kód z iných tém, dokonca ich nezaujíma, že téma, ktorú používajú ako svoju „all-case“ šablónu, nebola aktualizovaná viac ako 5 rokov.
Chcem povedať, že kód, ktorý vám dnes dám, sa môže líšiť od kódu použitého vo vašej téme – nebojte sa, len nahraďte starý kód novým.
Ako som už povedal, vytvoríme si dva bočné panely - v bočnom paneli a v päte nám s tým pomôže funkcia (ak niečo nie je jasné v kóde, pozri dokumentáciu k funkcii). Vyžaduje sa háčik widgets_init!
Kód pre súbor functions.php:
function true_register_wp_sidebars () ( / * V bočnom paneli, prvý bočný panel * / register_sidebar (pole ("id" => "true_side", // jedinečné id "name" => "bočný stĺpec", // názov bočného panela"popis" => "Pretiahnutím miniaplikácií sem ich pridáte na bočný panel.", // popis "before_widget" => ""," before_title "=>" "
, // predvolené hlavičky miniaplikácií v
"
)
)
;
/ * V suteréne - druhý bočný panel * / register_sidebar (pole ("id" => "true_foot", "name" => "Footer", "description" => "Pretiahnutím miniaplikácií sem ich pridáte do päty.", "before_widget" => ""," before_title "=>"
"after_title" => ""," after_title "=>"
"));) add_action (" widgets_init "," true_register_wp_sidebars ");
Toto mám na stránke Vzhľad> Widgety:
Už teraz môžete pridávať a prispôsobovať widgety v bočných paneloch, teraz ich zostáva len zobraziť na stránke.
Krok 2. Ako zobraziť bočné panely na stránkach lokality?
Rovnako ako v prípade z prvého kroku, v rôznych témach môžete nájsť rôzny kód zodpovedný za zobrazenie bočných panelov na stránke. Budem uvažovať iba o jednej metóde, ktorú sám používam pomocou funkcií a.
V skratke, na čo slúžia tieto funkcie:
- - skontroluje, či bočný panel obsahuje miniaplikácie,
- - zobrazí bočný panel;
Ukážme si teraz dva bočné panely, ktoré sme vytvorili v poslednom kroku. A začnime bočným panelom:
Kam vložiť kód? Kde chcete zobraziť bočné panely, vložte tam. Nie ste si istí, ktorý súbor? Naozaj to závisí úplne od vašej témy, ale s najväčšou pravdepodobnosťou vložte kód bočného panela do sidebar.php a kód päty do footer.php. Možno budete potrebovať aj dokumentáciu funkcií a.
Každý z nasledujúcich tipov vám pomôže vyhnúť sa veľmi vážnym chybám na stránke, ak sa však dobre orientujete v PHP a WordPress, z týchto tipov sa nič nové nedozviete.
- Ak zobrazený sadbar nemá miniaplikácie, potom pomocou if a else môžete nastaviť kód, ktorý sa v tomto prípade spustí:
if (je_aktívny_postranný panel („true_foot“)): dynamický_postranný panel („true_foot“); inak: // predvolený kód v prípade, že je bočný panel prázdny koniec Ak;
- Nie je potrebné používať PHP function_exists () pre funkciu a ďalšie funkcie WordPress. Len to občas využívajú. Je to nepoužiteľné.
- Niektoré obsahujú súbor sidebar.php cez zahrnúť () alebo vyžadovať (). Čo tým chceš dosiahnuť? Zvýšená produktivita? Pochybujem, že toto je dôvod pomalého načítavania vašej stránky. A spojiť sa sidebar.php používame na to špeciálne navrhnutú funkciu
Čítanie 3 min. Zverejnené 29.11.2016
Ahoj! Pokračujeme v rozoberaní najzaujímavejších a najužitočnejších doplnkov pre web WordPress! Dnes sa dozviete o super užitočnom doplnku, ktorý vám umožní vytvárať neobmedzené nové bočné panely pre vaše stránky! Bočné panely môžete zobraziť kdekoľvek na svojom webe. Na svoju stránku môžete pridať bočné panely pomocou jednoduchého krátkeho kódu alebo kódu php. Bočné panely možno jednoducho pridať k príspevkom, stránkam, miniaplikáciám, bočným panelom, pätám, hlavičkám stránok atď.
Môžete vytvoriť bočné panely pre konkrétne stránky alebo príspevky zadaním názvu stránky v nastaveniach. Môžete napríklad vytvoriť bočný panel, ktorý sa zobrazí iba pre jeden príspevok. Zobrazenie bočných panelov môžete prispôsobiť konkrétnym používateľom. Veľmi jednoduché nastavenia. Super užitočný plugin!
Pridajte doplnok WordPress pre miniaplikáciu bočného panela
Doplnok si môžete nainštalovať priamo z panela správcu WordPress. Prejdite na stránku: Plugins - Add New, do vyhľadávacieho formulára zadajte názov pluginu, stlačte Enter, nainštalujte a aktivujte plugin.
ďalej po inštalácii a aktivácii pluginu prejdite na stránku: Bočné panely - Pridať nový... Zadajte názov pre nový bočný panel. Kliknutím na pole "Vyberte typ obsahu" môžete si presne vybrať, kde sa bude nový bočný panel zobrazovať. Ak si zvolíte typ – stránky alebo príspevky, tak si môžete vybrať, ktoré konkrétne stránky budú zobrazovať bočný panel.
ďalej v spodnej časti stránky vpravo, v poli "akcia" môžete si vybrať hodnotu - Shortcode / Template Tag. Budete mať krátky kód a php kód, ktorý musíte vložiť na miesto stránky, kde sa zobrazí bočný panel, ktorý ste vytvorili. V teréne "viditeľnosť" môžete vybrať používateľov, ktorým sa tento bočný panel zobrazí.
ďalej prejdite na stránku: Vzhľad - Widgety... Tu uvidíte všetky bočné panely, ktoré ste vytvorili. Stačí potiahnuť widget na bočný panel a zobrazí sa tam, kde je nainštalovaný.
Ak chcete k príspevku alebo stránke pridať bočný panel, otvorte stránku alebo príspevok na úpravu. Vložte krátky kód bočného panela do obsahu stránky. Obnovte stránku.
Zobrazí prvý aktívny panel miniaplikácií (bočný panel – panel, ktorý obsahuje aspoň jednu miniaplikáciu). Môžete zadať ID alebo číslo panela, ktorý sa má zobraziť, ak je na lokalite viac ako jeden panel miniaplikácií.
dynamic_sidebar () vracia true alebo false, s návratovou hodnotou, zobrazuje aj panel miniaplikácií. Návratovú hodnotu možno použiť napríklad na určenie, či sa má spracovať kód nahrádzajúci miniaplikácie, keď na paneli nie sú žiadne miniaplikácie (pozri príklad č. 1).
Návraty
true, ak sa našiel panel s miniaplikáciami. false, ak v ňom nie je žiadny panel alebo žiadne widgety.
Použitie
$ index (reťazec / číslo) Identifikátor panelu špecifikovaný v parametri id funkcie register_sidebar () pri registrácii panelu. Ak je zadané číslo, vyhľadá sa panel s postranným panelom ID- $ index.Predvolená hodnota: 1 (bočný panel-1)
Príklady
# 1 Zobrazte bočný panel, ak existuje.
Tento príklad ukazuje, ako zobraziť prvý neprázdny bočný panel (pri registrácii nebolo zadané ID bočného panela) alebo, ak sa nenašlo, spracovať zadaný kód:
# 2 Zobrazte požadovaný bočný panel.
# 3 Skontrolujte prítomnosť panelu a zobrazte ho
V príklade 2 sme nekontrolovali prítomnosť panela a miniaplikácií v ňom. V tomto príklade skontrolujeme prítomnosť panela, aby sa nezobrazovali zbytočné HTML tagy (
Hodnota avatarov v psychológii
Hodnota avatarov v psychológii
Ako zdôrazniť písmeno v MS Word
Čo to znamená, ak je avatar osoby
Ako si vytvoriť svoj vlastný Twitter moment