Gutenberg WordPress generatoru addım-addım təlimat

Düşünürəm ki, söyləsəniz razılaşacaqsınız: Bütün Qutenberq işi qarışıqdır.

Birincisi, yeni blok redaktorunu istifadə etmək çətindir və ya nədir? Demək istədiyim bütün vasitələrin hara getdiyini bilmirsiniz. İndi yazmağınız yəqin ki, daha uzun çəkdi, elə deyilmi?

Bəlkə bir əlaqə əlavə etmək (ortaq və ya olmamaq) ona böyük bir əyri verdi və məyus oldu. Mətninizin yanında bir şəkil əlavə etməkdə çətinlik çəkə bilərsiniz.

Daha çox sütun əlavə etməyə çalışmış ola bilərsiniz və işlər gözlənildiyi kimi işləmədi. Əks təqdirdə, sadəcə PDF sənədlərinizi əlavə edə və ya qorxmuş “Yeniləmə xətası” mesajını görə bilməzsiniz.

Artıq maraqlanmıram; Bu, çox əvvəl dəqiq vəziyyətdə idi, amma indi Gutenberg’in istifadəsi üçün maraqlı olduğunu görürəm. Bir öyrənmə əyrisi var, bəli, amma bugünkü yazının sonunda Gutenberg-i fərqli görəcəksən.

Gutenberg redaktoru nədir?

WordPress redaktoru Qutenberq

WordPress üçün standart blok redaktoru olan Gutenberg’i görürsünüz.

WordPressiniz varsa 5.0 Və yuxarıda, Gutenberg adlı parlaq yeni WordPress redaktorunu tapmalısınız.

Və bir çox digər istifadəçi kimi, inqilabi redaktordan istifadə edəcək, lakin Qutenberqin mürəkkəb olduğuna şübhə edir.

Və ya Gutenberg ilə tanış olanda bəzi şeylər işləmədi. Nəhayət, tərtibatçılar mövzular və plaginləri blok redaktoru ilə uyğunlaşdırdılar və bunu davam etdirirlər.

Beləliklə, tez bir zamanda bizim üçün yaxşı olan Klassik Redaktora qayıtdı. Ancaq unutmayın ki, WordPress 2022-ci ildən sonra artıq Klassik Redaktor tərəfindən dəstəklənmir. Gutenberg-in təklif etdiyi əlavə üstünlükləri də itirəcəksiniz.

Fəaliyyət baxımından Klassik Redaktor və Gutenberg eyni şeyi edirlər. Bilirsiniz, hər iki vasitə kodlaşdırmadan məzmun yaratmağa kömək edir.

Ancaq köhnə WYSIWYG redaktoruna o qədər öyrəşmişik ki, tamamilə qarışıq olmasa Gutenberg-in yeni istifadəçi interfeysinə uyğunlaşmaq bir az qəribə görünür. Heç olmasa belə düşünürəm.

Bəs Qutenberq nədir?

Gutenberg yeni standart WordPress redaktorudur. Bu şərti görüntü / mətn redaktorundan fərqlənir. Gutenberg bu gün bir çox səhifə yaradanlar kimi məzmun bloklarından istifadə edir.

Klassik redaktordan daha intuitiv xüsusiyyətləri təqdim edir, beləliklə yolda zəngin multimedia məzmunu yarada bilərsiniz. İndi WordPress yazıları və ya səhifələri ilə işləyərkən tez bir zamanda müstəsna planlar yarada bilərsiniz.

Bəzi plaginlərlə Gutenberg Brizy, Elementor və Divi kimi qurulmuş WordPress sayt yaradıcıları ilə rəqabət edə bilər.

Yeganə mənfi cəhət odur ki, səhifə yaradanlar əsasən səhifə yaradıcıları olduqları üçün daha çox xüsusiyyət təklif edirlər! Eyni zamanda, Gutenberg hələ çox gəncdir və yalnız blok redaktorunun sıçrayış və həddindən artacağına ümid edə bilər.

Bugünkü yazıda, Gutenberg redaktoru ilə bir WordPress yazı yaratmağınızla əylənəcəyik. Məqsədim bütün detalları və mənbələri əhatə etməkdir ki, Gutenberg ilə lehte kimi məzmun yarada biləsiniz.

Siz hazırsınızmı? Bu vəziyyətdə bu WordPress yazısını yaradacağıq.

Gutenberg ilə bir WordPress yazısını necə yaratmaq olar

Bir WordPress saytını işlədirsinizsə, ehtimal ki, səhifələrdən daha çox yazı yaradırsınız. Növbəti hissədə, sıfırdan Gutenberg-də bir WordPress nəşrini yaratdıq. Ümid edirəm ki, Qutenberqi sınadığım vaxtlarda etdiyim qədər əyləncəli oldunuz.

Yoldan çıxın, gedin Nəşrlər> Yenisini əlavə edin aşağıdakı ekran görüntüsündə vurğuladığımız kimi.

Qutenberqdə yeni bir yazı yaradın

Bu sizi birbaşa aşağıda göstərilən Gutenberg redaktoruna aparacaqdır.

WordPress redaktoru Qutenberq

Yaxşı, düzdür? İndi qollarımızı bükək və işə başlayaq.

Başlıq əlavə edin

Gutenberg üçün yeni bir mövzu əlavə edin

Möhkəm başlıq olmadan bir yazı yazmaq olmaz. Yaxşısı budur ki, Qutenberq başlıq əlavə etməyi inanılmaz dərəcədə asanlaşdırır.

Gördüyünüz ilk blokdur Başlıq yuxarıdakı şəkildəki kimi sənədin başında. Yazınız üçün başlıq yaratmaq üçün bloka daxil olun. A, B, C kimi.

Daimi əlaqəni redaktə etmək lazımdır? İşləri asanlaşdıra bilərsiniz Başlıq Tıklayaraq bloklayın Redaktə etmək üçün Aşağıda göstərildiyi kimi düymə.

Qutenberqdə daimi əlaqəni düzəldin

Başlığınızı əlavə etdikdən sonra düyməni basın Daxil ol Yeni bir xətt başlamaq üçün açar. Yaxşı, Gutenberg klassik WordPress redaktorunda çox bəyəndiyiniz yerli naviqasiyanı qoruyur.

Yeni bir bölmə əlavə edin

Gutenberg-də yeni satış bloku

Onu vurun Daxil ol Açar yenisini yaradır bölmə Yuxarıda göstərildiyi kimi kilidləyin. Mətn yazmadan əvvəl pad bəzi seçimlər təklif edir. Daha çox məlumat üçün aşağıdakı nömrəli şəkilə baxın.

Gutenberg bölmələrinin bloklanması üçün yeni seçimlər

Bacararsan:

  1. Məsələn, yeni paraqraf blokunu başqa bir bloka çevirin. B. Şəkil, başlıq, örtük, qalereya, WooCommerce, forma və s.
  2. Paraqraf blokunu görüntü blokuna çevirmək üçün qısa yoldan istifadə edin
  3. Paraqraf blokunu başlıq blokuna dəyişdirin, yəni. H. H2, H3 və H4
  4. Paraqraf blokunu blok örtüyünə çevirin

Bir illüstrasiya olaraq, sonrakı təqdimat üçün birinci hissəni təsvir edirəm. Mətni əlavə etdikdən sonra bir formatlaşdırma alətlər çubuğu görünəcək (aşağıya bax).

gutenberg bölmə format alətlər çubuğu

Formatlama alətlər çubuğu sayəsində edə bilərsiniz:

  • Paraqrafları ayələr, sitatlar, başlıqlar, siyahılar, kodlar və əvvəlcədən yazılmış mətnə ​​çevirin
  • hirsli, Kursiv, kəsiklər və vurğulanmış məzmun
  • Mətni sola, sağa, mərkəzə və kəsin
  • Yeni bir nişanda da aça biləcək bir link əlavə edin
  • Bir fotoşəkil onlayn göndərin (bəli, mövcuddur!)
  • Kafel parametrlərini gizlət
  • Bloku kopyalayın
  • Cari blokdan əvvəl və ya sonra bir blok qoyun (bizim vəziyyətimizdə bu birinci abzasdır, buna görə əvvəl və sonra heç bir şey əlavə etmirik). İstəyirsinizsə, birinci abzasdan əvvəl bir örtük şəkli əlavə edə bilərsiniz, çünki bu yaxşı görünür
  • Bloku HTML kimi düzəldin
  • Mövcud bölməni təkrar istifadə olunan bölmələrə əlavə edin ki, digər yazılarda istifadə edə biləsiniz
  • Bloku tamamilə silin
  • Seçimdə mövcud olan seçimlərdən istifadə edərək paraqraf blokunu daha da fərdiləşdirə bilərsiniz Blok Aşağıdakı şəkildə göstərildiyi kimi yan çubu menyusundakı tab.

    Daban kilidi üçün Gutenberg yan panelləri

    Yuxarıdakı fotodakı bəzi qeydlər:

    1. seçmək Blok Bütün kilid seçimlərini və parametrlərini görmək üçün buraya vurun
    2. Şrift ölçüsünü seçin və burada Capitular’ı aktivləşdirin
    3. Bölməinizə fon rəngi əlavə edin. Təsvir etmək üçün mavi rəngdə qoydum. Mətn rəngini də düzəldə bilərsiniz. Hər halda, limitsiz xüsusi rənglər əlavə edə bilərsiniz
    4. Burada xüsusi bir CSS sinfi əlavə edə bilərsiniz, yəni blokunuza əlavə CSS üslubları əlavə edə bilərsiniz
    5. Mavi fon və kapitular artıq Gutenberg redaktoruna tətbiq edilmişdir

    Yan çubuğundakı Sənəd sekmesini

    Yan çubuğun menyusunda başqa bir nişan var. The sənəd Bələdçi aşağıda göstərildiyi kimi.

    Bölmə blokundakı Kilid Sənədi sekmesini

    Yuxarıdakı görüntü üçün şərhlər:

    1. Dəyişmək üçün buraya vurun sənəd dil
    2. Burada bir yazı cədvəli və görünmə yeri təyin edə bilərsiniz Şəxsi və ya İctimai, bir yazı yaratdı İcmal gözləyir Vəziyyət, töhfə formatını seçin və sabit bir töhfə yaradın
    3. Bu hissədə daimi linkinizi düzəldə bilərsiniz
    4. Burada yeni kateqoriyalar seçə və ya yarada bilərsiniz
    5. Yazınıza etiketlər əlavə edin
    6. Seçilmiş şəkli seçin
    7. Əl ilə bəyannamə yaradın
    8. Şərhlərə, pingbacklərə və geribildirimlərə icazə verin

    Gördüyünüz kimi, istəklərinizə görə bir paraqraf (və bütün məqalə) yaratmaq üçün bir çox seçiminiz var. Yeri gəlmişkən, fərqli blokların bir anda öyrəndiyimiz fərqli konfiqurasiyaları var.

    Birinci hissədən sonra düyməni basın Daxil ol Yeni bir xətt (və ya yeni paraqraf bloku) yaratmaq üçün yenidən basın. İndi ilk hissənin altına bir şəkil əlavə edək.

    Gutenberg-də şəkillər əlavə edin

    Gutenberg-də yeni bir şəkil əlavə edin

    Şəklin min sözə dəyər olduğunu və şəkillərsiz bir yazıın monoton olduğunu söyləyirlər. Gutenberg-dəki WordPress yazılarınıza bir şəkil əlavə etməyin bir neçə yolu var.

    Varsa Daxil ol İndi yeni bir paraqraf blokunu aktivləşdirin. Gutenberg intuitiv olduğundan, aşağıda göstərilən şəkildəki kimi üstəgəl (+), şəkil və ya örtük nişanlarına tıklayaraq bir şəkil əlavə edə bilərsiniz.

    Gutenberg redaktorunda yeni bir şəkil əlavə edin

    Bəzi qeydlər

    1. Əlavə işarəsi ilə şəkil əlavə edə bilərsiniz (+)
    2. Burada asanlıqla bir şəkil əlavə edə bilərsiniz
    3. Bu seçim ilə bir əlavə edə bilərsiniz üzləmək Şəkil (adətən digər fotolardan daha böyükdür. Qapaq şəkillərinə mətn də yerləşdirə bilərsiniz)

    Əlavə işarələrindən birini vurun (+). Sonra vurun Şəkil Bələdçi aşağıda göstərildiyi kimi.

    Gutenberg-də şəkillər əlavə edin

    vurun Şəkil Nişan yüklənir Şəkil Kilid aşağıdakı ekran görüntüsündə göstərilir.

    Gutenberg görüntü bloku

    ki Şəkil Blok bir şəkil yükləməyə və ya URL və ya media kitabxanasından birini əlavə etməyə imkan verir. Alternativ mətn (SEO üçün vacibdir), başlıq və təsviri media ekran parametrləri vasitəsilə və ya əlavə edə bilərsiniz Blok Aşağıdakı şəkillərdə göstərildiyi kimi yan panel.

    Normal media parametrləri …

    WordPress media parametrləri

    … və Şəkil Kilid parametrləri.

    Gutenberg görünüş kilidi qəbulu

    Bu gün burada bir şey öyrənirsən? Ümid edirəm ki edə bilərik

    Görüntüsünü əlavə etdikdən sonra Gutenberg birbaşa yeni bir abzas bloku əlavə etdi. İstədiyiniz şeyi əlavə edə bilərsiniz, ancaq təsviri məqsədlər üçün mətni və sonra bir düyməni əlavə etdim.

    Məsələn, yükləmək üçün fayl əlavə etmək. PDF, şəkillər, videolar və s.

    Gutenberg, WordPress poçtuna və ya veb saytına yüklənən faylları əlavə etməyi olduqca asanlaşdırır.

    Yenisində bölmə Bloklayın, əlavə işarəsini (+) vurun və gedin Ümumi bloklar vurdu Prosedurlar Aşağıda vurğuladığımız bələdçi.

    Gutenberg-də yükləmək üçün fayl əlavə edin

    Bu aşağıdakı blok başlayır:

    gutenberg fayl kilidi

    Bəri Prosedurlar Yeni bir fayl yükləyə və ya media kitabxananızdan əlavə edə biləcəyiniz bloklar. Gutenberg, faylınızı əlavə etdikdən sonra əlavə edin yükləyin Aşağıdakı şəkildəki kimi avtomatik olaraq düymə.

    Gutenberg-də fayl əlavə edin

    Parametrlərlə oynaya bilərsiniz. Məsələn istifadə edə bilərsiniz “Gutenberg Pulsuz PDF yoxlama siyahısı“Eləcə də başlıq yükləyin Düymə. Bloka bir CSS sinfi əlavə edə və istədiyiniz kimi format edə bilərsiniz.

    Gutenberg üçün təklif əlavə edin

    Aşağıda, cəlbedici və cəlbedici olduqları və nöqtəni anlamağa kömək etdikləri üçün bir təklif əlavə etdik. Yeni bir xəttdəki əlavə işarəsini (+) vurun və gedin Ümumi bloklar vurdu bağlılıq Bələdçi aşağıda göstərildiyi kimi.

    Gutenberg-də təkliflər əlavə edin

    Bu gedir bağlılıq Aşağıdakı ekran görüntüsündə vurğulanan kimi postunuzu bloklayın.

    gutenberg sitat blokunun konfiqurasiyası

    Üst tərəfdəki sağ çubuğundakı sitat bloku konfiqurasiyasına diqqət yetirin?

    Büdcənizi əlavə etmək üçün bloku yazın. Budur mənim nəticəm.

    Qutenberq sitatı

    Yaxşı səslənir, elə deyilmi?

    Gutenberg-də media yazıları əlavə olunur

    Gutenberg, YouTubeVimeo kimi 30-dan çox saytdan video və digər medianı daxil etmək üçün bir neçə blok ilə gəlir Facebook, SoundCloud, WordPress, Slideshare və s.

    Məzmun daxil etmək üçün (+) əlavə işarəsini vurun və gedin İllüstrasiya, və saytı seçin. Məsələn, istədim YouTube aşağıda göstərildiyi kimi.

    Youtube gutenberg daxil edin

    Sonra, video URL’i kopyalayın və yapışdırın YouTube və vurun Yerləşdirin Aşağıdakı şəkildəki kimi düymə.

    youtube daxili bloku gutenberg

    Gəldiyim anda Yerləşdirin Düymədə, Gutenberg, aşağıda vurğulandığı kimi, bağlantını avtomatik olaraq bir videoya çevirir.

    Video YouTube Gutenberg daxil edilmişdir

    Sonuna hamar naviqasiya. İndi hərəkətə çağırış (CTA) yaratmağa imkan verən ayrı bir düyməni əlavə edək.

    Gutenberg-də bir düyməni necə əlavə etmək olar

    Bu anda bloklar əlavə etməkdə çətinlik çəkməməlisiniz. Yalnız + (+) işarəsini vurun və blokunuzu seçin. Bu qədər asandır

    Bir düyməni necə əlavə edirik?

    Yeni bir xəttdə (və ya blokda) əlavə işarəsini (+) vurun və gedin Dizayn elementləri və vurun ayğır Bələdçi aşağıda göstərildiyi kimi.

    Gutenberg redaktorunda düymələr əlavə edin

    Bu sizi aparır ayğır Aşağıda təsvir edildiyi kimi kilidləyin.

    Gutenberg redaktorunda düymələr əlavə edin

    Yuxarıdakı şəkildəki kimi, düymənin mətnini düzəldə və bir link əlavə edə bilərsiniz. Ayrıca ekranın sağ tərəfindəki menyudakı düyməni də düzəldə bilərsiniz.

    Bir neçə klikdən sonra aldım.

    Gutenberg Button, səh.

    BTW, düymələriniz üçün oxunan rəngli birləşmələrdən istifadə etsəniz, Gutenberg sizə dərhal xəbər verəcəkdir, Necə də gözəl

    Gutenberg-də sütunları necə əlavə etmək olar

    Gözəl bir düymə ilə bir neçə sütun əlavə edək. İki sütun əlavə etmək istəyirəm, buna görə diqqətli olun.

    Bunu etməlisən. Plyus işarəsini (+) vurun və gedin Dizayn elementləri və vurun sütunlar Nişan, aşağıdakı şəkildəki kimi.

    Gutenberg Sütun Redaktoru Bələdçisi

    Varsayılan olaraq, Gutenberg iki sütun əlavə edir. Aşağıdakı şəkilə baxın və sütunlara artıq məzmun əlavə etdiyimi unutmayın.

    WordPress redaktorundakı Gutenberg sütunları

    Məni nə tutar

    Gutenberg abutment interfeysi

    Bir neçə saniyəlik işdə pis deyil. Ancaq sütun yarada bilməyəcəksiniz. Mətnin yanında bir şəkil göstərmək yaxşı bir fikir ola bilər.

    Bir kilid var? Varsa!

    Gutenbergdəki mətnin yanında bir şəkil necə əlavə olunur

    Mətnin yanında bir şəkil əlavə etmək istəyirsiniz? Bu vəziyyətdə növbəti hissəni sevəcəksiniz.

    Həmişə olduğu kimi artı işarəsini (+) vurun və gedin Dizayn elementləri və vurun Media və mətn Aşağıda göstərildiyi kimi.

    Gutenberg Block Mətn və Media

    Bunu görməlisən Media və mətn Aşağıda göstərildiyi kimi kilidləyin.

    Gutenberg mətni və media bloku

    Şəkil / video / media yükləyin və ya media kitabxanasından birini əlavə edin. Sonra aşağıdakı şəkildəki kimi mətninizi ortanın yanında əlavə edin.

    Bununla oynadım Media və mətn Mən uğursuz oldum və mənə aşağıdakılar gəldi. Orada bir düyməni basa bildiyimə əmin olun

    Media bloku və tam mətn

    Oh, bunun arxası var! Cəbhəni göstərim. Burada:

    Gutenberg media mətn bloku

    Çox peşəkar görünür, elə deyilmi? Gutenberg redaktoru ilə nə qədər nail ola biləcəyinizi təsəvvür edə bilərsiniz.

    Gutenberg-dən üçüncü tərəf blokları

    WordPress tərtibatçıları Gutenberg redaktoruna uyğun mövzular və plaginlər hazırlamaqda maraqlıdırlar. Bəzi nümunələr WooCommerce, Jetpack və Yoast SEO.

    Məsələn, WooCommerce bloklarını WordPress yazılarınıza yapışdıra bilərsiniz. Birincisi, WooCommerce qurun və aktivləşdirin.

    Sonra yeni bir xətt üzərində (+) əlavə işarəsini vurun və gedin WooCommerce və aşağıda göstərildiyi kimi istədiyiniz bloku seçin.

    Gutenberg Woocommerce Blokları

    Bunun nə demək olduğunu bilirsinizmi? Bu o deməkdir ki, dəqiqə ərzində zəngin media və böyük yazı və səhifələr yarada bilərsiniz.

    Digər görkəmli bloklar

    Onsuz da bundan artıq şeyimiz var 2.000 söz və bu kimi davam etsək, tam bir elektron kitab yazmağa son verərik. Duam budur ki, indi Qutenberqdən asanlıqla istifadə edə bilərsiniz.

    Yoxdur, burada mövcud digər blokların siyahısı.

  • yaradıcıları – Blog yazılarına widgetlarınızdan məzmun əlavə edə bilərsiniz
  • qısa kodlar – Hələ də orijinal WordPress giriş kodlarından istifadə edə bilərsiniz
  • klassik – Keçmiş məzmunu olan böyük bir blok
  • daha çox – Blok əvvəllər olduğu kimi tanınırdı Daha çox oxu Gün
  • Yan istirahət, arakəsmələr, məsafələr
  • Xüsusi HTML, çıxarma tezliyi, cədvəl
  • QalereyaHTML5 audio / video
  • Daha çox, istifadə etdiyiniz mövzular və aksesuarlardan asılı olaraq
  • Daha: Bir WordPress saytının yaradılması bir neçə dəqiqə ərzində yazılmış yazı yaratmağa bənzəyir, buna görə də bu gün daxil olmayacağıq.

    Gutenberg’in sürətli tövsiyələri və klaviatura qısa yolları

    Gutenberg daha asanlaşdıran bəzi tövsiyələr və klaviatura qısa yollarını ehtiva edir. Məsələn, bir paraqraf blokuna “/” yazsanız, blokların siyahısı göstərilir.

    Arxadan (/) sonra blokun başlığını yazaraq müəyyən bir blok da seçə bilərsiniz. Məsələn, girişiniz “/ image” digər görüntü ilə əlaqəli blokların altındakı görüntü blokunu göstərərsə. Daha ətraflı məlumat üçün aşağıdakı şəkilə baxın.

    Qutenberq reaksiyasının qısaldılması

    Klaviatura qısa yolları: Bütün mövcud qısa yolları görmək üçün vurun SHIFT + BÜTÜN + H da, də Windows və OPT + CTRL + H Mac-da

    Sənədin yuxarı hissəsində (i) işarəsini tıklayaraq sənədin quruluşunu görə bilərsiniz (aşağıdakı şəkilə baxın).

    Gutenberg sənədinin quruluşu

    Gözəl. Əla hamar.

    Hə, yeri gəlmişkən, “Yeniləmə alınmadı” xətası ümumiyyətlə qeyri-sabit bir internet bağlantısı ilə əlaqədardır

    Gutenberg sizinlə mənim aramızda əla məzmun redaktorudur. İpləri öyrənməyə hazır olduğunuz müddətcə; Gələcəyin WordPress redaktorundan çox şey əldə edə bilərsiniz.

    Gutenberg hələ nisbətən cavandır və istifadəsi və işləkliyi baxımından böyümə gözləyə bilər. Önümüzdəki bir neçə gün üçün böyük bir güc olacaq. Səhifənin yaradıcıları diqqətli olmalıdırlar, əks təqdirdə iş bitəcək 🙂

    Ümidvarıq ki, Gutenberg redaktorumuzun addım-addım bələdçisi işinizi perspektivdə qoymağınıza kömək etdi. İnanırıq ki, indi bir pro kimi məzmun yaratmaq üçün blok redaktorundan istifadə edə bilərsiniz.

    Narahatlıqlarınızı, düşüncələrinizi və suallarınızı aşağıdakı şərh bölməsində paylaşın.