WordPress'te Tam Genişlikli Bir Sayfa Nasıl Oluşturulur (Başlangıç Rehberi)

WordPress'te, içeriğinizi ekrana yaymak için tam genişlikte bir sayfa oluşturmak ister misiniz?

Çoğu WordPress teması, kullanabileceğiniz yerleşik bir tam genişlikli sayfa şablonuyla birlikte gelir. Ancak, temanızda böyle bir şablon yoksa, eklemek kolaydır.

Bu makalede, WordPress'te kolayca tam genişlikli bir sayfa oluşturmayı ve hatta kod kullanmadan tamamen özel sayfa düzenleri oluşturmayı göstereceğiz.

Bu rehberdeki yöntemlere hızlı bir genel bakış:

• Yöntem 1. Tema Tam Genişlik Şablonunuzu Kullanın
• Yöntem 2. Bir Eklenti Kullanarak Tam Genişlik Sayfa Şablonu Oluşturma
• Yöntem 3: Bir Sayfa Oluşturucu Eklentisi Kullanarak WordPress'te Tam Genişlikte Sayfa Tasarlama
• Yöntem 4. SeedProd ile Tamamen Özel Tam Genişlikli Sayfalar Oluşturma
• Yöntem 5: Tam Genişlikte WordPress Sayfa Şablonunu Manuel Olarak Oluşturma

Yöntem 1. Temanızın Tam Genişlik Şablonunu Kullanın

Temanız zaten tam genişlikte bir sayfa şablonuyla geliyorsa, en iyisi onu kullanmaktır. Neredeyse tüm iyi WordPress temaları bunu yapar.

Hatta en iyi ücretsiz WordPress temaları bile genellikle tam genişlikte bir şablonla gelir, bu nedenle muhtemelen zaten bir tane vardır.

İlk olarak, WordPress kontrol panelinizde Sayfalar » Yeni Ekle'ye giderek bir sayfayı düzenlemeniz veya yenisini oluşturmanız gerekir.

İçerik düzenleyicisinin sağdaki 'Belge' bölmesinde, yanındaki aşağı oka tıklayarak 'Sayfa Nitelikleri' bölümünü genişletmeniz gerekir. Ardından bir 'Şablon' açılır menüsü görmelisiniz.

Temanız için tam genişlikli bir şablonunuz varsa, burada listelenecektir. 'Tam Genişlik Şablonu' gibi bir şey olarak adlandırılmalıdır:

Burada gördüğünüz seçenekler temanıza bağlı olarak farklılık gösterecektir. Temanızda tam genişlikli bir sayfa şablonu olmaması sizi endişelendirmesin.

Aşağıdaki yöntemleri kullanarak kolayca bir tane ekleyebilirsiniz.

Yöntem 2. Bir Eklenti Kullanarak Tam Genişlik Sayfa Şablonu Oluşturma

Bu yöntem en kolay olanıdır ve tüm WordPress temaları ve sayfa oluşturucu eklentileriyle çalışır.

Öncelikle, Fullwidth Templates eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Bunu nasıl yapacağınızdan emin değilseniz, WordPress eklentisi yükleme hakkındaki başlangıç kılavuzumuza göz atın.

Tam Genişlik Şablonları eklentisi, sayfa şablonlarınıza üç yeni seçenek ekleyecektir:

Bu seçenekler şunlardır:

• Kenar Çubuğu Olmadan Geniş: Sayfanızdaki kenar çubuğunu kaldırır, ancak diğer her şeyi olduğu gibi bırakır.
• FW Tam Genişlik: Kenar çubuğunu, başlığı ve yorumları kaldırır ve düzeni tam genişliğe kadar uzatır.
• FW Tam Genişlik Başlık Yok: FW Tam Genişlik'in yaptığı her şeyi kaldırır, artı başlık ve altbilgi.

Yalnızca yerleşik WordPress düzenleyicisini kullanacaksanız, “FW Kenar Çubuğu Yok” muhtemelen en iyi seçenek olacaktır.

Bu eklenti tam genişlikte bir sayfa şablonu oluşturmanıza olanak tanırken, özelleştirme seçenekleriniz sınırlıdır.

Tam genişlikteki şablonunuzu kod kullanmadan özelleştirmek istiyorsanız, bir sayfa oluşturucu kullanmanız gerekir.

Yöntem 3: Bir Sayfa Oluşturucu Eklentisi Kullanarak WordPress'te Tam Genişlikte Sayfa Tasarlama

Tema tam genişlik şablonuna sahip değilse, tam genişlikli bir şablon oluşturmanın ve özelleştirmenin en kolay yolu budur.

Tam genişlikteki sayfanızı kolayca düzenlemenizi ve sürükle bırak arayüzü ile web siteniz için farklı sayfa düzenleri oluşturmanızı sağlar.

Bu yöntem için bir WordPress sayfa oluşturucu eklentisine ihtiyacınız olacak. Bu eğitimde Thrive Architect kullanacağız.

Kod yazmadan kolayca sayfa düzenleri oluşturmanıza olanak tanıyan en iyi sürükle bırak sayfa oluşturucu eklentilerinden biridir.

Öncelikle, Thrive Architect eklentisini kurun ve etkinleştirin. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım rehberimize bakın.

Eklentiyi etkinleştirdikten sonra, WordPress'te mevcut bir sayfayı düzenleyin veya yenisini oluşturun.

Ardından, ekranınızın üst kısmındaki 'Thrive Architect'i Başlat' düğmesine tıklayın.

Ardından, ne tür bir sayfa oluşturmak istediğiniz sorulacaktır. Normal bir sayfa veya hazır bir açılış sayfası oluşturmayı seçebilirsiniz.

Üzerine tıklayarak 'Önceden Oluşturulmuş Açılış Sayfası' seçeneğini seçin.

Bu sizi Thrive Architect'in Açılış Sayfası Kitaplığı'na götürecektir. Buradan, tam genişlikli sayfanızın temeli olarak kullanmak üzere önceden hazırlanmış şablonlardan birini seçebilirsiniz.

Seçmek istediğiniz bir şablona tıklamanız yeterlidir.

'Akıllı Açılış Sayfası Setleri' bölümünden bir şablon seçtiyseniz, artık o stilde önceden tasarlanmış çeşitli sayfalardan birini seçebilirsiniz.

Bu eğitim için, üzerine tıklayarak 'Satış Sayfası' şablonunu seçeceğiz. Ardından, 'Şablonu Uygula' düğmesine basın ve sayfa oluşturucu onu yükleyecektir.

Thrive Architect Düzenleyicisine girdikten sonra, değiştirmek istediğiniz resimler, arka plan, metin gibi öğeleri düzenleyebilirsiniz.

Sayfadaki bir öğeyi düzenlemek için üzerine tıklamanız yeterlidir. Bu durumda, bu sayfa bloğunun arka planına tıkladık. Bu, sol taraftaki menüde tüm özelleştirme seçeneklerini getirir:

Burada, içeriğinizin ekranın tamamını kapladığından emin olmak için anahtarı açıp kapatabilirsiniz.

Sol taraftaki menüden ayrıca tipografiyi, yazı tipi boyutunu, düzeni, arka plan stilini, kenarlıkları, gölgeleri ve çok daha fazlasını özelleştirebilirsiniz.

Düzeninize istediğiniz zaman yeni öğeler ekleyebilirsiniz. Thrive Architect, sayfanıza sürükleyip bırakabileceğiniz birçok temel ve gelişmiş blokla birlikte gelir.

Düzenlemeyi bitirdikten sonra, ekranın altındaki 'İşini Kaydet' düğmesinin yanındaki oka (^) tıklayın. Ardından 'Kaydet ve Yazı Düzenleyiciye Dön' seçeneğine tıklayın.

Taslağınızı kaydedebilir veya yayınlayabilirsiniz.

Yayınlandıktan sonra, bitmiş tam genişlikteki sayfanızı görmek için WordPress blogunuzu ziyaret edebilirsiniz.

Yöntem 4. SeedProd ile Tamamen Özel Tam Genişlikli Sayfalar Oluşturma

Thrive Architect harika bir çözüm olsa da, web sitesi sayfalarınız için daha da güçlü özelleştirme seçenekleri sunan bir eklenti arıyor olabilirsiniz.

Üstbilgi, altbilgi ve sayfanın tüm alanlarını özelleştirmek istediğiniz tamamen özel bir açılış sayfası oluşturmak istiyorsanız, SeedProd kullanmanızı öneririz.

WordPress için en iyi açılış sayfası eklentisidir ve kullanımı çok kolay bir sürükle bırak sayfa oluşturucu arayüzü ile birlikte gelir.

İlk olarak, SeedProd eklentisini yükleyip etkinleştirmeniz gerekir. Etkinleştirdikten sonra, yeni bir açılış sayfası eklemek için SeedProd » Sayfalar bölümüne gidin.

Birçok tam genişlikli seçenek içeren 300'den fazla hazır şablonlarından birini seçebilirsiniz. Veya sıfırdan özel bir tam genişlikli açılış sayfası oluşturabilirsiniz.

SeedProd'un en iyi yanı, son derece hızlı olması ve abone yönetimi, e-posta pazarlama hizmeti entegrasyonu, gelişmiş WooCommerce blokları ve daha fazlası için yerleşik dönüşüm özellikleriyle gelmesidir.

Ayrıntılı talimatlar için, WordPress'te bir açılış sayfası oluşturma kılavuzumuza bakın.

Açılış sayfası oluşturucuya ek olarak, SeedProd ayrıca tam sürükle ve bırak Tema Oluşturucu sunar. Bu, herhangi bir kodu düzenlemeden özel tam genişlikte bir WordPress teması oluşturabileceğiniz anlamına gelir.

Yeni bir WordPress teması oluşturmak için SeedProd » Tema Oluşturucu'ya gidin. Yine, özelleştirilebilir tema şablonlarından birini seçebilir veya temanızın her bölümünü sıfırdan tasarlayabilirsiniz.

Sadece işaretleyip tıklayarak temanızın her bölümünü düzenleyebilirsiniz. Örneğin, yeni bir arka plan resmi ekleyebilir ve konum ile bölüm genişliğini tam ekran olarak ayarlayabilirsiniz.

SeedProd Tema Oluşturucu ile sayfalar, gönderiler, arşivler, üstbilgi, altbilgi, kenar çubukları, WooCommerce sayfaları ve daha fazlası dahil olmak üzere WordPress web sitenizin her bölümünü özelleştirebilirsiniz.

Adım adım talimatlar için, özel bir WordPress teması oluşturma hakkındaki öğreticimizi nasıl kolayca özel bir WordPress teması oluşturulur.

Yöntem 5: Tam Genişlikte WordPress Sayfa Şablonunu Manuel Olarak Oluşturma

Bu yöntem, yukarıdaki yöntemlerin hiçbiri sizin için işe yaramazsa son çaredir. WordPress tema dosyalarınızı düzenlemenizi gerektirir. PHP, CSS ve HTML hakkında temel bir anlayışa sahip olmanız gerekir.

Daha önce bunu yapmadıysanız, WordPress'e web'den kod parçacıkları yapıştırma konusundaki kılavuzumuza göz atın.

Devam etmeden önce, bir WordPress yedeği veya en azından mevcut temanızın bir yedeğini oluşturmanızı öneririz. Bu, bir şeyler ters giderse sitenizi kolayca geri yüklemenize yardımcı olacaktır.

Ardından, Not Defteri gibi düz bir metin düzenleyici açın ve aşağıdaki kodu boş bir dosyaya yapıştırın:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Bu dosyayı bilgisayarınıza full-width.php olarak kaydedin. Dosyayı .txt dosyası olarak kaydetmekten kaçınmak için 'Kayıt türü'nü 'Tüm Dosyalar' olarak değiştirmeniz gerekebilir:

Bu kod yalnızca bir şablon dosyasının adını tanımlar ve WordPress'ten üstbilgi şablonunu getirmesini ister.

Ardından, kodun içerik kısmına ihtiyacınız olacak. Bir FTP istemcisi (veya cPanel'deki WordPress barındırma dosya yöneticiniz) kullanarak web sitenize bağlanın ve ardından /wp-content/themes/your-theme-folder/ konumuna gidin.

Şimdi page.php dosyasını bulmanız gerekiyor. Bu, temanızın varsayılan sayfa şablonu dosyasıdır.

Bu dosyayı açın ve get_header() satırından sonraki her şeyi kopyalayıp bilgisayarınızdaki full-width.php dosyasına yapıştırın.

full-width.php dosyasında şu kod satırını bulun ve silin:

<?php get_sidebar(); ?>

Bu satır, kenar çubuğunu alır ve temanızda görüntüler. Silmek, tam genişlik şablonunu kullanırken temanızın kenar çubuğunu göstermesini durduracaktır.

Bu satırı temanızda birden fazla kez görebilirsiniz. Temanızda birden fazla kenar çubuğu varsa (alt bilgi widget alanlarına da kenar çubuğu denir), her kenar çubuğunun kodda bir kez referans verildiğini göreceksiniz. Hangi kenar çubuklarını tutmak istediğinize karar verin.

Temanız sayfalarda kenar çubukları göstermiyorsa, bu kodu dosyanızda bulamayabilirsiniz.

Değişiklikleri yaptıktan sonra tam genişlikli.php kodumuzun tamamı böyle görünüyor. Kodunuz temanıza bağlı olarak biraz farklı görünebilir.

<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>

	<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) :
			the_post();

			// Include the page content template.
			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_footer(); ?>

Ardından, full-width.php dosyasını FTP istemcinizi kullanarak temanızın klasörüne yükleyin.

Artık temanıza özel tam genişlikte bir sayfa şablonu oluşturdunuz ve yüklediniz. Bir sonraki adım, tam genişlikte bir sayfa oluşturmak için bu şablonu kullanmaktır.

WordPress yönetici alanınıza gidin ve WordPress blok düzenleyicisinde yeni bir sayfa oluşturun veya mevcut bir sayfayı düzenleyin.

Sağdaki 'Belge' bölmesinde 'Sayfa Nitelikleri'ni arayın ve bu bölümü gerekirse genişletmek için aşağı oka tıklayın. Yeni 'Tam Genişlik' şablonunuzu seçebileceğiniz bir 'Şablon' açılır menüsü görmelisiniz:

O şablonu seçtikten sonra sayfayı yayınlayın veya güncelleyin.

Sayfayı görüntülediğinizde, kenar çubuklarının kaybolduğunu ve sayfanızın tek sütun olarak göründüğünü göreceksiniz. Henüz tam genişlikte olmayabilir, ancak artık onu farklı şekilde biçimlendirmeye hazırsınız.

Temanızın içerik alanını tanımlamak için kullandığı CSS sınıflarını bulmak üzere İncele aracını kullanmanız gerekecek.

Bundan sonra, CSS kullanarak genişliğini %100 olarak ayarlayabilirsiniz. CSS kodunu Görünüm » Özelleştir'e gidip ekranın altındaki 'Ek CSS'ye tıklayarak ekleyebilirsiniz.

Test sitemizde aşağıdaki CSS kodunu kullandık:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

Yirmi On Altı temasını kullanarak demo sitemizde böyle görünüyordu.

Manuel yöntemi kullanmak ve daha fazla özelleştirme yapmak istiyorsanız, CSS stillerini tıklayarak düzenlemenizi sağlayan CSS Hero eklentisini de kullanabilirsiniz.

Ancak çoğu kullanıcı için kendi temanızın tam genişlik şablonunu kullanmanızı veya bir tane oluşturmak için bir eklenti kullanmanızı öneririz.

Bu makalenin WordPress'te kolayca tam genişlikte bir sayfa oluşturmayı öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca web sitenizi büyütmek için en iyi WordPress eklentileri hakkındaki rehberimize ve kurs oluşturmak ve satmak için en iyi WordPress LMS eklentilerinin karşılaştırmamıza göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.