Jak si vyrobit firemní web – Kompletní podrobný průvodce videem!

Nabídky WordPress


Za normálních okolností bych nikdy nezačal příspěvek tak dramaticky, ale DAMN dnes pro vás máme něco zvláštního: Kompletní krok za krokem video průvodce (bez přeskočení) na vytvoření profesionálního webu WordPress pro malé firmy!

Co dělá toto video tak zvláštním, je v zásadě tři věci: 1. Skutečnost, že to je přesně to, jak bychom to sami dělali (a v tom jsme, ahem, do značné míry odborníci); 2. Úroveň podrobností, do které vstupujeme – video je ohromující jedna a půl hodiny dlouhé a od začátku do konce vytváříme příklad webové stránky pro malé firmy; a 3. Že video je zaměřeno na úplné začátečníky – lidi, kteří s největší pravděpodobností ještě nic takového neudělali (a stále vidí celou myšlenku vytvoření webu pro sebe jako něco opravdu skličujícího).

Jednoduše následujete, kliknutím na místo, kde klikneme, as trochou promyšlení proměním několika aspektů, aby vyhovovaly vašemu podnikání, doufejme, že budete moci vytvořit podobně fantastický (a technicky vynikající) web WordPress.!

Tak na co čekáš? Začít!

Jak si vytvořit profesionální obchodní web s WordPress:

Přímý odkaz pro sledování videa na Vimeo.

– (poznámka: video kredity pro Topher DeRosia – tvůrce HeroPress

Přepis videa:

V tomto videu vám ukážu, jak si pomocí WordPress vytvořit profesionální firemní web. Půjdeme krok za krokem a nic nenechám venku. Podnik, který budeme používat jako model, je prostor pro spolupráci. Pokud se chcete podívat na konečnou verzi tohoto webu, můžete přejít na web coworkerpro.com. Prvky, které hodláme na tento web vložit, lze použít na jakémkoli firemním webu. Je tu výzva k akci. Trochu o nás. Někteří zaměstnanci, osvědčení a kontaktní formulář, stejně jako několik dalších stránek. Na konci tohoto videa byste tedy měli mít špičkovou webovou stránku, ať už je vaše podnikání jakákoli. Budeme hostit naše stránky na webu Siteground. A my se podíváme na vše, co mohou nabídnout, a jak snadné je uvést věci do pohybu. Chystáme nainstalovat několik dalších doplňků, abychom vám pomohli, a budeme používat téma Hestia z Themeisle. Hestia nám umožňuje použít přizpůsobovač vestavěný do WordPress k úpravě každé části stránky, přímo od frontendu. Prohlédneme si také několik nástrojů, které mohou pomoci rychlejšímu a lepšímu fungování našich stránek. Podíváme se na vlastní optimalizátor stránek. Pro optimalizaci vyhledávačů propojíme Konzolu Google Search Console a Google Analytics, stejně jako Yoast SEO. A pak použijeme plugin Automatpack Jetpack pro správu spamu, záloh a některých dalších statistik. Pokud budete postupovat po několika hodinách, měli byste mít k dispozici kompletní, krásný, funkční obchodní web. Tak pojďme začít. První věc, kterou chceme nastavit, je webhosting. Nyní je webhosting místem, kde bude váš web na internetu. Je to jako získat garáž pro pronájem věcí. Pronajmete si trochu místa, dáte na to svůj web a lidé ho mohou navštívit. Web, který budeme používat, se nazývá Siteground. Jsou to vynikající host se skvělými cenami a spoustou funkcí, které se mi opravdu líbí. Než ale začneme, chci vám něco ukázat na WinningWP.com. Siteground a WinningWP mají uspořádání, kde můžete ušetřit% z vašeho hostingu na Siteground. Program WinningWP navíc získá malý kousek peněz, které zaplatíte. Tyto peníze slouží k vytváření videí, jako je tato, takže je to skutečně oboustranně výhodná situace, kdy získáte levný hosting, skvělý obsah a trochu se také dostane WinningWP. Abychom tuto dohodu mohli využít, stačí jít na tuto stránku a pod videem bude odkaz. A klikněte na použít kupón. A tady jsme, říká, speciální nabídka pro návštěvníky WinningWP.com. A vybereme si plán. Plán, se kterým se chystáme jít, je plán GrowBig. Má jen dost dalších funkcí oproti StartUp, které se mi opravdu líbí. Ale GoGeek je opravdu pro trochu větší weby, než se chystáme postavit. Pojďme tedy vybrat GrowBig. A klikneme na začátek. Součástí tohoto videa je nyní registrace nového názvu domény. Pokud již máte zaregistrované doménové jméno, Siteground má zde výbornou dokumentaci, jak ji namířit na svůj web nebo ve skutečnosti převést název na Siteground. Buď jeden funguje velmi dobře a mají dobré informace o tom, jak to udělat hned tady. Budeme mít nový a bude to coworkerpro.com. Nyní tato doména stojí $. rok. A když o tom přemýšlíte, jako roční cena, to opravdu není moc. Pojďme kliknout. Zde je uvedeno, blahopřejeme, je k dispozici naše doménové jméno. Nyní vytvoříme účet na webu Siteground. Nejprve vložíme e-mailovou adresu a poté heslo pro Siteground. Toto není heslo pro vaše doménové jméno nebo pro FTP nebo něco podobného, ​​stačí se přihlásit do Siteground. Dále uvádíme některé osobní údaje. Dále vložíme informace o naší kreditní kartě. A zde řekneme, že naše fakturační adresa je stejná jako v kontaktních informacích výše. A teď se podíváme na to, co kupujeme. Dostáváme plán GrowBig. Naše datové centrum bude v Chicagu. To je docela blízko tam, kde jsem. Máte však na výběr, mohou to být i jiná místa, stačí kliknout na toto tlačítko. Kupuji -měsíční plán za $. za měsíc, takže teď mi bude účtováno $ .. Přidejte k tomu registraci doménového jména pro $ .. Navíc opravdu chceme soukromí domény. Tím zabráníte spammerům procházet registr domén a hledat e-mailové adresy. Nakonec je k dispozici webový skener Siteground. To monitoruje váš web a hledá hackery a útoky a podobné věci. Stojí to za to, dostane vás o krok napřed před padouchy. Takže moje celková částka bude $ .. Ale hezké je, že se to platí za celý rok, takže na to nemusíte znovu myslet rok. Potvrzujeme smluvní podmínky a nyní klikneme na platbu. A naše objednávka byla odeslána. Ihned se můžeme přihlásit do naší zákaznické oblasti. Registrace doménových jmen však může trvat až hodiny. Takže naše doménové jméno nebude fungovat okamžitě. Nyní, když jsme vytvořili náš účet Siteground, můžeme přejít na název domény, který jsme vytvořili, a zobrazit tento zástupný symbol. Všechna nová doménová jména na webu Siteground mají zástupný symbol jako je tento a zůstanou tam, dokud nenainstalujeme vlastní web. Takže pro náš další krok, jdeme do toho a nainstalujte WordPress. Nejprve jděte na web Siteground.com a přihlaste se pomocí účtu, který jsme vytvořili dříve. Teď, když jsme přihlášeni, právě tady na hlavním panelu, je tu malé upozornění, že máte nový hostingový účet, který jste dosud nenastavili. A pokud klikneme na zobrazení, poskytne nám několik možností. Mohli bychom založit nový web, přenést web nebo říct, že teď nepotřebujeme pomoc. Nebo bychom mohli kliknout na tuto malou šipku a to se vrátí později. Budeme ale pokračovat a založit nový web. Chceme WordPress. A nyní přidáváme informace o účtu WordPress. Takže to bude pro WordPress na našem webu. A my klikneme na potvrzení. A nyní se říká, že jste požádali o instalaci WordPress na svůj účet. A pak musíme potvrdit, že jsme si přečetli a souhlasíme s podmínkami služby Siteground. Nechám to jako cvičení pro vás. A nyní klikneme na kompletní nastavení. A teď to dělá pro nás vytvoření databáze, instalaci WordPress a jejich propojení pomocí informací, které jsme právě vložili. A jsme tam. Můžeme postoupit do naší zákaznické oblasti. Ale teď, pokud se vrátíme na naši webovou stránku a znovu načteme, uvidíte, že máme blog. Také si všimněte, že provozujeme protokol HTTPS, což znamená, že pro nás vytvořili certifikát SSL. Ukážu vám, kde se to stane, abyste věděli, jak to udělat, pokud budete někdy potřebovat znovu. V oblasti uživatelů Siteground jdeme na své účty. A pak jděte na cPanel. Vždy chceme bezpečně přistupovat k cPanelu, tak do toho a rozhodněte se, že si to budete pamatovat. Na této stránce je nyní spousta věcí, ale je tu také toto úžasné vyhledávání. SSL certifikát, který máme, pochází z Pojďme se zašifrovat. Takže napíšeme L-E-T, a my jsme, jsme filtrováni přímo dolů. A zde vidíte náš SSL certifikát pro coworkerpro. Ale Siteground to pro nás připravil, takže se nemusíme starat. Chtěl jsem jen, abys viděl, kde to je, protože je to důležité. Nyní se tedy přihlaste k WordPress a proveďte malou konfiguraci. Toto je uživatelské jméno a heslo, které jsem vytvořil před pár okamžiky. Nyní něco, co pro nás Siteground udělal, je instalace Jetpacku. O něco později se podíváme na konfiguraci. Budu zavírat uvítací lištu a lištu Jetpack a nyní mám nainstalovanou velmi vanilkovou WordPress. Takže jednu z prvních věcí, kterou chceme udělat, je přejít do Nastavení → Permalinky a chceme jméno příspěvku, protože to zjednodušuje a snáze čte adresy URL. Je to také mnohem lepší pro optimalizaci vyhledávačů, a to může být opravdu důležité. Pak půjdeme k diskusi a prozatím vypneme komentáře, protože nechceme, aby na tomto webu někdo narazil a používal komentáře, protože pravděpodobně budou spam. Půjdeme na čtení. A prozatím nebudeme odradit viditelnost vyhledávače, protože nejsme připraveni být veřejní. Nyní nezapomeňte, až budete hotovi se svým webem a je připraven k uvedení do provozu, vraťte se na tuto stránku Nastavení → Čtení a zrušte zaškrtnutí políčka odrazovat vyhledávače od indexování tohoto webu. Od té doby vás Google bude moci najít. Potom chceme odstranit výchozí obsah dodávaný s WordPress. Je tu jeden příspěvek s jedním komentářem. A pokud tento příspěvek z koše vyprázdníme a vyprázdníme jej do koše, komentář bude následovat, takže nemusíme hledat tento komentář a mazat jej. Nyní však pojďme na stránky a nenalezeny žádné stránky. Takže pokud se podíváme na naši domovskou stránku, mělo by to vypadat docela nevýrazně. Nic nalezeno. Na postranním panelu jsou některé věci, pojďme se o to postarat. Hned to vyprázdníme a potom budeme mít čistou břidlici. A tady to je. Prázdný web, právě pro vyplnění našeho obsahu. Nyní na naší domovské stránce nebude mít blog. Bude to samostatná část webu. Ale právě teď je naše domovská stránka blog. Pojďme to změnit. První věcí, kterou uděláme, je vytvoření dvou stránek. Zavoláme tomu jeden domov a jednoduše ho zveřejníme. A pak uděláme další a náš web nebude mít blog, bude mít sekci zpráv, takže tomu budeme říkat. Takže teď máme dvě stránky, Home a News. Nyní však musíme WordPress říct, jak je používat. Nyní jdeme do Nastavení → Čtení. A právě tady se zobrazuje vaše domovská stránka a právě teď jsou to vaše nejnovější příspěvky. Místo toho si ale vybereme statickou stránku. A pro domovskou stránku zvolíme Domů a pro stránku příspěvků vybereme Zprávy a uložíme změny. Nyní, když se podíváme na webovou stránku, je tu naše domovská stránka. A náš web se stále nazývá můj blog a můj blog WordPress, ale za pár minut to změníme. Nyní, když na našem webu máme nejzákladnější konfigurace, nainstalujeme pár pluginů, které nám pomohou posunout se vpřed. První z nich se jmenuje TinyMCE Advanced. TinyMCE je nyní název editoru, který WordPress používá. Pokud jste někdy vytvořili stránku nebo příspěvek, použili jste TinyMCE. Pokud tuto stránku upravíme, uvidíte ji přímo zde. Ve výchozím nastavení má tento jeden pruh. Pokud kliknete na toto tlačítko, které se nazývá přepínání panelů nástrojů, dostaneme druhý pruh. Ale TinyMCE Advanced přidává ještě více. K dispozici je rozevírací seznam pro různé typy záhlaví a je zde navigace v nabídce všech druhů dalších nástrojů. Pojďme tedy nainstalovat toto opravdu rychlé. Jdeme na pluginy, přidáváme nové a můžeme pluginy prohledávat a tam to je. Nyní klikneme na tlačítko nainstalovat a aktivujeme. A teď, když se vrátím na stránky a upravím domov, uvidíte, že máme rozbalovací nabídku pro písma, záhlaví a mohli bychom používat tabulky a všechny další věci. A to bude užitečné později. Nyní se další plugin, který hodláme nainstalovat, jmenuje My Eyes Are Up Here. A to je opravdu skvělý plugin, který pomáhá při ořezávání fotografií. Normálně, pokud máte fotografii, která je vysoká a úzká, a požádáte WordPress, aby vytvořil čtverec, ořízne čtverec přímo ze středu. S My Eyes Are Up Here však inteligentně detekuje lidské tváře. Takhle. A pak vytvoří správné miniatury. Pokud navíc nejsou lidé, máte možnost umístit tuto růžovou tečku kamkoli chcete a ujistěte se, že tato část fotografie je vždy na obrázku. Pokud tedy máte fotografii s horami a dálnicí a chcete ji oříznout, abyste viděli pouze hory, můžete jednoduše vybrat horskou oblast a když plodiny WordPress udrží hory. Tento plugin je opravdu užitečný při vytváření archivů zaměstnanců a galerií lidí, protože WordPress se vždy dostane do jejich podoby. Pojďme to nainstalovat. Teď je to nainstalované. Nyní je zde několik dalších pluginů, které bych ráda rychle prošla. Ahoj Dolly přichází s každou instalací WordPress a my ji nepotřebujeme. Takže se toho prostě zbavíme. Akismet, který použijeme později ve videu. Používá se pro antispam. Jetpack také přichází s řadou nástrojů, a my je překonáme později. A pak SG Optimizer slouží k urychlení vašeho webu na webu Siteground. Má skvělý plugin pro ukládání do mezipaměti a řadu dalších věcí, na které se podíváme později. Dále se chystáme nainstalovat naše téma. Téma, které budeme používat, se jmenuje Hestia. A to pochází z Themeisle. Toto je její stránka na Themeisle.com. A to ve dvou verzích, platené verzi a bezplatné verzi. V tomto videu budeme používat bezplatnou verzi. Chtěl jsem vám však ukázat pár věcí, které dokáže. To je Hestia, na kterou se díváme. A tato domovská stránka byla vytvořena bez kódování. Je plně kompatibilní s tvůrci stránek, ale v tomto videu ho nebudeme používat, protože jej nebudeme potřebovat. Hestia je bez ní skvělá. S přizpůsobovačem to skvěle funguje. A je nesmírně populární. Dostaneme ji z WordPress.org a použijeme bezplatnou verzi. Existuje více, instalace bezplatné verze. Půjdeme tedy na řídicí panel, poté na vzhled a potom na témata. Přidat nové téma. A hledejte Hestii. A tady to je. Klikneme na instalaci a aktivaci. A tady jsme. Pojďme navštívit domovskou stránku a uvidíme, jak to vypadá. Zde je název webu. A to je název stránky a mohli bychom to změnit v přizpůsobiteli. Je dodáván s několika věcmi, jako je tato oblast blogu, a obydlené zápatí s několika obrázky. Změníme to, jak to vypadá, přidáme menu a uděláme s ním spoustu věcí. Nejprve však, když jsme tady v oblasti motivů, vymažeme všechny kromě jednoho dalšího tématu. Pojďme tedy smazat a. A důvodem, proč některé odstraňujeme, je to, že pokud se někdy vyskytne problém se zabezpečením, mohli bychom na něj být citliví, i když toto téma nepoužíváme. Nyní je nepravděpodobné, že by se vyskytl problém se zabezpečením u těch, které nebyly rychle vyřešeny. Ale na druhé straně, pokud je vůbec nemáme, nemusíme si dělat starosti. Tak proč jsme si nechali jednu navíc? Vždycky chcete jedno zvláštní téma, protože pokud se něco stane vašemu hlavnímu tématu, jako by bylo odstraněno nebo poškozeno, váš web se vrátí k sekundárnímu tématu. Pak to budete moci vidět a dostat se do oblasti administrace. Začněme tedy s budováním naší domovské stránky. První věc, kterou se chystáme udělat, je kliknout a začít s Hestií. A to, co to vlastně dělá, je přivést nás na tuto stránku ve vzhledu. A obsahuje informace o tom, jak začít, ale má dvě doporučené akce. A uděláme oba. Orbit Fox Companion je plugin, který přidává některé funkce na úvodní stránku. Je to zdarma a můžeme jej nainstalovat přímo zde. A tady jsme. Další z nich se jmenuje Pirate Forms, a to vytvoří kontaktní formulář. Nyní Pirate Forms není tak velká a komplikovaná jako jiné formy jako Gravity Forms nebo Ninja Forms. Ale pro naše účely to vytvoří skvělý malý kontaktní formulář. Hestia Pro je nyní plně kompatibilní se všemi většími zásuvnými moduly. Takže pokud je potřebujete, můžete je určitě použít s Hestií. Pod užitečnými zásuvnými moduly vidíme věci, jako jsou tvůrci stránek a překladové moduly. Zde nebudeme používat žádné z nich pro náš design. Takže další věc, kterou chceme udělat, je jít na domovskou stránku. A téměř všechno ostatní, co děláme na titulní stránce, bude provedeno pomocí přizpůsobovače, který najdete zde. Klikněte na možnost přizpůsobit. A teď můžeme projít menu tady vlevo, nebo můžeme kliknout na všechny malé modré tužky a věci změnit. Díky tužkám je velmi příjemné najít věci ve složitém menu. Jednou z prvních věcí, kterou uděláme, je změna vzhledu webu. Právě teď je v krabici a má tu tuto hranici vpravo. Pokud přejdeme na nastavení vzhledu, můžeme obecně zrušit zaškrtnutí v rámečku. A nyní jde o celou šířku. Budeme nadále sdílet ikony a chceme povolit posun nahoru. Tím se umístí malé tlačítko dolů, které nám pomůže zipovat zpět nahoru na vrchol. Nyní chceme udělat změnu identity naší stránky. Právě teď je to prostě můj blog. Změníme to na Coworker Pro. A právě tak se to změnilo. A pak pro slogan, který se na domovské stránce neuvidíme, ale objeví se zde na panelu nástrojů, napíšeme co nejlépe Coworking. Poté klikneme na Publikovat. Publikování je jako uložení vaší práce. Nyní si všimnete, že to neaktualizovalo záhlaví, protože přizpůsobovač může znovu načíst pouze domovskou stránku. Pojďme to tedy rychle uzavřít. A teď můžete vidět, Coworking v celé své kráse, přímo tam. A vrátíme se do přizpůsobovače. Nyní změníme naše pozadí, a to je tato tužka právě tady. Můžeme změnit obrázek. A já budu nahrávat jeden. Všechny obrázky, které pro toto video používám, pocházejí z webu unsplash.com, což je skvělé místo k získání bezplatných obrázků. Takže kliknu na otevřené. A udělám titul, protože to není dobré pro čtečky obrazovky. Ale já sem dám nějaký alt text. Vždy budete chtít dát alt text na všechny vaše obrázky. Poté kliknu na vybrat obrázek. A tady jsme. Nyní změňte tento text. Pak další řádek bude: Pojď s námi pracovat. Tady jsme. Nyní změníme toto tlačítko. Klikněte sem a dostanete nás přímo sem. Tady se nyní říká více informací. Líbí se nám centrování a pro adresu URL ji necháme na chvíli na pokoji. Ve skutečnosti si později uděláme odkaz na místo níže na stránce. Ale prozatím to necháme na pokoji. Ale nechceme, aby toto tlačítko bylo růžové, chceme, aby to bylo modré. Takže se odsud vrátím a jdeme na barvy a změníme naši přízvukovou barvu na modrou. Můžete si vybrat libovolnou barvu. Právě jsem si vybral tento, protože se mi to líbí. A pak klikneme na publikovat. A my to zavřeme. A teď je naše horní část téměř hotová. Naše písma jsou tady trochu příliš odvážná. Opravme to. Vrátíme se k přizpůsobiteli. Teď jdeme na nastavení vzhledu, typografii a potom si zvolím velikost písma. A tady jsou sekce úvodní stránky a tady je sekce velkých titulů. Jenom to trochu zmenšíme. Mínus tři, pojďme publikovat. Zavři to. Teď je to všechno na jednom řádku, přesně tak, jak chceme. Nyní, než sestavíme menu, budeme pracovat na vybudování zbytku těchto sekcí. Nyní, když máme hotovou naši horní sekci, přejdeme k druhé sekci. Nyní stavíme místo pro coworkingové místo, takže chceme lidi přesvědčit, aby sem přišli pracovat. Pojďme tedy tyto položky změnit na věci, které chceme, aby řekli. Klikněte na možnost přizpůsobit a poté na tuto tužku klikneme za záhlaví. A zde můžeme dát spoustu textu. Volitelně lze kteroukoli z těchto sekcí deaktivovat. Mohli bychom se toho všeho zbavit a my to uděláme později s několika z nich. Pojďme tedy změnit tento název. Tam. A potom změníme i text pod ním. Na volné noze život má spoustu výhod, a práce z domova v pyžamu je jedním z nich. Tak proč byste měli přijít s námi spolupracovat? Pak máme tři sekce a tady jsou tři administrační oblasti pro tyto sekce. Otevřeme tedy první a ikony jsou ovládány fontem. Nyní je jedním z důvodů, proč byste chtěli pracovat v coworkingové kanceláři, lidé. Pojďme tedy kliknout přímo sem a najděte lidi. Jeden z nich by fungoval. Pojďme si vybrat tuhle. A necháme tu červenou barvu, ale změníme to na lidi. A tento text změníme tak, že lidé, kteří zde pracují, jsou inteligentní, nápomocní a pečliví. Pomáháme si navzájem řešit problémy a řešit nevrlé klienty. A toto propojení bychom mohli udělat někde, ale nebudeme, prostě to necháme na pokoji. Uzavřeme to a otevřeme další. Dalším důvodem, proč byste chtěli pracovat v coworkingové kanceláři, je vybavení. Nechcete doma faxový přístroj, kdo ano? Ale jednoho dne jednoho budete potřebovat. Takže to změňte na sadu nástrojů. Říká se tomu kufřík, ale vypadá to jako sada nástrojů. A to je pro mě dost dobré. Necháme to modré a my zde napíšeme vybavení. A vložíme nový text. Máme fax, pěknou laserovou tiskárnu a konferenční místnost s konferenčním telefonem. Věci, které doma pravděpodobně nemáte nebo nechcete. A znovu tu necháme bez odkazu. A třetí funkce zůstane podporou. Až na to, že to není technická podpora. Nemluvíme o technické podpoře, ale o emoční podpoře. Lidé potřebují lidi kolem sebe, aby zůstali zdraví. Všichni jsme rozumní. Většinu času. Teď bych rád poukázal na to, že na každém z nich je tlačítko pro odstranění pole, takže byste mohli udělat dva nebo jen jedno, pokud si to budete přát. A je tu také nová funkce, takže můžete přidat čtvrtou, pátou, šestou atd. Takže teď pojďme kliknout na publikovat. A my to zavřeme. A tady to máme, proč byste měli přijít pracovat s námi. Malé efekty na každou z ikon a text vypadá krásně. Než začneme další sekci na stránce, chtěl bych nastavit výchozí písmo pro celý web. A je to docela jednoduché. Jdeme na přizpůsobení, nastavení vzhledu, typografii. A já si vyberu kabinu. A já si vyberu totéž. A teď všechno používá kabinu. Rozdíl je jemný, ale je tam. Teď další část, na které se chystáme pracovat, je sekce o, a je to ten malý pramínek tady. Nyní tato sekce skutečně vytáhne svůj obsah z domovské stránky, stránky ve WordPress nazvané domov. Takže jdeme na palubní desku a vytáhneme tu stránku. A právě teď je to prázdné. Nyní, jak jste si všimli, název stránky se zde nikde nepoužívá, takže na tom opravdu nezáleží. Pojďme sem tedy vložit nějaký text. A teď, chci, aby to bylo hlavičky velikosti jeden, a centrovat to. Pak pod něj vložte nějaký text. Chceme, aby nějaký text, který lidi přiměje, aby se cítili, jako by chtěli přijít, byl součástí naší komunity. Takže tento text vložíme dovnitř. Každý pátek děláme skupinový oběd a na vaření v naší místní kuchyni se podílejí různí lidé. Jíme spolu jako pevně spletená skupina přátel, kteří se navzájem staví a pomáhají si navzájem růst. Teď to udělejme trochu větší. A vycentrujte to. Nyní si všimnete, že naše velikosti písma jsou namísto pixelů v bodech. Vlastně chceme pixely. Takže jdeme na nastavení a otevřeme nastavení TinyMCE Advanced na nové kartě. A pak tady klikneme na velikost písma a použije se px. Nyní klikneme na tlačítko Uložit změny. A budu to aktualizovat, což stránku obnoví. A nyní můžeme celý tento text zvýraznit a zvolit px. A to je přesně to, co tam chceme. Nyní tedy klikneme na aktualizaci a my se podíváme na stránku. To je pěkně úhledné, ale pod tím chceme trochu víc textu. Vraťme se tedy k našemu editoru a já chci dost místa, takže to prostě udělám a vložím sem. A teď to uděláme také px. A také zaměřeno na střed a my to ještě nebudeme dělat jako odkaz, protože stránka, na kterou se chystá, neexistuje. Ale stále chceme trochu víc polstrování pod ním. Takže nyní kliknu na aktualizaci. A my jdeme. Ale chci, aby to bylo o něco větší. Takže to jednoduše uděláme z H. Dobře, pojďme jasné formátování a začneme znovu. Teď je to H tři a budeme to znovu centrovat. A kliknu na aktualizaci. Takže teď se znovu načtěte. Tam jedeme. A později, jakmile vytvoříme další podstránky, se vrátíme a uděláme z nich odkaz na stránku o stránce. Takže toto je naše sekce. Každá komunita a spolupracující web chce ukázat některé ze svých členů. To může lidem pomoci cítit se vítáni. Takže se chystáme změnit tuto stránku zaměstnanců na stránku členů. A uděláme to kliknutím na přizpůsobit, poté přejdeme zpět do této sekce a klikneme na setkání s naším týmem. A nyní upravujeme tuto sekci. Pojďme to změnit, abychom se setkali s některými z nás. A pak vložíme jiný podtitul. Naši členové jsou rozmanitou skupinou vývojářů, designérů, projektových manažerů a mnoha dalších obchodů. Náš seznam členů obsahuje asi% žen a máme zastoupenou širokou škálu etnik. Takže máme čtyři výchozí nastavení a tady si můžete prohlédnout čtyři sekce. A existuje odkaz na přidání nového člena týmu. Otevřeme tedy první. Pojmenujme jméno na Tinu. A podtitulem bude designérská lomítka a také změníme její obrázek. A odstraníme název a vždy vložíme alternativní text na všechny obrázky, které nahrajete. A pamatujete si, že jsme nainstalovali My Eyes Are Up Here? Existují dva různé náhledy, které vytvořil. Nyní v tomto konkrétním případě byla její tvář již ve středu, takže na tom nezáleželo. Záleží však na jiných obrázcích, které nahráváme. Nemusíme si vybírat zarovnání nebo velikost nebo cokoli, protože nám to téma vybere. Takže klikneme na vložit do příspěvku a je tu Tina. Pojďme dát lepší popis pro Tinu. Nyní si všimnete, že se jedná o textovou oblast, takže můžete tu malou věc chytit a v případě potřeby ji posunout dolů. Tina tráví své dny tvorbou digitálních uměleckých děl. Její umění bylo vystaveno v Carnegie Hall a London Art Museum. Chtěl bych zdůraznit, že každý, koho se chystám postavit, je vytvořen. A znovu opakuji, že všechny mé obrázky pocházely z Unsplash. Teď bychom mohli vytvořit odkaz, kdyby Tina měla svou vlastní stránku, ale ne, a tak necháme odkaz prázdný. A pak si vybereme její sociální sítě. Můžeme si vybrat z ikony a poté vložit URL. A nechám je jako výchozí, protože Tina opravdu nemá sociální sítě, protože jsem ji vymyslela. Pokud se však chcete jednoho zbavit, můžete kliknout na ikonu odebrání a nyní je LinkedIn od Tiny pryč. Pokud jste chtěli přidat něco jiného, ​​můžete kliknout na ikonu přidat a najít nějakou jinou sociální síť. To je Tina. Ukážu vám ještě jednu. A pak pomocí kouzla střihu udělejte pro vás další dva, protože se budou dělat úplně stejně. Naši další lidé budou ve skutečnosti společností tří sester. A zde si opět můžeme vybrat, co chceme, aby byl obraz zaměřen. Klikneme na vložit do příspěvku a jsou tam naše tři sestry. Jsou to marketingová firma. A teď se říká, že Juanita, Juliette a Jacqueline jsou tři sestry, které založily vlastní marketingovou firmu. Pracují především s mladými umělci a hudebníky ve městě. Nyní si všimnete, že všechny tyto další obrázky jsou čtvercové, ale tohle není, je to o něco kratší. To je v pořádku. Jsou však stejně široké a naše téma to omezí. Všichni musí mít stejnou šířku, ale mohou být o něco vyšší nebo kratší. Takže teď udělám další dva. Nyní mám sekci předvádějící některé z našich členů komunity. Jak vidíte, je snadné přidat další a každý z nich je poměrně flexibilní. Nyní tedy pojďme kliknout na publikování a zavřete přizpůsobovač a ujistěte se, že vypadá dobře v plné šířce. Určitě ano. Teď, když jsme s touto sekcí hotovi, můžeme přejít k další. Kdykoli prodáváte produkt, lidé budou chtít vidět reference. Chtějí slyšet od lidí, kteří provedli nákup, a uvidí, co si myslí. Naše další sekce bude tedy sekce osvědčení. A výchozí se říká, co klienti říkají, ale my se chystáme změnit náš. Začneme kliknutím na možnost přizpůsobit a přejdeme zpět dolů. A my tady klikneme, co klienti říkají. Podobně jako ve všech ostatních sekcích můžete deaktivovat. A ve výchozím nastavení jsou tři posudky, ale můžete přidat další. Pojďme tedy změnit náš názor od klientů na to, co říkají členové. A pak, pro naše podtitulky sekce, zřídka potřebujeme uvádět na trh, protože naši členové mají tendenci říkat všem, že vědí, jaké skvělé místo to má fungovat. Nyní tedy získejte vlastní posudky. Chystáte se přepínat obrázky. A všimnete si, že to pro nás automaticky vloží do kruhu. Náš původní obrázek byl čtverec. Rozhodl jsem se ponechat křestní jméno a dokonce i podtitul, protože to sedí. Vložíme však vlastní text. Miluji, že si vážím lidí kolem mě. Být v podnikání často znamená jednat s lidmi, kteří si nemyslí, že bych tu měl být. Ale ve společnosti Coworker Pro se do toho vejdu. A pak znovu, mohl by existovat odkaz, ale my nikde nepřipojujeme, takže můžeme nechat prázdné. Pojďme udělat naši další osobu. Tam jsme si vybrali Hansona. A vložíme jeho jméno. A vložte do příspěvku. A opět budeme používat pouze křestní jména, a místo aby byl nezávislým umělcem, budeme ho nazývat projektantem. A pak vložíme vlastní text. Atmosféra mládí a vzrušení v tomto prostoru je opojná. Tito lidé mění svět a já tam budu, abych viděl, jak se to stalo. A pak změníme třetí. Změníme obrázek. Procházejte zde. Chystám se vložit náš alt text. A vložte do příspěvku. Necháme Natalyu na volné noze. Odstraňte příjmení a vložte vlastní text. Páteční obědy se skupinou jsou nejlepší. Miluji skupinové vaření a pocit rodiny, který pochází od všech kolem stolu. A to je vše, nyní máme oblast našich ohlasů. Budeme publikovat, uzavřít přizpůsobitel. Poté přejděte dolů a podívejte se, jak to vypadá na široké obrazovce. A vypadá to skvěle. Musíme udělat ještě jednu sekci, a to je zápatí. Nejprve ale upozorním na to, že protože nechceme blog na této stránce, můžeme přejít k přizpůsobiteli a půjdeme až dolů do oblasti blogu a klikneme na malé oko tady. A teď je to pryč. A teď máme toto zápatí, které je připraveno převážně pro nás. Ale pojďme publikovat. A zavřete to a uvidíte, jak to vypadá. To jde přímo od osvědčení k zápatí. Úpravy zápatí v Hestii se mírně liší od ostatních sekcí. Stále používá přizpůsobovač, ale má několik různých gadgetů. Podívejme se na to. Když klikneme na možnost přizpůsobit, půjdeme až na dno. A na celé této zápatí je pouze jeden odkaz pro úpravy. Pojďme na to kliknout. Zde můžete změnit obrázek na pozadí stejně jako všechny ostatní obrázky, které jsme změnili. Chystám se opustit toto, protože se mi líbí panoráma města, ale na pozadí si můžete dát cokoli, co si přejete. Je tu název, kontaktujte nás, necháme to, protože to sedí. Ale pak podtitul, do kterého vložíme, že na recepci je přítomno od: a.m. do: p.m. Východní standardní čas. Pak máme zde titulek formuláře, a to je tady. But to determine what form goes right here, we click this little tab right here. And it’s simply a short code. Which means you could put in any short code, and it could render any number of things there. It could render another form or a bunch of information. You may recall near the beginning of this video that we installed the Pirate Forms plugin to go with Hestia. That’s because it’s using it right here. And as you can see, it is a perfectly functional small simple form. So we’re going to leave it. But now, we want to edit this content. So we’re going to click right here, edit. And it pops up here. I’m going to put in a different address, because I’m not in Romania. And I’m going to put in different contact information. But I like give us a ring and find us at the office, those fit nicely. And then, when we’re done, we click edit again, and it goes away, and you can see our new information here. And that’s it for the footer, just like that. Just a little bit of text touch-up, and we left the form alone, and we’re all set. So let’s publish. And close the customizer, and see how it looks. Just great. Now that we have the footer done, let’s look at adding a menu right up here. And most of the menu right now is going to link to various parts of the homepage. In a few minutes, we’ll add some actual pages, and we’ll add those to the nav then. But for now, we’re merely going to make a nav that lets us move around the homepage. Now, the first thing we want to do is get a list of the links that we’re going to use in our nav. And I’ll show you how we’re going to do it. Scroll to the second section. Why you should come work with us. Now this is the only part of the whole video that even looks at code. In your browser, we’re going to right click, right here in this white space, and go to inspect. And the first thing it comes up to is a section. And these sections right here, there’s a list of them, are the things we’re looking for. They’re just under the main div. Now, each section has an ID. This one that we clicked on is features. Next is about. Then there’s team, then there’s testimonials, and lastly, there’s contact. If this all sounds familiar, it’s because it’s the sections of the homepage. So you want to write down on a piece of paper, or a text file on your computer, the names of these IDs. Go ahead and hit pause and write them down. Once you’ve gotten them written down, let’s go back to our browser. Now we’re going to use the customizer. So we click customize. And one of our options right here is menus. Right now, there are only two menus. There’s a default top bar, currently set to very top bar menu, which actually isn’t being used on our theme right now. It has a phone number and an email address that we could use if we wanted. But we’re not going to. And there’s also a socials top menu, and so you could put social networks in the top bar. And we’re not going to do that right now either. We’re going to create a new menu, and we’re going to call it primary menu. And we’re going to click the primary menu checkbox. And that’s what’s going to make it appear right here. So let’s click next. And now we can add items. Now, rather than use the suggested pages and links that we have here, we’re going to create custom links. And we’re going to link to the various sections of our page. Now the first one was called features. And we’re going to use the ID that we pulled out of the code. We’re going to start with a slash, which means, on the homepage, then we’re going to put in a hashtag, which means, go to an ID. And we’re going to type features. And then we’ll click add to menu. So let’s look at just that one for right now. Click publish, and we’ll leave the customizer. So now we have features, and if we click it, it beautifully scrolls right down to the features section. So now, all we need to do is the same thing for all the other sections. So let’s go back to the customizer again. We’ll go back to the menus. We’ll edit our primary menu. And add items. All of these are going to be custom. Now the next ID we have is about. However, we really called that section community. So the link text is going to be community. Add to menu. The next one had an ID of team, but again, we’re going to deviate just a little bit and call it members in the menu. Then we’ll add to menu. The next one is testimonials. And we’ll leave that one called testimonials. And lastly, we’re going to have contact. So now, let’s click publish. And there’s our nav. We can even click while in the customizer, and have it jump around. Now one more thing we want to add to the nav is a little search option off here to the right. So we’re going to actually leave the primary menu, and go to header options. And under navigation, we can enable search in menu. And now, we have a little glass here. So now, we’ll click publish. And close the customizer. And here we have a beautiful nav that lets us jump around the homepage. Now, we’re also going to create some subpages that are actually different pages from the homepage, and we’ll come back to the nav and add those to it when we do that. Now that we are nearly finished with the homepage, let’s build the news page. Before we get started, I want to remind you of a couple things. We’ll go to settings, reading, and I’ll point out that our posts page is actually a news page. So let’s go to pages, and edit the news page. And you’ll note that we can’t put any text in here, because it’s supposed to be an archive. But let’s view it. The posts will go here, and we have this horrible pink bar at the top. We are using the page’s title, and fortunately, we can also use the featured image. So let’s upload a nice featured image. There’s our alt text, and we set the featured image, and update. And now, we’ll go look at it. And there we are. Now as long as we’re here, let’s add it to the menu. We’ll go to customize, menus, primary menu. Add items. And we’ll add our news page, except we want it here at the top. Then we hit publish, and close the customizer, and now we have a news item. And it goes to this page. So let’s create our first post. We’ll click add new, and there is nothing unique about posts in Hestia. This is % stock WordPress. So if you’re familiar with WordPress, you know how this works. Let’s go ahead and make one. Our coworking space has a new refrigerator. The old one saw its last ham sandwich last Friday. And we’ll put an image at the top of the post. And put in our alt text. And that’s too small, so we’ll click the pencil, and we’ll go to large. And we’ll center it. And click update. And there we are. I’m also going to set it as the featured image, and you’ll see why in a moment. So I don’t need to upload it again, it’s already there. We’ll add a new category called kitchen. Publish. And now, when we reload our news archive, there we are. Now this image is the featured image. If we hadn’t set one, then this text would slide all the way to the left, which is usually fine, but it looks really sharp with a featured image. If we click, it also puts the featured image in the bar at the top, so that’s something to remember. Now, you’ll note that it says uncategorized, and we made one for kitchen, so let’s go back. And there we are, we have proper category right there. Now, before we get too much farther, I want to fix the nav in the footer. I want it to replicate what’s in the header, so I’m going to go to customize, and go to menus, and click on primary. And you’ll note that it’s already set to primary, but if I also set it to footer, you can see that it’s now down there at the bottom. So now, I’ll publish and close this, and there, now we have the same nav at the top and the bottom. I’d like to show you one more option with the blog page. And then we’re going to create an about page. Right here on the homepage, we’re going to click customize. And then we’re going to go to front page sections. The sections that are bolded are the sections that we have built. The ones that are grayed out are sections that could exist, but don’t, because we never turned them on. The ribbon simply gives you a background image, and a place to put in some text and a button. The clients bar allows you to post icons of your clients. Subscribe allows you to put in a subscribe form, and then blog is where I was headed here, allows you to put in a blog section. So I’m going to unclick disable section, and we’ll scroll down. And while you were away, I added a second blog post. So we have one here for the kitchen, and a new member. And we can make this say news. And there we are, now we have a news section on our homepage. And if we decide we don’t want that, we click the little I, which checks this, and I’m going to click publish. And now we’re back to where we were, but now you’ve seen how easy it is to add a news section to the homepage. But now, let’s create an about page. Again, there’s very little custom about pages in Hestia. So if you’ve ever built a page, you know how it works. Here’s our about text. We’ll create a featured image, and I’m going to use the same image as the homepage header, for some continuity. And now, let’s view that page. A tady to je. And now, let’s put it in the menu. We’ll go to customize. Menus, primary menu. Add items, and we’ll add this about page. We want about way up here at the top. So then we’ll publish, and then close the customizer bar. And there we have about. So let’s test these items. We’ll go first to contact. Which takes us to the homepage, and the footer. Then there’s testimonials, members, community, features, news, and about. And if we want the top of the homepage, we simply click the logo, and there we are. Now, our site is essentially finished. The next things we’re going to do all relate to maintenance items, like setting up stats, SEO things, etc. But our site is built and our content is done. So let’s get started on our maintenance. The first maintenance thing we’re going to look at relates to caching, which helps your site go faster. Caching typically means keeping a copy of your page stored on the server, so that it can serve it faster without having to build it all from the database. Normally, I prefer a plugin called WP Rocket. It’s really excellent. However, many hosts, including Siteground where we’re hosting, cache for you, and you don’t need a plugin at all, and I’d like to go over that with you. If we go to dashboard, then at the bottom, there’s SG Optimizer. And there are several things here that we can do. Let’s configure the SuperCacher Config. Right now, Dynamic Cache is on, and that means when it builds a page and sends it out, it keeps a copy, so that the next person doesn’t have to build the page. The cache is also automatically flushed at the right times, so that if you make a change to a page, it doesn’t keep serving the old one. And you have a button here to manually purge it if you want to. You can choose to exclude some URLs from dynamic caching. But then there’s a section here called Memcached settings, and this stores in the server’s memory some of the frequently executed queries to the database. So we’re going to turn this on, and you’ll note that it says, you must enable Memcached from your cPanel. So let’s go to cPanel. We’ll go to Siteground.com and click login. Then we go to my accounts. Go to cPanel. And then over here in the search bar, we’re going to hit cache. And then click SuperCacher. And right here is level three, Memcached. And we’re going to turn it on, by clicking right here. And now, we’ll simply reload this page rather than click the button again, and now we’ll click the button. And now it’s enabled for our site. There’s a button here to test caching for the site, if we click test URL, it says it’s cached. So now we have two different layers of caching enabled, and it should make the site go much, much faster. But in addition to caching, there’s HTTPS Config. And this is already set properly, and you probably should never touch it. This requires that your site operate on HTTPS. Without this, it could operate on either HTTP or HTTPS. But we never want it on HTTP only. So we’re going to leave this just the way it is. Lastly, there’s PHP Config. We want to be running on at least PHP seven. Right now, we’re at ., and we’re going to leave it there, because that’s better than PHP seven. PHP seven is worlds faster than PHP five. And PHP five is pretty common on a lot of servers. So if your server’s on five, ask your host about moving to seven. Or, if you’re here on Siteground, you can switch. So now we’ve gone through the sections of the Siteground optimizer, and the only thing we changed was, we turned on Memcached. Next, let’s talk about getting the site connected to the search engines. First, we’re going to connect the site to various Google properties. Within WordPress, we’re going to use plugins to do that, but before we can use the plugins, we actually have to create the accounts in Google. If you already have an account in Google, you can use it. I’m going to start from scratch. You can use a single Google account across all of Google’s properties. So it doesn’t matter which one you start with. We’re going to start here with Google Analytics. So I click sign in, and then analytics, and we’re going to create an account. And here you can use either an existing email address, or create a Gmail account. I’m going to create a Gmail account. Then we’ll put in our password, and click next. I would recommend putting in your phone number and recovery email address, but you don’t have to. You do need to tell them when you were born. Then there’s their privacy and terms, and click I agree, and now we have a Google account, and now we can sign up for Google Analytics. We’re doing a website, not a mobile app. We’re going to create an account name and a website name, and then we have to tell it where our site is. Choose an industry category, and time zone. And then we have some data sharing options. You’ll want to read these over and decide for yourself if you wanna share this data with Google. I’m going to say okay, and I’m going to click to get tracking ID. But before we can do that, we have to agree again to the terms and services, and click I accept. Now this is our tracking ID. And in the bad old days, you would have to copy either this or all of this code, and figure out how to wedge it into your website somehow. But we’re going to use a cool plugin in just a few minutes. But before we get there, I’m also going to connect with Google Search Console. It used to be called Google Webmaster Tools, but now they call it Search Console. Now, because we’re already logged in with Analytics, we can simply click search console. And they want our password again. And they really want us to give them a recovery phone number and email, which I recommend you do, but I’m not going to bother, because I’m not going to be using this domain very long. And then we tell them where our website is. And click add a property. Now, in order to verify to the Search Console that we own this property, we need to do any number of several things. The recommended method is uploading an HTML file. Among the alternate methods is Google Analytics, and we’re going to use that in just a few minutes, once we connect our Analytics account. So as of right now, we have created a Gmail account and connected it with Google Analytics and Search Console. Now we need to connect those two things to our website. So let’s get going on that. The first plugin we’re going to connect is called MonsterInsights. We’ll go to our dashboard, plugins, add new. And there it is, Google Analytics for WordPress by MonsterInsights. We’ll install and activate. And right at the top, it says that we should configure the settings. The first thing we’re going to do is authenticate with our Google account. If you ever connected your Twitter account to any other site or anything like that, this is very similar. We choose our account. We tell it what it’s allowed to do. And then we pick the profile that we have under that username. Right now, there’s only the one, so we’re going to choose all website data. And if at any time, you don’t want to do this, you can click cancel, but we’re going to complete authentication. And now, our profile is active, with this UA code. You can click verify credentials, and it will say that it is done. And now our site is set up with Google Analytics, just like that. There are some other things that can be done. You can pay for a version of MonsterInsights Pro, and get some added features. If you wish, you can allow them to do usage tracking. And you can optionally have it do automatic updates. Now, if we go over to tracking, we have some options. For example, if an administrator or editor is logged in, then they are not tracked. That way, you don’t artificially boost your own traffic. You can enable demographics, and you can do things with link attribution and file downloads, etc. I’m not going to change any of the defaults, they’re great. The defaults are perfect in MonsterInsights. Now that we’ve connected our site to Google Analytics with MonsterInsights, we’re going to connect it to Search Console with Yoast SEO. So let’s go to plugins and add new. And search. And there it is, we’ll click install now, and activate. Now the first thing you’ll note is that there are some notifications at the top. The first thing it says is that we’re blocking Google, which is true, and is fine for now, we want to do that. But right here, the next thing they want us to do is connect with Google Search Console, so let’s click that. To allow Yoast SEO to fetch your Google Search Console information, please enter your Google authorization code. Click this button. Choose the account that we are working with. And then, we’re going to allow Yoast. And it gives us this big long code. Then we can close this window, and paste it here. And authenticate. And now, we have authenticated, and we don’t need to do any of these methods. Now that our site is connected to Google Search Console, Google can know much, much more about our website, and all of the tools built into Yoast will work even better. So we’ll take a look at those tools next. The next plugin we’re gonna look at here is called Jetpack. Now Jetpack was installed for us by Siteground. But it’s just a regular plugin. If you go to installed plugins, you’ll see it right here, and if you don’t have it, you can simply install it like a regular plugin. Now Jetpack is a little but different from most plugins. It’s actually a collection of plugins. And what makes it unique is that most of the things that Jetpack does is heavy lifting, heavy work, and it does it out on the WordPress.com servers, so that it doesn’t weigh down your server. It can do things like website statistics, image compression, spam fighting, comments filtering, etc. The first thing we need to do is connect Jetpack to a WordPress.com account. Now you might think that creating a WordPress.com account means getting a blog there, but it doesn’t have to. You can simply have an account there to use with Jetpack. So let’s click set up Jetpack. And here, we can either log into an existing .com account, or create a new one. We’re going to create a new one right now, and we’re going to click sign up here in the top right. We’ll put in our email address, choose a username, and then a password, and then we’ll create our account. And then it immediately begins connecting our website with Jetpack. Now by default, Jetpack is free. But there are upgrades available. Down at the bottom here is a button that says start with free. And there we are, now we’re connected. By default, nothing is turned on. But they recommend that all of these things be turned on. Many of them are good, and I like them. But I recommend reading through them, and making sure that you want what’s there. For example, we don’t need a contact form. We have Pirate Forms from Themeisle. So I’m not going to click activate recommended features. I am going to go to site stats, and it’s automatically set up. We could click configure, and set up some settings. We can have a chart showing hours of views in the admin bar. We can decide who gets counted, even if they’re logged in. One of the ways it works is by putting this little tiny image on the page. It’s not required, but it’s helpful, so I tend to leave it there. And then, here we get to decide who’s allowed to view stats. Right now, it’s only the administrator. Because we just set this up, there’s nothing to display yet. But it says your stats will begin to appear here within minutes, and that’s one of the reasons that I like including Jetpack stats in addition to Google Analytics. With Google Analytics, you get to either watch real-time stats, or you wait until tomorrow to find out what today’s stats are. You can’t look hour by hour today, and see how you’re doing as the day goes on. With Jetpack stats, you can do that. You can look every minutes, and see how your stats are growing. This can be useful when you’re doing a large push on your website. Another great thing that Jetpack can do is filter spam, and it does it using the companion plugin called Akismet. If we go to plugins, you’ll see that it’s right here. Akismet comes with WordPress. Now Akismet is also a service. It processes the spam on an outside server, so that it doesn’t bog your server down. So let’s activate Akismet. And then, right at the top here, we can set up our account. Now because we’re connected with Jetpack, we can simply click connect. Otherwise, we could sign up with a different email address, or get an API key. So I’m just going to connect with Jetpack. Now Akismet has a variety of pricing models. There’s enterprise, for larger sites. There’s $ per month per site for smaller commercial sites. And then, there’s name your price. And what’s interesting is that you can name a price of zero, if you wish. So let’s click get personal. And then right up here is the slider. If we drag this down to zero, the credit card information goes away. Now it says, you may not do this if you have advertising, you sell products, or you publish information about your business or service. Now something very important to note here is that this only works if you do not have advertising, you do not sell products, and you don’t publish information about your business or service. Our site is advertising a commercial space, that’s what it is. So we’re not going to do the free one. But we can choose $ a year, which is $ a month, which is not very much. If you find that it’s blocking lots and lots of spam for you, I would recommend paying more for the service. They’re nice enough to allow you to choose, and they’re providing you great service. So give them what you can. Now because our site is not a real site for a real service, I’m going to choose the free one. But if you’re building a site for a real business, you’ll need to pay for Akismet. Now that it’s processed, we can activate this site. In the background here, you can see the API key that was an option earlier, and it put it into our site for us. Now optionally, it can also show the number of approved comments beside each comment author. So not only does it block spam, it approves quality posts. By default, Akismet takes your spam and puts it in the spam folder. Right now, our setting is that the most egregious spam gets automatically deleted, and does not go into the spam folder. If you really need to see all of it, then you can click this option right here. And now that Akismet is set up, we shouldn’t get any spam at all on our website. If we do, then we have the option to mark it as such, and it will communicate to Akismet, hey, you missed this one, and Akismet learns. That’s how it gets so good. Next, let’s look at backups. For backups, we’re going to use the backup system built into Jetpack. And it used to be called VaultPress, but now it’s just called Jetpack backups. But you may still see VaultPress around. Let’s go to the Jetpack dashboard. And here at the top, there’s a tab that’s called plans. Now the backups for Jetpack are not free. However, their personal plan, the cheapest one, does include full off-site backups. Now these are nightly backups, you get one a day. If you go to the more expensive plans, then you can get real-time backups, where you just push a button and it does a backup right there when you ask. We’re going to do the personal one, and it comes with priority email support, which is pretty useful. So let’s click upgrade to personal. Now this took us to our account on WordPress.com. You may recall, we had to create this account in order to connect Jetpack to our site. So this is the same site. Now I’m going to fill out this form, and click pay. Now that we’ve clicked purchase, it’s setting up a number of things for us. It set up the daily offset backups, with a -day backup archive. That means you can recover your site up to days back, but not , so if you miss something for days, too bad. Unlimited backup storage space, that’s really important. If you are a musician or a photographer and you have a ridiculous amount of data, unlimited storage space is a big deal. Automated restores, which means you don’t have to do anything really, if you just want to restore, you click a button and it does its thing. You don’t have to download zip files and mess around with things. It comes with spam protection, easy site migration, if you’re going to move somewhere, and priority support. So now let’s go back to our site. Now we’ll still here in our dashboard, and we’re still looking at the plans. But now, there’s an option to manage your plan. Remember how I said Jetpack backups were called VaultPress? With here we are, we have a VaultPress menu item. If we click it, you’ll see that VaultPress is backing up my data right now. It’s done with uploads, and it’s going to work on the rest next. Something important to note. The first backup backs up everything, but in the future, it only backs up changes. So the first one is probably going to be quite slow. But from then on, they should be very speedy. The next thing important to know is that you can close this window. It’s not dependent on your browser being open. It’ll do its thing. And they’re going to email us when it’s done. Another cool thing is we can set up remote access, so that you don’t have to be at your computer to restore your site. Right now, we have a license for one site. It says we’ve never backed up, ’cause it’s still in process. If we upgrade our plan, then they will do a security scan on the backup, and let us know if it finds anything wrong. Let’s go to settings. And there’s a wide variety of things that you can do here. We’re not going to cover them all, because it could get really deep. But you can set up SSH access, so that VaultPress can access your site’s server. Now Siteground does offer SSH, but not all sites do. If not, you could set up SFTP, or regular FTP. Or you could say, “I want to restore my site to some other server.” This is really handy when actually moving servers. If we were to leave Siteground and go to some other host, we could say to VaultPress, hey, go install my site over there, and it could do that. It also knows who we are, what account this is. If we go to activity, it tells us that it’s done a full sync of uploads. We’ll look at our backups, and there probably isn’t any yet. You can still see this icon spinning. Now we need to set up access for VaultPress to access our server better, and that takes us right back to here. Now to allow VaultPress to access our website, we’re going to enable SSH. That stands for secure shell, and it’s a secure way for VaultPress to log in to our site and work on it. So we’re going to click right here, and then we need to fill in our server information. Now some of this we’re going to get from Siteground, because that’s where our site is hosted. So let’s go to Siteground, and log in. Now, setting up SSH isn’t very difficult, but there are a number of steps. So if you follow closely, it should work just great. I’m going to click on my accounts, and go to cPanel. Now in this search right here, we’re going to type SSH. And there’s one icon left. Click that. Now what we want to do is upload a public key. If we go back to VaultPress, and click show public key, it’s right here. We just copy everything in the black here, and on Siteground, paste it here. We don’t put anything in the allowed IP address field. Then click upload. And now our key has been successfully added to our account. If we go back, you can see it right here. So now, we need to go back to our cPanel home. Now to find our username and password, we’re going to go back to my accounts. Which actually leaves cPanel, and we’re going to click right here, information and settings. Now, VaultPress wants a server address, port number, and a username and password. For the server address, we’re going to use our FTP server. Our port number is . This is not standard for SSH, it’s custom to Siteground. And you can find that information in the Siteground documentation. Our username is our cPanel username. Because we’re using a public key, we shouldn’t need a password. So let’s click save. And now it works. I’d like to reiterate that because we used our public key, we don’t need to put our password in. That’s the way keys work. So now, VaultPress can connect directly to our server, and work with the files that it finds there. So just a quick review of what we did here at VaultPress. We went to settings, and we set up SSH, so that it can log in. The other things are interesting, but not vital. We can look at our backups, we can look at our activity. And you can see what it did and when it did it. But let’s go back to our website. Then we’ll go into the admin area, and we’ll go to Jetpack, VaultPress, and on this page, you can see an ongoing progress of how it’s doing. Now that we have finished backups, our site is complete. Everything is done. Let’s do a quick summary of what we’ve built. The first thing we did is set up an account on Siteground. Then they walked us through a wizard which set up our hosting, installed WordPress, set up SSL for secure browsing, and helped us buy a domain name. At that point, we had a plain WordPress site, with default theme and original content. The next thing we did is install some plugins that we knew we were going to need. We installed TinyMCE, so that we had a few extra buttons here, and then we also installed My Eyes Are Up Here, so that we could install images of people and make sure their faces were in the pictures. The next thing we did is pick our theme, and we chose Hestia from Themeisle. It proved to be pretty flexible, and I’m very happy with it. Then we built our homepage, and we went through section by section and used the customizer to create each of these elements. We didn’t have to do any coding to build this entire site. We also made a couple of regular pages with normal content on them. Once we were done building the site, we added on some extra tools. We went through the Siteground Optimizer. Most quality WordPress hosts these days have something similar, so if you host somewhere else, make sure you look for a tool similar to this. We connected to the Google Search Console, as well as Google Analytics. And then we also hooked up Yoast SEO, so that we would have good search engine optimization. Then lastly, we configured Jetpack. Siteground installed it for us. If your host does not, you can install it like a regular plugin. But Jetpack gave us Akismet for spam, its own built-in stats program, and lastly, VaultPress for backups. So now we have a complete site, it’s fully functional, and has a robust back end to keep it working smoothly. I hope you enjoyed building your site as much as I enjoyed building this one. Remember to check out the links in the description for discounts, as well as locations for each of the pieces of software we used. And if you’re interested in learning more about WordPress, and further improving and progressing your site, come take a look through some of the other content we offer over on WinningWP.com.

Zobrazit další videa …

Cokoli přidat?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me