WordPress'te Farklı Kategorileri Benzersiz Şekilde Nasıl Stillendirirsiniz?

Yayınlanan: 2017-09-20

Tasarım her zaman UI'nin en önemli yönlerinden biri olmuştur. İyi bir kullanıcı arayüzü, sitenize daha fazla ziyaretçi ve nihayetinde sizin için daha fazla gelir sağlayacaktır.

Bugün milyonlarca canlı web sitesi var ve sitenizi rakiplerinizden farklı olacak kadar benzersiz hale getirmelisiniz.

WordPress Ne Kadar Popüler?

Web sitenizi oluşturmanın birçok yolu vardır, ancak web siteniz için seçtiğiniz platform, ne kadar özelleştirme yapabileceğinizi belirlemede önemli bir faktör olabilir. Aralarından seçim yapabileceğiniz birçok platform var ama wordpress basitliği ve kişiselleştirme yeteneği nedeniyle dünyadaki en popüler CMS'lerden biridir. WordPress kullanımı Wix veya Squarespace kadar basit olmayabilir, ancak özelleştirme gücü onu bu kadar popüler kılıyor.

Bu Kadar Popüler Olmanın Sorunu Nedir?

WordPress'in çok büyük bir topluluğu (çok yardımcı olan) vardır ve wordpress yolculuğunuz sırasında karşılaşabileceğiniz herhangi bir soruna çözüm bulabilirsiniz. Topluluk bilgi ve kaynaklarla doludur, ana kaynaklardan biri wordpress temalarıdır. wordpess.org kütüphanesinde binlerce ücretsiz tema bulabilirsin ve sayıları her geçen gün artıyor.

WordPress'in popüler olduğu kadar farklı bir şekilde popüler olmasıyla ilgili bir sorun var, çünkü bir tema farklı web sitelerinde birçok kez kullanılabildiğinden, o temayı kullanan siteler biraz benzer görünecektir. Bu nedenle, temayı olduğu gibi kullanırsanız sitenizin benzersizliği olmayabilir.

Kategorileri Neden Farklı Biçimde Biçimlendirmek İstiyorsunuz?

Genellikle bir blogda veya zengin içerikli bir sitede farklı konular farklı kategorilere ayrılır. Bu, bir ziyaretçinin belirli bir konuyla ilgili tüm bilgileri alabileceği ve size kategorileri benzersiz bir şekilde sunarak onlara harika bir deneyim yaşatma şansı veren sayfadır.

Bu nedenle, her kategoriyi farklı şekilde şekillendirmek, aynı temayı kullanıyor olsalar bile, rakiplerinize göre size bir avantaj sağlayabilir.

Fark, her kategori için farklı düzenler kadar farklı renkler kadar basit olabilir.

Bunu nasıl yapabileceğinizi görelim.

Kategorilere Stil Vermenin Yolları

Ücretsiz temaların yanı sıra farklı pazar yerlerinden premium temalar satın alabilirsiniz. Genellikle bu temalar özel özelliklerle yüklenir, ancak o zaman bile çoğu size kategorilerinizi farklı şekilde biçimlendirme seçenekleri sunmaz.

Bir tema bir web sitesinden diğerine farklı şekilde kullanılabildiğinden, tema yazarı temayı nasıl kullanacağınızı bilemez.

Yani kategorileri nasıl farklı şekilde şekillendireceğinizi bilmelisiniz, bunu yapmanın iki yolu vardır.

şablonlarla
CSS ile

Şimdi her birini farklı kullanım durumları ile görelim.

Şablonlarla

Düzende yapısal bir değişiklik yapmak istiyorsanız şablonları kullanmanız gerekir. İster kenar çubuğu olsun, ister tam genişlikte sayfa olacak, şablonlarla sayfanızın düzenini kontrol edebilirsiniz.

Çocuk Teması Üzerinde Çalışmalı

Şablonları kullanmanın ön koşullarından biri, alt temalar kullanmanız gerektiğidir. Ana temada çalışmayacağından değil, ana temayı değiştirmenin sorunu şu ki oradaki dosyaları kontrol edemiyorsunuz, tema güncellendiğinde tüm değişiklikleriniz kaybolacak.

Bazı alt temalara hazır premium temalar kullanabilirsiniz, ancak genellikle herhangi bir alt tema içermeyen ücretsiz temalar kullanıyorsanız bir tane oluşturmanız gerekir. Alt temanızı hazırladıktan sonra artık kategori şablonlarınızı oluşturabilirsiniz.

Kategori Şablonu Nasıl Oluşturulur

WordPress, belirli bir hiyerarşik sırayı takip eden bir şablon sistemi üzerinde çalışır. Kategori şablonları oluşturmak için bu şablon hiyerarşisini bilmeniz gerekir.

Kategori için hiyerarşik sıra şöyledir.

category-slug.php → category-id.php → category.php → archive.php → index.php

Sıralamaya göre wordpress, category-slug.php , burada slug kategori adı anlamına gelir, varsayalım ki photoshop adında bir kategoriniz var, bu yüzden o dosya yoksa ilk önce category-photoshop.php arayacaktır, category-id.php -'yi arayacaktır. category-id.php yani kategori kimliğine sahip herhangi bir dosyayı arayacaktır, örneğin category-3.php bu dosya mevcut değilse category.php arayacaktır, eğer bu dosya da eksikse, archive.php dosyasını şablon olarak kullanmaya çalışacaktır. Eğer bu bulunamadıysa, o zaman nihayet temel şablonu olarak index.php kullanacaktır.

Bir kategori şablonu yapmak için, temanızda category.php dosyasını bulmanız gerekir, temaların çoğunda category.php dosyası bulunur, ancak onu bulamazsanız, o zaman archive.php dosyasını arayın.

Not: Bazı çerçevelerde bu dosyaları hiç bulamayabilirsiniz, çünkü bu belirli çerçeveler kılavuzunu izlemeniz gerekir.

Şimdi bir alt tema üzerinde çalıştığınızı varsayarsak, ana temadan category.php veya archive.php dosyasını kopyalayın ve alt temanın aynı klasör konumuna yapıştırın.

Category Template

Örneğin, gerekli dosyayı ana temanın kök dizininde bulduysanız, onu bir alt klasördeyse benzer şekilde alt temanın kök dizinine yerleştirmelisiniz, ardından aynı ada sahip bir alt klasör oluşturun ve oraya yapıştırın.

Şimdi, diyelim ki photoshop adında bir kategoriniz var, alt temadaki yeni dosyayı bu category-photoshop.php gibi yeniden adlandırın ve işte bu kadar photoshop kategorisi bu şablonu kullanacak.

Şimdi bir örnek üzerinden görelim.

Not: Örneklerimiz için burada wordpress yirmi on yedi temasını kullanacağız, süreç herhangi bir tema üzerinde çalışacak ancak html yapısı temadan temaya farklılık gösterecektir.

Şimdi bir kategori şablonu oluşturduk, hadi biraz özelleştirme yapalım.

Mevcut şablonun nasıl göründüğüne bakın.

Current Category Layout

İşte bunu başarmaya çalışıyoruz.

New Category Layout

Basit yapı

Yirmi onyedi temanın iki sütun düzeni var ama biz tek bir sütun düzeni istiyoruz, bu şablonu kenar çubuğu olmadan tam genişlikte yapacağız.

Yirmi onyedi temada category.php dosyası yok, bu yüzden temel şablonumuz olarak archive.php kullandık ve onu category-photoshop.php olarak adlandırdık.

Eski kod (archive.php).

[php]
<?php
/**
* Arşiv sayfalarını görüntülemek için şablon
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @paket WordPress
* @subpackage Twenty_Seventeen
* @1.0'dan beri
* @sürüm 1.0
*/

get_header(); ?>

<?php if ( have_posts() ) : ?>
<header class="sayfa-başlığı">
<?php
the_archive_title('<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="taxonomy-description">', '</div>');
?>
</header><!– .page-header –>
<?php endif; ?>

<?php
if ( have_posts() ) : ?>
<?php
/* Döngüyü Başlat */
while ( have_posts() ) : the_post();

/*
* İçerik için Post-Format'a özel şablonu ekleyin.
* Bunu bir alt temada geçersiz kılmak istiyorsanız, bir dosya ekleyin
* content-___.php olarak adlandırılır (burada ___ Gönderi Biçimi adıdır) ve bunun yerine bu kullanılacaktır.
*/
get_template_part( 'şablon-parçaları/yazı/içerik', get_post_format());

son zaman;

the_posts_pagination( dizi(
'prev_text' => yirmiseventeen_get_svg( dizi( 'icon' => 'sol ok') ) . '<span class="screen-reader-text">' . __( 'Önceki sayfa', 'yirmiyedi') . '</span>',
'next_text' => '<span class="screen-reader-text">' . __( 'Sonraki sayfa', 'yirmiyedi') . '</span>' . yirmiseventeen_get_svg( dizi( 'icon' => 'sağ ok') ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Sayfa', 'yirmiyedi') . ' </span>',
) );

Başka :

get_template_part( 'şablon-parçaları/gönderi/içerik', 'yok');

endif; ?>

</main><!– #ana –>
</div><!– #birincil –>
<?php get_sidebar(); ?>
</div><!– .wrap –>

<?php get_footer();
[/php]

Yeni kod (category-photoshop.php).

[php]
<?php
/**
* Photoshop sayfalarını görüntülemek için şablon
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @paket WordPress
* @subpackage Twenty_Seventeen
* @1.0'dan beri
* @sürüm 1.0
*/

get_header(); ?>

<?php
if ( have_posts() ) : ?>
<?php
/* Döngüyü Başlat */
while ( have_posts() ) : the_post();

son zaman;

Başka :

get_template_part( 'şablon-parçaları/gönderi/içerik', 'yok');

endif; ?>

</main><!– #ana –>
</div><!– #birincil –>
</div><!– .wrap –>

<?php get_footer();
[/php]

Burada <?php get_sidebar(); ?> kaldırdığımı görebilirsiniz. <?php get_sidebar(); ?> çünkü bu şablonun kenar çubuğu olmayacak.

Bu, kenar çubuğunu kaldıracak, ancak düzen hala tam genişlikte değil, bazı CSS ayarlamaları yapmamız gerekiyor. Tüm CSS ayarlarının ana temaya değil, alt temalar CSS dosyalarına yapılacağını unutmayın.

WordPress, bu category-photoshop gibi gövdedeki kategori adıyla her kategoriye benzersiz bir sınıf ekler, sayfayı biçimlendirmek için o sınıfı hedefleyebilirsiniz.

Category Class Name

CSS:

[css]
@medya ekranı ve (min-genişlik: 48em) {
.category-photoshop #birincil {
yüzer: yok;
genişlik: %100;
}
}
[/css]

media query yalnızca ana tema stil sayfasıyla eşleştirmek için kullanma.

Kategori Açıklaması Ekleme

Kategoriler bölümüne açıklama ekleyerek her kategorinin ek açıklamasını gösterebilirsiniz. Ek bilgi sağlamak, ziyaretçilerin konuyu daha iyi anlamasına yardımcı olur, ancak her kategori için benzersiz bir görünüm vererek bu bölümü daha ilginç hale getirebilirsiniz.

Tasarımımıza göre, sol tarafta özel bir resme ve sağ tarafta açıklama ile kategori adına ihtiyacımız olacak.

[php]
<?php
/**
* Photoshop kategorisini görüntülemek için şablon
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @paket WordPress
* @subpackage Twenty_Seventeen
* @1.0'dan beri
* @sürüm 1.0
*/

get_header(); ?>

<?php if ( have_posts() ) : ?>
<header class="sayfa-başlığı">
<div class="header-category-img"><img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/photoshop-banner.jpg" alt="Photoshop"></div>
<div class="header-category-title">
<h1 class="sayfa başlığı"><?php single_term_title()?></h1>
<?php
the_archive_description( '<div class="taxonomy-description">', '</div>');
?>
</div>
</header><!– .page-header –>
<?php endif; ?>

<?php
if ( have_posts() ) : ?>
<?php
/* Döngüyü Başlat */
while ( have_posts() ) : the_post();

son zaman;

Başka :

get_template_part( 'şablon-parçaları/yazı/içerik-photoshop', 'yok');

endif; ?>

</main><!– #ana –>
</div><!– #birincil –>
</div><!– .wrap –>

<?php get_footer();
[/php]

CSS:

[css]
.page-header {
sınır-alt: 1 piksel katı #ccc;
kutu boyutlandırma: kenarlık kutusu;
kenar boşluğu-alt: 1.5em;
alt dolgu: 0,5em;
}
.header-category-title {
yüzer: sol;
üst dolgu: 15 piksel;
genişlik: %85;
}
.header-category-img {
yüzer: sol;
genişlik: %15;
}
[/css]

Page Header

page-header bölümünde epeyce değişiklik yaptığımı görebilirsiniz, ancak en önemlisi single_term_title() çünkü bu Photoshop gibi Kategori:Photoshop yerine yalnızca kategori adını görüntülemek istiyorum.

Hareketli.

Kutu Görünümü

Bir sütun düzeni yapmak gibi temel değişiklikleri yaptık ve kategori açıklama bölümünü değiştirdik, şimdi biraz daha gelişmiş bir şey yapalım, gönderi listesini liste görünümünden sütun başına 3 öğeli bir çerçeve veya kutu görünümüne dönüştüreceğiz.

Bu değişiklikleri yapmak için get_template_part yolunu değiştirmemiz gerekiyor çünkü içerik burada farklı bir konumdan çağrılıyor, ancak bazı temalarda içeriğin doğrudan temel şablona yerleştirildiğini görebilirsiniz.

[php]
get_template_part( 'şablon-parçaları/post/içerik-photoshop', get_post_format());
[/php]

Şimdi bu içerik sayfasını değiştirmek için dosyayı ana temadan alt temaya kopyalamanız ve aynı klasör yapısına yerleştirmeniz ve ardından istediğiniz gibi yeniden adlandırmanız gerekir.

Burada ana temadan content.php dosyasını kopyaladım ve alt temaya content-photoshop.php olarak yapıştırdım. Yeniden adlandırılmıştır çünkü burada yapılacak her türlü değişiklik yalnızca bu şablonu etkileyecektir.

Content Template

Kod (content-photoshop.php).

[php]
<?php
/**
* Photoshop gönderilerini görüntülemek için şablon bölümü
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @paket WordPress
* @subpackage Twenty_Seventeen
* @1.0'dan beri
* @sürüm 1.2
*/

<article id="post-<?php the_ID(); ?>" <?php post_class("üçte bir"); ?> >
<?php
if ( is_sticky() && is_home() ) :
yankı yirmiseventeen_get_svg( array( 'icon' => 'parmak işareti' ) );
endif;
?>
<?php if ( ” !== get_the_post_thumbnail() && ! is_single() ) : ?>
<div class="post-küçük resim">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'yirmi onyedi özellikli resim'); ?>
</a>
</div><!– .post-thumbnail –>
<?php endif; ?>
<header class="entry-header1">
<?php
if ( is_single() ) {
the_title( '<h1 class="entry-title">', '</h1>' );
} elseif ( is_front_page() && is_home() ) {
the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) .'" rel="bookmark">', '</a></h3>' );
} Başka {
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) .'" rel="bookmark">', '</a></h2>' );
}
if ( 'post' === get_post_type() ) {
echo '<div class="giriş-meta">';
if ( is_single() ) {
yirmiyediteen_posted_on();
} Başka {
yankı yirmiseventeen_time_link();
yirmiyediteen_edit_link();
};
echo '</div><!– .entry-meta –>';
};
?>
</header><!– .entry-header –>

<div class="giriş içeriği">
<?php
/* çevirmenler: %s: Geçerli gönderinin adı */
if ( is_single() ) :
the_content(sprintf(
__( 'Okumaya devam et<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen'),
get_the_title()
) );

ks29so_link_pages( dizi(
'before' => '<div class="page-links">' . __( 'Sayfalar:', 'yirmiyedi'),
'sonra' => '</div>',
'link_before' => '<span class="page-number">',
'link_after' => '</span>',
) );
Başka:

the_excerpt(sprintf(
__( 'Okumaya devam et<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen'),
get_the_title()
) );

<?php
if ( is_single() ) {
yirmiyediteen_entry_footer();
}
?>

</makale><!– #post-## –>
[/php]

Şimdi burada dikkat edilmesi gereken birkaç şey var ki, makale bölümüne one-third özel bir sınıf ekledim ve kutu görünümü için içerik türünü excerpt olarak değiştirdim, diğer yapısal değişiklikler kendiliğinden açıklayıcıdır.

CSS:

[css]
.category-photoshop ana{
kenar boşluğu:0 -15 piksel;
}
.üçte bir {
kutu boyutlandırma: kenarlık kutusu;
yüzer: sol;
dolgu: 0 15 piksel;
genişlik: %33.333;
}
.üçte bir .post-container {
kenarlık: 1px düz #ccc;
dolgu: 10 piksel;
}
.üçte bir .küçük resim sonrası{
kenar boşluğu-alt:0;
}
.üçte bir h2{
kenar boşluğu-alt:0.2em;
}
[/css]

Şimdi bu düzen nasıl görünüyor.

New Category Layout

Yalnızca CSS ile

Eğer php kodu konusunda rahat değilseniz, o zaman bile kategori sayfalarını yalnızca CSS ile stilleyebilirsiniz, ancak bu değişiklikler, kodu ekleyemeyeceğiniz veya değiştiremeyeceğiniz bir şekilde sınırlandırılacaktır, yalnızca mevcut öğeleri stilleyebilirsiniz.

Bu sınırlamalarla bile kategori sayfalarınızı nasıl benzersiz hale getirebileceğinizi bir örnek üzerinden görelim.

Diyelim ki wordpress kategorimizi bundan yola çıkarak şekillendirmek istiyoruz.

Old WordPress Category

buna.

New WordPress Category

Temel Stil

Wordpress'in sağladığı sınıfı hedefleyerek CSS ile arka plan rengini çok kolay bir şekilde değiştirebilirsiniz.

Bunun gibi bir şey.

CSS:

[css]
.category-wordpress .site-content-contain {
arka plan rengi:#eaeaea;
}
[/css]

Kategori Başlığına Simge Ekleme

Arka plan resimleri ile her kategoriye benzersiz simgeler ekleyebilirsiniz, burada gereksinime göre yalnızca wordpress kategorimize bir tane ekleyeceğiz.

CSS:

[css]
.category-wordpress .page-header {
sınır-alt: 1 piksel katı #ccc;
kenar boşluğu-alt: 1.5em;
alt dolgu: 0,5em;
}
.category-wordpress .page-header h1{
background:url("assets/images/wordpress-logo.png") tekrarsız sol merkez;
alt dolgu:5px;
sol dolgu:35px;
}
[/css]

Tam Genişlikte Sayfa Yapma

İki veya daha fazla sütun sayfasını en azından görsel olarak CSS aracılığıyla tam genişlikte bir sayfaya dönüştürebilirsiniz.

CSS:

[css]
.category-wordpress:değil(.error404) #birincil{
yüzer: yok;
genişlik: %100;
}

.category-wordpress #ikincil{
görüntü yok;
}
[/css]

Bunun bir CSS hilesi olduğunu biliyorum ve en iyi uygulama olarak önerilmez, ancak şablonlarla çalışma konusunda kendinize yeterince güvenmiyorsanız, özellikle bu şekilde tasarım hedefinize ulaşabilirsiniz.

Hidden Element

Ancak şablonlarla çalışabiliyorsanız, bu tam genişlikte sayfa oluşturma yöntemi bir kısayol olarak önerilmez çünkü yaptığınız tek şey, DOM'da kalırken tarayıcıda görünmesini engellemektir.

Çözüm

Gördüğünüz gibi, farklı kategorilere stil vermek için çok şey yapabilirsiniz ve yukarıda belirtilen örnekler sadece bir başlangıç noktasıdır ancak olasılıklar, şablonlar ve CSS ile çalışma yeteneğinize bağlıdır. Beceri seviyenize bağlı olarak, kategorilerinizi nasıl şekillendirmek istediğinizi seçebilirsiniz.

Öyleyse, farklı kategorileri farklı şekilde şekillendirmenin başka yollarını biliyor musunuz, aşağıdaki yorumlar bölümünde bize bildirin.