Cara Membuat Laman Web Perniagaan – Panduan Video Langkah demi Langkah Lengkap!

Tawaran WordPress


Saya biasanya tidak akan memulakan siaran dengan begitu dramatik, tetapi KERANA kita mempunyai sesuatu yang istimewa untuk anda hari ini: Lengkap langkah demi langkah panduan video (tanpa apa-apa yang dilangkau) ke membuat laman web WordPress perniagaan kecil profesional!

Apa yang menjadikan video ini begitu istimewa, pada dasarnya tiga perkara: 1. Hakikat bahawa ini adalah bagaimana kita sendiri akan melakukannya (dan kita, ahem, cukup banyak pakar dalam hal ini); 2. Tahap perincian yang kita bahas – video ini berdurasi satu setengah jam, dan kita membuat contoh laman web perniagaan kecil dari awal hingga akhir; dan 3. Video itu bertujuan untuk pemula yang lengkap – orang yang kemungkinan besar tidak pernah melakukan perkara seperti ini sebelumnya (dan masih melihat keseluruhan idea untuk membuat laman web untuk diri mereka sendiri sebagai sesuatu yang sangat menakutkan).

Dengan hanya mengikuti, dengan mengklik di mana kita mengklik, dan dengan sedikit pemikiran untuk mengubah beberapa aspek agar sesuai dengan perniagaan anda sendiri, semoga anda dapat membuat laman web WordPress yang sama hebat (dan hebat dari segi teknikal)!

Jadi tunggu apa lagi? Mulakan!

Cara Membuat Laman Web Perniagaan Profesional dengan WordPress:

Pautan terus untuk menonton video di Vimeo.

– (nota: kredit video kepada Topher DeRosia – pencipta HeroPress

Transkrip Video:

Dalam video ini, saya akan menunjukkan kepada anda cara membuat laman web perniagaan profesional dengan WordPress. Kami akan pergi selangkah demi selangkah, dan saya tidak akan meninggalkan apa-apa. Perniagaan yang akan kita gunakan sebagai model adalah ruang kerja bersama. Sekiranya anda ingin melihat versi akhir laman web ini, anda boleh pergi ke coworkerpro.com. Elemen yang akan kita masukkan ke dalam laman web ini dapat digunakan di mana-mana laman web perniagaan. Ada panggilan untuk bertindak. Sedikit mengenai kami. Sebilangan kakitangan, testimoni, dan borang hubungan, serta beberapa halaman lain. Oleh itu, apa sahaja perniagaan anda, di akhir video ini, anda semestinya mempunyai laman web terkemuka untuknya. Kami akan menjadi tuan rumah laman web kami di Siteground. Dan kita akan melihat semua yang mereka tawarkan, dan betapa mudahnya semuanya berjalan lancar. Kami akan memasang beberapa plugin tambahan untuk membantu, dan kami akan menggunakan tema Hestia dari Themeisle. Hestia membolehkan kami menggunakan penyesuai yang dibina di WordPress untuk mengedit setiap bahagian halaman, langsung dari bahagian depan. Kami juga akan melihat beberapa alat yang dapat membantu menjadikan laman web kami berfungsi lebih cepat dan lebih baik. Kami akan melihat pengoptimum Siteground sendiri. Kami akan menghubungkan Konsol Carian Google dan Analitis Google, serta Yoast SEO, untuk pengoptimuman mesin carian. Dan kemudian kami akan menggunakan pemalam Jetpack Automattic untuk menguruskan spam, sandaran, dan beberapa statistik tambahan. Sekiranya anda mengikuti, hanya dalam beberapa jam, anda harus mempunyai laman web perniagaan yang lengkap, cantik, berfungsi dan siap untuk digunakan. Jadi mari kita mulakan. Perkara pertama yang ingin kami siapkan adalah hosting web. Sekarang web hosting adalah tempat laman web anda berada di Internet. Ia seperti mendapatkan garaj sewa untuk menyimpan barang-barang anda. Anda menyewa sedikit ruang, anda meletakkan laman web anda di dalamnya, dan orang ramai boleh mengunjunginya. Laman web yang akan kami gunakan disebut Siteground. Mereka adalah tuan rumah yang sangat baik dengan harga yang hebat dan banyak ciri yang sangat saya gemari. Tetapi sebelum kita bermula di sini, saya ingin menunjukkan sesuatu kepada anda di WinningWP.com. Siteground dan WinningWP mempunyai pengaturan di mana anda dapat menjimatkan% dari hosting anda di Siteground. Sebagai tambahan, WinningWP mendapat sedikit wang yang akan anda bayar. Wang ini dibuat untuk membuat video seperti ini, jadi ini adalah situasi win-win, di mana anda mendapat hosting murah, kandungan hebat, dan WinningWP juga mendapat sedikit. Sekarang, untuk menggunakan perjanjian ini, yang perlu anda lakukan ialah pergi ke halaman ini, akan ada pautan di bawah video. Dan klik gunakan kupon. Dan di sinilah kami, perjanjian khas untuk pengunjung WinningWP.com. Dan kami akan memilih rancangan. Rancangan yang akan kita laksanakan adalah rancangan GrowBig. Cukup banyak ciri tambahan berbanding StartUp yang saya sangat menyukainya. Tetapi GoGeek sebenarnya untuk laman web yang sedikit lebih besar daripada yang akan kami bina. Oleh itu, mari pilih GrowBig. Dan kita akan klik untuk memulakan. Sekarang sebahagian dari proses untuk video ini adalah mendaftarkan nama domain baru. Sekiranya anda sudah mempunyai nama domain yang didaftarkan, Siteground mempunyai beberapa dokumentasi yang sangat baik di sini mengenai cara menunjuknya ke laman web anda, atau benar-benar memindahkan nama tersebut ke Siteground. Mana-mana satu berfungsi dengan sangat baik, dan mereka mempunyai maklumat yang baik tentang bagaimana melakukan kedua-duanya di sini. Kami akan mendapatkan yang baru, dan ini akan menjadi coworkerpro.com. Sekarang, domain ini berharga $. setahun. Apabila anda memikirkannya, sebagai harga tahunan, itu sebenarnya tidak banyak. Mari klik teruskan. Di sini tertera, selamat, nama domain kami ada. Sekarang, kami akan membuat akaun di Siteground. Pertama, kami memasukkan alamat e-mel, dan kemudian kata laluan untuk Siteground. Ini bukan kata laluan untuk nama domain anda, atau untuk FTP atau seumpamanya, ini hanya untuk log masuk ke Siteground. Seterusnya, kami memasukkan beberapa maklumat peribadi. Seterusnya, kami akan memasukkan maklumat kad kredit kami. Dan di sini, kami akan mengatakan bahawa alamat pengebilan kami sama seperti yang diberikan dalam maklumat hubungan di atas. Dan sekarang, kita akan mengkaji semula apa yang kita beli. Kami mendapat rancangan GrowBig. Pusat data kami akan berada di Chicago. Itu hampir dengan tempat saya berada. Tetapi anda mempunyai pilihan, mungkin tempat lain, yang harus anda lakukan ialah klik butang ini. Saya membeli rancangan -bulan untuk $. sebulan, jadi sekarang saya akan ditagih $ .. Tambahkan pada itu pendaftaran nama domain dengan harga $ .. Selain itu, kami benar-benar mahukan privasi domain. Ini membuat pengirim spam tidak merangkak pendaftaran domain mencari alamat e-mel. Terakhir, terdapat pengimbas laman Siteground. Ini memantau laman web anda untuk mencari peretasan dan serangan dan perkara seperti itu. Ia sangat berbaloi, menjadikan anda selangkah lebih maju daripada orang jahat. Oleh itu, jumlah saya akan menjadi $ .. Tetapi yang baiknya, ini membayar sepanjang tahun, jadi anda tidak perlu memikirkannya lagi selama setahun. Kami mengesahkan syarat perkhidmatan, dan kami klik bayar sekarang. Dan pesanan kami telah dihantar. Kami boleh masuk ke kawasan pelanggan kami dengan segera. Walau bagaimanapun, diperlukan nama domain hingga berjam-jam untuk didaftarkan. Oleh itu, nama domain kami tidak akan berfungsi dengan segera. Setelah membuat akaun Siteground kami, kami dapat pergi ke nama domain yang kami buat dan melihat placeholder ini. Semua nama domain baru di Siteground mendapat placeholder seperti ini, dan akan tetap ada sehingga kami memasang laman web kami sendiri. Oleh itu, untuk langkah seterusnya, mari maju dan pasang WordPress. Pertama, mari pergi ke Siteground.com, dan log masuk dengan akaun yang kami buat sebelumnya. Sekarang setelah kami log masuk, di sini di panel utama, terdapat sedikit amaran yang mengatakan bahawa anda mempunyai akaun hosting baru yang belum anda siapkan. Dan jika kita mengklik paparan, ini memberi kita beberapa pilihan. Kami boleh memulakan laman web baru, memindahkan laman web, atau mengatakan bahawa kami tidak memerlukan bantuan sekarang. Atau kita boleh klik anak panah kecil ini dan ini akan kembali kemudian. Tetapi kami akan terus maju dan memulakan laman web baru. Kami mahukan WordPress. Dan sekarang kami memasukkan beberapa maklumat akaun WordPress. Oleh itu, ini adalah untuk WordPress di laman web kami. Dan kami akan klik mengesahkan. Dan sekarang dikatakan, anda telah meminta untuk memasang WordPress pada akaun anda. Dan kemudian kita perlu mengesahkan bahawa kita telah membaca dan bersetuju dengan syarat perkhidmatan Siteground. Saya akan meninggalkannya sebagai latihan untuk anda. Dan sekarang, kita akan klik persediaan lengkap. Dan sekarang apa yang dilakukannya ialah membuat pangkalan data untuk kami, memasang WordPress, dan menghubungkan kedua-duanya, menggunakan maklumat yang baru kami masukkan. Kami boleh terus ke kawasan pelanggan kami. Tetapi sekarang, jika kita kembali ke laman web dan memuat semula, anda akan melihat bahawa kita mempunyai blog. Anda juga akan perhatikan bahawa kami menjalankan HTTPS, yang bermaksud mereka membuat sijil SSL untuk kami. Saya akan menunjukkan kepada anda di mana ia berlaku, supaya anda tahu bagaimana melakukannya sekiranya anda perlu melakukannya lagi. Di kawasan pengguna Siteground, kami pergi ke akaun saya. Dan kemudian pergi ke cPanel. Kami sentiasa mahu mengakses cPanel dengan selamat, jadi teruskan dan pilih untuk mengingatnya. Sekarang terdapat banyak perkara di halaman ini, tetapi terdapat juga carian hebat di sini. Sijil SSL yang kami ada berasal dari Let’s Encrypt. Oleh itu, kita akan menaip L-E-T, dan di sana, kita disaring hingga sekarang. Dan di sini anda dapat melihat sijil SSL kami untuk coworkerpro. Tetapi Tapak Tapak menyediakannya untuk kami, jadi kami tidak perlu risau. Saya hanya mahu anda dapat melihat di mana ia berada, kerana itu penting. Jadi sekarang, mari masuk ke WordPress, dan lakukan beberapa konfigurasi kecil. Ini adalah nama pengguna dan kata laluan yang saya buat sebentar tadi. Sekarang perkara lain yang dilakukan oleh Siteground untuk kami adalah memasang Jetpack. Kami akan melihat konfigurasinya sedikit kemudian. Saya akan menutup bar selamat datang dan bar Jetpack, dan sekarang saya mempunyai pemasangan WordPress yang sangat vanila. Oleh itu, salah satu perkara pertama yang ingin kami lakukan ialah pergi ke Tetapan → Permalinks, dan kami mahukan nama pos, kerana ia menjadikan URL yang lebih mudah dan senang dibaca. Ia juga jauh lebih baik untuk pengoptimuman enjin carian, dan itu sangat mustahak. Kemudian kita akan pergi ke perbincangan, dan buat masa ini, kita akan mematikan komen, kerana kita tidak mahu ada yang tersandung di laman web ini dan menggunakan komen, kerana mereka mungkin spam. Kami akan pergi ke Reading. Dan kami tidak akan menolak penglihatan mesin carian buat masa ini, kerana kami belum bersedia untuk menjadi umum. Sekarang jangan lupa, setelah anda selesai dengan laman web anda, dan siap untuk disiarkan secara langsung, kembali ke Tetapan ini → Membaca halaman, dan hapus centang untuk mengelakkan mesin pencari mengindeks laman web ini. Oleh kerana itu, Google akan dapat menemui anda. Kemudian, kami mahu memadamkan kandungan lalai yang disertakan dengan WordPress. Terdapat satu siaran dengan satu komen. Dan jika kita membuang catatan itu, dan mengosongkan sampah, maka komen itu sesuai dengannya, jadi kita tidak perlu mencari komen itu dan menghapusnya. Tetapi sekarang mari kita pergi ke halaman, dan tidak ada halaman yang dijumpai. Jadi sekarang, jika kita melihat laman utama kami, ia akan kelihatan cukup hambar. Tiada apa-apa Dijumpai. Terdapat beberapa perkara di bar sisi, mari kita selesaikannya. Kami hanya akan mengosongkannya, dan kemudian, kami akan mempunyai batu tulis yang bersih. Dan ada. Laman web kosong, tepat untuk mengisi kandungan kami. Sekarang, laman utama kami tidak akan mempunyai blog di dalamnya. Itu akan menjadi bahagian yang terpisah dari laman web ini. Tetapi sekarang, laman utama kami adalah blog. Jadi mari kita mengubahnya. Perkara pertama yang akan kami lakukan ialah membuat dua halaman. Kami akan memanggilnya sebagai rumah, dan hanya menerbitkannya. Dan kemudian kami akan membuat yang lain, dan laman web kami tidak akan mempunyai blog, akan mempunyai bahagian berita, jadi kami akan memanggil Berita ini. Jadi sekarang kita mempunyai dua halaman, Laman Utama dan Berita. Tetapi sekarang kita perlu memberitahu WordPress bagaimana menggunakannya. Sekarang, kita pergi ke Tetapan → Membaca. Dan di sini, laman utama anda dipaparkan, dan sekarang, ini adalah catatan terbaru anda. Tetapi sebaliknya, kita akan memilih halaman yang statik. Dan untuk halaman utama, kami akan memilih Laman Utama, dan untuk halaman catatan, kami akan memilih Berita, dan menyimpan perubahan. Sekarang, jika kita melihat laman web, ada laman utama kami. Dan laman web kami masih disebut blog saya dan blog WordPress saya, tetapi kami akan mengubahnya hanya dalam beberapa minit. Setelah konfigurasi paling asas dilakukan di laman web kami, kami akan memasang beberapa pemalam yang akan membantu kami terus maju. Yang pertama dipanggil TinyMCE Advanced. Sekarang TinyMCE adalah nama editor yang digunakan WordPress. Sekiranya anda pernah membuat halaman atau catatan, anda telah menggunakan TinyMCE. Sekiranya kami mengedit halaman ini, anda akan melihatnya di sini. Secara lalai, ia mempunyai bar satu ini. Sekiranya anda mengklik butang ini, yang dipanggil toggle bar alat, kami akan mendapat bar kedua. Tetapi TinyMCE Advanced menambah lebih banyak lagi. Terdapat senarai dropdown di sini untuk pelbagai jenis tajuk, dan terdapat menu navigasi di sini untuk semua jenis alat lain. Oleh itu, mari kita pasangkan ini dengan cepat. Kami pergi ke pemalam, menambah baru, dan kami dapat mencari pemalam, dan ada. Kami akan klik pasang sekarang, dan aktifkan. Dan sekarang, jika saya kembali ke halaman, dan mengedit rumah, anda akan melihat bahawa kami mempunyai dropdown untuk fon, tajuk, dan kami dapat menggunakan jadual dan semua jenis perkara lain. Dan ini akan berguna kemudian. Sekarang plugin lain yang akan kita pasang disebut My Eyes Are Up Here. Dan ini adalah pemalam yang sangat hebat yang dapat membantu memotong foto. Biasanya, jika anda mempunyai gambar yang tinggi dan sempit, dan anda meminta WordPress untuk membuat segi empat sama, ia memangkas persegi tepat di tengah. Walau bagaimanapun, dengan My Eyes Are Up Here, ia dapat mengesan wajah manusia dengan bijak. Seperti ini. Dan kemudian membuat lakaran kecil yang betul. Selain itu, jika tidak ada orang, anda mempunyai pilihan untuk meletakkan titik merah jambu ini di mana sahaja yang anda mahukan, dan pastikan bahawa bahagian gambar sentiasa ada dalam gambar. Oleh itu, jika anda mempunyai gambar dengan gunung dan jalan bebas hambatan, dan anda ingin memotongnya sehingga anda hanya melihat gunung, anda boleh memilih kawasan gunung, dan apabila WordPress menanam, ia akan menjaga gunung. Plugin ini sangat berguna ketika membuat arkib kakitangan dan galeri orang, kerana WordPress akan sentiasa mendapat wajah mereka. Jadi mari kita pasangkan ini. Di sana, sekarang dipasang. Sekarang ada beberapa plugin lain di sini yang saya ingin cepatkan. Hello Dolly hadir dengan setiap pemasangan WordPress, dan kami tidak memerlukannya. Oleh itu, kita akan menyingkirkannya. Akismet yang akan kita gunakan kemudian dalam video. Ia digunakan untuk anti-spam. Jetpack juga dilengkapi dengan sejumlah alat, dan kami akan membincangkannya nanti. Dan kemudian, SG Optimizer adalah untuk mempercepat laman web anda di Siteground. Ia mempunyai plugin caching yang hebat, dan beberapa perkara lain yang akan kita lihat kemudian. Seterusnya, kami akan memasang tema kami. Tema yang akan kita gunakan disebut Hestia. Dan ia berasal dari Themeisle. Ini adalah halaman untuknya di Themeisle.com. Dan terdapat dalam dua versi, versi berbayar dan versi percuma. Dalam video ini, kami akan menggunakan versi percuma. Tetapi saya ingin menunjukkan kepada anda beberapa perkara yang boleh dilakukannya. Inilah Hestia yang sedang kita lihat. Dan laman utama ini dibina tanpa pengekodan. Ia serasi sepenuhnya dengan pembangun halaman, tetapi kami tidak akan menggunakannya dalam video ini, kerana kami tidak akan memerlukannya. Hestia hebat tanpanya. Ia berfungsi dengan baik dengan penyesuai. Dan sangat popular. Kami akan mendapatkannya dari WordPress.org, dan menggunakan versi percuma. Terdapat lebih banyak, pemasangan versi percuma. Oleh itu, kita akan pergi ke papan pemuka, kemudian penampilan, dan kemudian tema. Tambahkan tema baru. Dan cari Hestia. Dan ada. Kami klik pasang dan aktifkan. Dan di sana kita berada. Mari kita lawati halaman utama dan melihat bagaimana rupanya. Inilah tajuk laman web ini. Dan ini adalah tajuk halaman, dan kita boleh mengubahnya di penyesuai. Ia dilengkapi dengan beberapa perkara, seperti kawasan blog ini, dan footer yang lengkap dengan beberapa gambar. Kami akan mengubah tampilannya, kami akan menambahkan menu, dan kami akan melakukan sejumlah hal. Tetapi pertama, semasa kami berada di sini di kawasan tema, kami akan menghapus semua kecuali satu tema tambahan. Jadi mari kita hapus dan. Dan alasan kami menghapus beberapa adalah kerana, jika ada masalah keselamatan, kami mungkin rentan terhadapnya, walaupun kami tidak menggunakan tema tersebut. Sekarang tidak mungkin berlaku masalah keselamatan pada masalah yang tidak dapat diselesaikan dengan cepat. Tetapi sebaliknya, jika kita sama sekali tidak memilikinya, maka kita tidak perlu risau. Jadi mengapa kita menyimpan satu tambahan? Anda selalu mahukan satu tema tambahan, kerana jika sesuatu berlaku pada tema utama anda, seperti yang dihapuskan atau rosak, laman web anda akan kembali ke tema sekunder. Kemudian anda dapat melihatnya dan masuk ke kawasan pentadbir. Oleh itu, mari mulakan pembinaan laman utama kami. Perkara pertama yang akan kami lakukan ialah klik bermula dengan Hestia. Apa yang sebenarnya dilakukan ialah membawa kita ke halaman ini yang kelihatan. Dan ia mempunyai beberapa maklumat mengenai cara memulakannya, tetapi ia mempunyai dua tindakan yang disyorkan. Dan kami akan melakukan kedua-duanya. Orbit Fox Companion adalah pemalam yang menambah beberapa ciri halaman depan. Ia percuma, dan kami boleh memasangnya di sini. Dan di sana kita berada. Yang berikutnya dipanggil Bentuk Bajak Laut, dan ini membuat borang kenalan. Sekarang, Bentuk Bajak Laut tidak sebesar dan rumit seperti bentuk lain seperti Bentuk Graviti atau Bentuk Ninja. Tetapi untuk tujuan kami, ia akan membuat borang hubungan kecil yang hebat. Oleh itu, Hestia Pro serasi sepenuhnya dengan semua pemalam bentuk yang lebih besar. Oleh itu, jika anda memerlukannya, anda pasti boleh menggunakannya dengan Hestia. Di bawah pemalam yang berguna, kami melihat perkara seperti pembina halaman dan pemalam terjemahan. Kami tidak akan menggunakan salah satu dari mereka untuk reka bentuk kami di sini. Jadi perkara seterusnya yang ingin kita lakukan ialah pergi ke halaman utama. Dan hampir semua perkara yang kita lakukan di halaman depan akan dilakukan melalui penyesuai, yang boleh anda temukan di sini. Kami akan klik menyesuaikan. Dan sekarang, kita boleh melalui menu di sini di sebelah kiri, atau kita boleh mengklik semua pensil biru kecil untuk mengubah sesuatu. Pensel menjadikannya sangat bagus untuk mencari barang dalam menu yang rumit. Salah satu perkara pertama yang akan kami lakukan adalah mengubah susun atur laman web. Sekarang, kotak, dan ini mempunyai sempadan di sini di sebelah kanan. Sekiranya kita pergi ke tetapan penampilan, secara umum, kita tidak boleh memilih susun atur kotak. Dan sekarang lebarnya penuh. Kami akan terus berkongsi ikon, dan kami mahu mengaktifkan tatal ke atas. Itu meletakkan sedikit butang di sini, untuk membantu kami zip hingga ke bahagian atas. Sekarang perkara seterusnya yang ingin kita lakukan ialah menukar identiti laman web kita. Sekarang, ini hanyalah blog saya. Kami akan mengubahnya menjadi Coworker Pro. Dan seperti itu, ia telah berubah. Dan kemudian untuk tagline, yang tidak akan kita lihat di halaman utama tetapi akan muncul di sini di bar alat, kita akan menulis Coworking dengan sebaik-baiknya. Kemudian kita akan klik Terbitkan. Terbitkan adalah seperti menyimpan karya anda. Sekarang, anda akan perhatikan bahawa tajuk ini tidak mengemas kini bar tajuk, kerana penyesuai hanya dapat memuat semula halaman utama. Oleh itu mari kita tutup dengan cepat. Dan sekarang anda dapat melihat, Coworking yang terbaik, di sana. Dan kita akan kembali ke penyesuai. Sekarang mari kita ubah latar belakang kita, dan itulah pensil ini di sini. Kita boleh menukar gambar. Dan saya akan memuat naik satu. Semua gambar yang saya gunakan untuk video ini berasal dari unsplash.com, yang merupakan tempat yang bagus untuk mendapatkan gambar tanpa royalti. Oleh itu, saya akan klik terbuka. Dan saya akan mengeluarkan tajuknya, kerana itu tidak bagus untuk pembaca skrin. Tetapi saya akan memasukkan beberapa teks alt di sini. Anda selalu mahu meletakkan teks alt pada semua gambar anda. Kemudian saya klik pilih gambar. Dan di sana kita berada. Sekarang mari kita menukar teks ini. Maka barisan seterusnya adalah, Ayo bekerjasama dengan kami. Kita ada. Sekarang mari kita menukar butang ini. Klik di sini, dan ini membawa kami ke sini. Di sana, sekarang dikatakan belajar lebih banyak. Kami suka pemusatan, dan untuk URL, kami akan membiarkannya sebentar. Kami sebenarnya akan membuat pautan ke tempat yang lebih rendah di halaman kemudian. Tetapi buat masa ini, kita akan membiarkannya. Tetapi kami tidak mahu butang ini berwarna merah jambu, kami mahu ia berwarna biru. Jadi saya akan keluar dari sini, dan kita akan pergi ke warna, dan menukar warna aksen kita menjadi biru ini. Anda boleh memilih warna yang anda suka. Saya memilih yang ini kerana saya menyukainya. Kemudian kita akan klik terbitkan. Dan kita akan tutup ini. Dan sekarang bahagian teratas kami hampir selesai. Fon kami terlalu tebal di sini. Mari kita perbaiki. Kami akan kembali ke penyesuai. Jadi sekarang, mari kita pergi ke tetapan penampilan, tipografi, dan kemudian saya akan memilih ukuran fon. Dan inilah bahagian halaman depan, dan inilah bahagian tajuk besar. Kami akan menjadikannya sedikit lebih kecil. Tolak tiga, mari kita terbitkan. Tutup ini. Di sana, sekarang semuanya ada dalam satu baris, seperti yang kita mahukan. Sekarang sebelum kita membina menu, kita akan berusaha membina bahagian-bahagian ini. Setelah bahagian teratas selesai, mari kita beralih ke bahagian kedua. Sekarang kami sedang membina laman web untuk tempat kerja bersama, jadi kami ingin meyakinkan orang bahawa mereka harus bekerja di sini. Oleh itu, mari kita ubah item ini kepada perkara yang kita mahukan. Kami akan mengklik menyesuaikan, dan kemudian kami akan mengklik pensil ini mengikut tajuk. Dan di sini kita dapat memasukkan sejumlah teks. Secara pilihan, mana-mana bahagian ini boleh dilumpuhkan. Kita dapat menyingkirkan semuanya bersama-sama, dan kita akan melakukannya kemudian dengan beberapa dari mereka. Jadi mari kita ubah tajuk ini. Di sana. Kami juga akan menukar teks di bawahnya. Kehidupan bebas mempunyai banyak kelebihan, dan bekerja dari rumah di baju tidur anda adalah salah satu daripadanya. Jadi mengapa anda mesti bekerja dengan kami? Kemudian kita mempunyai tiga bahagian di sini, dan di sinilah tiga kawasan pentadbir untuk bahagian tersebut. Oleh itu mari kita buka yang pertama, dan ikon dikawal oleh fon. Sekarang, salah satu sebab anda ingin bekerja di pejabat kerja adalah orang-orang. Oleh itu, mari klik di sini, dan cari orang. Salah satu daripada ini akan berjaya. Mari pilih yang ini. Dan kita akan membiarkannya menjadi warna merah, tetapi kita akan mengubahnya menjadi orang. Dan kami akan mengubah teks ini untuk mengatakan, orang yang bekerja di sini pintar, suka menolong, dan prihatin. Kami saling membantu menyelesaikan masalah dan menangani pelanggan yang pemarah. Dan kami dapat menjadikan pautan ini di suatu tempat, tetapi kami tidak akan pergi, kami akan membiarkannya sahaja. Oleh itu, kita akan menutupnya dan kita akan membuka yang berikutnya. Sebab lain anda mahu bekerja di pejabat kerja adalah peralatan. Anda tidak mahu mesin faks di rumah, siapa yang melakukannya? Tetapi suatu hari nanti anda akan memerlukannya. Oleh itu, mari kita ubah ini ke kotak alat. Ia dipanggil beg bimbit, tetapi kelihatan seperti kotak alat. Dan itu cukup baik untuk saya. Kami akan membiarkannya berwarna biru, dan kami akan menulis peralatan di sini. Dan kami akan memasukkan beberapa teks baru. Kami mempunyai mesin faks dan pencetak laser yang bagus, dan bilik persidangan dengan telefon persidangan. Perkara yang kemungkinan besar tidak anda miliki atau mahukan di rumah. Dan sekali lagi, kita akan membiarkannya tanpa pautan. Dan ciri ketiga akan tetap menjadi sokongan. Kecuali, itu bukan sokongan teknikal. Kami tidak bercakap mengenai sokongan teknikal, tetapi sokongan emosi. Orang memerlukan orang di sekeliling mereka untuk tetap waras. Kita semua waras. Selalunya. Sekarang saya ingin menunjukkan di sini bahawa ada butang hapus medan di sini untuk setiap ini, jadi anda boleh melakukan dua, atau hanya satu jika anda mahu. Dan ada juga menambah ciri baru, jadi anda boleh menambah keempat, kelima, keenam, dll. Jadi sekarang, mari klik terbitkan. Dan kita akan tutup ini. Dan di sana kami memilikinya, mengapa anda mesti bekerja dengan kami. Kesan kecil pada setiap ikon, dan teksnya kelihatan cantik. Sekarang sebelum kita memulakan bahagian seterusnya di halaman, saya ingin menyediakan fon lalai untuk keseluruhan laman web. Dan cukup mudah. Kita akan menyesuaikan, tetapan penampilan, tipografi. Dan saya akan memilih kabin. Dan saya akan memilih yang sama di sini. Dan sekarang, semuanya menggunakan kabin. Perbezaannya halus, tetapi ada. Bahagian seterusnya yang akan kita jalankan ialah bahagian mengenai, dan bahagian kecil ini ada di sini. Sekarang bahagian ini benar-benar menarik kandungannya dari laman utama, halaman di WordPress yang dipanggil rumah. Oleh itu, kita akan pergi ke papan pemuka dan membuka halaman itu. Dan sekarang, kosong. Sekarang, seperti yang anda perhatikan, tajuk halaman tidak digunakan di mana-mana sahaja di sini, jadi ia tidak penting sama sekali. Oleh itu, mari kita masukkan beberapa teks di sini. Dan sekarang, saya ingin menjadikannya ukuran tajuk, dan memusatkannya. Kemudian mari letakkan beberapa teks di bawahnya. Kami mahukan beberapa teks yang akan membuat orang merasa seperti ingin menjadi sebahagian daripada komuniti kami. Oleh itu, kami akan memasukkan teks ini. Setiap hari Jumaat kami makan tengah hari berkumpulan, dan pelbagai orang mengambil bahagian dalam memasak di dapur kami. Kami makan bersama sebagai sekumpulan rakan yang erat yang saling membina dan saling membantu tumbuh. Sekarang, mari kita menjadikannya sedikit lebih besar. Dan pusatkannya. Sekarang anda akan perhatikan bahawa saiz fon kami adalah titik dan bukannya piksel. Kami sebenarnya mahukan piksel. Oleh itu, kita akan pergi ke tetapan, dan buka tetapan TinyMCE Advanced di tab baru. Dan di sini, kita akan mengklik saiz fon, dan ia akan menggunakan px. Jadi sekarang kita klik simpan perubahan. Dan saya akan mengemas kini ini, yang akan menyegarkan halaman. Dan sekarang, kita dapat menyerlahkan semua teks ini dan memilih px. Dan itulah yang kami mahukan di sana. Jadi sekarang mari klik kemas kini, dan kita akan melihat halamannya. Itu agak licin, tetapi kami mahu sedikit lagi teks di bawah ini. Oleh itu, mari kita kembali ke editor kami, dan saya mahukan sedikit ruang, jadi saya hanya akan melakukan ini, dan tampalkan di sini. Dan sekarang, kita akan menjadikannya juga px. Dan juga berpusat, dan kami belum akan menjadikannya pautan, kerana halaman yang akan dikunjungi tidak ada. Tetapi kami masih mahu sedikit lebih banyak di bawahnya. Jadi sekarang saya klik kemas kini. Dan di sana kami pergi. Tetapi saya mahu ia sedikit lebih besar. Oleh itu, mari kita jadikan ini sebagai H. Baiklah, mari kita format yang jelas dan mulakannya semula. Jadi, sekarang ini adalah H tiga, dan kita akan memusatkannya lagi. Dan saya klik kemas kini. Jadi sekarang, mari kita tambah nilai. Di sana kami pergi. Dan kemudian, setelah kami membuat lebih banyak halaman kecil, kami akan kembali dan menjadikannya pautan ke halaman berkenaan. Jadi ini adalah bahagian mengenai kami. Setiap laman komuniti dan rakan sekerja ingin menunjukkan beberapa anggotanya. Ia dapat membantu orang merasa diterima. Oleh itu, kami akan menukar halaman kakitangan ini menjadi halaman ahli. Dan kami akan melakukannya dengan mengklik sesuaikan, kemudian kami akan menatal kembali ke bahagian itu, dan kami akan bertemu dengan pasukan kami. Dan sekarang, kami sedang mengedit bahagian ini. Mari ubah untuk bertemu dengan sebilangan daripada kita. Dan kemudian kita akan memasukkan sari kata yang berbeza. Anggota kami adalah sekumpulan pemaju, pereka, pengurus projek, dan pelbagai perdagangan lain. Senarai ahli kami adalah kira-kira% wanita, dan kami mempunyai pelbagai etnik yang diwakili. Oleh itu, kami mempunyai empat lalai di sini, dan di sini anda dapat melihat empat bahagian. Dan ada pautan untuk menambahkan ahli pasukan baru. Jadi mari kita buka yang pertama. Mari tukar nama menjadi Tina. Sari kata akan menjadi artis slash pereka, dan kami juga akan mengubah gambarnya. Dan kami membuang tajuknya, dan selalu memasukkan teks alt pada gambar yang anda muat naik. Dan anda ingat kami memasang My Eyes Are Up Here? Terdapat dua pratonton berbeza yang dibuatnya. Sekarang dalam kes ini, wajahnya sudah berada di tengah, jadi itu tidak menjadi masalah. Tetapi ia akan menjadi masalah pada gambar lain yang kami muat naik. Kami tidak perlu memilih penjajaran atau ukuran atau apa-apa, kerana tema memilihnya untuk kami. Jadi kita akan klik masukkan ke dalam pos, dan ada Tina. Mari kita berikan penerangan yang lebih baik untuk Tina. Sekarang anda akan perhatikan, ini adalah kawasan teks, jadi anda boleh mengambil barang kecil ini di sini dan meluncurkannya ke bawah jika anda perlu. Tina menghabiskan hari-harinya dengan membuat karya seni digital. Keseniannya dipamerkan di Carnegie Hall dan London Art Museum. Saya ingin menunjukkan bahawa semua orang yang akan saya angkat di sini adalah terdiri. Dan tegaskan sekali lagi bahawa semua gambar saya berasal dari Unsplash. Sekarang kita boleh membuat pautan jika Tina mempunyai halamannya sendiri, tetapi dia tidak, dan kita akan membiarkan pautan itu kosong. Kami akan memilih rangkaian sosialnya. Kita boleh memilih dari ikon, dan kemudian memasukkan URL. Dan saya akan meninggalkannya sebagai lalai, kerana Tina tidak mempunyai rangkaian sosial, kerana saya membuatnya. Tetapi jika anda ingin menyingkirkan satu, anda boleh mengklik ikon hapus, dan sekarang LinkedIn telah hilang dari Tina. Sekiranya anda ingin menambahkan sesuatu yang lain, anda boleh mengklik ikon tambah, dan mencari beberapa rangkaian sosial yang lain. Jadi itu Tina. Saya akan tunjukkan satu lagi. Dan kemudian, melalui keajaiban penyuntingan, lakukan dua yang lain untuk anda, kerana ia akan dilakukan dengan cara yang sama. Orang-orang kita yang seterusnya sebenarnya akan menjadi syarikat tiga saudara perempuan. Dan di sini sekali lagi, kita boleh memilih apa yang kita mahu menjadi tumpuan gambar. Kami akan klik memasukkan ke dalam siaran, dan ada tiga saudara perempuan kami. Mereka adalah firma pemasaran. Dan sekarang dikatakan Juanita, Juliette, dan Jacqueline adalah tiga saudara perempuan yang memulakan syarikat pemasaran mereka sendiri. Mereka bekerja terutamanya dengan artis dan pemuzik muda di bandar. Sekarang anda akan perhatikan bahawa semua gambar lain adalah segi empat sama, tetapi gambar ini tidak, sedikit lebih pendek. Tidak mengapa. Seluruhnya sama lebarnya, dan tema kita akan menghadkannya. Semuanya harus memiliki lebar yang sama, tetapi mungkin sedikit lebih tinggi atau lebih pendek. Jadi sekarang, saya akan melakukan dua yang berikutnya. Sekarang saya mempunyai bahagian yang memamerkan sebilangan anggota masyarakat kita. Seperti yang anda lihat, mudah untuk menambah lebih banyak, dan masing-masing cukup fleksibel. Jadi sekarang, mari klik terbitkan, dan tutup penyesuai, dan pastikan lebarnya kelihatan baik. Ia pasti berlaku. Jadi setelah kita selesai dengan bahagian ini, kita dapat beralih ke bahagian berikutnya. Bila-bila masa anda menjual produk, orang pasti ingin melihat testimoni. Mereka ingin mendengar daripada orang yang membuat pembelian, dan melihat pendapat mereka. Jadi bahagian seterusnya kami akan menjadi bahagian testimoni. Dan lalai disebut, apa yang pelanggan katakan, tetapi kami akan mengubahnya. Kita akan mulakan dengan mengklik sesuaikan, dan kita akan menatal ke bawah. Dan kami akan klik di sini, apa yang pelanggan katakan. Sama seperti semua bahagian lain, anda boleh mematikannya. Secara lalai, terdapat tiga testimoni, tetapi anda boleh menambahkan lagi. Oleh itu, mari kita ubah dari apa yang pelanggan katakan kepada apa yang dikatakan oleh ahli. Kemudian, untuk sari kata bahagian kami, jarang sekali perlu dipasarkan, kerana ahli kami cenderung memberitahu semua orang bahawa mereka tahu tempat yang bagus untuk bekerja. Jadi sekarang, mari dapatkan testimoni kita sendiri. Pergi untuk menukar gambar. Anda akan perhatikan bahawa secara automatik meletakkannya dalam bulatan untuk kami. Gambar asal kami adalah segi empat sama. Saya memilih untuk menyimpan nama pertama, dan juga sari kata, kerana ia sesuai. Tetapi kita akan memasukkan teks kita sendiri. Saya suka bahawa saya mendapat penghormatan dari orang-orang di sekeliling saya. Menjadi wanita dalam perniagaan selalunya bermaksud berurusan dengan orang yang tidak menyangka saya harus berada di sini. Tetapi di Coworker Pro saya sesuai. Dan sekali lagi, mungkin ada pautan, tetapi kami tidak menghubungkan di mana sahaja, jadi kami boleh membiarkannya kosong. Mari lakukan orang seterusnya. Di sana, sekarang kami telah memilih Hanson. Dan kami akan memasukkan namanya. Dan masukkan ke dalam pos. Dan sekali lagi, kita hanya akan menggunakan nama depan, dan daripada menjadikannya sebagai seniman bebas, kita akan memanggilnya jurutera penggubal. Dan kemudian kita akan memasukkan teks kita sendiri. Suasana belia dan kegembiraan di ruang ini memabukkan. Orang-orang ini mengubah dunia, dan saya berada di sana untuk melihatnya berlaku. Dan kemudian kita akan menukar yang ketiga. Kami akan menukar gambar. Layari di sini. Akan memasukkan teks alt kami. Dan masukkan ke dalam pos. Kami akan meninggalkan Natalya sebagai pekerja bebas. Keluarkan nama belakang, dan masukkan teks kita sendiri. Makan tengah hari Jumaat dengan kumpulan adalah yang terbaik. Saya suka memasak berkumpulan dan perasaan keluarga yang datang dari semua orang di sekitar meja. Dan itu saja, sekarang kita mempunyai bidang testimoni. Kami akan menerbitkan, menutup penyesuai. Kemudian tatal ke bawah untuk melihat seperti apa di skrin lebar. Dan ia kelihatan hebat. Terdapat satu bahagian lagi yang perlu kita lakukan, dan itulah bahagian bawah. Tetapi pertama, saya akan menunjukkan bahawa kerana kita tidak mahu blog di halaman ini, kita boleh pergi ke penyesuai, dan kita akan pergi ke kawasan blog, dan kita akan mengklik mata kecil di sini. Dan sekarang ia hilang. Dan sekarang kita mempunyai footer ini yang disediakan kebanyakannya untuk kita. Tetapi mari kita terbitkan. Dan tutup ini, dan lihat bagaimana rupanya. Pergi langsung dari testimoni ke footer. Mengedit footer di Hestia sedikit berbeza dengan bahagian lain. Ia masih menggunakan penyesuai, tetapi mempunyai beberapa alat yang berbeza. Mari kita lihat. Pergi untuk mengklik menyesuaikan, maka kita akan sampai ke bawah. Dan hanya ada satu pautan suntingan pada keseluruhan footer ini. Oleh itu mari kita klik. Di sini, anda boleh mengubah gambar latar seperti semua gambar lain yang telah kami ubah. Saya akan meninggalkan yang ini kerana saya suka pemandangan bandar, tetapi anda boleh memasukkan apa sahaja di latar belakang yang anda mahukan. Ada tajuknya, hubungi, kita akan tinggalkan itu, kerana itu sesuai. Tetapi kemudian sarikata, kita akan meletakkan bahawa meja depan dihadiri dari: pagi hingga: malam Waktu Piawai Timur. Kemudian kita ada di sini tajuk borang, dan itu betul-betul di sini. 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. Dan ada. 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.

Lihat lebih banyak video …

Apa sahaja untuk ditambahkan?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map