Sitenizde WordPress Dashicons Nasıl Kullanılır?

0
60

Dashicons, WordPress arka ucunda, yönetici panosunun kenar çubuğu menüsünde oluşturulan özel bölümlerin yanında simgeler olarak da kullanılabilir. Bu bölümlere menü sayfaları denir. Eklenti ve tema geliştiricileri tarafından yeni işlevlerin uygulanması için özel gönderi türleri veya yeni seçenek grupları için oluşturulabilirler. Bu durumda, bu menü bölümlerinin yanına özel simgeler eklemek, kullanıcıların bunları kolayca tespit etmelerine ve gelecekte daha hızlı tanımalarına yardımcı olur.

Bu bölümde, özel bölümlere özel olarak Dashic’leri nasıl ekleyebileceğinizi açıklayacağız. Ayrıca, daha önce bahsettiğimiz düz HTML kodunu eklemekten memnun değilseniz, özel bir Dashicons kısa kodunun nasıl oluşturulacağını da göstereceğiz. Hadi başlayalım!

WordPress web sitenize özel bir gönderi türü eklemek için, önce onu register_post_type() işlevini kullanarak kaydetmeniz gerekir. Bu işlevin kabul ettiği birçok parametre arasında menu_icon parametresi bulunur. Yönetici panosundaki özel yazı tipi menü bölümünün yanında hangi simgenin görüntüleneceğini belirlemenizi sağlar. Bu ayrıca Dashicons’u eklenti ve tema yazarları için en popüler seçeneklerden biri haline getirdi.

Dashicons’u kullanmak için, register_post_type() işlevi çağrıldığında menu_icon parametresini simgenin tam adına ayarlamalısınız (örn. dashicons-format-video).

Bunu göstermek için, yanında dashicons-format-video simgesi olan ilgili bir menü bölümüyle film adlı özel bir gönderi türünü nasıl kaydedebileceğinize dair basit bir örnekle baş başa bırakıyoruz.

function qode_register_movie_cpt() { register_post_type( ‘film’, dizi( ‘etiketler’ => dizi( ‘isim’ => esc_html__( ‘Filmler’, ‘çeviri-alanınız’), ‘singular_name’ => esc_html__( ‘Film’ , ‘translate-domain’ ), ‘add_item’ => esc_html__( ‘Yeni Film’, ‘your-translate-domain’ ), ‘add_new_item’ => esc_html__( ‘Yeni Film Ekle’, ‘your-translate-domain’ ‘ ), ‘edit_item’ => esc_html__( ‘Film Düzenle’, ‘alanınız-alanınız’ ) ), ‘public’ => true, ‘menu_position’ => 5, ‘menu_icon’ => ‘dashicons-format-video’ ‘ ) ); } add_action(‘init’, ‘qode_register_movie_cpt’);

Bu küçük kod parçacığıyla, init eylem kancasına bağlı olan qode_register_movie_cpt() işlevini kullanarak film gönderi türünü kaydettik. İşlev içinde, yeni bölümün adı olan Filmler de dahil olmak üzere bazı etiketleri belirledik. Ayrıca gönderi türünü herkese açık hale getirdik ve doğrudan Gönderiler bölümünün altına yerleştirdik, böylece yönetici panosu sol taraftaki menünün üst kısmına yakın.

En önemlisi, Filmler bölümünün sahip olduğu simgenin dashicons-format-video olduğunu belirttik. Tam simgeyi belirtmemiş olsaydık, varsayılan dashicons-admin-post simgesi kullanılacaktı. Bu, Gönderiler bölümü için kullanılanla aynı simgedir, bu nedenle onu tutmak bazı WordPress kullanıcıları için görsel olarak kafa karıştırıcı olabilir.

Kullandığımız kodun nasıl çıktığını görebilirsiniz.

Bununla birlikte, özel bir gönderi türü oluşturmak ayrı, gelişmiş bir WordPress konusudur. Özel gönderi türleri oluşturma hakkındaki makalemizde ayrıntılı olarak ele aldık ve sürece tam bir genel bakış için kontrol edebilirsiniz.

Yukarıda anlattıklarımızın yanı sıra, gösterge tablosu kenar çubuğu menüsüne yeni bir bölüm (yani menü sayfası) eklemenin başka bir yolu daha vardır. Bu, add_menu_page() işlevi kullanılarak yapılır. Önceki işleve benzer şekilde, çoğunlukla eklenti ve tema geliştiricileri tarafından özel seçeneklerini uygulamak için kullanılır.

Önceki işlev gibi, add_menu_page(), diğerleri arasında $icon_url parametresini kabul eder. Ancak, belirli bir base64 kodlu SVG dosyasının URL’sinden ayrı olarak, Dashicons yardımcı sınıf adını da ekleyebilirsiniz. Daha önce Dashicons simgesinin adından söz ettiğimizde bunu kastetmiştik (örneğin, dashicons-media-code).

Aşağıda Dashicons’ın bu kullanımını gösteren basit bir kodlama pasajı görebilirsiniz.

function qode_register_a_custom_menu_page() { add_menu_page( esc_html__( ‘Özel Seçenekler’, ‘textdomain’ ), // Tarayıcı sekmesi başlığı esc_html__( ‘Özel Seçenekler’, ‘textdomain’), // Yönetici kenar çubuğu menü başlığı ‘yönetici’, ‘özel -page’, ‘qode_custom_options_page_HTML’, ‘dashicons-media-code’, 100 ); } add_action(‘admin_menu’, ‘qode_register_a_custom_menu_page’); function qode_custom_options_page_HTML() { esc_html_e(‘Seçenek kodu buraya gelecek…’, ‘metin etki alanı’); }

Bu kod iki işlevi temsil eder: qode_register_a_custom_menu_page() ve qode_custom_options_page_HTML().

İlki admin_menu eylem kancasına bağlıdır ve add_menu_page() işlevinin kullanımını içerdiğinden yeni menü sayfasının oluşturulmasından sorumludur. Kullandığımız parametrelere gelince, tarayıcı sekmesinde ve kenar çubuğu menüsünde görüntülenen başlığın Özel Seçenekler olarak ayarlanmasını sağladık. Ayrıca bu bölümü yalnızca yönetici yeteneklerine sahip kullanıcılara, yani yönetici kullanıcı rolüne sahip kullanıcılara sunduk.

İkincisi, bu bölümün içeriğini oluşturmak ve menü simgesini dashicons-media-code olarak ayarlamak için kullanılır. Bu örnek olarak kullanılan basit bir snippet olduğu için, bunu qode_custom_options_page_HTML() işlevinin yer tutucu olarak Seçenek kodu buraya gelir… metnini gösterecek şekilde yaptık. Aksi takdirde, kodlanması gereken seçenekler oraya yerleştirilecektir. Snippet’in çıktısı aşağıda gösterilmiştir.

Dashicons’ın son olası kullanımı olarak, özel kısa kodlara bir göz atacağız. Premium temalar veya eklentiler, oluşturdukları ve kolaylıkla kullanabileceğiniz simge kısa kodları sunabilir. Qode Interactive kataloğundaki temalar için durum böyledir.

Ancak, isterseniz veya temanız/eklentileriniz özel bir simge kısa kodu içermiyorsa, kendi kısa kodunuzu oluşturabilirsiniz. Tek ihtiyacınız olan biraz kodlama bilgisi ve başlamak için bir yer. İlki size kalmış olsa da, ikincisine yardımcı olabiliriz. Bu nedenle, bu makale için örnek olarak basit bir Dashicons özel kısa kodu oluşturduk.

function qode_custom_dashicon_shortcode( $atts ) { $default_atts = array( ‘icon_name’ => ‘menu’, ‘icon_color’ => ”, ‘margin’ => ”, ‘custom_class’ => ” ); $params = shortcode_atts( $default_atts, $atts); $icon_styles=””; $icon_classes=”özel simge tire işaretleri”; // if ( ! boş( $params) ikon stillerinin oluşturulması[‘icon_color’] ) ) { $icon_styles .= ‘renk:’ . $params[‘icon_color’] . ‘; ‘; } if ( ! boş( $params)[‘margin’] ) ) { $icon_styles .= ‘marj:’ . $params[‘margin’] . ‘; ‘; } // İkon sınıflarını ekleme if ( ! boş( $params)[‘icon_name’] )) { $icon_classes .= ‘ dashicons-‘ . $params[‘icon_name’]; } if ( ! boş( $params)[‘custom_class’] )) { $icon_classes .= ‘ ‘ . $params[‘custom_class’]; } dönüş ‘‘; } add_shortcode(‘custom_dashicon’, ‘qode_custom_dashicon_shortcode’);

Bu kodu kısaca inceleyelim.

Başlangıç ​​olarak, add_shortcode() işlevi kullanılarak custom_dashicon kısa kodu olarak eklenen qode_custom_dashicon_shortcode() adlı bir işlevi temsil eder. Ana kısım, simgeyi oluşturan ve işleyen kodu içerir.

Simge, dört parametreyi kabul eder; bunun için kısaltılmış bir ad ve buna eklemek istediğiniz renk, kenar boşluğu ve özel sınıf. Simgenin kısaltılmış adı, etiketin tire işaretlerinden sonra gelen kısmıdır – ilk kısmı zaten özel kısa kodumuza eklediğimiz için. Örneğin, tam bir Dashicons simgesi adı dashicons-index-card ise, bu kısa kod için kullanılan kısaltılmış ad, index-card olacaktır.

Bu kısa kodun çıktısı, Dashicons sayfasından kopyalanabilen HTML koduyla aynıdır, ancak biraz ek CSS kodu içerir. Bu CSS, simge rengi, kenar boşluğu ve özel sınıf gibi simgeyi daha da stilize edebilen kalan parametreler kullanılarak oluşturulmuştur.

Artık kısa kodun ne yaptığını bildiğinize göre, nasıl kullanılacağını açıklayalım. Genel olarak, herhangi bir özel kısa kod, kısa kod çağrısını bir kısa kod oluşturma öğesinin içine yerleştirerek kullanılabilir. Kullandığınız belirli öğe, tercih ettiğiniz sayfa düzenleyicisine bağlı olarak değişebilir. Gutenberg’de Kısa Kod bloğunu kullanırsınız. Klasik Düzenleyici kullanıcıları için, kısa kod çağrısını doğrudan düzenleyicinizin Görsel sekmesine ekleyebilirsiniz. WP Bakery kullanıcıları kısa kod çağrısını Metin Bloğu öğesinin Görsel sekmesine yerleştirebilirken, Elementor kullanıcıları bunu Metin Düzenleyici öğesinin Görsel sekmesine yerleştirebilir. Bunun daha ayrıntılı olarak açıklandığını görmek isterseniz, özel kısa kodlar hakkındaki makalemize ve özellikle özel kısa kodlar kullanma bölümüne göz atabilirsiniz.

Bu yazıda sadece Gutenberg editörünü kullanmaya devam edeceğiz. Bu nedenle, bu kısa kodu sayfalarınızdan veya gönderilerinizden birinde kullanmak için, buna Kısa Kod bloğunu ekleyin ve kısa kod çağrısını bloğa yerleştirin. Ardından, ekranın sağ üst köşesindeki Güncelle düğmesine basarak sayfayı/gönderiyi güncelleyin.

Kısa kod çağrısı, kısa kod adından (custom_dashicon) ve ardından kabul ettiği bir parametre listesinden oluşur. Her parametre, parametre=’değer’ şeklinde görüntülenen ilgili değerini alır.

[custom_dashicon icon_name=”index-card” icon_color=”#007FFF” margin=’20px 30px’ custom_class=”qode-dashicon”]

Kısa kod çağrınızı ekledikten sonra, kısa kodun çıktısını gözlemlemek için sayfayı inceleyin. Aldığımız sonucu aşağıdaki ekran görüntüsünde görebilirsiniz.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz