Divi Arşiv Sayfalarınıza Duvar Düzeni Nasıl Verilir?

Divi 100 Maratonumuzun 78. Gününe hoş geldiniz. Serinin son gününde muhteşem Divi 3.0 sürümüne geri sayarken, 100 gün boyunca muhteşem Divi kaynaklarını izlemeye devam edin!

Bugünkü gönderide, ortak bir destek forumu sorusunun cevabını paylaşacağım: Arşiv sayfası düzenlerimi blogun duvar düzeniyle nasıl eşleştirebilirim? Neyse ki, destek ekibimiz, bu gibi sorulara yaratıcı çözümler bulmak için kurcalamayı ve ekstra yol kat etmeyi seviyor. İşte bu yüzden onlardan Divi öğretici fikirleri istediğimde, bu çözüm bekleme modunda zaten vardı – tüm toplulukla paylaşmaya hazır!

Divi Arşiv Sayfalarınıza Duvar Düzeni Nasıl Verilir?

Varsayılan olarak, blogunuzun stiline bakılmaksızın, arşiv sayfalarınız yukarıdaki resimdeki gibi görünecektir. Blogları duvarcılık olarak ayarlanmış birinin de blog sayfası arşivlerinin aynı tarzda görüntülenmesini istemesi anlaşılabilir bir durum. Aşağıda sizlerle paylaştığımız kodu uyguladıktan sonra arşiv sayfalarınız aşağıdaki görsele benzeyecek ve standart blog duvarcılık stiline tam olarak uyacaktır.

Snippet'lere dalmadan önce, birkaç tür arşiv sayfası olduğunu unutmamak önemlidir. Site içi arama sonuçlarınızın doldurulduğu arama arşivi sayfası vardır; sonra bir yazarın tüm gönderilerinin doldurulduğu yazar arşiv sayfanız var; ve elbette, tek bir kategorideki tüm gönderilerin doldurulduğu kategori arşiv sayfaları var. Bu gönderide sağladığımız kod parçacıkları, Divi ile birlikte gelen tüm blog gönderisi türleri/formatları için tüm bu arşiv sayfalarını etkileyecektir.

Eklememiz gereken ilk snippet ve işin çoğunun yapıldığı yer, aşağıdaki css snippet'idir. Bunu Divi > Tema Seçenekleri > Genel Sekmesi altındaki tema seçenekleri CSS panelinize kopyalayıp yapıştırmak isteyeceksiniz. Bu snippet, kenar çubuğunu arşiv sayfalarından kaldırır ve sayfa düzenini ve ayrıca bireysel "makale kartı" stillerini blog duvar stilleriyle eşleşecek şekilde değiştirir.

/*
* Remove sidebar on all archive pages
*/
.search #main-content .container::before,
.archive #main-content .container::before {
    display: none;
}
.search #left-area,
.archive #left-area {
    width: 100%;
    float: none;
    padding-right: 0;
}
.search #sidebar,
.archive #sidebar {
    display: none;
}

/* 
* Create Mansonory styles for archive pages
*/
.search #left-area,
.archive #left-area {
    -moz-column-count: 3;
         column-count: 3;
	-moz-column-gap: 60px;
	     column-gap: 60px;
}

.archive .et_pb_post > a,
.search .et_pb_post > a {
	margin: -20px -20px 10px;
	display: block;
}

.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
	overflow: hidden; /* fix for Firefox */
	page-break-inside: avoid;
	break-inside: avoid-column;
	width: 100%;
	padding: 19px;
	border: 1px solid #d8d8d8;
	background-color: #fff;
	word-wrap: break-word;
	display: inline-block;
}

.search #left-area .et_pb_post h2,
.archive #left-area .et_pb_post h2 {
    font-size: 18px;
}

.search #left-area .et_pb_post.format-link,
.search #left-area .et_pb_post.format-quote,
.search #left-area .et_pb_post.format-audio,
.archive #left-area .et_pb_post.format-link,
.archive #left-area .et_pb_post.format-quote,
.archive #left-area .et_pb_post.format-audio{
    padding: 0;
}

.archive .et_pb_post .et_pb_image_container, 
.archive .et_pb_post .et_main_video_container,
.archive .et_pb_post .et_audio_content, 
.archive .et_pb_post .et_pb_slider,
.search .et_pb_post .et_pb_image_container, 
.search .et_pb_post .et_main_video_container,
.search .et_pb_post .et_audio_content, 
.search .et_pb_post .et_pb_slider {
	margin: -20px -20px 10px;
}

.archive .et_pb_post.format-audio .et_audio_content{
    margin: 0px -38px 0px;
}

.archive .et_pb_post .et_pb_slider .et_pb_slide,
.search .et_pb_post .et_pb_slider .et_pb_slide {
	min-height: 180px;
}

.archive .pagination,
.search .pagination {
	padding: 20px 0;
}

/*
* Media Queries
*/
@media screen and (max-width: 980px) {
	.search #left-area,
	.archive #left-area {
		-moz-column-count: 2;
			column-count: 2;
		-moz-column-gap: 60px;
			column-gap: 60px;
	}
}
@media screen and (max-width: 767px) {
	.search #left-area,
	.archive #left-area {
		-moz-column-count: 1;
			column-count: 1;
	}
	.search .et_pb_post.format-audio .et_audio_content,
	.archive .et_pb_post.format-audio .et_audio_content{
	    margin: 0;
	}
	.search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
	.archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
	.search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total,
	.archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total{
	    min-width: 300px!important;
	    width: 300px!important;
	}
}

Kenar çubuğunun arşiv sayfalarında görünmesini istiyorsanız, “Tüm arşiv sayfalarında kenar çubuğunu kaldır” başlıklı üst kısmı tutmayı veya kaldırmayı seçebilirsiniz. Değilse, snippet'i olduğu gibi tutun. Arşiv sayfalarınızın “eski girdiler” ve “yeni girdiler” yerine numaralandırılmasını da tercih edebilirsiniz. Bunun için WP-Pagenavi eklentisini yüklemenizi öneririz.

Kurulduktan sonra, varsayılan olarak numaralı bir sayfa sayısı sağlayacaktır. Ayarlarında ince ayar yapmak isterseniz, Ayarlar > PageNavi altında bulunurlar.

Ardından, sayfalandırma bağlantılarımızın doğru yerde bulunduğundan emin olmamıza yardımcı olacak biraz JavaScript'imiz var. Aşağıdaki parçacığı Divi > Tema Seçenekleri > Entegrasyon > Blogunuzun < head > bölümüne kod ekle altındaki metin kutusuna girmek isteyeceksiniz.

<script>
(function($) {
	$(document).ready(function() {
		leftarea = $('#left-area');
		pageNavi = leftarea.find('.wp-pagenavi');
		pageNavigation = leftarea.find('.pagination');

		if ( pageNavi.length ) {
			pagenav = $('#left-area .wp-pagenavi');
		}
		else {
			pagenav = $('#left-area .pagination');
		}
		pagenav.detach();
		leftarea.after(pagenav);
	});
})(jQuery)
</script>

Not: Bugünkü gönderideki hem CSS pasajı hem de JavaScript pasajı, destek ekibi üyesi Eduard Ungureanu'nun izniyledir. Destek forumlarında ona rastladıysanız, onun inanılmaz derecede yardımsever bir adam olduğunu bilirsiniz. Bu pasajı faydalı bulduysanız, aşağıdaki yorumlarda ona büyük bir "teşekkür ederim" bıraktığınızdan emin olun!

Yarın: Yeni Bir Divi Tel Kafes Kiti İlavesi (Ürün Bölümleri!)

Yarın başka bir Divi Tel Kafes Kitini açığa çıkaracağız ve dağıtacağız! Bu, ürün bölümlerine odaklanacaktır. Bu kit, sattığınız her şeyi sergilemek için mükemmel sekiz farklı bölüm içerecek. Orada görüşürüz!

Divi 100 Gün 78

Divi 3.0 için Geri Sayım

Bu gönderi Divi 100 maratonumuzun bir parçası. Arka arkaya 100 gün boyunca ücretsiz Divi kaynakları yayınlarken bizi takip edin! Bu 100 günlük geri sayım, sıfırdan React kullanılarak oluşturulan yepyeni görsel düzenleyicimiz de dahil olmak üzere Divi 3.0'ın ezber bozan sürümüyle sona erecek. Divi 3.0, Divi Builder ile web siteleri oluşturma şeklinizi sonsuza kadar değiştirecek!
Geri sayım başlasın.

Divi 3.0 Hakkında Daha Fazla Bilgi Edinin