Merhaba arkadaşlar, WordPress temamıza eklenti olmadan header (üst kısım) nasıl eklenir? ve header özelleştir bölümünden renk ve yazı ayarlarını yapabileceksiniz. WordPress Header bölümüne telefon numarası veya uyarı mesajlarınızı yayınlayabileceğiniz dinamik bir şekilde olacak.
Header bölümünü eklemek için bütün kodları Görünüm > Tema düzenleyici > function.php sayfasının en alt satırına aşağıdaki kodları sırasıyla yazıyoruz.
function header_pasif(){
$header_active = get_theme_mod( 'header_s');
if( empty( $header_active['header_aktif'] ) ) {
return false;
}
return true;
}Header checkbox tıklandığında header’a yazılacak olan metin kutusu ve renk ayarlarını açmak için yukarıdaki fonksiyonu kullanıyoruz. header_pasif fonksiyonunu kodumuzun en üst satırlarına yazsak bizim için daha iyi olur. bunun daha detaylı açılamasını aşağıda yaptım.
1. WordPress Header Özelleştirme
add_action( 'customize_register', 'customizer_header_add' );Özelleştirme sayfamızın içine yeni bir bölüm oluşturmak yukarıdaki kodu yazıyoruz. Oluşturduğumuz yukarıdaki çağrının içine aşağıda oluşturduğumuz fonksiyonun adını ekliyoruz.
Özelleştir Sayfasında Header bölümünün elemanlarını eklemek için customizer_header_add adında bir fonksiyon oluşturuyoruz.
function customizer_header_add ( $wp_customize ) {
// customizer_header_add fonksiyonumuzun içine aşağıdaki kodları sırasıyla yazıyoruz.
}Bu oluşturduğumuz fonksiyonun içine admin_header adında özel bir section ekliyoruz. Section ne işe yarar? Section wordpress sitemizde görünüm sekmesi özelleştir menüsüne tıkladığımızda tema ile özelleştirme içine yeni bir menü ekler bu özelleştirme içine yeni bir alan eklemek için ise section kod bloğunu kullanıyoruz. Aşağıda resim gibi.
$wp_customize->add_section(
'admin_header', // önemli olan nokta burası [section id]
array(
'title' => 'Header', //header
'description' => 'Header ekleme',
'priority' => 0,
)
);
Eklediğimiz Checkbox durumu true olursa aşağıda eklediğimiz metin kutusu ve renk ayarları aktif olacaktır.
$wp_customize->add_setting( 'header_s[header_aktif]',
array(
'default' => false,
'capability' => 'edit_theme_options',
)
);
$wp_customize->add_control(
'header_aktif',
array(
'label' => 'Header Etkinleştir',
'section' => 'admin_header',
'settings' => 'header_s[header_aktif]',
'type' => 'checkbox',
)
);
Durumunu True yaptığımız checkbox’un diğer elemanlarımızı getirmek için active_callback kodunu kullanıyoruz. Bu kodun karşısına yukarı oluştuğumuz fonksiyonun adını yazıyoruz.
//header checkbox tıklandığında açılacak olan metin kutusu
$wp_customize->add_setting( 'header_s[header_text]',
array(
//'default' => 'varsayılan metin ',
'capability' => 'edit_theme_options',
)
);
$wp_customize->add_control(
'header_text',
array(
'label' => 'Header Metni',
//'description' => 'Header Açıklama metni',
'section' => 'admin_header',
'settings' => 'header_s[header_text]',
'type' => 'textarea',
'active_callback' => 'header_pasif', // "header_pasif" yukarıda oluştuğumuzu fonksiyonun adı
)
);
//header checkbox tıklandığında açılacak olan yazı rengi
$wp_customize->add_setting( 'header_s[header_tcolor]', array(
'default' => '',
'transport' => 'refresh',
'capability' => 'edit_theme_options',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_tcolor', array(
'section' => 'admin_header',
'settings' => 'header_s[header_tcolor]',
'active_callback' => 'header_pasif',
'label' => esc_html__( 'Metin Rengi', 'theme' ),
) ) );
//header checkbox tıklandığında açılacak olan arkplan rengi
$wp_customize->add_setting( 'header_s[header_bcolor]', array(
'default' => '',
'transport' => 'refresh',
'capability' => 'edit_theme_options',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_bcolor', array(
'section' => 'admin_header',
'settings' => 'header_s[header_bcolor]',
'active_callback' => 'header_pasif',
'label' => esc_html__( 'Arkaplan Rengi', 'theme' ),
) ) );
2. WordPress Header Görüntüleme
Header admin panelinden oluştuğu göre şimdi ise bu header’ı sitemizin en üst kısmına yerleştirmek kalıyor. WordPress en üst kısma yani <body> tag’nın hemen altına yerleştirmek için wp_body_open kancasını kullanarak yerleştireceğiz
add_action ('wp_body_open' , 'add_content_after_header');function add_content_after_header() {
$headercheck = get_theme_mod('header_s');
if($headercheck['header_aktif'] == true ){
$header_get= get_theme_mod('header_s');
$header_p = '<div class="theme_header" style="padding:10px; text-align:center; background:'.$header_get['header_bcolor'].'; color:'.$header_get['header_tcolor'].';">'.$header_get['header_text'].' </div>';
echo $header_p;
}
}Sitemizde görünümü bu şekilde tabi siz daha farklı şekillerde de yapabilirsiniz sizin tercihinize kalmış bir mesele. Ben kısa bir şekilde eklenti olmadan header oluşturmanın temellerini anlattım.
WordPress Customizer daha fazlası detay için codex.wordpress.org sitesini ziyaret edebilirsiniz.
Bu yazımızdaki bütün kodların dosyasına ulaşmak için buraya tıklayınız
Arkadaşlar yazımızda yazım hataları ve devrik cümleler olmuş olabilir affınıza sığınarak gördüğünüz hata veya önerileriniz olursa lütfen yorum yapmayı unutmayın.
Unutmayın! Paylaşmak; kazanmanın en hızlı ve kolay yoludur. Bir sonraki blog’ta görüşmek dileğiyle esen kalın.
![WooCommerce Kritik Stok İndirim Kampanyası [Eklenti Olmadan]](https://gencyazilimci.com/wp-content/uploads/2024/08/woocommerce-critical-stock-discount-01-533x300.jpg?x88099)
