Drupal'ın Paragraflar Modülü için Nihai Eğitim

Yayınlanan: 2022-02-16

Son birkaç ayda giderek daha fazla Drupal 8 sitesiyle çalıştık. Bu projelerin hepsinin ortak bir yanı vardı... Drupal Paragraflar modülünü kullanıyorlardı.

Paragraflar, Drupal 8'deki içeriği işlemek için çok popüler bir modüldür.

Paragraflar, içerik alanlarına benzer şekilde çalışır, ancak aynı zamanda içeriğinizin tasarımı, düzeni ve gruplandırılması için çok çeşitli seçenekler sunar.

Paragrafları öğrenmek istiyorsanız, bu nihai rehber! Bu eğitimin 10 bölümünün tamamını okuyun, izleyin ve takip edin. Sonunda, tüm siteleriniz için de Paragraflar kullanacaksınız!


Bölüm 1. Neden Drupal Paragraflar modülünü kullanmalısınız?

Paragraf Türleri, basit bir metin bloğu veya görüntüden karmaşık ve yapılandırılabilir bir slayt gösterisine kadar her şey olabilir.

Son kullanıcılar, tüm içeriklerini tek bir WYSIWYG gövde alanına koymak yerine, önceden tanımlanmış Paragraf Türleri arasında anında seçim yapabilir. Birden fazla gelişmiş özellik oluşturabilirsiniz ve son kullanıcılar hangisini kullanmak istediklerini seçebilir.

Bu, kullanıcıların gelişmiş içerik eklemesini çok daha kolay hale getirir. Örneğin, kullanıcılar bir içerik gövdesine çekme alıntısının nasıl ekleneceğini anlayabilir, ancak ortalanmayabilir veya tam olarak doğru biçimlendirilmeyebilir. Ayrıca, bir makalenin içine bir çağrı kutusu eklemek gibi daha karmaşık bir şey yapmak isteyebilirler, ancak gerekli stilleri nasıl ekleyecekleri konusunda hiçbir fikirleri yoktur.

Drupal Paragraflar modülü, bu gibi süreçleri teknik olmayan kullanıcılar için çok daha yönetilebilir hale getirirken, geliştiricilere bu tür özel olarak biçimlendirilmiş öğelerin biçimlendirmesini ve görünümünü tema düzeyinde kontrol etme yeteneği verir.

Pratikte, Paragraflar, içerik alanlarına çok benzeyen öğeler eklememize izin verir, ancak bunları herhangi bir içeriğin gövdesinin etrafına eklemek yerine, bunlar etkili bir şekilde gövdeye eklenir.

Bu kılavuz için, makaleler şeklinde bilgilendirici içerik sunan “Ücretsiz Yaşam Tavsiyesi” adlı bir web sitesi oluşturduğumuzu hayal edeceğiz. Dilerseniz başka herhangi bir geliştirme web sitesinde de gerekli küçük ayarlamaları yaparak takip edebilirsiniz.


Bölüm 2. Drupal Paragraflar Modülünü Kurma

Bu proje için boş bir Drupal 8 test sitesi kullanmanızı öneririz.

  • Paragaphs modülünü indirmek için buraya tıklayın.
  • Paragraflar ayrıca Varlık Referans Revizyonları modülünü gerektirir.
  • Bu iki modülü indirip /modules dizininize yerleştirdikten sonra siteniz için kurun.

Drupal Paragraflar Modülü kurulumu


Bölüm #3. İlk Paragraflarınızı Oluşturma

Paragraflar, bizim durumumuzda bu Paragraf türlerini kullanmak istediğimiz herhangi bir içerik türünün Gövde alanını toplu olarak değiştirecek olan "Paragraf türleri" olarak adlandırılanları oluşturmamıza izin vererek çalışır.

Paragraflardan yararlanmaya başlamak için önce en az bir Paragraf türü oluşturmanız ve ardından bu Paragraf türünü bir içerik türüne eklemeniz gerekir. Bu süreç ilk başta kafa karıştırıcı görünebilir, ancak bir veya iki Paragraf türü ayarladığınızda aşina olmak kolaydır.

Gösterimizde, varsayılan Makale içerik türünün Gövde alanını birkaç Paragraf türüyle değiştireceğiz.

Önemli: Bunu, halihazırda Makale türünde içeriğe sahip bir sitede test ediyorsanız, bu gösterimde yapmak üzere olduğumuz gibi, Makale içerik türünün Gövde alanını silmeyin. Bunu yaparsanız, web sitenizdeki tüm Makalelerin gövdesini kaybedersiniz. Makale içerik türünün zaten kullanıldığı bir sitede çalışıyorsanız, Paragraflar modülünü test etmek için yeni bir içerik türü oluşturmalısınız.

"Ücretsiz Yaşam Tavsiyesi" sitemizde, Makale içerik türünü düzenleyerek Paragrafları yapılandırmaya başlayacağız.

  • Yapı > İçerik türleri'ne gidin.
  • Makale satırındaki "Alanları yönet" düğmesini tıklayın.
  • Artık Makale içerik türü için "Alanları yönet" sayfasında olacaksınız. Bu sayfada, Gövde satırındaki "Düzenle" düğmesinin yanındaki açılır oku ve ardından Sil'i tıklayın.
  • Sonraki sayfada silme işlemini onaylayın.

Drupal Paragaphs Module ile kullanmak için satırı sil

Şimdi ilk Paragraf türümüzü oluşturacağız.

  • Yapı > Paragraf türleri'ne gidin.
  • "Paragraf türü ekle"yi tıklayın.
  • Bir sonraki sayfada, bu paragraf türü için bir etiket sağlamamız gerekiyor. Gösterimiz için buna “Gövde metni” diyeceğiz çünkü onu içeriğimizin gövdesi olarak kullanacağız.
  • "Alanları kaydet ve yönet"i tıklayın.
  • Bu "Alanları yönet" sayfasında, "Alan ekle"yi tıklayın.
  • Aşağıdaki “Yeni alan ekle” açılır listesinde aşağı kaydırın ve “Metin” altında “Metin (biçimlendirilmiş, uzun, özetli)” seçeneğini seçin. Bu, Makale içerik türünün sıklıkla kullandığı varsayılan Gövde alanına benzer; WYSIWYG düzenleyicili uzun biçimli bir metin alanı.
  • Aşağıdaki "Alan ekle" sayfasında, bu özel alanı da "Gövde metni" olarak etiketleyeceğiz.
  • "Kaydet ve devam et"i tıklayın.
  • Daha sonra bu alanın “Alan ayarları” sekmesine yönlendiriliyoruz. Bu alanlardan herhangi biri için izin verilen sayıda değer belirtebiliriz. Bazı alanlar için 1'den fazla değere izin vermek, özellikle tarihler, görüntü dosyaları veya adlar gibi bilgiler için kısa biçimli metin alanları gibi ayrı ayrı bilgi parçalarını kabul edenler için, ancak uzun biçimli metin alanları için yararlı olabilir. , paragraflar tek bir metin alanına art arda yerleştirilebildiğinden ek değerler sağlamak genellikle gereksizdir. Bu örnekte varsayılan ayarları “Sınırlı” ve 1 olarak bırakalım.
  • "Alan ayarlarını kaydet"i tıklayın.
  • Aşağıdaki “Gövde metni için gövde metni ayarları” sayfasında, tüm varsayılanları tutabiliriz. Kullanıcıların, metin alanının WYSIWYG düzenleyicisinde normalde sahip oldukları tüm biçimlendirme seçeneklerine sahip olacağına dikkat edin. Onlardan bir şey almıyoruz. Bunun yerine, onlara içeriklerine belirli türde öğeler eklemek için ek, gelişmiş bir yöntem sunacağız.
  • "Ayarları kaydet"i tıklayın.
  • Artık yeni alanlarınızı yeni Paragraf Türünüzün içinde göreceksiniz:

Drupal Paragraflar Modülünde alanları yeni paragraf türünü yönet

  • Bu sonraki sayfada, "Ekranı yönet" sekmesine tıklayın.
  • Şu anda bu Paragraflar türünün yalnızca bir alanı vardır: Gövde metni alanı. Bu alandaki metinle birlikte bir etiketin görünmesini istemiyoruz, bu nedenle bu alan için Etiket sütunu altında "Gizli"yi seçin. Biçim Varsayılan olarak kalmalıdır.
  • "Kaydet"i tıklayın.

görüntüleme alanları Drupal Paragraflar Modülü

Şimdi bu içerik türünün kullanabilmesi için bu Paragraf türünü Makale içerik türüne eklememiz gerekiyor. Bunu şu şekilde yapıyoruz:

  • Yapı > İçerik türleri'ne gidin.
  • Makale içerik türü için "Alanları yönet"e tıklayın.
  • "Alan ekle"yi tıklayın.
  • Yeni Paragraf türümüzü bu alanla kullanmak için, “Bir alan türü seçin” açılır listesini açın ve “Referans revizyonları” altında “Paragraf”ı seçin.
  • "Paragraf"ı seçtikten sonra "Gövde" etiketini sağlayın çünkü içeriğimizin gövdesi olarak bunu kullanıyoruz.
  • "Kaydet ve devam et"i tıklayın.
  • Bir sonraki sayfada “Referans edilecek öğenin türü” “Paragraf” olarak ayarlanmalıdır.
  • "İzin verilen değer sayısı "Sınırsız" olmalıdır. “Sınırsız”ı seçerek, yapılandırılmış Paragraf türlerimiz tarafından sağlanan bu özel alanı istediğimiz kadar ekleyebiliriz. İçeriğin gövdesine metin dışında başka şeyler eklemeye başladığımızda bu yardımcı olacaktır.
  • "Alan ayarlarını kaydet"i tıklayın.
  • Aşağıdaki “Makale için Gövde metin ayarları” sayfasında, daha önce oluşturduğumuz Paragraflar türümüzü bu alana açmamız gerekiyor. Bunu yapmak için, sayfanın alt kısmındaki "Tür"ün altındaki "Gövde metni"nin yanındaki kutuyu işaretleyin. Bu özel Paragraf türünü bu alanda bu şekilde kullanılabilir hale getiriyoruz. Sitemize daha fazla Paragraf türü ekledikçe geri gelebilir ve bunları bu alanda da kullanılabilir hale getirebiliriz.

Drupal Paragraflar Modülü gövde metni

  • "Ayarları kaydet"i tıklayın, site sizi içerik türü için "Alanları yönet" sayfasına geri götürmelidir.

Artık önceki (varsayılan) Gövde alanını Paragrafları kullanan yeni Gövde alanımızla ve özellikle oluşturduğumuz “Gövde metni” Paragraflar türüyle değiştirmeyi bitirdik. Şimdi, istediğimiz gibi görünmesi için birkaç ayar daha yapılandıracağız.

  • Başlamak için, yeni Gövde alanını Makaleler için içerik oluşturma sayfasında göze çarpan bir yere yerleştirebilmemiz için “Form görünümünü yönet” sekmesini tıklayacağız.
  • Bu sayfada, yeni Gövde alanımızı bulmak için aşağı kaydırın ve onu listenin en üstüne yakın bir yere, Başlığın hemen altına sürükleyin.
  • "Kaydet"i tıklayın.

Şimdi yeni Paragraf Türünün site ziyaretçileri için doğru yerde mevcut olduğundan emin olmamız gerekiyor.

  • "Ekranı yönet"e tıklayın .
  • Yine en altta Body'yi bulacaksınız. Bunu, Resmin hemen altına, üste yakın bir yere sürükleyin . Bu görüntü alanını, içeriğin bir parçası olarak değil, Makalelerimiz için büyük bir tür giriş veya giriş görüntüsü olarak ele alacağız.
  • "Kaydet"i tıklayın .

Drupal Paragraflar Modülü alanı

Bu noktada, bu yeni Paragraflar alanını kullanarak Makale içerik türümüzün kurulumunu tamamladık. Şimdi test etmek için biraz içerik oluşturma zamanı.

  • Sitenizin İçerik sayfasına gidin ve "İçerik ekle"yi tıklayın.
  • "Makale"yi tıklayın.
  • Makaleniz için herhangi bir başlık girebilirsiniz. Bu örnek için “100 Arkadaş Nasıl Edinilir” yazımızın adını verelim.
  • Şimdi, Gövde alanına gelince, biraz farklı göründüğünü fark etmiş olabilirsiniz, ancak yine de daha önce olduğu gibi bir WYSIWYG düzenleyicisiyle aynı uzun biçimli alanı kullanıyor. Aradaki fark, şu anda bir Gövde metin alanı içeren kapsamlı bir Gövde alanına sahip olmamızdır. Gövde metni alanının hemen altında, birden fazla alan eklememizi sağlayan bir "Gövde metni ekle" düğmesini görmelisiniz. Bu noktada, bu gereksiz olacaktır, çünkü şu anda kullanımda olan uzun metin alanı, uzun, çok paragraflı metin girmek için mükemmel bir şekilde uygundur, bu nedenle, aynı alana daha fazla metin ekleyebildiğimiz zaman, ek bir alan eklememiz gerekmez. . Ancak daha sonra, sitenize birden çok Paragraf türü uyguladığınızda, ek Paragraf alanları ekleyebilmenin çok yararlı olduğunu göreceğiz. Şimdilik, Gövde metin alanınıza bir veya iki metin paragrafı girin.

Drupal Paragraf Modülü kullanarak

Makalenizi kaydedin ve sayfayı herhangi bir ziyaretçinin göreceği şekilde görüntüleyin.

Bu noktada, Paragrafları kullanan yeni Gövde, varsayılan Gövde alanını kullanan bir makaleden farklı görünmüyor. Bununla birlikte, Paragraflar yerindeyken, içerik oluşturucularımızın içeriğe nasıl düzgün bir şekilde biçim vereceklerini bilmelerine gerek kalmadan içeriğe ek öğeler eklemelerine yakında izin verebileceğiz.


4. Bölüm. CSS'nizi Paragraflara Ekleme

Paragrafları bu kadar kullanışlı yapan şeyin büyük bir kısmı, içerik oluşturucuların WYSIWYG düzenleyicisini veya satır içi CSS'yi kullanarak bu öğelerin çoğunu manuel olarak biçimlendirmeyi denemek zorunda kalmamaları için belirli içerik içi öğeler için CSS yazabilmemizdir. Bu, bu öğelerin tam olarak istediğimiz gibi görünmesini sağlamak için sitemizin temasını özelleştireceğimiz anlamına gelir.

Gerçek dünyadaki birçok durumda, muhtemelen kendinize ait özel bir tema veya alt tema ile çalışıyor olacaksınız ve bu durumda onu özgürce düzenleyebilirsiniz. Bu eğitim için, en iyi uygulamaları izleyebilmemiz ve Bartik'i düzenlemeden kendi CSS'mizi ekleyebilmemiz için varsayılan Bartik temasının hızlı ve kolay bir alt temasını oluşturacağız. (Bartik'i veya başka herhangi bir çekirdek veya katkıda bulunan temayı doğrudan düzenlemekten kaçınıyoruz, çünkü bunu yaparsak ve daha sonra o temaya yayınlanmış bir güncelleme uygularsak, kendi yaptığımız değişiklikler kaybolacaktır.) Alt tema oluşturmaya aşina değilseniz, sorun değil. Süreci kapsamlı bir şekilde kazmıyoruz, bunun yerine temanın doğrudan bir kopyasını oluşturuyoruz ve daha sonra bazı küçük değişiklikler uygulayacağız. Bu kolay bir işlemdir.

  • Bir alt tema oluşturmak için öncelikle sitenizin barındırıldığı sunucuya erişmeniz ve sitenizin kök dizinine gitmeniz gerekir.
  • Bir kez orada, “temalar” dizinini açın. Burası, tüm özel ve katkıda bulunan temaların ve alt temaların yerleştirildiği yerdir. Bu "temalar" dizininde "custombartik" adlı yeni bir klasör oluşturun ve bu yeni dizine gidin.

Şimdi bu yeni dizine birkaç dosya eklememiz gerekiyor. İlk temanın bilgi dosyası olacaktır. Web geliştirme için kullandığınız kod düzenleme yazılımını açın. Bu bilgi dosyaları birkaç parça bilgi gerektirir: projenin adı (temamızın adı), projenin türü (bu durumda “tema”), eğer bu bir alt tema ise (bizimki gibi) temel temanın makine adı is), kısa bir açıklama ve temanın oluşturulduğu Drupal'ın (7.x, 8.x, vb.) ana sürümü. Bu bilgiyi aşağıdaki forma gireceğiz (her şeyi tam olarak gördüğünüz gibi yazın):

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme core: 8.x

Temel tema adının "bartik" büyük harf kullanılmadan kaldığından emin olun; ihtiyacımız olan, büyük/küçük harfe duyarlı, makine tarafından okunabilen addır. Girilen bu bilgilerle dosyayı “custombartik.info.yml” olarak kaydedin. Oluşturduğunuz klasörle tam olarak aynı isimle ve ardından “.info.yml” ile kaydetmeniz önemlidir.

Şimdi, Drupal'a temanın CSS'sini nerede bulacağını ve bunun temanın hangi sürümü olduğunu söyleyeceğimiz, temamızın kitaplık dosyasını oluşturmamız gerekiyor. Daha fazla bilgi sağlanabilir, ancak amaçlarımız için ihtiyacımız olan tek şey bu.

  • Yeni bir dosya açın. Bu dosyada, buradaki girintilere çok dikkat edin. Her girinti iki boşluklu bir sekme olmalıdır.
  • Aşağıdaki bilgileri tam olarak göründüğü gibi girin:

 global-css:  version: 0.1  css:    theme:      css/style.css: {}

  • Bu dosyayı “custombartik.libraries.yml” olarak kaydedin. Bu dosya esasen web sitesine bunun temanın 0.1 sürümü olduğunu (buna herhangi bir sürüm numarası verebilirdik) ve tema dizinimizde (“custombartik”) css/style.css adresinde bulunan bir stil sayfası olacağını söyler.

Şimdi, stil sayfamızı bulmak için Drupal'a “global-css” kapsayıcısının altındaki bilgileri kullanmasını söylemek için bilgi dosyamıza geri dönmemiz gerekiyor.

  • custombartik.info.yml dosyanızı açın, “core: 8.x” satırınızın altına boş bir satır ekleyin ve ardından girintiyi tam olarak aşağıda göründüğü gibi tutarak aşağıdaki bilgi satırını ekleyin:

 libraries:  - custombartik/global-css

Tüm dosya şimdi şöyle görünmelidir:

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme. core: 8.x libraries:  - custombartik/global-css

Bu noktada bu iki dosyayı temamıza eklemeye hazırız.

  • custombartik.info.yml ve custombartik.libraries.yml dosyalarınızı custombartik klasörünüze yükleyin veya kopyalayın.
  • Şimdi custombartik klasörünüzün içine “css” adlı bir klasör ekleyin.
  • Devam edin ve "style.css" adında boş bir dosya oluşturun ve bu dizine yükleyin. Bu bizim stil sayfamız olacak.
  • Ancak stil sayfamızı oluşturmadan önce web sitenizin “Görünüm” sayfasına gidin.
  • Sayfanın en altına gidin ve “Yüklenmemiş tema” bölümünün altında Özel Bartik temanızı görmelisiniz. Göremiyorsanız, custombartik klasörünüzün ve tüm dosyalarının sitenizin dosya sisteminin temalar klasöründe bulunduğundan emin olun.
  • Sitenizin temanızı kullanmaya başlaması için özel temanızın altındaki "Yükle ve varsayılan olarak ayarla"yı tıklayın.
  • Bu yapıldıktan sonra, ana sayfanıza gidin ve muhtemelen Drupal logosu yerine kırık bir görüntü simgesi görmeniz dışında, Drupal'ın varsayılan Bartik teması gibi görünmelidir. Tema aynı Bartik'e benziyor çünkü yarattığımız şey, henüz özelleştirme yapılmamış bir Bartik alt teması. Siteniz Bartik'e benzemiyorsa ve özellikle CSS stili olmayan düz HTML'ye benziyorsa, iki .yml dosyanıza geri dönün ve tam olarak yukarıda yazdırıldığı gibi göründüklerinden emin olun.

Son olarak, bozuk logo görüntüsünü düzeltmek için logoyu doğrudan Bartik'ten alt temamıza kopyalayacağız. Bu sorun değil çünkü aslında Bartik'te hiçbir şeyi değiştirmiyoruz.

  • Sitenizin kök dizinine gidin ve core/themes/bartik'e gidin. Burada “logo.svg” adında bir dosya göreceksiniz.
  • Bu dosyayı alt temanıza ("custombartik" dizini) kopyalayın.
  • Web sitenizde Yapılandırma > Performans'a gidin ve "Tüm önbellekleri temizle"yi tıklayın. Artık logo sitenizde görünmelidir.

Bölüm #5. Paragaph Alanlarınızı Şekillendirme

Artık güvenle düzenleyebileceğimiz bir alt temamız olduğuna göre, içeriğimizin Paragraflar tarafından kontrol edilen öğeleri için stil kuralları belirlemeye başlayabiliriz. Bunu yapmadan önce, özel stil kuralları gerektiren yeni bir Paragraf türü oluşturmalıyız. Bir makalenin ortasına ortalanmış bir görüntü ekleyen bir alana sahip olma örneğimizi takip edeceğiz.

  • Yapı > Paragraf türleri'ne gidin.
  • "Paragraf türü ekle"yi tıklayın.
  • Bunun için etiketi "Ortalanmış görüntü" olarak ayarlayacağız.
  • "Alanları kaydet ve yönet"i tıklayın.
  • Sonraki sayfada, "Alan ekle"yi tıklayın ve "Yeni alan ekle"nin altından "Görüntü"yü seçin.
  • Bu alanı da "Ortalanmış görüntü" olarak etiketleyeceğiz.
  • "Kaydet ve devam et"i tıklayın.
  • Sonraki sayfada, tüm varsayılan değerleri koruyabiliriz, bu nedenle "Saha ayarlarını kaydet"i tıklayın.
  • Ardından, “Ortalanmış görüntü için ortalanmış görüntü ayarları” sayfasında birkaç basit kısıtlama ekleyeceğiz. Maksimum görüntü çözünürlüğünü 650x450 ve minimum çözünürlüğü 50x50 olarak ayarlayın. Maksimum yükleme boyutunu 1 MB olarak ayarlayın ve "Ayarları kaydet"i tıklayın. Paragraf türünün düzgün çalışması için bu özel ayarlar gerekli değildir; onları sadece gerçek dünya senaryosunu taklit etmek için dahil ediyoruz.

Drupal paragraflar merkezli görüntüler

  • Şimdi “Görüntüyü yönet” sekmesine tıklayın, Ortalanmış görüntü etiketini “Gizli” olarak ayarlayın ve “Kaydet”e tıklayın.

Bu noktada Makale içerik türümüzde bulunan Paragraflar alanına bu Paragraflar türünü eklememiz gerekiyor.

  • Yapı > İçerik türleri'ne gidin.
  • "Makale"nin yanındaki "Alanları yönet"i tıklayın.

Yeni "Ortalanmış görüntü" Paragraf türümüz için burada "Alan ekle"ye tıklamak isteyebilirsiniz, ancak bunun özel Gövde alanımızla karıştırılacağını unutmayın. Bunun yerine oluşturduğumuz Body alanına Centered image ekleyeceğiz.

  • "Gövde"nin yanındaki "Düzenle"yi tıklayın ve sayfanın en altına gidin.
  • Burada, "Gövde metni" Paragraf türümüzün altında bulunan "Ortalanmış resim"i göreceksiniz.
  • Bu alanda kullanılabilir hale getirmek için “Ortalanmış görüntü”nün yanındaki kutuyu işaretleyin ve ayarlarınızı kaydedin.

Şimdi bu alanı kullanarak bir resim ekleyeceğiz.

  • İçerik sayfanıza gidin ve “Nasıl 100 Arkadaş Edinilir” makalenizi düzenleyin.
  • Diyelim ki yazımızın ortasında bir yere ortalanmış bir görsel eklemek istiyoruz. Gövde metni alanının altında, bu Gövde alanına başka bir Gövde metni alanı eklemek için tekrar “Gövde metni ekle” düğmesini göreceksiniz. Ancak, bu düğmenin yanındaki açılır oku tıklarsanız, artık “Ortalanmış görüntü”nün de mevcut olduğunu göreceksiniz. Bu düğmeye tıklayın ve buraya yüklemek için bir resim dosyası seçin. Ardından, gerekli olduğu için bazı alternatif metinler sağlayın.

Şimdi resmi içeriğimize ekledik, ancak şu anda tüm metnin altına yerleştirilmiş. Burası, ek bir Gövde metin alanını kullanacağımız yerdir.

  • "Gövde metni ekle"yi tıklayın. Şimdi yukarıdan aşağıya, bir gövde metni alanı, ortalanmış bir görüntü ve başka bir Gövde metni alanımız var. Bu noktada bunu yapmanız gerekmese de, Paragraf alanlarının sol üst köşesindeki sürükle ve bırak okları aracılığıyla bunları serbestçe hareket ettirebileceğinizi unutmayın. Ortalanmış görüntünün makale metni arasında sıkıştırılmış görünmesini sağlamak için, ilk Gövde metni alanına gidin, görüntüden sonra görünmesini istediğiniz metni seçin ve o metni alandan kesin. Ardından aşağı kaydırın ve kesilen metni ikinci Gövde metin alanına yapıştırın (resminizden sonra).
  • "Kaydet"i tıklayın.

Şimdi makalenizi görüntülediğinizde, hala tam olarak doğru görünmeyecek. Temamıza henüz herhangi bir stil kuralı eklemediğimiz için, görüntünün ortalanmak yerine sola kaydırılması (varsayılan olarak olduğu gibi) olasıdır. Ancak, ilk Gövde metni alanındaki metinden sonra ve ikinci Gövde metni alanındaki metinden önce görünmelidir. Artık bazı özel stil kurallarını test edebileceğimiz bir makalemiz var.

drupal paragraflar sola hizalanmış görüntü


Bölüm #6. Paragrafları CSS ile Kontrol Etme

Oluşturduğumuz Paragraflar alanlarının çıktısını şekillendirmeye başlamak için şimdi özel alt temamıza gideceğiz. Şimdilik, içerik türünden çevreleyen Paragraflar alanı yerine, özel olarak "Ortalanmış görüntü" alanını hedefleyeceğiz. Bunu yapıyoruz çünkü bu alanın nerede olursa olsun her zaman ortalanmasını isteyeceğiz. Böylece, kuralları doğrudan "Ortalanmış görüntü" için ayarlayarak, birden çok bağlam için gereksiz birden çok kural koymaktan kaçınırız.

Ancak "düğüm" sınıfını hedeflememiz gerekiyor, çünkü varsayılan olarak bu alan için "düğüm" sınıfı altında hedeflenen bazı stiller olacaktır. Bu nedenle, bu kuralları geçersiz kılmalıyız.

  • Custombartik/css/style.css adresindeki "custombartik" alt temanızın stil sayfasını açın.
  • Dosya hala boş olmalı, ancak şimdi ona kurallar eklemeye başlayacağız. Şimdilik işleri basit tutacağız. Stil sayfanıza aşağıdaki kod satırlarını ekleyin:

 .node .field--name-field-centered-image {  float: none;  text-align: center; } .node .field--name-field-centered-image img {  max-width: 100%;  max-height: 450px; }

İlk kural grubuyla, görüntüyü kendi alan sınıfı içinde yatay olarak ortalıyoruz ve yanında hiçbir metin veya başka bir şeyin yüzmediğinden emin oluyoruz. İkinci kural grubu kesinlikle gerekli değildir, ancak resimlerin içerik alanına göre olması gerekenden daha büyük olmamasını sağlamak için bazı yaygın kodlardır.

  • Bunu style.css dosyanıza ekledikten sonra, değişikliklerinizi kaydedin (buradan itibaren, alt temanızdaki değişiklikleri kaydetmeye yönelik herhangi bir referans, doğrudan sunucuda düzenleme yapmıyorsanız, dosyaları sunucunuza yüklediğinizi veya başka bir şekilde kopyaladığınızı varsayar. test sitenizin bulunduğu).
  • Ardından sitenizde Yapılandırma > Performans'a gidin ve tema değişikliklerini sitenize yüklemek için "Tüm önbellekleri temizle"yi tıklayın.
  • Ortalanacak resmi eklediğiniz makaleye geri dönün (veya zaten açıksa sayfayı yenileyin).

“Ortalanmış görüntü” Paragraf türü aracılığıyla yerleştirilen görüntü, artık her iki yanında kayan metin olmadan ortalanmalıdır. Eklemek istediğimiz başka stiller olabilir, ancak bu eğitimin amacı doğrultusunda, şu anda yapmak istediğimiz şeyi yaptık; kullanıcıların ekleme yapabilmesi için bu alanın çıktısının CSS tarafından sıkı bir şekilde kontrol edildiğinden emin olun. içeriğin, WYSIWYG düzenleyicisini veya diğer satır içi stil yöntemlerini kullanarak hiçbir şeyi kendisinin biçimlendirmesi gerekmez.

drupal paragraflar ortaya hizalanmış görüntü


Bölüm #7. Birden Fazla Alan İçeren Paragraflar

Kendileri birden çok alandan oluşan Paragraf türleri de oluşturabiliriz.

Örneğin, "Ortalanmış resim" türü yerine, bir resim yükleme alanından ve bu türden herhangi bir tek öğe için eşlik eden bir metin alanından oluşan "Altyazılı ortalanmış resim" türü oluşturabiliriz. Bu da, siteye içerik ekleyenlerin mizanpaj yükünü kaldırmamıza yardımcı olur, böylece içerik gösterimini tema düzeyinde kontrol edebiliriz.

Çok alanlı bir Paragraf türü oluşturma işlemini uygulamak için bu “Altyazılı ortalanmış görüntü” türünü oluşturalım. Tahmin edebileceğiniz gibi, bu süreç tek alan tipi oluşturmaya benzer.

  • Yapı > Paragraf türleri'ne gidin ve "Paragraf türü ekle"yi tıklayın.
  • Bu türü "Altyazılı ortalanmış resim" olarak etiketleyin ve "Alanları kaydet ve yönet"i tıklayın.
  • "Alan ekle"yi tıklayın.

Daha önce oluşturduğumuz “Ortalanmış görüntü” alanımız, yeni Paragraflar türümüzün görüntü kısmı için tam istediğimiz gibi olduğundan, yeni bir alan oluşturmak yerine öncekini yeniden kullanabiliriz. Bu nedenle, “Alan ekle” sayfasındaki “Yeni alan ekle” altında hiçbir şey seçmeyin.

  • "Mevcut bir alanı yeniden kullan" altında, "Görüntü: field_centered_image" öğesini seçin.
  • "Ortalanmış resim" etiketini koruyun ve "Kaydet ve devam et"i tıklayın.
  • Bir sonraki sayfada görüntünün boyut sınırları için ayarlarımızı yapılandırmamız gerekiyor. Bir kez daha maksimum görüntü çözünürlüğünü 650x450 piksel ve minimum 50x50 piksel girelim. Maksimum yükleme boyutunu 1 MB olarak ayarlayın.
  • "Ayarları kaydet"i tıklayın.

Şimdi başka bir alan ekleyeceğiz. Hâlâ yeni Paragraf türümüzün ayarlarının içinde olduğumuzu unutmayın, bu nedenle bu ikinci alanı eklediğimizde, “Altyazılı ortalanmış görüntü” iki alanlı bir tür olacaktır.

  • "Alan ekle"yi tıklayın ve "Metin (düz)" türünde yeni bir alan ekleyin.
  • Bu alanı "Altyazı" olarak etiketleyin.
  • "Kaydet ve devam et"i tıklayın.
  • Bazı uzun altyazıların varsayılan 255 karakter sınırını aşması gerekebilir, bu nedenle bu alan için maksimum uzunluğu 500 olarak değiştirin. İzin verilen değer sayısını "Sınırlı" ve 1'de tutun ve ayarları kaydedin.
  • Aşağıdaki resim yazısı ayarları varsayılanlarının tümü uygundur, bu nedenle o sayfadaki ayarları da kaydedin.

drupal paragraf birden çok alan

Artık yeni Paragraf türümüz ihtiyaç duyduğu tüm alanlara sahip, bu yüzden ekranı kontrol edelim.

  • Bu durumda gereksiz olan alan etiketlerini kaldırabilmemiz için “Görüntüyü yönet” sekmesine tıklayın.
  • Her iki alan için de "Etiket" sütununun altındaki "Gizli"yi seçin ve "Kaydet"i tıklayın.
  • İki alan bozuk olsaydı, onları yeniden düzenlerdik, böylece altyazı alanı görüntü alanından sonra gelir, ancak altyazı alanını en son eklediğimiz için, tam istediğimiz gibi zaten görüntü alanından sonra konumlandırılmalıdır. .

Şimdi yeni türü Makale içerik türümüze ekleyeceğiz.

  • Yapı > İçerik türleri'ne gidin ve Makale için "Alanları yönet"e tıklayın. İçerik türüne ilk “Ortalanmış görüntü” Paragraf türümüzü eklediğimizde olduğu gibi, bu yeni Paragraflar türünü tamamen yeni bir alan eklemek yerine özel Gövde alanımıza ekleyeceğiz.
  • Makale için "Alanları yönet" sayfasında, Gövde için "Düzenle"yi tıklayın.
  • Sayfanın en altına gidin ve bu türün bu Gövde alanında kullanılabilmesini sağlamak için "Altyazılı ortalanmış resim"in yanındaki kutuyu işaretleyin.
  • "Ayarları kaydet"i tıklayın.
  • Artık bu yeni Paragraf türü, siteye Makale ekleyenler için geçerli olacak.

Devam edelim ve bu alanı kullanarak yeni bir makale oluşturalım ve ardından görünümünü kontrol etmek için stilimizi ekleyeceğiz.

  • İçerik sayfasına gidin, "İçerik ekle"yi ve ardından "Makale"yi tıklayın.
  • Bu makaleye “Bir Enstrüman Çalmayı Öğrenmek Hayatınızı İyileştirebilir” diyelim.
  • Makaleye biraz metin eklemeye başlamak için “Gövde metni ekle”yi tıklayın. Bu alana bir veya iki paragraf metin girin.
  • Ardından, Gövde metni alanının altında, "Gövde metni ekle"nin yanındaki açılır oku tıklayın ve yeni kullanılabilen "Altyazılı Ortalanmış resim Ekle" seçeneğini belirleyin. Beklememiz gerektiği gibi, şimdi veri girişi için iki alanla karşı karşıya olduğumuza dikkat edin - bu Paragraf türüne ait olan "Ortalanmış görüntü" ve "Altyazı" alanları.
  • Herhangi bir resmi resim alanına yükleyin ve alternatif bir metin sağlayın.
  • Ardından, "Les Paul, rock and roll'daki en efsanevi gitarlardan biridir" yazın.

Şimdi resim ve başlıktan sonra makalenin geri kalan metninin bir kısmını ekleyeceğiz.

  • Resim ve resim yazısı Paragraf türü altında, bir kez daha "Gövde metni ekle"yi tıklayın.
  • Başka bir paragraf veya iki metin ekleyin.
  • Son olarak, "Kaydet ve yayınla"yı tıklayın.

Şu anda, "Ortalanmış resim ve başlık"ımızın gösterimi yarı doğru olmalıdır. Önceki “Ortalanmış görüntü” alanını yeniden kullandığımızdan, görüntünün kendisi, yalnızca ortalanacak bir görüntüden oluşan önceki alan için olduğu gibi zaten ortalanmış olmalıdır. Altyazı metni, elbette, henüz herhangi bir CSS kuralına sahip değil, bu nedenle sola hizalı görünecek ve makalenin geri kalanının metnine benziyor. Bu nedenle, bu başlık metnine stil vermek için temamıza bazı kurallar eklememiz gerekiyor.

çoklu alan drupal paragrafları

Bu sefer CSS'imizi yazarken, daha önce yaptığımız gibi, başlık metnini kapsayıcısından bağımsız olarak hedeflemek yerine, tüm "Altyazılı Ortalanmış görüntü" Paragraflar türünü hedefleyeceğiz ve ardından o sınıf içindeki resim yazısı alanına ineceğiz. ortalanmış görüntü Bu yaklaşımı benimseyeceğiz çünkü bu altyazı metin alanını başka bir yerde yeniden kullanmak isteyebiliriz ve bazı durumlarda bunun, buradakinden farklı bir şekilde (ortalanmış yerine sola veya sağa hizalanması gibi) olmasını isteyeceğiz. belirli Paragraflar türü.

Altyazı metnimizi, karşılık gelen görüntü ortalandığı için ortalayacağız ve bu metin ile makalenin metni arasında görsel bir ayrım sağlamak için onu kalın yapacağız (italikler de bu etkiyi sağlayacaktır).

  • Aşağıdaki kod satırlarını stil sayfanıza ekleyin ve değişikliklerinizi kaydedin:

{codecitation}.paragraph--type--centered-image-with-caption .field--name-field-caption { font-weight: kalın; metin hizalama: merkez; }{kod alıntı}

  • Ardından, sitedeki değişikliklerimizi görmek için Yapılandırma > Performans'a gidin ve tüm önbellekleri temizleyin.
  • Geri dönün ve en son oluşturulan makaleyi yenileyin; yeni stil kurallarının yürürlükte olduğunu görmelisiniz. Altyazı metni artık kalın olmalı ve görüntünün altında ortalanmalıdır.

Elbette bu Paragraflar türüne bir bütün olarak bazı stiller uygulayabiliriz. Bunu yapmanın bir nedeni, görüntü/alt yazı öğesini çevreleyen metinden ayırmak ve tek bir birim olarak görülmesi gerektiğini görsel olarak netleştirmek olabilir.

  • Aşağıdaki kodu stil sayfanıza ekleyin ve değişikliklerinizi kaydedin:

{codecitation}.paragraph--type--centered-image-with-caption { border: 2px gri katı; kenar boşluğu: 4 piksel 0; dolgu: 4 piksel; }

Şimdi sitenizin önbelleğini bir kez daha temizleyin ve makale sayfasını yenileyin. Resim ve başlık çoğunlukla aynı görünmelidir; ancak, şimdi tüm resim/alt yazı birimi gri bir kenarlıkla çevrelenmiştir ve üstte ve altta küçük kenar boşlukları vardır. Buradaki estetiği geliştirmek için daha fazlasını yapabilirdik (ve kenarlık muhtemelen gerekli değildir), ancak bu, bir bütün olarak Paragraf türlerinin yanı sıra Paragraf türlerinin ayrı bileşenleri için stil sağlama yeteneğimizi gösterir.

css ile çoklu alan drupal paragrafları

Şimdi, teknik bilgisi olmayan bir kullanıcı siteye içerik ekliyorsa ve büyük, ortalanmış bir resim yazısı eklemek istiyorsa, makaleyi düzenlerken bu Paragraflar alanını seçmeleri, bir resim yüklemeleri ve metni içine girmeleri yeterlidir. altyazı alanı. Biçimlendirme otomatik olarak uygulanacaktır.


Bölüm #8. Paragraflarda Tüm Düğümleri Kullanma

Bu noktada, Paragrafların temel kullanımlarına ilişkin bazı örnekler gördük. Şimdi biraz daha gelişmiş bir örneği ele alacağız: tüm bir düğümü bir içerik parçasının gövdesine yerleştirmek için Paragrafları kullanmak. Bunun için bir kullanım örneği, makalelerinizden birinin içine ilgili ancak bağımsız bir ek bilgi parçası yerleştirmek olabilir (bir dergi makalesine eşlik eden bir “Biliyor muydunuz?” bölümüne benzer bir şeye benzer).

Örneğimiz için, makalelerimize “Bilgi kutuları” dediğimiz şeyi ekleme seçeneğine sahip olmak istediğimizi hayal edeceğiz ve bunu “Arp'ın Kısa Tarihi” başlıklı kısa bir içerik parçası yerleştirerek yapacağız. ” Enstrüman çalmayı öğrenmekle ilgili daha önce oluşturduğumuz makalemizde.

Öncelikle bu “bilgi kutuları” için bir içerik türü oluşturmamız gerekiyor.

  • Yapı > İçerik türleri'ne gidin ve "İçerik türü ekle"yi tıklayın.
  • Bu içerik türüne “Bilgi kutusu” adını vereceğiz.
  • Açıklama için "Makaleleri desteklemek için kullanılan kısa bilgi parçaları" yazın.
  • Click the “Display settings” tab, and uncheck “Display author and date information” because we don't want author and date information showing up within our Info box content.
  • All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”
  • On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

  • Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
  • Give this type the label “Info box.”
  • On the “Manage fields” page, click “Add field".
  • Beneath “Add a new field,” select “Content,” found under the “Reference” header.
  • For the label, write “Info box,” and save.
  • All defaults are fine on the next page, so click “Save field settings” there.
  • On the next settings page, scroll down until you see the “Reference type” settings.
  • Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
  • Back on the “Manage fields” page, click the “Manage display” tab.
  • As we've been doing so far, we'll remove the label, so select “Hidden” under the label column for the Info box field.
  • Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
  • Click “Save.”

It's time to make this Paragraphs type available to our Article content type.

  • Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
  • As we've been doing, click “Edit” for the Body field.
  • Scroll down and check the box next to “Info box” under the “Paragraph types” header.
  • Save your settings.

With the structure side of this implementation complete, we'll now create some content to test it out. We'll start by adding our site's first “Info box.”

  • Navigate to the “Content” page, and click “Add content.”
  • Choose Info box.
  • For the title, enter “A Short History of the Harp.”
  • Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don't want the latter to appear on the homepage; we want them only placed within other articles. So, let's quickly edit the view for our homepage to exclude these pieces of content.

  • You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
  • Navigate to Structure > Views, and edit the “Frontpage” view.
  • On the view's settings page, next to the “Filter criteria” header, click “Add.”
  • Select “Content type,” and then click “Apply (all displays).”
  • For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
  • Back at the view's settings page, click “Save.”
  • Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we'll add our Info box to the “Learning to Play an Instrument” article.

  • Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
  • Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
  • Select it to include that Info box in the body of this article.

adding info box paragraphs

With the Info box now included in our Body, we need to place it where we want it.

  • Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we'll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

  • So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
  • Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
  • Paste the cut text into the newly created (currently empty) Body text field.
  • Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
  • Click “Save and keep published”.

Upon viewing the article, you'll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type's “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won't go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.


Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer's (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

  • Begin by navigating to your site's Extend page.
  • Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
  • Then, if prompted, click “Continue.”

Let's use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

  • Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
  • Give it the label “Pros and cons,” and add a field.
  • For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
  • Save and continue, and keep all of the default settings through the next two pages.
  • You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
  • Save, and continue through the subsequent settings pages, once again keeping all default settings.
  • Once you're back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

  • We have a handful of options here, and for our Pros and cons lists, we'll select “Two column.”
  • Then click “Save,” and you'll be taken back to the “Manage display” page.
  • Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
  • Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

  • Navigate to Structure > Content types, and click “Manage fields” for Article.
  • Edit the Body field, scroll to the bottom of that field's settings.
  • Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. Then save.

Now we're ready to begin using this “Pros and cons” Paragraphs type. Let's use it in a new article.

  • Create a new article called “Swimming Is a Great Way to Stay in Shape.”
  • Add two or so paragraphs of Body text to this article.
  • Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
  • Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you'd like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
  • If you'd like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
  • Click “Save and publish.”

Viewing the article, you'll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

drupal paragraphs layout

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won't take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”


Part #10. Permissions for the Paragraphs Module

At this point, we've set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. This is an important step. Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We'll start by giving everyone permission to view Paragraphs content.

  • Sitenizin Kişiler sayfasına gidin ve "İzinler" sekmesine tıklayın.
  • “Paragraf Türü İzinleri” bölümünü görene kadar aşağı kaydırın. Bu başlığın altında "Gövde metni: İçeriği görüntüle"yi bulun ve Anonim Kullanıcı ve Kimliği Doğrulanmış Kullanıcı kutularını işaretleyin.
  • Oluşturduğumuz diğer tüm Paragraf türlerinin "İçeriği görüntüle" izni için de aynısını yapın: Ortalanmış resim, Altyazılı ortalanmış resim, Bilgi kutusu ve Artıları ve eksileri.
  • "İzinleri kaydet"e tıklayın.

Bu noktada, tüm kullanıcılar tüm Paragraf içeriğini görüntüleyebilir. Onaylamak için oturumu kapatıp siteyi anonim bir ziyaretçi olarak görüntülemekten çekinmeyin.

Şimdi sitemize içerik ekleyecek ve düzenleyecek olanlar için yeni bir rol oluşturmak için.

  • Kişiler'e gidin, "Roller" sekmesini tıklayın ve "Rol ekle"yi tıklayın.
  • Bu rolü "İçerik oluşturucu" olarak adlandırın.
  • Roller sayfasına geri dönün, İçerik oluşturucu rolünün yanındaki açılır oku tıklayın ve "İzinleri düzenle"yi seçin.
  • Bu rolün kullanıcılarına vermemiz gereken epeyce izin var. Bunlardan bazıları Paragraflarla ilgisizdir, ancak yine de gerçek dünya senaryosunu taklit etmek için onları dahil ediyoruz. Ayrıca, pratikte sahip olacağı tüm izinlere sahip değilse, yeni rolü güvenilir bir şekilde test etmek zor olacaktır. Bu izinleri, içerik oluşturucularımızın hepsinin şirket içinde çalıştığını varsayarak verdiğimizi de unutmayın. Yani, sitemizde içerik oluşturan çok sayıda teknik olarak kimliği doğrulanmış ancak yine de sözde anonim kullanıcılarımız yok, bu nedenle bu kullanıcılara, diğer durumlar bazı güvenlik endişelerine yol açacaktır.

İçerik oluşturucu rolüne verilmesi gereken izinlerin listesi aşağıda verilmiştir:

Yorum Yap

  • Kendi yorumlarını düzenle
  • Yorum göndermek
  • Yorum onayını atla
  • Yorumları Görüntüle

Temas

  • Site genelindeki iletişim formunu görüntüleyin
  • Kullanıcıların kişisel iletişim formlarını kullanın

filtre

  • Temel HTML metin biçimini kullanın
  • Tam HTML metin biçimini kullanın
  • Kısıtlı HTML metin biçimini kullanın

düğüm

  • İçeriğe genel bakış sayfasına erişin
  • İçeriği yönet
  • Kendi yayınlanmamış içeriğini görüntüleyin
  • Tüm düzeltmeleri geri al
  • Tüm revizyonları görüntüle
  • Kendi yayınlanmamış içeriğini görüntüleyin
  • Makale: Herhangi bir içeriği düzenleyin
  • Makale: Kendi içeriğini düzenle
  • Makale: Düzeltmeleri geri al
  • Makale: Düzeltmeleri görüntüle
  • Bilgi kutusu: Yeni içerik oluştur
  • Bilgi kutusu: Herhangi bir içeriği düzenleyin
  • Bilgi kutusu: Kendi içeriğini düzenle
  • Bilgi kutusu: Düzeltmeleri geri al
  • Bilgi kutusu: Düzeltmeleri görüntüle

Paragraf Türü İzinleri

"Paragraf türü içerik erişim denetimini atla" dışında bu bölümdeki tüm izinleri verin.

Aramak

  • Gelişmiş aramayı kullan
  • Aramayı kullan

sistem

  • Yönetim sayfalarını kullanın ve yardım edin
  • Siteyi bakım modunda kullanın
  • Yönetim temasını görüntüleyin

taksonomi

  • Terimleri Etiketlerde düzenle

araç çubuğu

  • Yönetim araç çubuğunu kullanın

kullanıcı

  • Kullanıcı bilgilerini görüntüle

İşiniz bittiğinde "İzinleri kaydet"i tıkladığınızdan emin olun.

Burada verdiğimiz ve vermediğimiz bazı izinler hakkında birkaç not: Yeni Paragraf türleri oluşturmalarını veya mevcut Paragraf türlerinin çalışma şeklini değiştirmelerini istemediğimiz için Paragraf türlerini yönetme izni vermedik. Geliştiriciler olarak onlar için oluşturduğumuz Paragraf türlerini kullanarak bilgi girecekler. Ek olarak, bazı durumlarda yönetici olmayan rollere içeriği silme yeteneği vermekten kaçınmak akıllıca olsa da (çoğu durumda içeriği yayından kaldırmaları yeterlidir ve içeriği silmek onu kurtarılamaz hale getirir), onlara izin vermemiz gerekir. "Paragraf Türü İzinleri" altındaki Paragraf türleri içeriğini silmek için. Bu gereklidir, çünkü bu tür içeriği silemezlerse ve yanlışlıkla belirli bir makalede gerçekten ihtiyaç duymadıkları herhangi bir içeriği Paragraflar türü aracılığıyla eklemek için tıklarlarsa, bu birimi kaldırmanın bir yolu olmayacaktır. makaleden içerik. Backspace tuşunun kullanımına izin vermemeye benzer.

Yeni izinlerimizi test etmek için İçerik oluşturucu rolüne sahip yeni bir kullanıcı oluşturacağız ve bu kullanıcı olarak yeni bir makale ekleme sürecinden geçeceğiz.

  • Kişiler'e gidin ve "Kullanıcı ekle"yi tıklayın.
  • Kolayca hatırlayabileceğiniz bir parola ile Mary adında bir kullanıcı oluşturun (e-posta adresini atlayabilirsiniz).
  • Kullanıcının durumunun "Etkin" olarak işaretlendiğinden ve en önemlisi, bu kullanıcı için "İçerik oluşturucu" rolünü kontrol ettiğinizden emin olun.
  • Ardından "Yeni hesap oluştur"u tıklayın.
  • Oturumu kapatın ve Mary olarak tekrar oturum açın. İzinler doğru şekilde atanmışsa, yönetici araç çubuğuna erişiminiz olmalıdır.
  • Yönetim bağlantılarını ("İçerik", "Yapı" vb.) görmüyorsanız araç çubuğunda "Yönet"e tıklayın.
  • Ardından İçerik'e gidin ve Makale türünde yeni bir içerik parçası ekleyin. Y
  • Bu makaleye “Brokoli Sizin İçin Harika” başlığını verebilirsiniz.
  • Bir Gövde metni alanı ekleyin ve bir metin girin.
  • Ardından, oluşturduğumuz her Paragraf türünün içeriğini eklemeye çalışmalısınız: Ortalanmış görüntü, Altyazılı ortalanmış görüntü, Bilgi kutusu ve Artıları ve eksileri.
  • Bunu yaptıktan sonra makaleyi kaydedin ve görüntüleyin. Bu tam süreç, site yöneticisi olarak yaptığımız zamankiyle aynı olmalıdır ve ardından tüm içeriği sorunsuz bir şekilde görüntüleyebilmelisiniz.

Bunlardan birini veya birkaçını ekleme seçeneğiniz yoksa veya bunu yapmaya çalışırken başka sorunlarla karşılaşırsanız, İçerik oluşturucu rolüne verirken gerekli izinlerden birini veya birkaçını kaçırmış olabilirsiniz. İçerik oluşturucu izinlerine geri dönün ve onlara yukarıda listelenen tüm izinleri, özellikle de "Paragraf Türü İzinleri" başlığı altındaki izinleri verdiğinizden emin olun.


Paragraflar Eğitimini Tamamlama

Bir İçerik oluşturucu olarak Paragraflar içeriğini kullanarak içerik oluşturabileceğinizi ve görüntüleyebileceğinizi onayladığınızda, bu öğreticiyi tamamlamış olursunuz. Bu noktada Paragraflar modülünü neden ve nasıl kullanacağınızı anlamalısınız.

Özetlemek gerekirse, bu modülün kullanışlılığı, içerik oluşturucuları şeyleri kendi başlarına şekillendirmeye zorlamadan, ek bilgi kutuları ve alt yazıları olan ortalanmış görüntüler gibi özel makale içi içerik bileşenlerini tanımlama yeteneğimizde yatmaktadır.

Paragraflar ile, sadece makalelerimizin bu bölümleri için içerik sağlamaları istenir ve biz geliştiriciler olarak, bu içeriğin nasıl görüntülenmesi gerektiğine dair site çapında kurallar (CSS kullanarak) yazabiliriz. Bu, teknik bilgisi olmayan kullanıcılar için içerik oluşturma sürecini kolaylaştırır ve bu tür içeriğin hem teknik hem de teknik olmayan kullanıcılar için daha tutarlı görünmesini sağlar.