Jak vytvořit mobilní verzi webu WordPress – Hosting- Namecheap.com
jak vytvořit mobilní verzi webu WordPress
přiznejte to: mít krásnou a plně funkční mobilní verzi vašeho webu WordPress je nutností, vzhledem k tomu, že významný objem surfování po internetu pochází z mobilních zařízení. Je snadné vytvořit mobilní web s WordPress na Namecheap, ať už se přihlásíte k odběru sdíleného hostingu nebo EasyWP WordPress hostingu.
možná jste si již všimli, že webové a mobilní verze stejného webu mají někdy trochu jiný obsah. To se provádí za účelem vyloučení specifických funkcí z mobilní verze WordPress, protože mohou přijít nebo pracovat nesprávně, nebo prostě být ohromující na menším displeji. Algoritmus vyhledávače Google navíc řadí weby vhodné pro mobilní zařízení výše.
v tomto článku se budeme zabývat několika způsoby, jak vytvořit váš web WordPress mobilní:
vytváření webů s citlivým designem: Na každém zařízení je načten stejný obsah a adresa URL, ale CSS se používá ke změně vykreslování stránky podle rozlišení mobilního zobrazení.
dynamické servery: je načtena jedna adresa URL, ale v závislosti na použitém zařízení se používá jiný obsah a CSS.
vytváření samostatných adres URL pro stolní počítače a mobilní zařízení: načítají se různé adresy URL, a proto se načítají webové stránky, např. nctest.info a m.nctest.info
mějte na paměti, že každý způsob má své klady a zápory, proto doporučujeme provést SEO výzkum před pokračováním.
responzivní Web Design
responzivní web design používá CSS3 mediální dotazy. Media Queries je modul CSS3 umožňující vykreslování obsahu přizpůsobit se podmínkám, jako je rozlišení obrazovky, šířka a výška, orientace.
soubor, který budete muset upravit, je obvykle styl.element. Je umístěn v adresáři/wp-content/themes/ theme_name/.
dotaz na média CSS3 obvykle vypadá takto:
@media only screen a (max-width: 480px) {
}
je to podmíněný kód, který říká prohlížeči, aby upravil všechny parametry stylingu, pokud je velikost obrazovky menší nebo rovna 480px.
Chcete-li získat podrobnější informace, můžete přidat intervaly min-width a max-width, abyste mohli cílit na různá zařízení:
@media only screen A (min-width: 768px) a (max-width: 959px) {
}
všechny další úpravy stylu by měly být přidány mezi {…} prvek.
jako příklad vezmeme výchozí motiv Twenty Ten, který ve výchozím nastavení nereaguje.
první kód nastaví velikost hlavního snímku motivu na 550px:
# access.hlavička menu, div.menu, # colophon, # branding, # main, # wrapper, # site-title {
šířka: 550px;
}
porovnejte, jak v tomto případě bude web vypadat na mobilním zařízení:
i když, jak vidíte, ne všechny prvky jsou nastaveny na obrazovku zařízení. Musíte upravit samostatně v podstatě všechny prvky, které máte na svém webu-obrázek záhlaví, popis blogu, šířka navigační lišty, pozice vrstvy obsahu atd.
některé z nich je možné skrýt, například posuvníky nebo obrázky záhlaví. Tímto způsobem bude mobilní verze vašeho webu optimalizována a uživatelsky přívětivá.
je třeba použít následující kód (např. pro obrázek záhlaví):
# branding img {
display: none;
}
Chcete-li změnit velikost prvku (obrázek záhlaví v příkladu), použijte
#branding img {
width:100%
}
poznámka: úprava stylu.soubor css vyžaduje také znalosti vývoje webu. Nezapomeňte zálohovat soubor před jeho změnou.
jakmile jsou všechny části vašeho webu odpovídajícím způsobem upraveny, měl by mít pěkný vzhled na mobilních zařízeních:
většina témat WordPress je vytvořena tak, aby reagovala – při instalaci nového motivu můžete dodatečně zkontrolovat jeho připojený vzhled na mobilních zařízeních.
pokud žádný neexistuje a nejste si jisti, zda motiv, který se vám líbil, je citlivý, nebo ne, můžete jej definovat ve filtrech funkcí při hledání motivu.
1. Přihlaste se do řídicího panelu WordPress admin (yourdomain.com/wp-admin), přejděte do nabídky vzhled a klikněte na témata.
2. Klikněte Na Přidat Nový:
3. Klikněte na filtr funkcí a zkontrolujte citlivé rozvržení. Zkontrolujte další možnosti v případě potřeby najít požadované téma.
4. Klikněte na Použít filtry:
za pár okamžiků uvidíte seznam témat, která odpovídají nastaveným funkcím vyhledávání.
dynamické servírovací weby
Alternativně můžete nakonfigurovat různé CSS a obsah, který má být stažen v závislosti na typu zařízení. Toho lze dosáhnout pomocí pluginů WordPress. Většina z nich má k dispozici řadu základních nastavení zdarma.
jako příklad použijeme jeden z nejpopulárnějších pluginů pro navrhování mobilních blogů – WPtouch Mobile Plugin.
nejprve je třeba jej nainstalovat a aktivovat v řídicím panelu Správce.
po dokončení byste měli zvolit motiv pro mobilní verzi webu-přejděte do nabídky WPtouch a klikněte na témata & Rozšíření (1). Vyberte požadované téma a klikněte na Nastavení (2):
po dokončení instalace budete moci provést potřebné změny a opravy. Možnosti pluginu umožňují provádět spoustu akcí a většina z nich je samovysvětlující.
zde je, jak vypadá nabídka mobilního pluginu WPtouch:
po dokončení všech úprav uložte změny a zkontrolujte, jak se web zobrazuje na stolním počítači a mobilním zařízení:
vytvoření samostatných adres URL pro stolní počítače a mobilní zařízení
poslední způsob je časově nejnáročnější, protože budete potřebovat:
1. Vytvořte odpovídající subdoménu pro vaši mobilní verzi, například m.nctest.info.
2. Vytvořte nebo zkopírujte obsah webu do vytvořené cesty k adresáři subdomény.
3. Nainstalujte a nakonfigurujte plugin pro mobilní přesměrování.
poznámka: Pokud se chystáte s touto možností, mějte na paměti, že obě verze vašeho webu nebudou automaticky synchronizovány, protože technicky se jedná o různé instalace. Všechny provedené úpravy budou muset být replikovány pro druhou verzi.
jakmile je subdoména vytvořena a web je upraven, pokračujte a nainstalujte plugin do hlavního panelu správce webových stránek.
jako příklad použijeme plugin pro přesměrování mobilních stránek.
1. Přejděte do nabídky Nastavení a klikněte na přesměrování mobilního webu.
2. Vložte mobilní adresu URL, kterou chcete mít. V případě potřeby zkontrolujte další možnosti.
3. Klikněte na Aktualizovat nastavení: 
poznámka: neposkytujeme ladění kódu a služby pro vývoj webových stránek. Tento článek je poskytován jako zdvořilost pouze pro vaše pohodlí.Pokud budete čelit jakýmkoli problémům s mobilní verzí svého webu, doporučujeme vám obrátit se na fóra podpory nebo se obrátit na vývojáře webových stránek.
to je ono!