WordPress, kullanıcı dostu arayüzü ve esnek yapısı sayesinde milyonlarca web sitesi tarafından kullanılmaktadır. Geliştiricilere sunduğu eklenti altyapısı sayesinde WordPress, özelleştirilebilir bir içerik yönetim sistemi haline gelir. Bu özelleştirmelerden biri de yönetim paneline özel sayfalar eklemektir. Bu makalede, WordPress admin paneline özel sayfa ekleyen bir eklenti nasıl geliştirilir, adım adım ele alacağız.
1. Neden Özel Admin Sayfaları?
Admin paneline özel sayfa eklemek, kullanıcılar için özelleştirilmiş arayüzler veya araçlar sunmak açısından önemlidir. Örnek kullanım senaryoları:
- Müşterilere özel ayarlar ekranı sunmak
- Veritabanı raporlarını veya analizlerini göstermek
- Form girişlerini görüntülemek
- API bağlantı ayarları sağlamak
- Özel içerik yönetim panelleri oluşturmak
2. Eklenti Yapısının Oluşturulması
Öncelikle eklenti için bir klasör ve temel dosya yapısı oluşturmalıyız.
Klasör yapısı:
my-custom-admin-page/
│
├── my-custom-admin-page.php
└── assets/
└── css/
└── js/
Eklenti başlık dosyası – my-custom-admin-page.php:
<?php
/*
Plugin Name: My Custom Admin Page
Description: WordPress yönetim paneline özel admin sayfası ekler.
Version: 1.0
Author: BayrakNET
*/
// Güvenlik kontrolü
if (!defined('ABSPATH')) {
exit; // Doğrudan erişim engellendi
}
// Admin menüsüne özel sayfa ekle
add_action('admin_menu', 'mcad_add_custom_admin_page');
function mcad_add_custom_admin_page() {
add_menu_page(
'Özel Sayfa Başlığı', // Sayfa başlığı
'Özel Sayfa', // Menüde görünen ad
'manage_options', // Yetki kontrolü
'mcad-custom-page', // Slug
'mcad_render_admin_page', // Sayfayı render eden fonksiyon
'dashicons-admin-generic', // Menü ikonu
80 // Menü sırası
);
}
function mcad_render_admin_page() {
?>
<div class="wrap">
<h1>Hoşgeldiniz</h1>
<p>Bu, WordPress admin paneline eklenen özel bir sayfadır.</p>
</div>
<?php
}
3. Alt Sayfalar (Submenu) Eklemek
Ana menü altına alt menü eklemek istiyorsanız add_submenu_page() fonksiyonunu kullanabilirsiniz.
add_submenu_page(
'mcad-custom-page', // Üst sayfa slug
'Alt Sayfa Başlık', // Sayfa başlığı
'Alt Sayfa', // Menüde görünen ad
'manage_options',
'mcad-sub-page',
'mcad_render_sub_page'
);
function mcad_render_sub_page() {
echo '<div class="wrap"><h2>Alt Sayfa İçeriği</h2></div>';
}
4. CSS ve JS Dosyaları Dahil Etmek
Eğer özel stiller veya JavaScript eklemek isterseniz:
add_action('admin_enqueue_scripts', 'mcad_enqueue_admin_assets');
function mcad_enqueue_admin_assets($hook) {
// Sadece bizim sayfamızda çalışsın
if ($hook != 'toplevel_page_mcad-custom-page') {
return;
}
wp_enqueue_style('mcad-admin-css', plugin_dir_url(__FILE__) . 'assets/css/admin-style.css');
wp_enqueue_script('mcad-admin-js', plugin_dir_url(__FILE__) . 'assets/js/admin-script.js', array('jquery'), null, true);
}
5. Ayar Sayfası ve Form Kullanımı
Form gönderimi için options API kullanılabilir:
function mcad_render_admin_page() {
?>
<div class="wrap">
<h1>Ayarlar</h1>
<form method="post" action="options.php">
<?php
settings_fields('mcad_settings_group');
do_settings_sections('mcad-custom-page');
submit_button();
?>
</form>
</div>
<?php
}
add_action('admin_init', 'mcad_settings_init');
function mcad_settings_init() {
register_setting('mcad_settings_group', 'mcad_setting_example');
add_settings_section(
'mcad_section_id',
'Örnek Ayarlar',
null,
'mcad-custom-page'
);
add_settings_field(
'mcad_setting_example',
'Örnek Ayar',
'mcad_setting_field_html',
'mcad-custom-page',
'mcad_section_id'
);
}
function mcad_setting_field_html() {
$value = get_option('mcad_setting_example', '');
echo '<input type="text" name="mcad_setting_example" value="' . esc_attr($value) . '" />';
}
6. Güvenlik ve Yetkilendirme
Kullanıcıların bu sayfalara erişimini current_user_can() ile kontrol etmek önemlidir. Örneğin:
if (!current_user_can('manage_options')) {
wp_die(__('Bu sayfaya erişiminiz yok.'));
}
7. Çoklu Dil Desteği (i18n)
Eklentinizi çevirilebilir yapmak için:
load_plugin_textdomain('mcad', false, dirname(plugin_basename(__FILE__)) . '/languages');
ve tüm metinleri __() veya _e() fonksiyonları ile yazmak gerekir:
_e('Hoşgeldiniz', 'mcad');
8. Gelişmiş: AJAX ile Dinamik İçerik
Admin sayfalarda AJAX çağrıları kullanmak için:
JavaScript:
jQuery(document).ready(function($){
$('#my-button').click(function(){
$.post(ajaxurl, {
action: 'mcad_ajax_action',
data: 'örnek veri'
}, function(response){
alert('Sunucudan gelen cevap: ' + response);
});
});
});
PHP:
add_action('wp_ajax_mcad_ajax_action', 'mcad_handle_ajax');
function mcad_handle_ajax() {
echo 'Veri alındı!';
wp_die();
}
Değerlendirme
WordPress admin paneline özel sayfalar eklemek, eklentilerinizin işlevselliğini artırır ve kullanıcı deneyimini geliştirir. Bu makalede temel yapıdan gelişmiş özelliklere kadar admin panel entegrasyonu adım adım ele alındı. Kendi ihtiyaçlarınıza göre bu yapıyı geliştirerek, müşterilere veya kullanıcılarınıza özel arayüzler oluşturabilirsiniz.
