WordPress'te Tam Genişlikte Sayfa Nasıl Oluşturulur (Başlangıç ​​Kılavuzu)

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

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

Bu makalede, WordPress'te kolayca tam genişlikte bir sayfanın nasıl oluşturulacağını ve hatta herhangi bir kod olmadan tamamen özel sayfa düzenlerinin nasıl oluşturulacağını göstereceğiz.

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

Temanız zaten tam genişlikte bir sayfa şablonuyla geliyorsa, bunu kullanmak en iyisidir. Hemen hemen tüm iyi WordPress temaları yapar.

En iyi ücretsiz WordPress temaları bile genellikle tam genişlikte bir şablonla gelir, bu nedenle zaten bir şablona sahip olma ihtimaliniz yüksektir.

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

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

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

Burada gördüğünüz seçenekler temanıza göre farklılık gösterecektir. Temanızın tam genişlikte bir sayfa şablonu yoksa endişelenmeyin.

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

Yöntem 2. Bir Eklenti Kullanarak Tam Genişlikte Sayfa Şablonu Oluşturun

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

İlk olarak, Fullwidth Templates eklentisini kurmanız ve etkinleştirmeniz gerekir. Bunu nasıl yapacağınızdan emin değilseniz, bir WordPress eklentisi yüklemeye yönelik başlangıç ​​kılavuzumuza bakın.

Fullwidth Templates eklentisi, sayfa şablonlarınıza üç yeni seçenek ekleyecektir:

Bu seçenekler şunlardır:

• FW Kenar Çubuğu Yok: Kenar çubuğunu sayfanızdan kaldırır, ancak diğer her şeyi olduğu gibi bırakır
• FW Fullwidth: kenar çubuğunu, başlığı ve yorumları kaldırır ve düzeni tam genişliğe kadar uzatır
• FW Fullwidth No Header Footer: FW Fullwidth'in yaptığı her şeyi, ayrıca üstbilgi ve altbilgiyi kaldırır

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

Bu eklenti, tam genişlikte sayfa şablonu oluşturmanıza izin verirken, sınırlı özelleştirme seçenekleriniz var.

Tam genişlikte şablonunuzu herhangi bir kod olmadan özelleştirmek istiyorsanız, bir sayfa oluşturucu kullanmanız gerekir.

Yöntem 3: Sayfa Oluşturucu Eklentisi kullanarak WordPress'te Tam Genişlikte Sayfa Tasarlayın

Temanızın tam genişlikte bir şablonu yoksa, tam genişlikte bir şablon oluşturmanın ve özelleştirmenin en kolay yolu budur.

Sürükle ve bırak arayüzü ile tam genişlikteki sayfanızı kolayca düzenlemenize ve web siteniz için farklı sayfa düzenleri oluşturmanıza olanak tanır.

Bu yöntem için bir WordPress sayfa oluşturucu eklentisine ihtiyacınız olacak. Bu eğitimde Beaver Builder'ı kullanacağız. En iyi sürükle ve bırak sayfa oluşturucu eklentilerinden biridir ve herhangi bir kod yazmadan kolayca sayfa düzenleri oluşturmanıza olanak tanır.

İlk önce Beaver Builder eklentisini kurun ve etkinleştirin. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, mevcut bir sayfayı düzenleyin veya yeni bir tane oluşturun.

Ekranınızın sağ tarafındaki 'Belge' bölmesinde, 'Sayfa Nitelikleri'ne gidin ve açılır menüden tam genişlikte bir şablon seçin.

Ardından, ekranınızın ortasındaki 'Beaver Builder'ı Başlat' düğmesini tıklayın.

Şimdi, sayfanızı oluşturmak için Beaver Builder'ın sürükle ve bırak arayüzünü kullanın.

Başlamak için iyi bir yol, üstteki Şablonlar sekmesine tıklamaktır. Tam genişlikteki sayfanız için temel olarak kullanmak üzere önceden hazırlanmış şablonlardan birini seçin.

Seçmek için bir şablona tıklayın ve sayfa oluşturucu onu yükleyecektir. Ardından, değiştirmek istediğiniz görüntüler gibi öğelerden herhangi birini düzenleyebilirsiniz.

Beaver Builder düzenleri, satırlar ve modüller ile oluşturulmuştur. Her satırın birden çok sütunu olabilir ve her satırın içine içerik modülleri ve widget'lar ekleyebilirsiniz.

Mizanpajda bir satırı veya modülü düzenlemek için üzerine tıklamanız yeterlidir. Bu durumda Başlık modülünü düzenliyoruz:

Beaver Builder, ayarlarını düzenleyebileceğiniz bir açılır pencerede öğe ayrıntılarını açacaktır. Metni değiştirebilir, yazı tiplerini ve renkleri değiştirebilir, arka plan resimleri ekleyebilir veya değiştirebilir ve daha fazlasını yapabilirsiniz.

Düzeninize istediğiniz zaman modüller ve widget'lar ekleyebilirsiniz. Beaver Builder, sayfanıza sürükleyip bırakabileceğiniz birçok temel ve gelişmiş içerik modülüyle birlikte gelir.

Düzenlemeyi bitirdikten sonra, sayfanın üst kısmındaki 'Bitti'yi tıklayın. Ardından taslağınızı kaydedebilir veya yayınlayabilirsiniz.

Artık tam genişlikteki sayfanızı görmek için sayfanızı ziyaret edebilirsiniz.

Yöntem 4. SeedProd ile Tamamen Özel Tam Genişlikli Açılış Sayfaları Oluşturun

Beaver Builder düzgün bir çözüm olsa da web sitenizi yavaşlatma potansiyeline sahiptir.

Üstbilgiyi, altbilgiyi 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 ve bırak sayfa oluşturucu arayüzü ile birlikte gelir.

İlk olarak, SeedProd eklentisini kurmanız ve etkinleştirmeniz gerekir.

Etkinleştirmeden sonra, yeni bir açılış sayfası eklemek için SeedProd »Sayfalar'a gidin. Önceden oluşturulmuş birçok şablonundan birini seçebilir veya sıfırdan özel bir açılış sayfası oluşturabilirsiniz.

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

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

Yukarıdaki yöntemlerden hiçbiri sizin için işe yaramazsa, bu yöntem son çaredir. WordPress tema dosyalarınızı düzenlemenizi gerektirir. PHP, CSS ve HTML hakkında bazı temel bilgilere ihtiyacınız olacak.

Bunu daha önce yapmadıysanız, WordPress'te kodun nasıl kopyalanacağı / yapıştırılacağı ile ilgili kılavuzumuza bir göz atın.

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

Ardından, Not Defteri gibi bir düz 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. Bir .txt dosyası olarak kaydetmemek için 'Farklı kaydet türü' seçeneğini 'Tüm Dosyalar' olarak değiştirmeniz gerekebilir:

Bu kod sadece bir şablon dosyasının adını tanımlar ve WordPress'ten başlık ş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/'a gidin.

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

O dosyayı açın ve get_header() satırından sonraki her şeyi kopyalayın ve 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 getirir ve temanızda görüntüler. Bunu silmek, tam genişlikte şablonu kullanırken temanızın kenar çubuğunu göstermesini engeller.

Bu satırı temanızda bir kereden fazla görebilirsiniz. Temanızın birden fazla kenar çubuğu varsa (altbilgi pencere öğesi alanlarına kenar çubukları da denir), kodda her bir kenar çubuğuna bir kez başvurulduğunu görürsünüz. 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 full-width.php kodumuzun tamamı şu şekilde 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, FTP istemcinizi kullanarak full-width.php dosyasını tema klasörünüze yükleyin.

Şimdi başarıyla oluşturdunuz ve temanıza özel bir tam genişlikte sayfa şablonu yüklediniz. 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üzenleyicide yeni bir sayfa düzenleyin veya oluşturun.

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

Bu ş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 bir sütun olarak göründüğünü göreceksiniz. Henüz tam genişlikte olmayabilir, ancak artık onu farklı bir şekilde şekillendirmeye hazırsınız.

İçerik alanını tanımlamak için temanız tarafından kullanılan CSS sınıflarını bulmak için İnceleme aracını kullanmanız gerekecektir.

Bundan sonra genişliğini CSS kullanarak %100'e ayarlayabilirsiniz. Görünüm » Özelleştir'e gidip ekranın altındaki 'Ek CSS'yi tıklayarak CSS kodunu 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;
}

Twenty Sixteen temasını kullanarak demo sitemizde nasıl göründüğü aşağıda açıklanmıştır.

Manuel yöntemi kullanmak ve daha fazla özelleştirme yapmak istiyorsanız, CSS stillerini bir tıkla ve tıkla düzenleyiciyle değiştirmenize izin veren CSS Hero eklentisini de kullanabilirsiniz.

Ancak çoğu kullanıcı için kendi temanızın tam genişlikteki şablonunu 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 kılavuzumuzu ve kurslar oluşturmak ve satmak için en iyi WordPress LMS eklentilerini karşılaştırmamızı görmek isteyebilirsiniz.

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