Hogyan készítsünk egy üzleti webhelyet – Teljes lépésről-lépésre Video Guide!

WordPress foglalkozik


Soha nem kezdtem el ilyen drámai módon egy posztot, de a DAMN-nek van valami különleges neked ma: Teljes lépésről lépésre videó útmutató (anélkül, hogy kihagynánk) a professzionális kisvállalati WordPress webhely létrehozása!

Ami ezt a videót olyan különlegesvé teszi, az alapvetően az három dolog: 1. Az a tény, hogy pontosan így tennénk magunkat, ha ezt tennénk (és hé, nagyon sok szakember vagyunk ebben); 2. A részletek részletessége, ahova belemegyünk – a videó óriási másfél óra hosszú, és létrehozunk egy példát a kisvállalkozások webhelyére az elejétől a végéig; és 3. Hogy a videó teljes kezdőknek szól – azok a népek, akik valószínűleg még soha nem tettek ilyesmit (és még mindig úgy gondolják, hogy egy saját webhely létrehozásának ötlete valami igazán félelmetes).

Remélve, hogy egyszerűen csak követi, rákattint a kattintásra, és átgondolva néhány szempontot, hogy megfeleljen a saját vállalkozásának, remélhetőleg képes lesz egy hasonlóan fantasztikus (és technikailag kiváló) WordPress webhelyet létrehozni.!

Mire vársz még? Fogj neki!

Hogyan készítsünk professzionális üzleti webhelyet a WordPress segítségével:

Közvetlen link a videó megtekintéséhez a Vimeo-n.

– (Megjegyzés: videohitel Topher DeRosia-nak – a HeroPress alkotójának

Videó átirat:

Ebben a videóban megmutatom, hogyan készíthet professzionális üzleti webhelyet a WordPress segítségével. Megyünk lépésről lépésre, és én semmit sem hagyok ki. Az a vállalkozás, amelyet modellként fogunk használni, közösségi munkaterület. Ha meg szeretné tekinteni a weboldal végleges változatát, akkor keresse fel a coworkerpro.com webhelyet. Azokat az elemeket, amelyeket felteszünk erre a webhelyre, bármilyen üzleti oldalon felhasználhatjuk. Van egy cselekvésre ösztönző üzenet. Egy kicsit rólunk. Néhány alkalmazott, ajánlások és kapcsolatfelvételi űrlap, valamint számos más oldal. Tehát bármi is legyen vállalkozása, ennek a videónak a végén rendelkeznie kell egy legkiválóbb webhellyel. Mi a webhelyet a Siteground-ban fogjuk üzemeltetni. És megvizsgáljuk mindazt, amit kínálnak, és azt, hogy milyen egyszerű gördülni a dolgokba. Telepítünk néhány extra plugint, amelyek segítséget nyújtanak, és a Themeisle Hestia témáját fogjuk használni. A Hestia lehetővé teszi számunkra, hogy a WordPressbe beépített testreszabási eszközt használjuk az oldal minden részének szerkesztésére, közvetlenül az elejétől. Számos olyan eszközt vizsgálunk át, amelyek elősegíthetik webhelyünk gyorsabb és jobb működését. Megvizsgáljuk a Siteground saját optimalizálóját. Összekapcsoljuk a Google Search Console-t és a Google Analytics-t, valamint a Yoast SEO-t a keresőmotor optimalizálása érdekében. És akkor az Automattic Jetpack pluginját használjuk a spam, a biztonsági másolatok és néhány további statisztika kezelésére. Ha csak néhány órán belül követ, akkor rendelkezésére áll egy teljes, gyönyörű, funkcionális, üzleti használatra kész webhely. Tehát kezdjük el. Az első dolog, amelyet beállítani akarunk, a web hosting. Most a webtárhely lesz az a hely, ahol webhelye lesz az interneten. Olyan, mintha bérelne garázsot a dolgainak tárolására. Bérelsz egy kis helyet, felteszi webhelyét, és az emberek meglátogathatják azt. A webhelyet, amelyet használni fogunk, Sitegroundnak hívjuk. Kiváló házigazda, kiváló árakkal és sok olyan funkcióval, amelyek nagyon szeretek. De mielőtt itt megkezdenénk, szeretnék mutatni valamit a WinningWP.com webhelyen. A Siteground és a WinningWP egy olyan megállapodással rendelkezik, amelyben% megtakarítást eredményezhet a Siteground webhelyén elhelyezett hostolás megtakarításán. Ezen felül a WinningWP kap egy kis szelet pénzt, amelyet fizetni fog. Ezt a pénzt az ilyen videók készítésére fordítják, tehát valóban mindenki számára hasznos helyzet, ha olcsó hostingot, nagyszerű tartalmat kap, és a WinningWP egy kicsit meg is kap. Most, hogy ezt az üzletet felhasználhassa, csak annyit kell tennie, hogy meglátogat ezen az oldalon, a videó alatt lesz egy link. És kattintson a kupon alkalmazására. És ott áll, mondjuk, különleges ajánlat a WinningWP.com látogatók számára. És mi választunk egy tervet. A terv, amelyre megyünk, a GrowBig terv. Csak annyi extra funkcióval rendelkezik a StartUp alatt, hogy nagyon szeretem. De a GoGeek valóban valamivel nagyobb helyekre vonatkozik, mint mi építeni fogunk. Tehát válasszuk a GrowBig-t. És rákattintunk az indulásra. A videó részét képezi egy új domain név regisztrálása. Ha már regisztrált egy domain nevet, akkor a Siteground rendelkezik néhány kiváló dokumentációval, hogyan lehet rá mutatni a webhelyére, vagy a nevét valójában átadni a Siteground-hoz. Mindkettő nagyon jól működik, és jó információjuk van arról, hogyan lehet itt megtenni mindkettőt. Új lesz, és ez lesz a coworkerpro.com. Most ez a domain dollárba kerül. Egy év. És amikor arra gondolsz, mint egy éves árra, az valójában nem túl sok. Kattintsunk a folytatásra. Itt szól: gratulálok, elérhető a domain név. Most létrehozunk egy fiókot a Siteground-on. Először adjunk meg egy e-mail címet, majd egy jelszót a Siteground számára. Ez nem a domain név, az FTP vagy ehhez hasonló jelszó, ez csak a Sitegroundba való bejelentkezéshez szükséges. Ezután néhány személyes információt teszünk be. Ezután behelyezzük hitelkártya-adatainkat. És itt azt fogjuk mondani, hogy számlázási címe megegyezik a fenti elérhetőségi adatokkal. És most meg fogjuk vizsgálni, hogy mit vásárolunk. Megkapjuk a GrowBig tervet. Adatközpontunk Chicagóban lesz. Nagyon közel van ahhoz, ahol vagyok. De van választása, lehet, hogy más helyek is, csak annyit kell tennie, hogy rákattint erre a gombra. Egy hónapos tervet veszek dollárért. egy hónap, tehát most számlát fognak számlázni számomra. Tegyük fel, hogy a domain név regisztrációja $ -ra kerül. Ezenkívül valóban szeretnénk a domain adatvédelmét. Ez megakadályozza, hogy a spamküldők feltérképezzék az e-mail címeket kereső domain nyilvántartást. Végül ott van a Siteground webhely-leolvasó. Ez figyeli az Ön webhelyét, ha csapásokat és támadásokat, és hasonló dolgokat keres. Ez megéri, egy lépéssel meghaladja a rossz fiúkat. Tehát a teljes összeg dollárban lesz. De az a jó dolog, hogy az egész évre fizeti, tehát nem kell egy évig újra gondolkodnia. Megerősítjük a szolgáltatási feltételeket, és kattintson a fizetés gombra. És megrendelésünket benyújtottuk. Azonnal bejelentkezhetünk ügyfélkörünkbe. A domain nevek regisztrációjához akár óráig is eltarthat. Tehát domain névünk nem fog azonnal működni. Most, hogy létrehoztuk a Siteground-fiókot, eljuthatunk a létrehozott domain névhez, és megnézhetjük ezt a helyőrzőt. A Siteground minden új domain névével ilyen helyőrzőt kap, és addig marad ott, amíg telepítjük a saját webhelyünket. Tehát a következő lépéshez menjünk előre és telepítsük a WordPress-t. Először menjünk a Siteground.com webhelyre, és jelentkezzünk be a korábban létrehozott fiókkal. Most, hogy bejelentkeztünk, közvetlenül itt, a fő panelen, van egy kis figyelmeztetés, amely azt mondja, hogy van egy új tárhelyfiókja, amelyet még nem állított be. És ha rákattintunk a nézetre, akkor számos lehetőséget kínál nekünk. Elindíthatunk egy új webhelyet, áthelyezhetünk egy webhelyet, vagy azt mondhatjuk, hogy most nincs szükségünk segítségre. Vagy rákattinthatunk erre a kis nyílra, és ez később visszatér. De megyünk előre, és elindítunk egy új weboldalt. WordPress-t akarunk. És most beillesztünk néhány WordPress-fiókinformációt. Tehát ez a WordPress webhelyén található. És rákattintunk a megerősítésre. És most azt mondja: kérte a WordPress telepítését a fiókjába. Aztán meg kell erősítenünk, hogy elolvastam és elfogadtuk a Siteground szolgáltatási feltételeit. Ezt gyakorlatként hagyom el neked. És most rákattintunk a teljes telepítésre. És most mit tesz egy adatbázis létrehozása számunkra, a WordPress telepítése és a kettő összekapcsolása az éppen beadott információk felhasználásával. És ott vagyunk. Továbbléphetünk ügyfelünk területére. De most, ha visszatérünk a weboldalunkra és újratöltjük, látni fogja, hogy van egy blogunk. Azt is meg kell jegyeznie, hogy a HTTPS-t futtatjuk, ami azt jelenti, hogy hozzon létre egy SSL-tanúsítványt. Megmutatom, hol történik, hogy tudd, hogyan kell csinálni, ha valaha ismét szüksége van rá. A Webhelytér felhasználói területén a számláimhoz megyünk. És akkor menj a cPanel-hez. Mindig biztonságosan szeretnénk hozzáférni a cPanelhez, így megy előre, és úgy dönt, hogy emlékszik rá. Most nagyon sok dolog található ezen az oldalon, de itt van ez a csodálatos keresés is. Az SSL-tanúsítvány, melyet a Let’s Encrypt-től származik. Tehát beírjuk az L-E-T-t, és ott vagyunk, mi leszűrve. És itt láthatja a coworkerpro SSL tanúsítványát. De a Siteground beállította nekünk, ezért nem kell aggódnunk. Csak azt akartam, hogy láthassa, hol van, mert ez fontos. Tehát most lépjünk be a WordPressbe, és végezzünk néhány kisebb konfigurációt. Ezt a felhasználónevet és jelszót hoztam létre néhány perccel ezelőtt. Most valami más, amit a Siteground tett nekünk, a Jetpack telepítése. Kicsit később megvizsgáljuk ezt a beállítást. Bezárom az üdvözlő és a Jetpack sávot, és most van egy nagyon vanília WordPress telepítés. Tehát az első dolgok, amelyeket meg akarunk csinálni, a Beállítások → Állandó linkek menübe lépnek, és azt akarjuk, hogy a postai név is megtörténjen, mert egyszerűbb, könnyebben olvasható URL-eket tesz lehetővé. Sokkal jobb a keresőmotorok optimalizálása szempontjából is, és ez nagyon fontos lehet. Akkor megbeszélésre indulunk, és egyelőre kikapcsoljuk a megjegyzéseket, mert nem akarjuk, hogy bárki megbotlik ezen a weboldalon, és megjegyzéseket használjon, mert valószínűleg spam lesz. Readingbe megyünk. És most a keresőmotorok láthatóságát fogjuk elhárítani, mert még nem állunk készen a nyilvánosság számára. Ne felejtse el, miután elkészült a webhelyével, és készen áll az élő megjelenítésre, térjen vissza erre a Beállítások → Olvasás oldalra, és törölje a jelölést, ha a keresőmotorok el akarják indexelni ezt a webhelyet. Mert akkor a Google képes lesz megtalálni téged. Ezután törölni akarjuk a WordPresshez tartozó alapértelmezett tartalmat. Van egy üzenet és egy megjegyzés. És ha eldobjuk azt a hozzászólást, és kiürítjük a kukát, akkor a hozzászólás vele együtt jár, tehát nem kell megkeresnünk a megjegyzést, és törölnünk kell azt. De most menjünk az oldalakra, és egyetlen oldal sem található. Tehát most, ha megnézzük honlapunkat, elég unalmasnak kell lennie. Nincs találat. Van néhány dolog az oldalsávban, gondoskodjunk róla. Csak kiürítjük, majd tiszta pala lesz. És ott van. Üres oldal, csak a tartalom kitöltéséhez. Most honlapunkon nem lesz blog. Ez a webhely külön része lesz. De jelenleg honlapunk egy blog. Tehát változtassuk meg. Az első dolog, amit megteszünk, két oldal létrehozása. Ezt otthonnak hívjuk és egyszerűen közzétesszük. És akkor elkészítünk egy újat, és webhelyünknek nem lesz blogja, hírrészre lesz szüksége, tehát ezt a Hírt hívjuk. Tehát most két oldalunk van, a Kezdőlap és a Hírek. De most el kell mondanunk a WordPress-nek, hogyan kell használni őket. Most megyünk a Beállítások → Olvasás menüpontra. És itt áll, hogy megjelenik az Ön honlapja, és most az Ön legújabb hozzászólásai. Ehelyett statikus oldalt fogunk választani. A kezdőlapra pedig a Kezdőlapot, a hozzászólások oldalra pedig a Híreket választjuk, és a módosításokat mentjük. Ha megnézzük a weboldalt, ott van a mi honlapunk. És webhelyünket továbbra is blogomnak és WordPress blogomnak hívják, de ezt csak néhány perc alatt megváltoztatjuk. Most, hogy a legegyszerűbb konfigurációk elvégzése megtörtént webhelyünkön, telepíteni fogunk néhány plugint, amelyek elősegítik a továbblépést. Az első TinyMCE Advanced. A TinyMCE a WordPress által használt szerkesztő neve. Ha valaha is készített egy oldalt vagy üzenetet, akkor a TinyMCE-t használta. Ha szerkeszti ezt az oldalt, akkor itt láthatja. Alapértelmezés szerint ez egy sávot tartalmaz. Ha rákattint erre az eszközsáv váltásnak nevezett gombra, egy második sávot kapunk. De a TinyMCE Advanced még többet ad. Itt található egy legördülő lista a különféle típusú fejlécek számára, és itt található a menüben való navigáció az összes egyéb eszköz számára. Tehát telepítsük ezt a valódi gyorsan. Megyünk a pluginokhoz, adunk hozzá új és keresünk a pluginekre, és ott van. Kattintson a Telepítés most elemre, és aktiváljuk. És most, ha visszamegyek az oldalakra, és szerkesztem a kezdőlapot, látni fogja, hogy van egy legördülő menü a betűkészletek, fejlécek számára, és táblázatokat és minden más dolgot használhatunk. És ez később hasznos lesz. Most a másik plugin, amelyet telepíteni fogunk, a My Eyes Are Up Here néven található. És ez egy igazán nagyszerű plugin, amely segít a fényképek kivágásában. Általában, ha magas és keskeny fényképe van, és arra kéri a WordPress-t, hogy készítsen egy négyzetet, akkor a négyzetet a közepéből jobbra vágja le. Azonban, ha a Szemem itt van, intelligensen érzékeli az emberi arcokat. Mint ez. Ezután megfelelő miniatűröket hoz létre. Ezenkívül, ha nincsenek emberek, akkor lehetősége van arra, hogy ezt a rózsaszín pontot bárhová elhelyezi, és ellenőrizze, hogy a fényképnek ez a része mindig van-e a képen. Tehát ha van egy fényképe hegyekkel és autópályával, és azt szeretné levágni, hogy csak a hegyek legyenek láthatók, akkor egyszerűen kiválaszthatja a hegyvidéket, és amikor a WordPress termés közben megtartja a hegyeket. Ez a plugin nagyon hasznos, ha személyzet archívumait és galériáit készíti az emberekről, mivel a WordPress mindig megkapja arcát. Tehát telepítsük ezt. Ott, most telepítve van. Most van néhány további plugin itt, amelyeket nagyon gyorsan szeretnék átmenni. Hello Dolly minden WordPress telepítéssel együtt jön, és nincs rá szükség. Szóval meg fogunk szabadulni tőle. Akismet, amelyet később használunk a videóban. A spam elleni küzdelemhez használják. A Jetpack számos eszközzel is kapható, és később ezeket átnézzük. És akkor az SG Optimizer célja a webhely felgyorsítása a Sitegroundban. Nagyszerű gyorsítótárazási bővítménye és számos más dolog, amelyeket később megvizsgálunk. Ezután telepítjük a témánkat. A téma, amelyet használni fogunk, Hestia. És a Themeisle-ből származik. Ez az oldal a Themeisle.com webhelyen. Két változatban érkezik: fizetős és ingyenes verzió. Ebben a videóban az ingyenes verziót fogjuk használni. De meg akartam mutatni neked néhány dolgot, amit meg tud tenni. Ez az a Hestia, akit vizsgálunk. És ezt a honlapot kódolás nélkül készítették. Teljes mértékben kompatibilis az oldalépítőkkel, de ezt a videót nem fogjuk használni, mert nincs rá szükség. Hestia nagyszerű anélkül. Csodálatosan működik a testreszabóval. És rendkívül népszerű. Megkapjuk a WordPress.org webhelyről, és használjuk az ingyenes verziót. Vége van az ingyenes verzió telepítésének. Tehát az irányítópultra, majd a megjelenésre és a témákra megyünk. Új téma hozzáadása. És keresse Hestia-t. És ott van. Kattintsunk a telepítésre és az aktiválásra. És ott vagyunk. Menjünk fel a honlapra, és nézzük meg, hogy néz ki. Itt van a webhely címe. És ez egy oldalcím, és módosíthatjuk azt az testreszabóban. Beépítve néhány dologgal, például ez a blog terület, és egy lakott lábléc néhány képpel. Megváltoztatjuk a megjelenését, hozzáadunk egy menüt, és számos dolgot megteszünk hozzá. De először, amíg itt vagyunk a témakörben, egy kivételével mindent törölünk. Tehát töröljük és. És néhány ok törlését az okozza, hogy ha bármilyen biztonsági probléma merül fel, hajlamosak lehetünk rá, annak ellenére, hogy nem a témát használjuk. Most már nem valószínű, hogy olyan biztonsági probléma merülne fel azokban, amelyeket nem sikerült gyorsan megoldani. De másrészt, ha egyáltalán nincsenek velük, akkor nem kell aggódnunk. Akkor miért tartottunk egy extraat? Mindig egy extra témát szeretne, mert ha valami történik a fő témával, például törli vagy megsérül, akkor a webhely visszatér a másodlagos témához. Akkor láthatja és bejuthat az adminisztrátor területre. Tehát kezdjük el elkészíteni honlapunkat. Az első dolog, amit megteszünk, az, hogy rákattintunk Hestia-ra. És ez valójában az, hogy megjelenés alatt állunk erre az oldalra. És van néhány információ az induláshoz, de két ajánlott műveletet tartalmaz. És mindkettőt meg fogjuk csinálni. Az Orbit Fox Companion egy plugin, amely néhány első oldal funkcióval rendelkezik. Ingyenes, és itt telepíthetjük. És ott vagyunk. A következőt Kalóz formáknak hívják, és ez létrehoz egy kapcsolatfelvételi űrlapot. A Kalóz űrlapok nem olyan nagyok és bonyolultak, mint más formák, például a Gravitációs űrlapok vagy a Ninja űrlapok. De számunkra nagyszerű kis kapcsolatfelvételi űrlapot fog létrehozni. Most már mondtam, hogy a Hestia Pro teljes mértékben kompatibilis az összes nagyobb formátumú bővítménnyel. Tehát ha szüksége van rájuk, akkor biztosan felhasználhatja őket Hestia-val. A hasznos bővítmények alatt olyan dolgokat látunk, mint az oldalkészítők és a fordítási bővítmények. Itt nem fogjuk használni az egyiket a tervezéshez. Tehát a következő dolog, amit meg akarunk csinálni, a honlapra jut. És szinte mindent, amit az első oldalon csinálunk, a testreszabón keresztül fogunk megtenni, amely itt megtalálható. Kattintson a testreszabás elemre. És most átmehetünk a bal oldali menüben, vagy kattinthatunk a kis kék ceruzákra a dolgok megváltoztatásához. A ceruzák nagyon kedvelik a dolgok megtalálását a bonyolult menüben. Az egyik első lépés, amelyet megteszünk, a weboldal elrendezésének megváltoztatása. Jelenleg dobozban van, és itt van jobb oldalán ez a határ. Ha a megjelenési beállításokat vesszük, akkor az Általános részben törölhetjük a jelölést a dobozos elrendezésről. És most teljes szélességben megy. Folytatjuk az ikonok megosztását, és szeretnénk engedélyezni a görgetést a tetejére. Ez egy kis gombot lenyom ide, hogy segítsen nekünk a jobb felső sarokban elmozdulni. A következő dolog, amit meg akarunk csinálni, az a, hogy megváltoztassuk webhely identitását. Jelenleg egyszerűen a blogom. Cseréljük ki Coworker Pro-ra. És pontosan ez megváltozott. És akkor a címkesorra, amelyet nem fogunk látni a honlapon, de itt fel fogunk tűnni az eszköztáron, a Coworking-ot fogjuk írni a legjobban. Ezután a Közzététel elemre kattintunk. A közzététel olyan, mint a munka mentése. Most meg kell jegyeznie, hogy ezzel nem frissítette a címsort, mivel a testreszabó csak a kezdőlapot töltheti újra. Tehát zárjuk be gyorsan. És most láthatja, hogy a legjobban működik együtt, ott jobbra. És visszatérünk a testreszabásba. Most változtassuk meg háttérünket, és itt van ez a ceruza. Megváltoztathatjuk a képet. És feltölteni fogok egyet. Az összes kép, amelyet a videóhoz használok, az unsplash.com oldalról származik, amely remek hely a jogdíjmentes képek letöltésére. Szóval megnyílok. És ki fogom venni a címet, mert ez nem jó a képernyőolvasók számára. De ide fogok tenni néhány alt szöveget. Mindig szeretné, ha az összes képet elhelyezi az alt szöveget. Ezután kattintson a Válasszon képet. És ott vagyunk. Most változtassuk meg ezt a szöveget. Akkor a következő sor lesz: Gyere, dolgozz velünk. Itt vagyunk. Most változtassuk meg ezt a gombot. Kattintson ide, és ide viszi minket. Most azt mondja, hogy többet megtudni. Tetszik a központosítás, és az URL-hez egy percre egyedül hagyjuk. Valójában később linket készítünk az oldal alsó pontjára. De most egyedül hagyjuk. De nem akarjuk, hogy ez a gomb rózsaszín legyen, azt akarjuk, hogy kék legyen. Tehát visszamegyek innen, és a színekre fogunk váltani, és akcentus színünket erre a kékre változtatjuk. Bármelyik színt kiválaszthatja. Csak ezt választottam, mert tetszik. És akkor rákattintunk a közzétételre. És bezárjuk ezt. És most a legfelső részünk már majdnem kész. Betűtípusaink itt kissé túl merészek. Javítsuk ki. Visszatérünk a testreszabóhoz. Tehát most menjünk a megjelenési beállításokhoz, a tipográfiához, majd a betűméretet fogom választani. És itt vannak a kezdőlap szakaszai, és itt van a nagy címrész. Csak kicsit kisebb lesz. Mínusz három, lássuk közzé. Zárja be ezt. Itt most minden egy vonalon van, ahogy akarjuk. Most, mielőtt elkészítenénk egy menüt, ezen a részen a többi rész kidolgozásán dolgozunk. Most, hogy elkészült a felső szakasz, menjünk tovább a második szakaszhoz. Most építünk egy helyet egy coworking helyhez, ezért meg akarjuk győzni az embereket, hogy ide kellene jönniük. Változtassuk meg ezeket az elemeket olyan dolgokra, amelyeket szeretnénk mondani. Kattintson a testreszabás elemre, majd a fejléc mellett rákattintunk erre a ceruzára. És itt beilleszthetünk egy egész csomó szöveget. Opcionálisan bármelyik szakasz letiltható. Mindent együtt megszabadulhattunk, és később párral együtt meg fogjuk csinálni. Tehát változtassuk meg ezt a címet. Ott. És akkor megváltoztatjuk az alatta lévő szöveget is. A szabadúszó életnek sok gond van, és a pizsamában otthon végzett munka az egyik. Miért kellene velünk dolgozni? Akkor itt van három szakasz, és itt van a szakaszok három adminisztrációs területe. Tehát nyissuk meg az elsőt, és az ikonokat betűkészlet vezérli. Most az egyik oka annak, hogy a közösségi irodában szeretne dolgozni, az emberek. Tehát kattintson ide, és keressen egy embert. Ezek bármelyike ​​működni fog. Válasszuk ezt. És hagyjuk azt a piros színt, de megváltoztatjuk ezt emberekké. És megváltoztatjuk ezt a szöveget, hogy azt mondjuk: az itt dolgozó emberek okosak, segítőkészek és gondoskodók. Segítünk egymásnak a problémák megoldásában és a morcos ügyfelekkel. És megteremthetjük ezt a linket valahol, de nem megyünk, csak hagyjuk békén. Tehát bezárjuk azt, és megnyitjuk a következőt. Egy másik ok, hogy a közösségi irodában dolgozni szeretne, a felszerelés. Nem akarja otthon faxot, ki? De egy nap szüksége lesz rá. Tehát változtassuk ezt eszközkészletre. Úgy hívják, hogy aktatáska, de úgy néz ki, mint egy eszközkészlet. És ez elég számomra. Kékre hagyjuk, és a berendezéseket itt írjuk. És új szöveget fogunk beilleszteni. Van egy faxkészülék és egy szép lézernyomtató, valamint egy konferenciaterem konferencia telefonnal. Olyan dolgok, amelyek valószínűleg nincsenek, vagy nem akarnak otthon. És ezt ismét kapcsolat nélkül hagyjuk. És a harmadik szolgáltatás továbbra is támogatást nyújt. Kivéve, hogy ez nem műszaki támogatás. Nem a technikai támogatásról, hanem az érzelmi támogatásról beszélünk. Az embereknek szükségük van körülöttük lévő emberekre, hogy ésszerűen maradjanak. Mindannyian egészséges vagyunk. Az idő nagy részében. Most itt szeretném rámutatni, hogy itt mindegyiknél található egy törlésmező gomb, tehát kettőt, vagy csak egyet megtehetsz, ha szeretné. És van még egy új funkció, így hozzáadhat egy negyedik, ötödik, hatodik stb. Tehát most kattintsunk a közzétételre. És bezárjuk ezt. És ott van, miért kellene velünk dolgozni. Kis hatással van az egyes ikonokra, és a szöveg gyönyörű is. Most, mielőtt elkezdenénk az oldal következő szakaszát, szeretnék beállítani az alapértelmezett betűtípust az egész webhelyhez. És ez nagyon egyszerű. Testreszabás, megjelenési beállítások, tipográfia. És kabinot fogok választani. És én ugyanezt választom itt. És most minden a kabinban van. A különbség finom, de ott van. Most a következő szakasz, amelyen dolgozni fogunk, a about szakasz, és itt van ez a kis rozsda. Most ez a szakasz valójában kihúzza tartalmát a kezdőlapról, a WordPress kezdőoldalára. Tehát megyünk az irányítópultra, és felhívjuk az oldalt. És jelenleg üres. Most, amint észrevetted, az oldal címét itt sehol nem használják, tehát nem igazán számít, mi az. Tegyünk fel itt egy szöveget. És most azt akarom, hogy egy fejléc méretű legyen, és központosítsam. Akkor tegyünk bele egy szöveget alatta. Azt akarjuk, hogy egy olyan szöveg, amely arra készteti az embereket, mintha a közösségünk részévé válnának. Tehát betesszük ezt a szöveget. Minden pénteken csoport ebédet csinálunk, és különféle emberek vesznek részt a konyha főzésében. Együtt eszünk, mint egy szoros baráti társaság, akik felépítik egymást és segítik egymás növekedését. Tegyük fel kissé ezt. És központosítsa. Most megjegyezzük, hogy a betűméretek pontokban vannak megadva, nem pixelekben. Valójában pixeleket akarunk. Tehát megyünk a beállításokhoz, és új lapon nyissuk meg a TinyMCE Advanced beállításokat. És akkor itt, kattintson a betűméretekre, és a pixeleket fogja használni. Tehát most rákattintunk a változások mentésére. És ezt frissíteni fogom, amely frissíti az oldalt. És most ki lehet emelni az egész szöveget, és kiválaszthatjuk a képpontot. És pontosan ezt akarjuk ott. Tehát most kattintson a frissítés elemre, és megnézzük az oldalt. Ez elég sima, de kicsit több szöveget akarunk ennek alá. Tehát térjünk vissza a szerkesztőnkhöz, és elég kis helyet akarok, tehát csak ezt fogom megtenni, és ide illeszteni. És most ezt is képpontra készítjük. Középpontban, és ezt a linket még nem fogjuk létrehozni, mert az az oldal, amelyre megy, nem létezik. De még mindig szeretnénk egy kicsit még párnázást az alatt. Tehát most kattintson a frissítésre. És oda megyünk. De szeretném, ha kicsit nagyobb lenne. Tegyük tehát egyszerűen ezt H. Nos, tisztázzuk meg a formázást és kezdjük el újra. Tehát most H-három, és újra központosítani fogjuk. És kattintson a frissítésre. Tehát most, töltsük újra. Oda megyünk. És később, miután létrehozunk további aloldalakat, visszatérünk, és ezt hivatkozássá alakítjuk a kb. Oldalra. Szóval ez a mi részünk. Minden közösség és munkatársak meg akarják mutatni néhány tagját. Segíthet az embereknek szívesen érzik magukat. Tehát ezt a munkatársak oldalát tagsági oldalra fogjuk változtatni. És úgy fogjuk megcsinálni, hogy rákattintunk a testreszabás elemre, majd visszalépünk arra a szakaszra, és kattintással találkozunk a csapatunkkal. És most szerkesztjük ezt a részt. Változtassuk meg, hogy találkozzunk velünk. És akkor beillesztünk egy másik feliratot. Tagjaink a fejlesztők, tervezők, projektmenedzserek és sok más szakma változatos csoportját alkotják. Tagjaink listáján a nők% -a szerepel, és etnikumok széles skáláján képviseltetjük magunkat. Tehát itt van négy alapértelmezés, és itt láthatja a négy részt. És van egy link új csapattag felvételéhez. Tehát nyissuk meg az elsőt. Cseréljük ki a nevet Tina-ra. És a felirat tervező perjel művész lesz, és megváltoztatjuk a képét is. Eltávolítottuk a címet, és minden feltöltött képhez mindig beírjuk az alt szöveget. És emlékszel, hogy telepítettük a Szemem itt van? A két különféle előnézet létezik. Most ebben a konkrét esetben az arca már a közepén volt, tehát az nem igazán számított. De más képekkel is számít, amelyeket feltöltünk. Nem kell választanunk igazítást vagy méretet, semmit, mert a téma ezt választja nekünk. Tehát rákattintunk a beillesztésre a postába, és ott van Tina. Helyezzünk be jobb leírást Tina számára. Most már tudomásul veszi, hogy ez egy szöveges terület, így itt megragadhatja ezt a kis dolgot, és szükség esetén csúsztathatja le. Tina napjait digitális műalkotások készítésével tölti. Művészete a Carnegie Hallban és a London Art Museumban volt kiállítva. Szeretném rámutatni, hogy mindenki, akit itt fogok feltenni, alkotó. És ismételje meg újra, hogy az összes képem az Unsplash-ből származik. Most létre tudunk hozni egy linket, ha Tina-nak saját oldala lenne, de nincs, így üresen hagyjuk a linket. És akkor kiválasztjuk a közösségi hálózatokat. Választhatunk egy ikon közül, majd beilleszthetünk egy URL-t. És ezeket alapértelmezésként hagyom, mert Tinának nincs igazán szociális hálózata, mert én feltettem őt. De ha meg akarta szabadulni tőle, kattintson az eltávolítás ikonra, és most a LinkedIn eltűnt Tinától. Ha még valamit hozzá szeretne adni, akkor kattintson a Hozzáadás ikonra, és találhat más közösségi hálózatot. Tehát ez Tina. Megmutatom még egy. És akkor a szerkesztés varázslatán tegye meg a másik kettőt érted, mert pontosan ugyanazt fogják tenni. Következő embereink valójában három nővér társaságává válnak. És itt ismét kiválaszthatjuk, hogy mi mi a kép középpontjában állunk. Kattintunk a beillesztésre a postába, és ott van a három testvérünk. Ezek marketing cég. Most pedig azt mondják: Juanita, Juliette és Jacqueline három testvér, akik saját marketingcégüket alapították. Elsősorban fiatal belvárosi művészekkel és zenészekkel dolgoznak. Most megfigyelted, hogy ezek a többi kép négyzet alakú, de ez nem az, egy kicsit rövidebb. Rendben van. Ugyanakkor mindkettő azonos szélességű, és témánk ezt korlátozza. Mindegyiknek azonos szélességűnek kell lennie, de lehet kissé magasabb vagy rövidebb is. Tehát most a következő kettőt fogom megtenni. Most van egy részem, amelyben bemutatjuk néhány közösségünk tagját. Mint láthatja, könnyű további hozzáadni, és mindegyik meglehetősen rugalmas. Tehát most, kattintson a közzétételre, és zárja be a testreszabót, és ügyeljen arra, hogy jól néz ki teljes szélességében. Biztosan. Tehát most, hogy készen állunk erre a szakaszra, továbbmehetünk a következőre. Bármikor, amikor egy terméket értékesít, az emberek szeretnének látni ajánlásokat. Szeretnének hallani a vásárlást végző emberektől, és látni, mit gondolnak. Tehát a következő szakaszunk egy ajánlások szakasz lesz. Az alapértelmezett hívás az, amit az ügyfelek mondanak, de meg fogjuk változtatni a miénket. A testreszabás kattintással kezdjük, és visszalépünk. És azonnal rákattintunk, amit az ügyfelek mondnak. Az összes többi szakaszhoz hasonlóan letilthatja. És alapértelmezés szerint három ajánlás létezik, de még többet hozzáadhat. Változtassunk tehát attól, amit az ügyfelek mondanak, és amit a tagok mondnak. És akkor a szakasz feliratánál ritkán kell piacra lépnünk, mivel tagjaink hajlamosak mindenkinek elmondani, hogy tudják, milyen jó hely ez a munka. Tehát most kapjuk meg saját véleményünket. Képek váltása. És tudomásul veszi, hogy ez automatikusan körbe hozza számunkra. Eredeti képünk négyzet volt. Úgy döntöttem, hogy az utónevet, sőt a feliratot is megtartom, mivel illik. De betesszük a saját szövegünket. Szeretem, hogy tiszteletet kapjak a körülöttem lévő emberektől. A nőnek lenni az üzleti életben gyakran olyan emberekkel kell foglalkozni, akik nem gondolják, hogy itt lennék. De a Coworker Pro-ba beillesztem. És akkor is lehet link, de sehol nem állunk kapcsolatban, így üresen hagyhatjuk. Csináljuk a következő személyünket. Itt most a Hansont választottuk. És betesszük a nevét. És illessze be a postába. És ismét, csak a keresztneveket fogjuk használni, és ahelyett, hogy független művész lenne, hanem rajzolási mérnöknek hívjuk. És akkor beillesztjük a saját szövegünket. A fiatalság és az izgalom hangulata ebben a térben bámulatos. Ezek az emberek megváltoztatják a világot, és én ott vagyok, hogy látom, hogy ez megtörténik. És akkor megváltoztatjuk a harmadikt. Megváltoztatjuk a képet. Itt tallózhat. Beteszem az alt szöveget. És illessze be a postába. Natalyát szabadúszóként hagyjuk el. Távolítsa el a vezetéknevet, és tegye be saját szövegünkbe. A csoportos pénteki ebéd a legjobb. Szeretem a csoportos főzést és a család érzését, amelyet mindenki az asztal körül lát. És ennyi, most van a beszámolóink ​​területe. Kihirdetjük, bezárjuk a testreszabót. Ezután görgessen lefelé, hogy megnézze, hogy néz ki a széles képernyőn. És nagyon jól néz ki. Van még egy szakasz, amelyet meg kell tennünk, és ez a lábléc. De először azt szeretném rámutatni, hogy mivel nem akarunk blogot ezen az oldalon, akkor eljuthatunk a testreszabóhoz, és egészen a blog területéhez megyünk, és rákattintunk a kis szem itt. És most már eltűnt. És most megvan ez a lábléc, amelyet leginkább nekünk készítettek elő. De tegyük közzé. És zárja be ezt, és nézze meg, hogyan néz ki. Egyenesen az ajánlásoktól a láblécig megy. A lábléc szerkesztése Hestia-ban kissé eltér a többi résztől. Még mindig használja a testreszabót, de van néhány különféle modulja. Lássuk. Kattintson a testreszabás elemre, majd egészen az aljáig megyünk. És az egész lábléken csak egy szerkesztési link található. Tehát kattintson rá. Itt megváltoztathatja a háttérképet, csakúgy, mint az összes többi megváltoztatott képet. Azért hagyom el ezt, mert szeretem a városképet, de bármit behelyezhetsz a háttérbe, amit szeretnél. Van a cím, vegye fel a kapcsolatot, ezt meg fogjuk hagyni, mert ez illik. De aztán a feliratot bele fogjuk helyezni, hogy a recepciót délután délután délután délután kezdjük. Keleti standard idő. Akkor itt van egy űrlapcím, és ez itt van. De annak meghatározásához, hogy melyik forma megy ide, kattintson erre a kis fülre. 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. És ott van. 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.

További videók megtekintése …

Bármi felvehető?

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