Uzun zaman önce olan WordPress 3.8 güncellemesinden itibaren Dashicons, varsayılan olarak WordPress’e dahil edilen bir simge paketi olmuştur. Hem WordPress’in bir parçası olan hem de eklenti ve tema yazarları tarafından etkinleştirilen panonun kenar çubuğu menüsündeki çeşitli bağlantılarda görülebilirler. Simgeler, kenar çubuğu bağlantılarını daha belirgin ve kolayca tanınabilir hale getirir.
Dashicons, WordPress arka uç alanı için mükemmel olsa da, web sitesinin ön yüzünde de kullanılabilir. Belirli bir metni, düğmeyi, menü öğesini, bölümü veya başka bir şeyi tamamen vurgulamanıza yardımcı olması için bunları ekleyebilirsiniz. Kullanımları tüm WordPress web sitesine yayıldığı için, tüm WordPress kullanıcılarının yararlanabileceği farklı Dashicon uygulamalarını kapsayan bu kapsamlı makaleyi oluşturduk. Bu süre zarfında, aşağıdaki konuları ele alacağız:
-
Başlamak için ön koşullar
-
Ön uca Dashicons nasıl eklenir
-
Arka uca Dashicons nasıl eklenir
WordPress’te Dashicons nasıl kullanılır?
Dashicons çeşitli nedenlerle kullanılabildiğinden, ele alacağımız uygulamaları iki ayrı bölüme ayırdık. Dashicon’ların nerede kullanıldığına ve bunları uygulamak için gereken kod miktarına göre sıralanırlar. Her bölümü detaylandırmaya ve ayrıntılı talimatlar vermeye özen gösterdik. Bununla birlikte Dashicon’ları kullanmanın bazı yöntemleri daha geliştirici dostu olduğundan, yandan araştırma yapmaktan çekinmemelisiniz.
Başlamak için ön koşullar
WordPress web sitenize bir Dashicons simgesinin nasıl ekleneceği ile ilgili ayrıntılara girmeden önce, yapılması gereken birkaç şey var. Bazıları doğrudan Dashicons’un nasıl kullanıldığına bağlıdır, diğerleri ise bir WordPress web sitesine kod eklerken almanız gereken yaygın önlemlerdir. Bu yüzden bunları aşağıda listeliyoruz ve makalenin ana bölümüne geçmeden önce herkesin bu bölümü dikkatlice incelemesini tavsiye ediyoruz.
İlk olarak, bu makalede bahsettiğimiz tüm PHP kod parçacıkları FTP yoluyla iki yerden birine eklenmelidir: alt temanızın functions.php dosyası veya siteye özel bir eklenti. Ek olarak herhangi bir kod eklemeden önce web sitenizin yedeğini almanızı öneririz. Bu durum bir şeylerin ters gitmesi durumunda web sitenize zarar verilmemesini sağlayacaktır.
Bunun dışında yapmanız gereken iki ek şey daha var. Bir WordPress web sitesine Dashicons ekleme sürecine özeldirler, bu nedenle bunları dikkatlice incelemenizi öneririz.
-
Ön uca Dashicons eklemek için ön koşul
Dashicons, yönetici panosunda varsayılan olarak etkinken, web sitenizin ön ucu için durum böyle değildir. Bunları ön uçta kullanmayı planlıyorsanız, önce ön uç için etkinleştirmeniz gerekir. Bunu yapmak için aşağıdaki kod parçacığını kullanabilirsiniz:
function qode_use_dashicons_on_front_end() {
wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'qode_use_dashicons_on_front_end' );
Açıklığa kavuşturmak için, bu pasaj, Dashicons stil sayfasını qode_use_dashicons_on_front_end() adlı ayrı bir işleve yerleştirerek basit bir şekilde sıkıştırır. Daha sonra bu işlevi wp_enqueue_scripts eylem kancasına bağlar. Bu durum bir WordPress web sitesinin ön ucunda kullanılan hem komut dosyalarını hem de stil sayfalarını sıkıştırmak için uygun kancadır.
-
Simge adını ve HTML kodunu bulma
Dashicons’u sitenizin ön ucuna eklemek için son gereksinim, Dashicons simge paketine ait simgeleri nasıl bulacağınızı bilmek ve her bir simge için ilgili verileri almaktır. Bu veri, simgenin adı ve arkasındaki HTML kodudur. Simgeyi web sitesinin arka ucuna mı yoksa ön ucuna mı eklemek istediğinize bağlı olarak, adı veya ikincisini bilmeniz gerekir. Her simge için bu iki bilgiyi nasıl alacağınızı size göstereceğiz.
Dashicons simge paketine ait tüm simgeleri bulmak için önce Dashicons sayfasına gidin. Sayfaya eriştikten sonra, listedeki ilk simge olduğu için menü simgesinin varsayılan olarak görüntülendiğini göreceksiniz. Ayrıca birkaç farklı kategoriye ayrılmış çok çeşitli simgeler göreceksiniz. Tüm simgelere göz atın ve web sitenize eklemek istediğinizi seçtikten sonra, seçmek için üzerine tıklayın.
Sayfanın URL’si, seçilen simgenin adıyla eşleşecek şekilde değişecek ve o simge, ekranınızın üst kısmında görüntülenecektir. Simge kodunu kopyalayabileceğiniz ve tam simge adını görebileceğiniz yer burasıdır.
Web sitenize bir simge eklemenizi sağlayacak kodu almanın üç yolu vardır: CSS, HTML veya Glifi kopyalayarak. Bu makale için pano simgesini örnek olarak kullanmaya karar verdik. Ve sağlanan üç HTML’yi Kopyala seçeneğini seçtik.
Bu yüzden seçtiğiniz simgeyle ilişkili HTML’yi Kopyala bağlantısını tıklayın.
Bunu yaptıktan sonra, simgenizi görüntülemek için kullanmanız gereken HTML kodunu gösteren bir açılır mesaj ekranı görünecektir. Aldığınız HTML kodunu kopyalayın ve ardından mesaj ekranını kapatmak için Tamam düğmesine basın.
HTML kodunu kopyaladıktan sonra, WordPress web sitenizin HTML kodunu kabul eden ve ön uçta görüntüleyen herhangi bir bölümüne yapıştırabilirsiniz. Bu bölümler, gezinme menülerinizi, sayfalarınızın ve gönderilerinizin içeriğini ve kısa kodlar kullanan veya HTML kodunu kabul eden widget’ları içerir.
Simgeyi web sitenizin arka ucunda görüntülemekle ilgileniyorsanız, kopyaladığımız HTML kodunun üzerinde görebileceğiniz simge adını kullanmanız gerekecektir. Fakat Dashicond’u arka uca ekleme bölümünde bundan daha ayrıntılı olarak bahsedeceğiz.
Ön uca Dashicons nasıl eklenir
Bu bölümde, oluşturulacak simge için gerekli HTML kodunu doğrudan yapıştırarak web sitenizin ön ucuna bir Dashicons simgesini nasıl ekleyeceğinizi göstereceğiz. Dalmadan önce, önceki bölümü ziyaret etmeyi ve WordPress web sitenize eklemek istediğiniz simge için HTML kodunu nasıl alacağınızı öğrenmeyi unutmayın. Bunu yaptıktan sonra, aşağıda açıklanan şekilde ilerleyin.
-
WordPress gezinme menülerine Dashicons ekleme
Dashicons simgenizin HTML kodunu bir WordPress gezinme menüsüne eklemek için yönetici kontrol panelinizdeki Görünüm > Menüler bölümüne gidin. Daha sonra düzenlemek istediğiniz menüyü seçin ve simgeyi eklemek istediğiniz menü öğesini tıklayın.
Daha sonra genişletilmiş menü öğesi alanında Gezinme Etiketi seçeneğini arayın. HTML kodunu doğrudan o alana yapıştırmanız gerekecek. Web sitesinde görüntülendiğinde simgenin menü öğesinden önce veya sonra görünmesini isteyip istemediğinize bağlı olarak, kodu mevcut menü öğesi etiketinin öncesine veya sonrasına yapıştırmalısınız. HTML kodunu ekledikten sonra, yaptığınız değişiklikleri kaydetmek için Menüyü Kaydet düğmesine basın.
Daha sonra seçtiğiniz simgenin nasıl göründüğünü görmek için web sitenizin ön yüzünü inceleyin.
-
WordPress sayfalarına ve gönderilerine Dashicons ekleme
Bir WordPress sayfasının veya gönderisinin içeriğine bir Dashicons simgesi eklemek için, önkoşullar bölümünde açıklandığı gibi, önce eklemek istediğiniz simgenin HTML kodunu kopyalamanız gerekir.
Daha sonra HTML kodunu bir HTML işleme kısa kodunun içine yerleştirmeniz gerekecektir. Çoğu sayfa oluşturucu için bu, Özel HTML kısa kodu veya Gutenberg düzenleyicisini kullanıyorsanız Özel HTML bloğudur. Klasik Düzenleyici kullanıcıları için bunun HTML kodunu düzenleyicinin Metin sekmesine yapıştırmak anlamına geldiğini lütfen unutmayın.
Bir widget alanına bir Dashicons simgesi eklemek isterseniz, aynı HTML kodunu bir Özel HTML widget’ına ekleyebilirsiniz. İlke, kodu Özel HTML bloğuna eklemek için kullanacağınız ilkeyle aynıdır.
Bununla birlikte simgeyi eklemek için bir sayfa veya gönderi açın ve ona bir Özel HTML bloğu ekleyin. Kopyaladığınız kodu doğrudan bloğa yapıştırabilir veya ek HTML koduyla paketleyebilirsiniz. Bu makale için ikisini de yaptık ve nasıl sonuçlandığını aşağıda görebilirsiniz.
HTML kodunu ekledikten sonra, sonucu görmek için sayfayı/gönderiyi güncelleyin ve ön uçtan inceleyin.
Arka uca Dashicons nasıl eklenir
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. Yeni işlevleri uygulamak için eklenti ve tema geliştiricileri tarafından ö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 fark etmesine ve gelecekte daha hızlı tanımasına yardımcı olur.
Bu bölümde, Dashicons’u özel olarak nasıl özel bölümlere ekleyebileceğinizi açıklayacağız. Daha önce bahsettiğimiz düz HTML kodunu eklemekle yetinmediyseniz, size özel bir Dashicons kısa kodunun nasıl oluşturulacağını da göstereceğiz. Hadi başlayalım!
-
Yönetici panosu menüsüne bir Dashicons menü simgesi ekleme
WordPress web sitenize özel bir gönderi türü eklemek için, önce register_post_type() işlevini kullanarak kaydetmeniz gerekir. Bu işlevin kabul ettiği pek çok parametre arasında menu_icon parametresi bulunur. Yönetici panosundaki özel gönderi türü menü bölümünün yanında hangi simgenin görüntüleneceğini belirtmenize olanak tanır. Bu ayrıca Dashicon’ları 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 (örn. dashicons-format-video) menu_icon parametresini simgenin tam adına ayarlamalısınız.
Bunu göstermek için, yanında dashicons-format-video simgesi bulunan karşılık gelen bir menü bölümüyle movie 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( 'movie',
array(
'labels' => array(
'name' => esc_html__( 'Movies', 'your-translate-domain' ),
'singular_name' => esc_html__( 'Movie', 'your-translate-domain' ),
'add_item' => esc_html__( 'New Movie', 'your-translate-domain' ),
'add_new_item' => esc_html__( 'Add New Movie', 'your-translate-domain' ),
'edit_item' => esc_html__( 'Edit Movie', 'your-translate-domain' )
),
'public' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-format-video'
)
);
}
add_action( 'init', 'qode_register_movie_cpt' );
Bu küçük kod parçasıyla, init action kancasına bağlı qode_register_movie_cpt() işlevini kullanarak film gönderi türünü kaydettik. İşlev içinde, adı Filmler de dahil olmak üzere yeni bölüm için bazı etiketler belirledik. Ayrıca gönderi türünü herkes tarafından görüntülenebilir hale getirdik ve doğrudan Gönderiler bölümünün altına yerleştirdik, böylece yönetici panosunun sol tarafındaki menünün üst kısmına yakın olacak.
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ılmış olurdu. Bu durum Gönderiler bölümü için kullanılan simgenin aynısıdır, bu nedenle, bazı WordPress kullanıcıları için görsel olarak kafa karıştırıcı olabilir.
Kullandığımız kodun nasıl ortaya çı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, pano kenar çubuğu menüsüne yeni bir bölüm (yani menü sayfası) eklemenin başka bir yolu daha vardır. Bu durum 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. Fakat belirli bir base64 ile kodlanmış SVG dosyasının URL’sinden ayrı olarak, Dashicons yardımcı sınıf adını da ekleyebilirsiniz. Daha önce bir Dashicons simgesinin adından bahsederken kastettiğimiz buydu (örn. dashicons-media-code).
Dashicons’un bu kullanımını gösteren basit bir kodlama parçasını aşağıda görebilirsiniz.
function qode_register_a_custom_menu_page() {
add_menu_page(
esc_html__( 'Custom Options', 'textdomain' ), // Browser tab title
esc_html__( 'Custom Options', 'textdomain' ), // Admin sidebar menu...