BU DERSİN BAŞLIKLARI
add_theme_support( string $özellik )Açıklaması:
Add_theme_support() fonksiyonu, WordPress kurulumu ile birlikte gelen bazı özellikleri temanıza eklemenizi ve bu özellikleri yönetim panelinden yönetebilmenizi sağlar. Add_theme_support() fonksiyonu yardımı ile temanıza ekleyebileceğiniz özellikler şunlardır:
- Otomatik besleme linkleri – RSS
- Temanıza logo desteği
- Arka plan rengi veya resmi kontrolü
- Üst kısım görseli kontrolü
- Öne çıkan görsel desteği
- Tarayıcı başlığı desteği (
<title>...</title>) - HTML5 desteği
- Blok editör (Gutenberg editör) desteği
Add_theme_suppor() fonksiyonu genellikle, WordPress temasının functions.php dosyasında kullanılır. Bu fonksiyonun doğru çalışabilmesi için 'after_setup_theme' kancası ile birlikte kullanılması gerekmektedir. Aşağıda, add_theme_support() fonksiyonunun kullanımında bir örnek verilmiştir:
function ilktemam_setup(){
add_theme_support('custom-logo');
}
add_action('after_setup_theme', 'ilktemam_setup');Parametreleri:
Bu fonksiyon, $özellik adında zorunlu bir parametre ile çalışır. Fakat, kullandığınız $özellik değerine bağlı olarak, ikinci bir parametre daha kullanmanıza izin verilir. İkinci parametrede, kullanılan özelliğin argümanları girilir. Bu parametreleri yakından inceleyelim:
$özellik
(Zorunludur.) Add_theme_support() fonksiyonu ile temanıza eklemek istediğiniz özelliğin kimliğidir. Bu argümanda kullanabileceğiniz özelliklere ait kimlik değerleri ve anlamları şöyledir:
- ‘automatic-feed-links’: Sitenize otomatik besleme linkleri (RSS özelliği) ekler.
- ‘custom-logo’: Temanıza bir logo resmi yüklemenizi sağlar. WordPress temalarına logo desteği ekleme hakkında detaylı bilgi için Temaya Logo Ekleme adlı dersimizi okuyabilirsiniz.
- ‘custom-background’: Temanızın Görünüm->Özelleştirme sayfasına, “Renkler” ve “Arka plan görseli” adında iki bölüm ekler. Eklenen bu bölümler ile temanızın arka plan rengini veya görselini yönetim panelinden ayarlamanız mümkün hale gelir.
- ‘custom-header’: Temanızın Görünüm->Özelleştirme sayfasına, “Üst kısım görseli” adında bir bölüm ekler. Bu bölüm ile bir görsel yükleyebilir ve bu görseli temamızın üst kısmında veya başka bir bölgesinde kullanabilir. WordPress temalarına üst kısım görselleri ekleme hakkında detaylı bilgi için, Sayfalara Üst Kısım Görseli Ekleme – Resim veya Sayfalara Üst Kısım Görseli Ekleme – Video adlı derslerimizi okuyabilirsiniz.
- ‘custom-header-uploads’: Bu özellik temelde ‘custom-header’ özelliği ile aynıdır. Farkı, ‘custom-header’ özelliğini, bu özelliğe ait argümanlardan biri olan ‘uploads’ argümanına
'uploads'=>truedeğeri vererek kullanmasıdır. - ‘post-thumbnails’: Temanıza, blog yazılarınız veya sayfalarınız için “Öne çıkan görsel” ekleme özelliği kazandırır. WordPress temalarına öne çıkan görsel özelliği ekleme hakkında detaylı bilgi için, Öne Çıkan Görsel Özelliği Ekleme adlı dersimizi okuyabilirsiniz.
- ‘post-formats’: Temanıza yazı formatları (biçimleri) eklemenizi sağlar. WordPress temalarına yazı formatları ekleme hakkında detaylı bilgi için Yazı Biçimleri-Formatları (Post Formats) adlı dersimiz okuyabilirsiniz.
- ‘title-tag’: Temanızın
<head>...</head>kısmında dinamik bir tarayıcı başlığı etiketi –<title>...</title>etiketi- ekler. - ‘editor-styles’: WordPress editörüne stil vermenizi sağlar. Bu özellik ile, editörünüzün temanız gibi görünmesini sağlayabilirsiniz.
- ‘html5’: Temamızın bazı yerlerinde, HTML5 kullanılmasını sağlar.
- ‘editor-color-palette’: Blok editörde, paragraf bloklarının “Renk ayarları” kısmında görülen renkleri ayarlamamızı sağlar.
- ‘align-wide’: Blok editörde, resim bloklarının menüsüne, “Tam genişlik” ve “Büyük genişlik” ayarlarını ekler.
- ‘editor-font-sizes’: Blok editörde, paragraf bloklarının “Metin ayarları” kısmındaki “Yazı tipi boyutu” değerlerini ayarlamamızı sağlar.
- ‘disable-custom-font-sizes’: Blok editörde, paragraf bloklarının “Metin ayarları” kısmındaki “Yazı tipi boyutu” değerlerini elle girmemizi engeller.
- ‘disable-custom-colors’: Blok editörde, paragraf bloklarının “Renk ayarları” kısmında görülen “Özel renk” butonunu kaldırır.
- ‘wp-block-styles’: Blok editörün blokları, ön tanımlı bazı CSS değerleri ile birlikte gelir, fakat bu CSS değerleri, temanızda kullanılmaz. İşte bu özellik, bloklarda gördüğünüz CSS değerlerinin temanızda da kullanılmasını sağlar.
- ‘dark-editor-style’: Blok editörünüz için kullandığınız arka plan stili koyu bir renkte ise, editörün arayüzünü bu renge uygun olarak ayarlar.
- ‘responsive-embeds’: Temanızın, blok editör ile eklenen gömülü dosyaları (youtube videoları gibi) mobil uyumlu göstermesini sağlar. Bunun için, temanızın ilgili sayfasının
bodykısmınawp-embed-responsiveadında bir CSS sınıfı ekler.
$argümanlar
Ekldiğiniz özelliğe bağlı olarak kullanılan ve o özelliği daha belirgin hale getirmenizi sağlayan bir argümanlar dizisidir.
Döndürdüğü değer:
Başarısız olursa false değerini döndürür, aksi durumda herhangi bir değer döndürmez.
Kaynak kodu:
Dizini: wp-includes/theme.php
function add_theme_support( $feature ) {
global $_wp_theme_features;
if ( func_num_args() == 1 ) {
$args = true;
} else {
$args = array_slice( func_get_args(), 1 );
}
switch ( $feature ) {
case 'post-thumbnails':
// All post types are already supported.
if ( true === get_theme_support( 'post-thumbnails' ) ) {
return;
}
/*
* Merge post types with any that already declared their support
* for post thumbnails.
*/
if ( is_array( $args[0] ) && isset( $_wp_theme_features['post-thumbnails'] ) ) {
$args[0] = array_unique( array_merge( $_wp_theme_features['post-thumbnails'][0], $args[0] ) );
}
break;
case 'post-formats':
if ( is_array( $args[0] ) ) {
$post_formats = get_post_format_slugs();
unset( $post_formats['standard'] );
$args[0] = array_intersect( $args[0], array_keys( $post_formats ) );
}
break;
case 'html5':
// You can't just pass 'html5', you need to pass an array of types.
if ( empty( $args[0] ) ) {
// Build an array of types for back-compat.
$args = array( 0 => array( 'comment-list', 'comment-form', 'search-form' ) );
} elseif ( ! is_array( $args[0] ) ) {
_doing_it_wrong( "add_theme_support( 'html5' )", __( 'You need to pass an array of types.' ), '3.6.1' );
return false;
}
// Calling 'html5' again merges, rather than overwrites.
if ( isset( $_wp_theme_features['html5'] ) ) {
$args[0] = array_merge( $_wp_theme_features['html5'][0], $args[0] );
}
break;
case 'custom-logo':
if ( ! is_array( $args ) ) {
$args = array( 0 => array() );
}
$defaults = array(
'width' => null,
'height' => null,
'flex-width' => false,
'flex-height' => false,
'header-text' => '',
);
$args[0] = wp_parse_args( array_intersect_key( $args[0], $defaults ), $defaults );
// Allow full flexibility if no size is specified.
if ( is_null( $args[0]['width'] ) && is_null( $args[0]['height'] ) ) {
$args[0]['flex-width'] = true;
$args[0]['flex-height'] = true;
}
break;
case 'custom-header-uploads':
return add_theme_support( 'custom-header', array( 'uploads' => true ) );
case 'custom-header':
if ( ! is_array( $args ) ) {
$args = array( 0 => array() );
}
$defaults = array(
'default-image' => '',
'random-default' => false,
'width' => 0,
'height' => 0,
'flex-height' => false,
'flex-width' => false,
'default-text-color' => '',
'header-text' => true,
'uploads' => true,
'wp-head-callback' => '',
'admin-head-callback' => '',
'admin-preview-callback' => '',
'video' => false,
'video-active-callback' => 'is_front_page',
);
$jit = isset( $args[0]['__jit'] );
unset( $args[0]['__jit'] );
// Merge in data from previous add_theme_support() calls.
// The first value registered wins. (A child theme is set up first.)
if ( isset( $_wp_theme_features['custom-header'] ) ) {
$args[0] = wp_parse_args( $_wp_theme_features['custom-header'][0], $args[0] );
}
// Load in the defaults at the end, as we need to insure first one wins.
// This will cause all constants to be defined, as each arg will then be set to the default.
if ( $jit ) {
$args[0] = wp_parse_args( $args[0], $defaults );
}
// If a constant was defined, use that value. Otherwise, define the constant to ensure
// the constant is always accurate (and is not defined later, overriding our value).
// As stated above, the first value wins.
// Once we get to wp_loaded (just-in-time), define any constants we haven't already.
// Constants are lame. Don't reference them. This is just for backward compatibility.
if ( defined( 'NO_HEADER_TEXT' ) ) {
$args[0]['header-text'] = ! NO_HEADER_TEXT;
} elseif ( isset( $args[0]['header-text'] ) ) {
define( 'NO_HEADER_TEXT', empty( $args[0]['header-text'] ) );
}
if ( defined( 'HEADER_IMAGE_WIDTH' ) ) {
$args[0]['width'] = (int) HEADER_IMAGE_WIDTH;
} elseif ( isset( $args[0]['width'] ) ) {
define( 'HEADER_IMAGE_WIDTH', (int) $args[0]['width'] );
}
if ( defined( 'HEADER_IMAGE_HEIGHT' ) ) {
$args[0]['height'] = (int) HEADER_IMAGE_HEIGHT;
} elseif ( isset( $args[0]['height'] ) ) {
define( 'HEADER_IMAGE_HEIGHT', (int) $args[0]['height'] );
}
if ( defined( 'HEADER_TEXTCOLOR' ) ) {
$args[0]['default-text-color'] = HEADER_TEXTCOLOR;
} elseif ( isset( $args[0]['default-text-color'] ) ) {
define( 'HEADER_TEXTCOLOR', $args[0]['default-text-color'] );
}
if ( defined( 'HEADER_IMAGE' ) ) {
$args[0]['default-image'] = HEADER_IMAGE;
} elseif ( isset( $args[0]['default-image'] ) ) {
define( 'HEADER_IMAGE', $args[0]['default-image'] );
}
if ( $jit && ! empty( $args[0]['default-image'] ) ) {
$args[0]['random-default'] = false;
}
// If headers are supported, and we still don't have a defined width or height,
// we have implicit flex sizes.
if ( $jit ) {
if ( empty( $args[0]['width'] ) && empty( $args[0]['flex-width'] ) ) {
$args[0]['flex-width'] = true;
}
if ( empty( $args[0]['height'] ) && empty( $args[0]['flex-height'] ) ) {
$args[0]['flex-height'] = true;
}
}
break;
case 'custom-background':
if ( ! is_array( $args ) ) {
$args = array( 0 => array() );
}
$defaults = array(
'default-image' => '',
'default-preset' => 'default',
'default-position-x' => 'left',
'default-position-y' => 'top',
'default-size' => 'auto',
'default-repeat' => 'repeat',
'default-attachment' => 'scroll',
'default-color' => '',
'wp-head-callback' => '_custom_background_cb',
'admin-head-callback' => '',
'admin-preview-callback' => '',
);
$jit = isset( $args[0]['__jit'] );
unset( $args[0]['__jit'] );
// Merge in data from previous add_theme_support() calls. The first value registered wins.
if ( isset( $_wp_theme_features['custom-background'] ) ) {
$args[0] = wp_parse_args( $_wp_theme_features['custom-background'][0], $args[0] );
}
if ( $jit ) {
$args[0] = wp_parse_args( $args[0], $defaults );
}
if ( defined( 'BACKGROUND_COLOR' ) ) {
$args[0]['default-color'] = BACKGROUND_COLOR;
} elseif ( isset( $args[0]['default-color'] ) || $jit ) {
define( 'BACKGROUND_COLOR', $args[0]['default-color'] );
}
if ( defined( 'BACKGROUND_IMAGE' ) ) {
$args[0]['default-image'] = BACKGROUND_IMAGE;
} elseif ( isset( $args[0]['default-image'] ) || $jit ) {
define( 'BACKGROUND_IMAGE', $args[0]['default-image'] );
}
break;
// Ensure that 'title-tag' is accessible in the admin.
case 'title-tag':
// Can be called in functions.php but must happen before wp_loaded, i.e. not in header.php.
if ( did_action( 'wp_loaded' ) ) {
/* translators: 1: title-tag, 2: wp_loaded */
_doing_it_wrong(
"add_theme_support( 'title-tag' )",
sprintf(
__( 'Theme support for %1$s should be registered before the %2$s hook.' ),
'<code>title-tag</code>',
'<code>wp_loaded</code>'
),
'4.1.0'
);
return false;
}
}
$_wp_theme_features[ $feature ] = $args;
}Kullanımı:
Örnek-1
WordPress temasına RSS beslemesi ekler:
function ilktemam_setup(){
add_theme_support( 'automatic-feed-links' );
}
add_action('after_setup_theme', 'ilktemam_setup');Örnek-2
WordPress temasına logo özelliği ekler:
function ilktemam_setup(){
add_theme_support( 'custom-logo' );
}
add_action('after_setup_theme', 'ilktemam_setup');Yukarıdaki kodu ekledikten sonra, temanızın yönetim panelindeki Görünüm->Özelleştir sayfasında “Site kimliği” bölümünde şöyle bir kontrol alanı oluşacaktır:
WordPress temalarına logo desteği ekleme hakkında detaylı bilgi için Temaya Logo Ekleme adlı dersimizi okuyabilirsiniz.
Örnek-3
WordPress temasına arka plan rengi ya da görseli özelliği ekler:
function ilktemam_setup(){
add_theme_support( 'custom-background' );
}
add_action('after_setup_theme', 'ilktemam_setup');Yukarıdaki kodu ekledikten sonra, temanızın yönetim panelindeki Görünüm->Özelleştir sayfasında “Renkler” ve “Arka plan görseli” adında iki bölüm oluşacaktır:
Bu özellik çeşitli argümanlar ile ihtiyacınıza daha uygun bir hale getirilebilir. Aşağıda, argümanları ile birlikte arka plan özelliği eklenmesine bir örnek verilmiştir:
function ilktemam_setup() {
$defaults = array(
'default-color' => '', // Varsayılan renk
'default-image' => '', // Varsayılan resim
'default-repeat' => 'repeat', // CSS repeat özelliği
'default-position-x' => 'left', // CSS position-x özelliği
'default-position-y' => 'top', // CSS position-y özelliği
'default-size' => 'auto', // Varsayılan boyut
'default-attachment' => 'scroll', // CSS
'wp-head-callback' => '_arkaplan_cb', // callback fonksiyonu
'admin-head-callback' => '', // Admin callback fonksiyonu
'admin-preview-callback' => '' // Admin paneli "Özelleştir" sayfası callback
);
add_theme_support( 'custom-background', $defaults );
}
add_action('after_setup_theme', 'ilktemam_setup');Örnek-4
WordPress temasına üst kısım görseli özelliği ekler:
function ilktemam_setup(){
add_theme_support( 'custom-header' );
}
add_action('after_setup_theme', 'ilktemam_setup');Yukarıdaki kodu ekledikten sonra, temanızın yönetim panelindeki Görünüm->Özelleştir sayfasında “Üst kısım görseli” adında bir bölüm oluşacaktır:
Bu özellik çeşitli argümanlar ile ihtiyacınıza daha uygun bir hale getirilebilir. Aşağıda, argümanları ile birlikte üst kısım görseli özelliği eklenmesine bir örnek verilmiştir:
function ilktemam_setup() {
$defaults = array(
'default-image' => '', // Varsayılan resim
'width' => 0, // Genişlik
'height' => 0, // Yükseklik
'flex-height' => false, // Esnek yükseklik
'flex-width' => false, // Esenk genişlik
'uploads' => true, // Yüklemeler
'random-default' => false, // Rastgele seçim
'header-text' => true, // Text
'default-text-color' => '', // Varsayılan text rengi
'wp-head-callback' => '', // Callback fonksiyonu
'admin-head-callback' => '', // Admin callback fonksiyonu
'admin-preview-callback' => '', // Tema önzileme callback fonksiyonu
);
add_theme_support( 'custom-header', $defaults );
}
add_action('after_setup_theme', 'ilktemam_setup');WordPress temalarına üst kısım görselleri ekleme hakkında detaylı bilgi için, Sayfalara Üst Kısım Görseli Ekleme – Resim veya Sayfalara Üst Kısım Görseli Ekleme – Video adlı derslerimizi okuyabilirsiniz.
Örnek-5
WordPress temasına öne çıkan görsel özelliği ekler:
function ilktemam_setup(){
add_theme_support( 'post-thumbnails' );
}
add_action('after_setup_theme', 'ilktemam_setup');WordPress temalarına öne çıkan görsel özelliği ekleme hakkında detaylı bilgi için, Öne Çıkan Görsel Özelliği Ekleme adlı dersimizi okuyabilirsiniz.
Örnek-6
WordPress temasına yazı formatları/biçimleri özelliği ekler:
function ilktemam_setup(){
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat' ) );
}
add_action('after_setup_theme', 'ilktemam_setup');Bir WordPress temasına eklenebilecek yazı formatları bellidir. Yukarıdaki kod, WordPress’in desteklediği bütün formatları ekler. Bu kod eklendikten sonra, yönetim panelinde bir yazıyı düzenlerken şöyle bir bölüm oluşur:
Örnek-7
WordPress temasına HTML5 desteği ekler:
function ilktemam_setup(){
add_theme_support( 'html5', array( 'gallery' ) );
}
add_action('after_setup_theme', 'ilktemam_setup');Bu özellik çeşitli argümanlar ile ihtiyacınıza daha uygun bir hale getirilebilir. Aşağıda, temanızın çeşitli bölgelerinde HTML5 özelliği eklenmesine bir örnek verilmiştir:
function ilktemam_setup() {
$args = array(
'search-form', // Arama formuna
'comment-form', // Yorum formuna
'comment-list', // Yorum listesine
'gallery', // Resim galerisine
'caption', // Resim başlklarına
);
add_theme_support( 'html5', $args );
}
add_action('after_setup_theme', 'ilktemam_setup');Örnek-8
'editor-color-palette' özelliğinin kullanımına bir örnektir. Blok editörün, paragraf blokları için kullandığı renk seçeneklerini tekrar düzenler:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'koyu magenta', 'textdomain' ),
'slug' => 'strong-magenta',
'color' => '#a156b4',
),
array(
'name' => __( 'açık grimsi magenta', 'textdomain' ),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',
),
array(
'name' => __( 'çok açık gri', 'textdomain' ),
'slug' => 'very-light-gray',
'color' => '#eee',
),
array(
'name' => __( 'çok koyu gri', 'textdomain' ),
'slug' => 'very-dark-gray',
'color' => '#444',
),
) );Örnek-9
'editor-font-size' özelliğinin kullanımına bir örnektir. Blok editörün, paragraf blokları için kullandığı yazı boyutu seçeneklerini tekrar ayarlar:
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'Küçük', 'textdomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'Normal', 'textdomain' ),
'size' => 16,
'slug' => 'normal'
),
array(
'name' => __( 'Büyük', 'textdomain' ),
'size' => 36,
'slug' => 'large'
),
array(
'name' => __( 'Çok büyük', 'textdomain' ),
'size' => 50,
'slug' => 'huge'
)
) );Örnek-10
'editor-styles' ve 'dark-editor-style' özelliklerinin kullanımına bir örnektir. Aşağıda verilen kod ile, içerik editörünüze özel CSS stilleri uygulayabilirsiniz.
/*ADD THEME SUPPORT*/
function sc_add_theme_support() {
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );
add_theme_support( 'dark-editor-style' );
}
add_action( 'after_setup_theme', 'sc_add_theme_support' );Temanızın ana dizininde oluşturmanız gereken style-editor.css dosyası ile, editörünüze koyu bir arka plan rengi ve açık bir yazı rengi verebilirsiniz. Aşağıda, bu stilleri veren küçük bir örnek verilmiştir:
body {
background-color: #333;
}
body, .editor-post-title__block .editor-post-title__input {
color:#fff;
}