Nedávno sa nás jeden z našich čitateľov pýtal, ako zmeniť bočnú stranu témy WordPress?
Túto otázku zvyčajne dostávame od používateľov, ktorí chcú zmeniť umiestnenie svojho bočného panela zľava doprava alebo sprava doľava.
V tomto návode vám ukážeme, ako zmeniť umiestnenie bočného panela na WordPress.
Ale predtým, ak ste nikdy nenainštalovali WordPress objaviť Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu
Potom späť k tomu, prečo sme tu.
Prečo zmeniť umiestnenie bočného panela na WordPress?
Odborníci na použiteľnosť sa domnievajú, že ľudia skenujú stránky zľava doprava. Odporúčajú umiestniť dôležitý obsah na ľavú stranu, aby si používatelia tento obsah pozreli ako prví. To by sa však mohlo obrátiť, ak je váš web v jazyku RTL (vpravo vľavo).
Zistite, či mal by mať váš blog WordPress bočné panely
Mnoho webov WordPress používa typické rozloženie blogu s dvoma stĺpcami. Jeden pre obsah a druhý pre bočný panel.
Ak ste na webových stránkach nováčikom, mali by ste vybrať tému WordPress, ktorá má na preferovanom umiestnení bočný panel.
Mnoho Témy WordPress ponúkajú možnosti na zmenu strany bočného panela v nastaveniach bočného panela. Ak však vaša téma WordPress túto možnosť nemá, budete musieť stranu bočného panela zmeniť manuálne. Prejdite objavovaním ďalej ako odstrániť bočný panel na
Poďme sa však pozrieť na metódu, ktorú by ste mali použiť na jednoduchú zmenu bočnej strany WordPress pomocou CSS.
Zmena bočného panela pomocou CSS
Pred vykonaním akýchkoľvek zmien vo svojej téme WordPress by ste mali najskôr zvážiť vytvorenie detskej témy, Použitím podradenej témy budete môcť aktualizovať svoju nadradenú tému bez toho, aby ste stratili zmeny.
Discover Ako zobraziť rôzne postranný panel pre každú položku na WordPress
Po druhé, pri vykonaní zmien aktívnej témy v reálnom čase by ste si mali vždy vytvoriť zálohu svojho webu WordPress.
Na úpravu súborov tém WordPress budete potrebovať klienta FTP. Poraďte sa s návod, ako používať FTP.
Prihláste sa na svoj web WordPress pomocou klienta FTP a prejdite do priečinka motívov. Zvyčajne sa nachádza na adrese:
/ Yoursite / wp-content / themes / vaše-theme-zložky /
Teraz si musíte stiahnuť a otvoriť hlavný súbor so štýlmi svojej témy WordPress v textovom editore, ako je napríklad Poznámkový blok. Tento súbor sa volá style.css, a nachádza sa v koreňovom adresári vašej témy WordPress.
Discover ako spravovať súbory a priečinky WordPress
V tomto súbore nájdite triedu CSS na vašom bočnom paneli. Všeobecne je táto trieda „ sidebar ". V tomto príklade používame predvolenú tému WordPress “ dvadsať pätnásť Kto má túto triedu pre bočný panel:
.sidebar {float: left; pravý okraj: -100%; maximálna šírka: 413px; poloha: relatívna; šírka: 29.4118%; }
Ako vidíte, bočný panel pláva vľavo s rozpätím -100%. Zmeníme plavák doprava:
.sidebar {float: right; ľavý okraj: -100%; maximálna šírka: 413px; poloha: relatívna; šírka: 29.4118%; }
Uložte svoje zmeny a nahrajte súbor style.css na svoj web pomocou FTP klienta. Ak teraz navštívite svoj web, bude to vyzerať takto:
V skutočnosti sme presunuli bočný panel, ale nepresunuli sme oblasť obsahu. " dvadsať Pätnásť Používa tento CSS na definovanie polohy oblasti obsahu.
.site-content {display: block; plavák: vľavo; ľavý okraj: 29.4118%; šírka: 70.5882%; }
Zmeníme ho tak, aby sa obsah presunul doprava. Takto:
.site-content {display: block; plavák: vľavo; pravý okraj: 29.4118%; šírka: 70.5882%; }
Takto bude váš web vyzerať po použití tohto kódu CSS.
Ako vidíte, zmenili sme umiestnenie oblasti obsahu a bočného panela. Vľavo je však stále biely blok.
Choďte ďalej objavovaním ako spravovať súbory a priečinky WordPress
Pri práci s CSS sa často vyskytnú tieto chyby. Bude potrebné nejakú detektívnu prácu, aby sme pochopili, čo to spôsobuje a ako to napraviť.
Pomocou nástroja „Inšpektor“ prehliadača vyhľadajte zdrojový kód. Nasmerujte myš na postihnutú oblasť v prehliadači, kliknite pravým tlačidlom myši a v ponuke prehliadača vyberte možnosť „Inšpektor“.
Keď pohybujete myšou po zobrazení zdrojového kódu, všimnete si oblasti, ktoré ovplyvňuje, zvýraznené v živom náhľade. Na pravej table uvidíte CSS použitú pre vybraný prvok.
Objavte naše 5 WordPress pluginy na vizuálne upravovanie CSS vo vašom blogu
Takže CSS zodpovedajúce zvýraznenej položke sa musí opätovne upraviť.
@media screen a (min-width: 59.6875em) {body: before {background-color: #fff; tieň v tvare: 0 0 1px rgba (0, 0, 0, 0.15); content: ""; displej: blok; výška: 100%; min-výška: 100%; poloha: pevná; hore: 0; vľavo: 0; šírka: 29.4118%; z-index: 0; / * Opravuje blikajúcu chybu pomocou posúvania v prehliadači Safari * /}
Tento kód CSS pridá do ľavého horného rohu prázdny blok šírky 29,4118% a šírky 100%. Takto to posunieme doprava.
@media screen a (min-width: 59.6875em) {body: before {background-color: #fff; tieň v tvare: 0 0 1px rgba (0, 0, 0, 0.15); content: ""; displej: blok; výška: 100%; min-výška: 100%; poloha: pevná; hore: 0; vpravo: 0; šírka: 29.4118%; z-index: 0; / * Opravuje blikajúcu chybu pomocou posúvania v prehliadači Safari * /}
Po uložení a odovzdaní šablóny so štýlmi na server bude takto vyzerať váš web.
Práca s CSS môže byť pre začiatočníkov mätúca. Ak nechcete robiť všetky manuálne práce, môžete skúsiť Doplnok WordPress CSS Hero. Umožňuje vám upravovať CSS bez písania kódu a funguje s každou témou WordPress.
Objavte aj niektoré prémiové doplnky WordPress
Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prácu s vaším blogom alebo webovou stránkou.
Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.
1. Zxeion
Zxeion je silný WordPress Plugin prémia zodpovedná za zlepšenie bezpečnosti vašich webových stránok. Tento plugin obsahuje kolekciu nástrojov na ochranu a zabezpečenie, ktoré ochránia váš web pred možnými útokmi.
Jeho systém ochrany v reálnom čase vám pomôže identifikovať hrozby pre váš web a zablokovať ich bez toho, aby ste museli robiť čokoľvek.
Objavte aj naše 7 doplnkov na vylepšenie bočných panelov v systéme WordPress
Medzi jeho vlastnosti patrí: ochrana v reálnom čase, vynikajúca podpora zákazníka, pravidelné aktualizácie, blokovanie adries IP, vynikajúca dokumentácia, moderné a profesionálne rozhranie, špecializovaná podpora zákazníkov a ďalšie.
Stiahnuť | demo | web hosting
2. Slaido
Slaido je a WordPress Plugin premium, ktorý vám umožňuje vybrať si z takmer 320 responzívnych šablón posuvníkov a importovať jednu z nich na váš web len niekoľkými kliknutiami. Je to kompletný balík šablón, ideálny pre slider Revolution. Takže ho budete musieť najprv nainštalovať, aby ste ho mohli plne využívať WordPress Plugin
Jeho hlavné vlastnosti sú: responzívne rozloženie jeho jazdcov, ľahký import alebo export jazdcov, pravidelné aktualizácie, zákaznícka podpora k dispozícii nepretržite, plynulé a veľmi zaujímavé animácie, dostupnosť videonávody na rýchly štart, podpora typov písma Google a mnoho ďalších.
Stiahnuť | demo | web hosting
3. Kontaktný formulár
Contact Us Form je prémiový responzívny doplnok WordPress a jednoduchý nástroj, ale bohatý na možnosti prispôsobenia, ktorý vám umožňuje zobraziť jasný a povzbudzujúci formulár, v ktorom vás môžu návštevníci kontaktovať zanechaním svojej správy.
Budete môcť definovať potrebné polia, zvoliť najlepšie rozloženie polí a úplne ich prispôsobiť, aby ste svojich zákazníkov alebo návštevníkov povzbudili, aby zanechali svoje návrhy alebo správy.
Pozývame vás na prečítanie: Zásuvné moduly 10 WordPress na vytváranie a správu webových stránok reštaurácií
Stačí nastaviť e-mailovú adresu, na ktorú chcete dostávať správy, a pomocou nej môžete rozvinúť svoje podnikanie tým najziskovejším smerom.
Stiahnuť | demo | web hosting
Odporúčané zdroje
Zistite ďalšie odporúčané zdroje, ktoré vám pomôžu pri vytváraní a správe vašich webových stránok.
- Ako nájsť prihlasovaciu URL svojho blogu WordPress
- Ako vytvoriť super hrdinskú zónu s animovaným textom
- Ako prispôsobiť CSS vášho webu WordPress
- Ako pridať kategóriu do menu vášho blogu WordPress
záver
To je ono! To je pre tento návod všetko. Dúfame, že vám to pomôže zmeniť stranu bočného panela vášho blogu WordPress. kľudne zdieľajte tento článok so svojimi priateľmi na obľúbených sociálnych sieťach.
Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress.
Ak máte nejaké návrhy alebo pripomienky, nechajte ich v našej sekcii Komentáre.
...
